add table results

src/web/Director.java

@@ -26,6 +26,8 @@ public class Director extends HttpServlet {
 			view = request.getRequestDispatcher("map.jsp");
 	    else if (req.equals("doCluster.do"))
 			view = request.getRequestDispatcher("cluster.jsp");
+	    else if (req.equals("doList.do"))
+	    		view = request.getRequestDispatcher("result.jsp");
 	    
 	    view.forward(request, response);
     }

tomcat/webapps/Trawl/WEB-INF/web.xml

@@ -15,5 +15,6 @@
         <url-pattern>/doHist.do</url-pattern>
         <url-pattern>/doMap.do</url-pattern>
         <url-pattern>/doCluster.do</url-pattern>
+        <url-pattern>/doList.do</url-pattern>
     </servlet-mapping>
 </web-app>
\ No newline at end of file

tomcat/webapps/Trawl/cluster.js

@@ -22,8 +22,10 @@ function setCluster(map, lati, longi,n, individualCount) {
 	{
         var marker = new google.maps.Marker({position: new google.maps.LatLng(lati[i], longi[i]), map: map});
         // var content = "point numero" + i;
-        var content = '<div>' +
-			'<b>Cluster #</b>' + i +
+        var content = '<div id="content">' +
+			'Cluster #' + i +
+			'<br>Latitude: ' + lati[i]+
+			'<br>Longitude: ' + longi[i]+
             '<br><b>Record Count</b>: ' + n[i]+
             '<br><b>Individual Count</b>: ' + individualCount[i] + '</div></div>';
 		var infowindow = new google.maps.InfoWindow();

tomcat/webapps/Trawl/index.jsp

@@ -72,13 +72,13 @@
             <section id="outputIn">
                 <%--Map and Histogram must have the same name for default checkbox to function correctly--%>
                 Cluster Size:
-                <input type="number" id="pickSize" >
+                <input type="number" id="pickSize" >km^2
                 <input type="radio" name="pickOutput" value="cluster" > Cluster
                 <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
+                <input type="radio" name="pickOutput" value="list" checked> List
                 <button type="button" onClick="callOutput()">Load</button>
-                <button type="button" onClick="">View Individual Records</button> <!--To records.html-->
             </section>
         </section>
 

tomcat/webapps/Trawl/infoWindow.js

@@ -23,9 +23,11 @@ function setMarkers(map, lati, longi,name, date, individualCount) {
         var marker = new google.maps.Marker({position: new google.maps.LatLng(lati[i], longi[i]), map: map});
         // var content = "point numero" + i;
         var content = '<div>' +
-			'Name:' + name[i] +
-            '<br>Date:' + findMonth(date[i].month) + ' ' + date[i].day + ', ' + date[i].year +
-            '<br>Count:' + individualCount[i] + '</div></div>';
+			'Scientific name: ' + name[i] +
+            '<br>Date: ' + findMonth(date[i].month) + ' ' + date[i].day + ', ' + date[i].year +
+            '<br>Latitude: ' + lati[i] +
+            '<br>Longitude: ' + longi[i] +
+            '<br>Count: ' + individualCount[i] + '</div></div>';
 		var infowindow = new google.maps.InfoWindow();
 
         google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){

tomcat/webapps/Trawl/map.js

@@ -19,7 +19,9 @@ function initMap(longi,lati) {
 
   });
     google.maps.event.trigger(map, 'resize');
-    console.log("fin heat")
+    console.log("fin heat");
+    changeGradient();
+    changeRadius();
 }
 
 // Check if a heatmap already exists
@@ -50,7 +52,7 @@ function changeGradient() {
 
 // Set heatmap radius about each point
 function changeRadius() {
-  heatmap.set('radius', heatmap.get('radius') ? null : 80);
+  heatmap.set('radius', heatmap.get('radius') ? null : 15);
 }
 
 // Set opacity of colours

tomcat/webapps/Trawl/result.jsp

 <%@page import="search.BasicSearchResult"%>
 <%@ page import="java.util.*, data.Record, model.TrawlExpert" %>
+<%@page import="org.json.simple.JSONArray"%>
+<%@page import="org.json.simple.JSONObject"%>
+<%@page import="org.json.simple.parser.JSONParser"%>
 <html>
+<head>
+<script src='tablesort.min.js'></script>
+<!-- Include sort types you need -->
+<script src='tablesort.number.js'></script>
+<script src='tablesort.date.js'></script>
+<link rel="stylesheet" type="text/css" href="tablesort.css">
+
+<script>
+  new Tablesort(document.getElementById('table-id'));
+</script>
+</head>
 <body>
-<h1 align="center">Trawl Results</h1>
 <p>
 
-<table>
+<table id="table">
 <tr>
-	<th>Scientific Name</th>
-	<th>Year</th>
-	<th>Month</th>
-	<th>Day</th>
-	<th>Latitude</th>
-	<th>Longitude</th>
-	<th>Individual Count</th>
+	<th role="columnheader">Scientific Name</th>
+	<th role="columnheader">Year</th>
+	<th role="columnheader">Month</th>
+	<th role="columnheader">Day</th>
+	<th role="columnheader">Latitude</th>
+	<th role="columnheader">Longitude</th>
+	<th role="columnheader">Individual Count</th>
 </tr>
 <%
 	TrawlExpert te = (TrawlExpert)request.getServletContext().getAttribute("trawl");
-	BasicSearchResult results = te.rangeSearch(159512, 1960, 2016);
+	JSONParser parser = new JSONParser();
+	JSONObject req = (JSONObject) parser.parse(request.getReader().readLine());
+	
+	Integer taxonId = (int) (long) req.get("taxId");
+	Integer yearLo = (int) (long) req.get("yearF");
+	Integer yearHi = (int) (long) req.get("yearT");
+	Integer searchLo = (int) (long) req.get("searchLo");
+	Integer searchHi = (int) (long) req.get("searchHi");
+
+	BasicSearchResult results = te.rangeSearch(taxonId, yearLo, yearHi);
+	int newSearchHiinc= 0, newSearchLoinc =0 , newSearchHidec= 0, newSearchLodec= 0;
+	if (searchHi + 50 < results.n()){
+		newSearchLoinc = (searchLo + 50);
+		newSearchHiinc = (searchHi + 50);
+	}else if (searchHi + 50 > results.n()){
+		newSearchLoinc = results.n() - results.n() % 50;
+		newSearchHiinc = results.n() - 1;
+	}
+	
+	if (searchLo > 0){
+		newSearchLodec = (searchLo - 50);
+		newSearchHidec = (searchHi - 50);
+	} else if (searchLo - 50 < 0){
+		newSearchLodec = 0;
+		newSearchHidec = 50;
+	}
+	if (searchHi > results.n())
+		searchHi = results.n() - 1;
+	out.print("Found " + results.n() + " results (" + results.time() + " seconds) (Showing " + searchLo + " - " + searchHi + ")");
+	
+	String incBtn = String.format("reqResults(JSON.stringify({taxId:%d,yearF:%d,yearT:%d,area:0}),%d,%d)", taxonId, yearLo, yearHi, newSearchLoinc, newSearchHiinc);
+	String decBtn = String.format("reqResults(JSON.stringify({taxId:%d,yearF:%d,yearT:%d,area:0}),%d,%d)", taxonId, yearLo, yearHi, newSearchLodec, newSearchHidec);
+
+	out.print("<button type='button' id='nextBtn', onclick='"+decBtn+"'><</button>" + "<button type='button' id='nextBtn', onclick='"+incBtn+"'>></button>");
+	
+	int i = 0;
 	for (Record r: results.results()){
-		out.print("<tr>\n");
-		out.print("<th>" + te.getTaxonRecord(r.getTaxonId()).getName() + "</th>\n");
-		out.print("<th>" + r.getDate().getYear() + "</th>\n");
-		out.print("<th>" + r.getDate().getMonth() + "</th>\n");
-		out.print("<th>" + r.getDate().getDay() + "</th>\n");
-		out.print("<th>" + r.getLatitude() + "</th>\n");
-		out.print("<th>" + r.getLongitude() + "</th>\n");
-		out.print("<th>" + r.getCount() + "</th>\n");
-		out.print("</tr>\n");
+		if (i > searchLo && i < searchHi) {
+			out.print("<tr>\n");
+			out.print("<td>" + te.getTaxonRecord(r.getTaxonId()).getName() + "</td>\n");
+			out.print("<td>" + r.getDate().getYear() + "</td>\n");
+			out.print("<td>" + r.getDate().getMonth() + "</td>\n");
+			out.print("<td>" + r.getDate().getDay() + "</td>\n");
+			out.print("<td>" + r.getLatitude() + "</td>\n");
+			out.print("<td>" + r.getLongitude() + "</td>\n");
+			out.print("<td>" + r.getCount() + "</td>\n");
+			out.print("</tr>\n");
+		} else if (i > searchHi) break;
+		i++;
 	}
 %>
 </table>

tomcat/webapps/Trawl/script.js

@@ -243,6 +243,29 @@ function reqCluster(params){
     xhr.send(params);                       //send request to server
 }
 
+function reqResults(params, lo, hi){
+    var path = 'doList.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 respHtml = this.responseText;
+            document.getElementById("list").innerHTML = respHtml;
+        }
+        else {
+            console.log("Server Response: Error"); //RME
+        }
+    };
+    params = JSON.parse(params);
+    params["searchLo"] = lo;
+    params["searchHi"] = hi;
+    params = JSON.stringify(params);
+    xhr.send(params);                       //send request to server
+}
+
 function callOutput(){
     var pickOutputType = document.getElementsByName('pickOutput');
     var outType, taxGroup, yearFrom, yearTo, clusterSize;
@@ -280,6 +303,10 @@ function callOutput(){
         document.getElementById("outputBox").innerHTML='<div id="cluster"></div>';
         reqCluster(params);
     }
+    else if(outType === "list"){
+        document.getElementById("outputBox").innerHTML='<div id="list"></div>';
+        reqResults(params, 0, 50);
+    }
 }
 
 // JQuery for Range Slider

