From e7fbd94328cb0135abb129189fb4fd8ac449d8b4 Mon Sep 17 00:00:00 2001
From: John Costa <john.costa_iii@uconn.edu>
Date: Thu, 20 Apr 2017 22:25:27 -0400
Subject: [PATCH] fixed statistics page, added a chart and made map work, still
 a few bugs

---
 .classpath                                  |   6 +-
 WebContent/html/javascript/statistics.jsp   | 121 ++++++++++++++++++--
 WebContent/html/webpages/statisticsPage.jsp |  43 +------
 src/database/StatisticsQueries.java         |  48 +++++++-
 src/entities/Statistics.java                |  15 ++-
 5 files changed, 175 insertions(+), 58 deletions(-)
diff --git a/.classpath b/.classpath
index 7ac7040..0295c16 100644
--- a/.classpath
+++ b/.classpath
@@ -37,10 +37,6 @@
 			<attribute name="owner.project.facets" value="jst.web"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/jre1.8.0_121">
-		<attributes>
-			<attribute name="owner.project.facets" value="java"/>
-		</attributes>
-	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
 	<classpathentry kind="output" path="target/classes"/>
 </classpath>
diff --git a/WebContent/html/javascript/statistics.jsp b/WebContent/html/javascript/statistics.jsp
index dc510ba..737c3dc 100644
--- a/WebContent/html/javascript/statistics.jsp
+++ b/WebContent/html/javascript/statistics.jsp
@@ -8,18 +8,30 @@
 <title>Insert title here</title>
 </head>
 <body>
-	<%
+<%
+//statistics for status
 Statistics[] genStatistics = StatisticsQueries.getStatistics();
 String statString = Statistics.arrayToString(genStatistics);
+//location queries for map
+Statistics[] genLocations = StatisticsQueries.getLocations();
+String locString = Statistics.arrayToString(genLocations);
+//device type queries
+Statistics[] genTypes = StatisticsQueries.getDeviceTypes();
+String typeString = Statistics.arrayToString(genTypes);
 %>
 	<script type=text/javascript
 		src="https://www.gstatic.com/charts/loader.js"></script>
 	<script>
