diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp index 42b387c67b00b06de7202793767c6bb6c6e43e85..da43e5220270a050411b058855ccf427ef9bcdd0 100644 --- a/tomcat/webapps/Trawl/index.jsp +++ b/tomcat/webapps/Trawl/index.jsp @@ -34,11 +34,11 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range </header> <span id="menu-bar"> - <a href="index.html">Item 1</a> | - <a href="index.html" target="_blank">Item 2</a> + <a href="index.html">About</a> | + <a href="index.html" target="_blank">Gitlab/Github</a> </span> - <section id="options"> + <section id="formWrapper"> <section id="pickSciRanks"> <%--<form method="POST" action="doBioLookup.do"> <!--.do extension is not necessary. This field is the servlet's url in web.xml-->--%> <form> @@ -88,8 +88,8 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range <section id="outputIn"> <form> <!--TODO: Set Default button entered--> - <input type="radio" name="gender" value="male"> Map - <input type="radio" name="gender" value="female"> Histogram + <input type="radio" value="map"> Map + <input type="radio" value="histogram"> Histogram <input type="submit"> </form> <form method="POST" action="""> @@ -101,6 +101,7 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range <section id="outputWrapper"> <section id="outputDetails">Stuff like population count, entries found, etc. go here</section> <section id="outputBox">Map, Histogram Box</section> + <section id="console">~~~ PSEUDO-CONSOLE ~~~<br></section> </section> <%--<footer>--%> diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js index 438f15b87c9e9870be8278b57edda951adf2b229..b72c722a718f9ba5240e343b21cb94506c309697 100644 --- a/tomcat/webapps/Trawl/script.js +++ b/tomcat/webapps/Trawl/script.js @@ -1,23 +1,60 @@ +// Initialization function init() { - initPhylum(); + initPhylum() } -// Returns list of animalia children == all phylums -function initPhylum(){ - // alert("initPhylum function"); - var parentId = 2; //Animalia AphiaID = 2 +// Post Function +// Used by getChildren(id) +function post(path, params) { + document.getElementById("console").innerHTML += "In | post()<br>"; //TODO: Console REMOVEME + var xhr = new XMLHttpRequest(); + xhr.open("POST", path); + + //Send the proper header information along with the request + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + // xhr.setRequestHeader("Content-type", "application/json"); - // TODO Request + xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back) + document.getElementById("console").innerHTML += "In | onreadystatechange ... "; //TODO: Console REMOVEME + //this is where we can update the various dropdowns + if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { + document.getElementById("console").innerHTML += "Retrieved:<br>"; //TODO: Console REMOVEME + document.getElementById("console").innerHTML += xhr.responseText + "<br>"; //TODO: Console REMOVEME + console.log("RETRIEVED:") + console.log(this.responseText); // Have to go to dev console to print this. Won't show up on pseudo-console. + // return this.responseText; + } + else{ + document.getElementById("console").innerHTML += "Error<br>"; //TODO: Console REMOVEME + } + }; + //generate JSON string + var jsonString= JSON.stringify(params); + console.log(jsonString); + //send request to server + xhr.send(jsonString); + // xhr.send('{taxid":"2"}'); + document.getElementById("console").innerHTML += "Sent request to " + path + ": " + jsonString + "<br>"; //TODO: Console REMOVEME +} + +// Get Children ranks of Parent ranks from Java +function getChildren(id) { + document.getElementById("console").innerHTML += "In | getChildren()<br>"; //TODO: Console REMOVEME var nodeList; // nodeList = { - // "taxonId":[1065,1821,51], - // "taxonName":["Arthropoda", "Chordata", "Mollusca"] + // "taxonId":[1821,51,1065], + // "taxonName":["Chordata","Mollusca","Arthropoda"] // }; - nodeList = { - "taxonId":[1821,51,1065], - "taxonName":["Chordata","Mollusca","Arthropoda"] - }; + nodeList = post('doBioLookup.do', { taxid: id}); // {taxid: intID} + return nodeList; +} +// Creates Phylum dropdown choices on page load +function initPhylum(){ + // alert("initPhylum function"); + document.getElementById("console").innerHTML += "init phylum<br>"; //TODO: Console REMOVEME + var parentId = 2; //Animalia AphiaID = 2 + var nodeList = getChildren(parentId); var content = "", x, y; for (i in nodeList.taxonId){ @@ -27,18 +64,13 @@ function initPhylum(){ } document.getElementById("pickPhylum").innerHTML = content; - - // {taxid: intID} - } function changedSciR(rank){ // var changedRank = document.getElementsByName() } - - -// For Range Slider +// JQuery for Range Slider $( function() { $( "#slider-range" ).slider({ range: true, diff --git a/tomcat/webapps/Trawl/style.css b/tomcat/webapps/Trawl/style.css index 9e0466f2fe91582da5a7c1f4dca0f1c17c33ca28..1ee1b8825188212affe40fdcd0a3dfd03e6b02e0 100644 --- a/tomcat/webapps/Trawl/style.css +++ b/tomcat/webapps/Trawl/style.css @@ -27,7 +27,7 @@ a:hover{ color: #004878; } -#options{ +#formWrapper{ border: 1px solid; }