tomcat/webapps/Trawl/style.css

@@ -77,6 +77,10 @@ a:hover{
     /*border: 1px solid olivedrab;*/
 }
 
+#pickSize{
+	width: 5%;
+}
+
 #yearIn{
     width: 30%;
 }

tomcat/webapps/Trawl/tablesort.css

+th[role=columnheader]:not(.no-sort) {
+	cursor: pointer;
+}
+
+th[role=columnheader]:not(.no-sort):after {
+	content: '';
+	float: right;
+	margin-top: 7px;
+	border-width: 0 4px 4px;
+	border-style: solid;
+	border-color: #404040 transparent;
+	visibility: hidden;
+	opacity: 0;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background-color: #FFFFFF;
+}
+
+th[aria-sort=ascending]:not(.no-sort):after {
+	border-bottom: none;
+	border-width: 4px 4px 0;
+}
+
+th[aria-sort]:not(.no-sort):after {
+	visibility: visible;
+	opacity: 0.4;
+}
+
+th[role=columnheader]:not(.no-sort):hover:after {
+	visibility: visible;
+	opacity: 1;
+}
+
+table{
+	border-color:#FFFFFF;
+	border-width: 4px 4px;
+	width: 100%;
+}
+
+#nextBtn{
+	padding-left: 2px;
+	padding-right: 2px;
+	margin-left: 2px;
+	margin-right: 2px;
+}
+
+tr:nth-child(even) td {
+	background-color: #EEEEEE;
+}
+
+tr:nth-child(odd) td {
+	background-color: #FFFFFF;
+}
\ No newline at end of file

