Skip to content
Snippets Groups Projects
Commit 34467f1f authored by Winnie's avatar Winnie
Browse files

Merge remote-tracking branch 'origin/web' into web 

# Conflicts:
#	tomcat/webapps/Trawl/infoWindow.js
parents bb6a070c 287d961e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tomcat/webapps/Trawl/WEB-INF/web.xml
+ 20
− 0
View file @ 34467f1f
<<<<<<< HEAD
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<servlet>
<servlet-name>Trawl</servlet-name>
<servlet-class>web.Director</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Trawl</servlet-name>
<url-pattern>/doBioLookup.do</url-pattern>
<url-pattern>/doHist.do</url-pattern>
<url-pattern>/doMap.do</url-pattern>
</servlet-mapping>
=======
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
......@@ -16,4 +35,5 @@
<url-pattern>/doMap.do</url-pattern>
<url-pattern>/doCluster.do</url-pattern>
</servlet-mapping>
>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
</web-app>
\ No newline at end of file
tomcat/webapps/Trawl/index.jsp
+ 100
− 98
View file @ 34467f1f
<%@ page import="java.util.*" %>
<!--
Double Handle Slider Modified from: http://jqueryui.com/slider/#range
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="insert, some, keywords"> <!--TODO-->
<meta name="description" content="insert a description"> <!--TODO-->
<title>TrawlExpert</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="histogram.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmfzgAfA1sXItGVdGiC5txAieu8VYXcZM&libraries=visualization"></script>
<script src="map.js"></script>
<script src="infoWindow.js"></script>
<script src="infoGenerator.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- MUST load JQuery Library before loading this-->
<script src="script.js"></script>
<!--Fonts-->
<!--Open Sans Rg-400/Semi-600/Bd-700-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!--Plugins-->
</head>
<body>
<header>
<div class="headerWrapper">
<a href="index.jsp" >TrawlExpert</a>
<span class="nav-bar">
<a href="about.html">About</a> |
<a href="index.html" target="_blank">GitHub</a>
</span>
</div>
</header>
<section id="main">
<section id="formWrapper">
<section id="pickSciRanks">
Phylum:
<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>--%></select>
Order:
<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"><!--Dynamically Filled--></select>
</section>
<section id="yearIn">
Year Range:
<span id="fromtoYear"></span>
<form>
<div id="slider-range"></div>
</form>
</section>
<section id="outputIn">
<%--Map and Histogram must have the same name for default checkbox to function correctly--%>
<input type="radio" name="pickOutput" value="map" checked> Map
<input type="radio" name="pickOutput" value="heat"> Heatmap
<input type="radio" name="pickOutput" value="histogram"> Histogram
<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">
<!-- 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="histogram"></div>--%>
<%--<div id="map"></div>--%>
<%--<div id="heat"></div>--%>
<%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
</section>
</section>
</section>
</body>
</html>
<%@ page import="java.util.*" %>
<!--
Double Handle Slider Modified from: http://jqueryui.com/slider/#range
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="insert, some, keywords"> <!--TODO-->
<meta name="description" content="insert a description"> <!--TODO-->
<title>TrawlExpert</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="histogram.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9xCYy2Co-0GWfHT8e1smTjIneNbWSfPgY&libraries=visualization"></script>
<script src="map.js"></script>
<script src="infoWindow.js"></script>
<script src="infoGenerator.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- MUST load JQuery Library before loading this-->
<script src="script.js"></script>
<!--Fonts-->
<!--Open Sans Rg-400/Semi-600/Bd-700-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!--Plugins-->
</head>
<body>
<header>
<div class="headerWrapper">
<a href="index.jsp" >TrawlExpert</a>
<span class="nav-bar">
<a href="about.html">About</a> |
<a href="index.html" target="_blank">GitHub</a>
</span>
</div>
</header>
<section id="main">
<section id="formWrapper">
<section id="pickSciRanks">
Phylum:
<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>--%></select>
Order:
<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"><!--Dynamically Filled--></select>
</section>
<section id="yearIn">
Year Range:
<span id="fromtoYear"></span>
<form>
<div id="slider-range"></div>
</form>
</section>
<section id="outputIn">
<%--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="heat"> Heatmap
<input type="radio" name="pickOutput" value="histogram" checked> Histogram
<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">
<!-- 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 display="none" id="histogram"></div>
<div display="none" id="map"></div>
<div display="none" id="heat"></div>
<%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
</section>
</section>
</section>
</body>
</html>
tomcat/webapps/Trawl/infoWindow.js
+ 8
− 0
View file @ 34467f1f
......@@ -5,7 +5,14 @@
// When the user clicks the marker, an info window opens
var openWindow;
<<<<<<< HEAD
function initInfo(lati, longi,name, date, individualCount) {
=======
function initInfo(lati, longi,name, date, count ) {
console.log("Trying to gen. info map");
>>>>>>> origin/web
// Generate map centred at Great Lakes
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5.5,
......@@ -15,6 +22,7 @@ function initInfo(lati, longi,name, date, individualCount) {
setMarkers(map, lati, longi,name, date, individualCount);
}
// Set info window contents to input string
function setMarkers(map, lati, longi,name, date, individualCount) {
for (var i = 0; i < lati.length; i++)
......
tomcat/webapps/Trawl/script.js
+ 284
− 1
View file @ 34467f1f
// Initialization
function init() {
callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup
reqHistogram(2);
}
function resolveAny(obj) {
if(obj.id === "pickPhylum"){
return {id:"pickAnimalia", value:2};
}
else {
if (Number(obj.previousElementSibling.value) === -1) {
return resolveAny(obj.previousElementSibling);
}
else {
return {id: obj.previousElementSibling.id, value: obj.previousElementSibling.value};
}
}
}
function callUpdateSci(object){
var tagID = object.id;
var taxID = Number(object.value);
// Resolve "Any" option
if (taxID === -1){
var obj2 = resolveAny(object);
tagID = obj2.id;
taxID = Number(obj2.value);
}
reqBioLookup(tagID, taxID);
}
function populateDropdown(childTagID, nodeList, subnode){
var x, y, content="";
console.log(nodeList[subnode]);
if(nodeList[subnode] != null){
for (var i in nodeList[subnode]["taxonName"]){
x = nodeList[subnode]["taxonId"][i];
y = nodeList[subnode]["taxonName"][i];
content += '"<option value="' + x + '">' + y + '</option>';
}
}
// else {
// content
// }
document.getElementById(childTagID).innerHTML = content;
}
function updateSci(tagID, nodeList) {
while (tagID !== "END"){
switch (tagID){
case "pickAnimalia":
populateDropdown("pickPhylum", nodeList, "phylum");
tagID = "pickPhylum";
break;
case "pickPhylum":
populateDropdown("pickClass", nodeList, "class");
tagID = "pickClass";
break;
case "pickClass":
populateDropdown("pickOrder", nodeList, "order");
tagID = "pickOrder";
break;
case "pickOrder":
populateDropdown("pickFamily", nodeList, "family");
tagID = "pickFamily";
break;
case "pickFamily":
populateDropdown("pickGenus", nodeList, "genus");
tagID = "pickGenus";
break;
case "pickGenus":
populateDropdown("pickSpecies", nodeList, "species");
tagID = "pickSpecies";
break;
case "pickSpecies":
tagID = "END";
break;
}
}
}
// 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 reqBioLookup(tagID, parentId){
var path = 'doBioLookup.do';
var params = {taxId: Number(parentId)};
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);
updateSci(tagID, nodeList);
}
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
}
//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(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"]);
document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
}
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 reqMap(params){
var path = 'doMap.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);
initMap(nodeList["latitude"], nodeList["longitude"]);
// document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
}
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
}
// function reqHeat(params){
// var path = 'doMap.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);
// // initMap(nodeList["latitude"], nodeList["longitude"]);
// document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
// }
// 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
// }
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
document.getElementById("histogram").style.display = "none";
document.getElementById("map").style.display = "none";
document.getElementById("heat").style.display = "none";
if(outType === "histogram"){
reqHistogram(params);
document.getElementById("histogram").style.display = "block";
}
else if(outType === "map"){
reqMap(params);
document.getElementById("map").style.display = "block";
}
// else if(outType === "heat"){
// reqHeat(params);
// document.getElementById("heat").style.display = "block";
// }
// else{
// console.log("Heatmap/Cluster")
// }
}
// JQuery for Range Slider
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 1960,
max: 2016,
values: [ 1960, 2016 ],
slide: function( event, ui ) {
$( "#fromtoYear" ).html(ui.values[ 0 ] + " - " + ui.values[ 1 ] )
}
});
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
} );
=======
// Initialization
function init() {
callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup
......@@ -280,4 +564,3 @@ $( function() {
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
} );
window.onload=init;
\ No newline at end of file
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