diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 6b9843de7a1c19b4f0073e26d91de34143bfa72a..5b77d487bca73fcaa7bdfc5474cfe67234333762 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -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>
diff --git a/tomcat/webapps/Trawl/infoGenerator.js b/tomcat/webapps/Trawl/infoGenerator.js
index 0d61c00830f91266daedbc69b1aa6e16c02abf3b..f4cad2e091e0333a76e38a31865e0d5ffc71a52c 100644
--- a/tomcat/webapps/Trawl/infoGenerator.js
+++ b/tomcat/webapps/Trawl/infoGenerator.js
@@ -1,3 +1,4 @@
+
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;
-
-
-
}
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 753776d71102aac214c64d674fb4ccf14ff51303..7c70b5f8c980d30a3a510855086a787e03460055 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -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({