tomcat/webapps/Trawl/tablesort.min.js

+/*!
+ * tablesort v5.0.2 (2017-11-12)
+ * http://tristen.ca/tablesort/demo/
+ * Copyright (c) 2017 ; Licensed MIT
+*/!function(){function a(b,c){if(!(this instanceof a))return new a(b,c);if(!b||"TABLE"!==b.tagName)throw new Error("Element must be a table");this.init(b,c||{})}var b=[],c=function(a){var b;return window.CustomEvent&&"function"==typeof window.CustomEvent?b=new CustomEvent(a):(b=document.createEvent("CustomEvent"),b.initCustomEvent(a,!1,!1,void 0)),b},d=function(a){return a.getAttribute("data-sort")||a.textContent||a.innerText||""},e=function(a,b){return a=a.trim().toLowerCase(),b=b.trim().toLowerCase(),a===b?0:a<b?1:-1},f=function(a,b){return function(c,d){var e=a(c.td,d.td);return 0===e?b?d.index-c.index:c.index-d.index:e}};a.extend=function(a,c,d){if("function"!=typeof c||"function"!=typeof d)throw new Error("Pattern and sort must be a function");b.push({name:a,pattern:c,sort:d})},a.prototype={init:function(a,b){var c,d,e,f,g=this;if(g.table=a,g.thead=!1,g.options=b,a.rows&&a.rows.length>0)if(a.tHead&&a.tHead.rows.length>0){for(e=0;e<a.tHead.rows.length;e++)if("thead"===a.tHead.rows[e].getAttribute("data-sort-method")){c=a.tHead.rows[e];break}c||(c=a.tHead.rows[a.tHead.rows.length-1]),g.thead=!0}else c=a.rows[0];if(c){var h=function(){g.current&&g.current!==this&&g.current.removeAttribute("aria-sort"),g.current=this,g.sortTable(this)};for(e=0;e<c.cells.length;e++)f=c.cells[e],f.setAttribute("role","columnheader"),"none"!==f.getAttribute("data-sort-method")&&(f.tabindex=0,f.addEventListener("click",h,!1),null!==f.getAttribute("data-sort-default")&&(d=f));d&&(g.current=d,g.sortTable(d))}},sortTable:function(a,g){var h=this,i=a.cellIndex,j=e,k="",l=[],m=h.thead?0:1,n=a.getAttribute("data-sort-method"),o=a.getAttribute("aria-sort");if(h.table.dispatchEvent(c("beforeSort")),g||(o="ascending"===o?"descending":"descending"===o?"ascending":h.options.descending?"descending":"ascending",a.setAttribute("aria-sort",o)),!(h.table.rows.length<2)){if(!n){for(;l.length<3&&m<h.table.tBodies[0].rows.length;)k=d(h.table.tBodies[0].rows[m].cells[i]),k=k.trim(),k.length>0&&l.push(k),m++;if(!l)return}for(m=0;m<b.length;m++)if(k=b[m],n){if(k.name===n){j=k.sort;break}}else if(l.every(k.pattern)){j=k.sort;break}for(h.col=i,m=0;m<h.table.tBodies.length;m++){var p,q=[],r={},s=0,t=0;if(!(h.table.tBodies[m].rows.length<2)){for(p=0;p<h.table.tBodies[m].rows.length;p++)k=h.table.tBodies[m].rows[p],"none"===k.getAttribute("data-sort-method")?r[s]=k:q.push({tr:k,td:d(k.cells[h.col]),index:s}),s++;for("descending"===o?q.sort(f(j,!0)):(q.sort(f(j,!1)),q.reverse()),p=0;p<s;p++)r[p]?(k=r[p],t++):k=q[p-t].tr,h.table.tBodies[m].appendChild(k)}}h.table.dispatchEvent(c("afterSort"))}},refresh:function(){void 0!==this.current&&this.sortTable(this.current,!0)}},"undefined"!=typeof module&&module.exports?module.exports=a:window.Tablesort=a}();
\ No newline at end of file