-var statistics = makeStatistics();
-displayData();
+var statistics = makeStatistics(); //initialize statistics
+var deviceTypes = makeTypes(); //initialize types
+displayData(); //run the function
+
 function displayData() {
 	var html = "";
+	var htmlend = "";
 	var totalDevices = 0;
+	
+	/*
 	var availableDevices=0;
 	var loanDevices=0;
 	var lostDevices=0;
@@ -28,15 +40,17 @@ function displayData() {
 	var unavailDevices=0;
 	var returnDevices=0;
 	var brokenDevices=0;
+	*/
 	if (statistics.status != "" && statistics.count != ""){
 		
 		for (var i = 0; i<statistics.length; i++){
 			totalDevices = totalDevices + statistics[i].count;
+			htmlend += '<br>' + statistics[i].status + ': ' + statistics[i].count;
 		}
 		//data for info section
-		availableDevices = statistics[0].count;
-		loanDevices = statistics[1].count;
-		unavailDevices = statistics[2].count;
+		//availableDevices = statistics[0].count;
+		//loanDevices = statistics[1].count;
+		//unavailDevices = statistics[2].count;
 		
 		//old categories
 		//lostDevices = statistics[2].count;
@@ -45,11 +59,8 @@ function displayData() {
 		//pendingDevices = statistics[0].count;
 		
 		
-		html += '<div class = "info-container">Total Devices: '+ totalDevices + 
-		'<br>Available Devices: ' + availableDevices + 
-		'<br>Loaned Devices: ' + loanDevices + 
-		'<br>Permanent Devices: ' + unavailDevices +
-		'</div>';
+		html += '<div class = "info-container">Total Devices: '+ totalDevices;
+		html += htmlend + '</div>';
 		
 		// Load the Visualization API and the corechart package.
       	google.charts.load('current', {'packages':['corechart']});
@@ -57,6 +68,7 @@ function displayData() {
       	// Set a callback to run when the Google Visualization API is loaded.
       	google.charts.setOnLoadCallback(drawPie);
       	google.charts.setOnLoadCallback(drawCol);
+      	google.charts.setOnLoadCallback(drawTypesBar);
       	// Callback that creates and populates a data table,
       	// instantiates the pie chart, passes in the data and
       	// draws it.
@@ -80,7 +92,7 @@ function displayData() {
         	chart.draw(data, options);
         
 		}
-      	
+     	
       	function drawCol() {
       		var data = new google.visualization.DataTable();
       		data.addColumn('string', 'Status');
@@ -108,13 +120,98 @@ function displayData() {
 			var chart = new google.visualization.ColumnChart(document.getElementById('colchart'));
 			chart.draw(view, options);
       	}
+      	
+		function drawTypesBar() {
+    		
+    		// Create the data table.
+            	var data = new google.visualization.DataTable();
+            	data.addColumn('string', 'Device Type');
+            	data.addColumn('number', 'Count');
+            	
+            	for (var i = 0; i<deviceTypes.length; i++){
+                	data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
+                }
+            	
+            	var view = new google.visualization.DataView(data);
+                view.setColumns([0, 1,
+                                 { calc: "stringify",
+                                   sourceColumn: 1,
+                                   type: "string",
+                                   role: "annotation" }
+                                 ]);
+                
+            	var options = {'title':'Devices in terms of Type',
+                   		'width':600,
+                   		'height':400,
+                   		'bar': {groupWidth: "75%"},                    
+                   		'legend': { position: "none" },
+                   		'backgroundColor':'#E9EAEB'};
+
+    			// Instantiate and draw our chart, passing in some options.
+    			var chart = new google.visualization.BarChart(document.getElementById('bardevicechart'));
+    			chart.draw(view, options);
+
+    		}
      	document.getElementById('stats').innerHTML = html;
 	}
 }
+
+function initMap() { 
+	var locationArray = makeLocations();
+	var locations=[];
+	  for (var i = 0; i<locationArray.length; i++){
+		  var locObject = {lat: parseInt(locationArray[i].lat),lng: parseInt(locationArray[i].lng)};
+		  locations.push(locObject);
+	  }
+	
+    var map = new google.maps.Map(document.getElementById('map'), {
+      zoom: 4,
+      center: {lat: 39.023617, lng: -94.69357}
+    });
+
+    // Create an array of alphabetical characters used to label the markers.
+    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+    // Add some markers to the map.
+    // Note: The code uses the JavaScript Array.prototype.map() method to
+    // create an array of markers based on a given "locations" array.
+    // The map() method here has nothing to do with the Google Maps API.
+    var markers = locations.map(function(location, i) {
+      return new google.maps.Marker({
+        position: location,
+        label: labels[i % labels.length]
+      });
+    });
+
+    // Add a marker clusterer to manage the markers.
+    var markerCluster = new MarkerClusterer(map, markers,
+        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
+  }
+  
+  /* hardcoded
+  var locations = [
+	{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
+	{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
+	{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
+    {lat: 41.878114, lng: -87.629798}, //Chicago, IL
+    {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+    {lat: 41.053430, lng: -73.538734} //Stamford, CT
+  ]
+  */
+  
 function makeStatistics(){
 	window.json = '<%=statString%>';
 			return JSON.parse(window.json);
 		}
+function makeLocations(){
+	window.json = '<%=locString%>';
+			return JSON.parse(window.json);
+		}
+function makeTypes(){
+	window.json = '<%=typeString%>';
+			return JSON.parse(window.json);
+		}
 	</script>
+	
 </body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/statisticsPage.jsp b/WebContent/html/webpages/statisticsPage.jsp
index dfb2309..79645de 100644
--- a/WebContent/html/webpages/statisticsPage.jsp
+++ b/WebContent/html/webpages/statisticsPage.jsp
@@ -65,42 +65,6 @@
     <h2>Distribution of Devices Nationwide</h2>
 
     <div id="map"></div>
-    <script>
-
-      function initMap() {
-
-        var map = new google.maps.Map(document.getElementById('map'), {
-          zoom: 4,
-          center: {lat: 39.023617, lng: -94.69357}
-        });
-
-        // Create an array of alphabetical characters used to label the markers.
-        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-        // Add some markers to the map.
-        // Note: The code uses the JavaScript Array.prototype.map() method to
-        // create an array of markers based on a given "locations" array.
-        // The map() method here has nothing to do with the Google Maps API.
-        var markers = locations.map(function(location, i) {
-          return new google.maps.Marker({
-            position: location,
-            label: labels[i % labels.length]
-          });
-        });
-
-        // Add a marker clusterer to manage the markers.
-        var markerCluster = new MarkerClusterer(map, markers,
-            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
-      }
-      var locations = [
-		{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
-		{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
-		{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
-        {lat: 41.878114, lng: -87.629798}, //Chicago, IL
-        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
-        {lat: 41.053430, lng: -73.538734} //Stamford, CT
-      ]
-    </script>
     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
     </script>
     <script async defer
@@ -110,8 +74,11 @@
   <div style = "background-color: #94969A;">
   <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 50px;" id="piechart"></div>
   <div style = "float: right; border-style: solid; border-width: 20px; margin: 0px 50px 0px 0px;" id="colchart"></div>
-  <div style = "text-align: center;">
-  	<div style = "" class = infoContainer id="stats"></div>
+  <br><br>
+  <div style = "text-align: center;"><!-- move this back to above stats later when I think of what to place for the last chart -->
+  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 0px;" id="bardevicechart"></div>
+  <br><br>
+  <div style = "" class = infoContainer id="stats"></div>
   </div>
   </div>
   <%@ include file="../javascript/statistics.jsp" %>
diff --git a/src/database/StatisticsQueries.java b/src/database/StatisticsQueries.java
index 289252d..5ddd565 100644
--- a/src/database/StatisticsQueries.java
+++ b/src/database/StatisticsQueries.java
@@ -24,7 +24,7 @@ public static Statistics[] getStatistics() throws ClassNotFoundException, SQLExc
 		Statistics[] statusDevice = new Statistics[rows];
 		//iterate result set
 		while(resultSet.next()){
-			statusDevice[counter] = new Statistics(resultSet.getString("Status"), resultSet.getInt("count(*)"));
+			statusDevice[counter] = new Statistics(resultSet.getString("Status"), null, resultSet.getInt("count(*)"), null, null);
 			counter++;
 		}		
 		stmt.close();
@@ -32,5 +32,51 @@ public static Statistics[] getStatistics() throws ClassNotFoundException, SQLExc
 		return statusDevice;
 
 	}
+	public static Statistics[] getLocations() throws ClassNotFoundException, SQLException {
+		System.getenv("VCAP_SERVICES");
+		Class.forName("com.mysql.jdbc.Driver");
+		Connection connection = DriverManager.getConnection(database, user, password);
+		Statement stmt = connection.createStatement();
+		ResultSet resultSet = stmt.executeQuery("SELECT Latitude, Longitude from devices JOIN location WHERE devices.Location = location.Location_ID AND Employee_Flag = 0");
+		int counter = 0;
+
+		resultSet.last();
+		int rows = resultSet.getRow();
+		resultSet.beforeFirst();
 
+		Statistics[] locations = new Statistics[rows];
+		//iterate result set
+		while(resultSet.next()){
+			locations[counter] = new Statistics(null, null, 0, resultSet.getString("Latitude"), resultSet.getString("Longitude"));
+			counter++;
+		}		
+		stmt.close();
+		connection.close();
+		return locations;
+	}
+	
+	public static Statistics[] getDeviceTypes() throws ClassNotFoundException, SQLException {
+		//database connect
+		System.getenv("VCAP_SERVICES");
+		Class.forName("com.mysql.jdbc.Driver");
+		Connection connection = DriverManager.getConnection(database, user, password);
+		Statement stmt = connection.createStatement();
+		ResultSet resultSet = stmt.executeQuery("SELECT Hardware, count(*) FROM devices GROUP BY Hardware");
+		int counter = 0;
+
+		resultSet.last();
+		int rows = resultSet.getRow();
+		resultSet.beforeFirst();
+
+		Statistics[] typeDevice = new Statistics[rows];
+		//iterate result set
+		while(resultSet.next()){
+			typeDevice[counter] = new Statistics(null, resultSet.getString("Hardware"), resultSet.getInt("count(*)"), null, null);
+			counter++;
+		}		
+		stmt.close();
+		connection.close();
+		return typeDevice;
+
+	}
 }
diff --git a/src/entities/Statistics.java b/src/entities/Statistics.java
index 9be1ef5..6c0e99a 100644
--- a/src/entities/Statistics.java
+++ b/src/entities/Statistics.java
@@ -2,10 +2,17 @@
 
 public class Statistics {
 	private String _status;
+	private String _type;
 	private int _count;
-	public Statistics(String status,int count) {
+	private String _latitude;
+	private String _longitude;
+	
+	public Statistics(String status,String type, int count, String latitude, String longitude) {
 		_status = status;
+		_type = type;
 		_count = count;
+		_latitude = latitude;
+		_longitude = longitude;
 	}
 	
 	/**
@@ -16,11 +23,15 @@ public String toString(){
 		StringBuilder sb = new StringBuilder();
 		String comma = ", ";
 		sb.append("{\"status\": \"").append(_status).append("\"").append(comma);
-		sb.append("\"count\": ").append(_count);
+		sb.append("\"type\": \"").append(_type).append("\"").append(comma);
+		sb.append("\"count\": ").append(_count).append(comma);
+		sb.append("\"lat\": \"").append(_latitude).append("\"").append(comma);
+		sb.append("\"lng\": \"").append(_longitude).append("\"");
 		sb.append("}");
 		return sb.toString();
 	}
 	
+	
 	/**
 	 * This is a static function which will turn a Listed Statistics array into its proper string. (modification)
 	 * @author - Connor
