Skip to content
Snippets Groups Projects
Commit ceddcee2 authored by Ray Liu's avatar Ray Liu
Browse files

Merge branch 'web' of https://gitlab.cas.mcmaster.ca/schankuc/2XB3 into 

web

# Conflicts:
#	tomcat/webapps/Trawl/infoGenerator.js
parents ee95ead5 5d5ad732
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tomcat/webapps/Trawl/index.jsp
+ 12
− 13
View file @ ceddcee2
......@@ -45,23 +45,17 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
<section id="formWrapper">
<section id="pickSciRanks">
Phylum:
<%--<select name="pickSciR" id="pickPhylum" size="1" onChange="updateSci(this)"><!--Dynamically Filled--></select>--%>
<select name="pickSciR" id="pickPhylum" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
Class:
<select name="pickSciR" id="pickClass" size="1" onChange="callUpdateSci(this)">
<%--<option value="00">Arthropoda</option>--%>
<%--<option value="01">Chordata</option>--%>
<%--<option value="03">Mollusca</option>--%>
</select>
<select name="pickSciR" id="pickClass" size="1" onChange="callUpdateSci(this)"><%--<option value="00">Arthropoda</option>--%></select>
Order:
<select name="pickSciR" id="pickOrder" size="1" onChange="callUpdateSci(this)""><!--Dynamically Filled--></select>
<select name="pickSciR" id="pickOrder" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
Family:
<select name="pickSciR" id="pickFamily" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
Genus:
<select name="pickSciR" id="pickGenus" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
Species:
<select name="pickSciR" id="pickSpecies" size="1" onChange="alert("No function atm")"><!--Dynamically Filled--></select>
<select name="pickSciR" id="pickSpecies" size="1" onChange="alert('No function atm')"><!--Dynamically Filled--></select>
</section>
<section id="yearIn">
......@@ -76,17 +70,22 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
<%--Map and Histogram must have the same name for default checkbox to function correctly--%>
<input type="radio" name="pickOutput" value="map"> Map
<input type="radio" name="pickOutput" value="histogram" checked> Histogram
<button type="button" onclick="">Load</button>
<button type="button" onclick="">View Individual Records</button> <!--To records.html-->
<button type="button" onClick="callOutput()">Load</button>
<button type="button" onClick="">View Individual Records</button> <!--To records.html-->
</section>
</section>
<section id="outputWrapper">
<section id="outputDetails"><bold>Found 278143 results (0.204 seconds)</bold><br><bold>Total population:</bold> 66122855<br><!-- Stuff like population count, entries found, etc. go here --></section>
<section id="outputDetails">
Found x results (x seconds)<br>
Total population:</bold> 66122855<br>
<!-- Stuff like population count, entries found, etc. go here -->
</section>
<section id="outputBox"><!-- Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.-->
<!-- <div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div> -->
<div id="histogram"></div>
<%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
</section>
</section>
</section>
......
tomcat/webapps/Trawl/infoGenerator.js
+ 13
− 6
View file @ ceddcee2
function findMonth(month){
switch(month){
case 1:
......@@ -32,19 +33,28 @@ function findMonth(month){
/**
* Generates html text to fill info windows on a Google Maps API
* @param names String array of scientific fish names
* @param dates Array of JSON objects containing 3 arrays: Year[], Month[], Day[]
* @param count Integer array of counts of each fish species
* @returns String array where each entry is html code to describe a marker on a map
*/
function infoGenerator(names, dates, count){
var infoArray =[];
for (int i=0; i < names.length; i++){
// Initialize variables to each data point's information
var year = dates[i][0];
var month = findMonth(dates[i][1]);
var day = dates[i][2];
var name = names[i];
var count = count[i];
// Generate string of html
var contentString = ‘<div id=“content”>‘+
‘<div id=“siteNotice”>‘+
‘</div>‘+
......@@ -60,7 +70,4 @@ function infoGenerator(names, dates, count){
}
return infoArray;
}
tomcat/webapps/Trawl/script.js
+ 92
− 21
View file @ ceddcee2
......@@ -115,29 +115,100 @@ function reqBioLookup(tagID, parentId){
//This function will get the new nodelist from the server.
//ParentId is the taxId of the node that holds the list of children we want.
function reqHistogram(taxonId){
var path = 'doHist.do';
var params = {taxId: Number(taxonId)};
var xhr = new XMLHttpRequest();
xhr.open("POST", path);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Send the proper header info
xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
// Update the dropdown when response is ready
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var nodeList = JSON.parse(this.responseText);
histogram(nodeList["x"], nodeList["y"]);
}
else{
console.log("Server Response: Error"); //RME
}
};
var jsonString= JSON.stringify(params); //generate JSON string
xhr.send(jsonString); //send request to server
// document.getElementById("console").innerHTML += "Sent request to " + path + ": " + jsonString + "<br>"; //RME
function reqHistogram(params){
var path = 'doHist.do';
var xhr = new XMLHttpRequest();
xhr.open("POST", path);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Send the proper header info
xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
// Update the dropdown when response is ready
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var nodeList = JSON.parse(this.responseText);
histogram(nodeList["x"], nodeList["y"]);
}
else {
console.log("Server Response: Error"); //RME
}
};
xhr.send(params); //send request to server
// document.getElementById("console").innerHTML += "Sent request to " + path + ": " + jsonString + "<br>"; //RME
}
//Returns the most general taxon group (leftmost)
function getTaxGroup() {
var tagID = "pickSpecies"
var taxGroup = document.getElementById(tagID);
while (true){
console.log(taxGroup.value);
if(taxGroup.value !== null && taxGroup.value !== "-1"){
console.log("returning Animalia");
return Number(taxGroup.value);
}
else if(tagID === "pickAnimalia"){
console.log("in pick Animalia");
return 2;
}
else{
taxGroup = document.getElementById(tagID);
console.log("Switching: " + tagID);
switch (tagID){
case "pickPhylum":
tagID = "pickAnimalia";
break;
case "pickClass":
tagID = "pickPhylum";
break;
case "pickOrder":
tagID = "pickClass";
break;
case "pickFamily":
tagID = "pickOrder";
break;
case "pickGenus":
tagID = "pickFamily";
break;
case "pickSpecies":
tagID = "pickGenus";
break;
}
}
}
}
function callOutput(){
var pickOutputType = document.getElementsByName('pickOutput');
var outType, taxGroup, yearFrom, yearTo;
// Get output selection: Map/Histogram
for(var i = 0; i < pickOutputType.length; i++){
if(pickOutputType[i].checked){
console.log(pickOutputType[i].value); //RME
outType = pickOutputType[i].value;
}
}
taxGroup = getTaxGroup();
yearFrom = $( "#slider-range" ).slider( "values", 0 );
yearTo = $( "#slider-range" ).slider( "values", 1 );
var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo)});
//Switch Output Display
if(outType === "Histogram"){
reqHistogram(params);
}
else{
console.log("Map or Heatmap");
}
}
// JQuery for Range Slider
$( function() {
$( "#slider-range" ).slider({
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment