added graphs

bin/www

@@ -12,7 +12,7 @@ var http = require('http');
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '3000');
+var port = normalizePort(process.env.PORT || '80');
 app.set('port', port);
 
 /**

public/javascripts/custom.js

@@ -13,5 +13,5 @@ $(document).ready(function(){
 	$(function() {
 	    $( "#datepicker" ).datepicker();
  	 });
-		
+	
 });

public/javascripts/sensor_information.js

@@ -0,0 +1,78 @@
+$(document).ready(function(){	
+
+	Chart.defaults.global.responsive = true;
+
+	var loc = $("#sensor-location").text();
+	console.log(loc);
+	loc = loc.split().join("+");
+
+	$.get("/api/sensorbylocation?location=" + loc, function(request){
+
+		var json = request;
+		var data = {labels : [], datasets : []};
+
+		data.datasets.push({
+            label: "Max Temperature",
+            fillColor: "rgba(220,220,220,0.2)",
+            strokeColor: "rgba(220,220,220,1)",
+            pointColor: "rgba(220,220,220,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(220,220,220,1)",
+            data: []
+        },
+        {
+            label: "Min Temperature",
+            fillColor: "rgba(151,187,205,0.2)",
+            strokeColor: "rgba(151,187,205,1)",
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            data: []
+        });
+
+		for (var i in json){
+			data.labels.push(json[i]._id.month + "/" + json[i]._id.day + "/" + json[i]._id.year);
+			data.datasets[0].data.push(json[i].max);
+			data.datasets[1].data.push(json[i].min);
+		}
+
+		
+
+
+		// Get context with jQuery - using jQuery's .get() method.
+		var ctx = $("#info-chart").get(0).getContext("2d");
+		// This will get the first returned node in the jQuery collection.
+		var myLineChart = new Chart(ctx).Line(data);
+
+	});
+	
+
+});
+
+var test123 = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "My First dataset",
+            fillColor: "rgba(220,220,220,0.2)",
+            strokeColor: "rgba(220,220,220,1)",
+            pointColor: "rgba(220,220,220,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(220,220,220,1)",
+            data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+            label: "My Second dataset",
+            fillColor: "rgba(151,187,205,0.2)",
+            strokeColor: "rgba(151,187,205,1)",
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            data: [28, 48, 40, 19, 86, 27, 90]
+        }
+    ]
+};

routes/api.js

@@ -6,14 +6,14 @@ require("../models/temperature");
 var temperature = mongoose.model('temperature');
 
 
-/* GET sensors page. */
+//api to return the max and min temps of each day based on location
 router.get('/allsensors', function(req, res, next) {
 
 	//var location = req.query.location;
 	temperature.aggregate([{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
 								max : {$max : "$temperature"},
 								min : {$min : "$temperature"}}},
-							{$sort : {"_id.month" : -1, "_id.day" : -1, "_id.year" : -1}}]).exec(function(err, info){
+							{$sort : {"_id.month" : 1, "_id.day" : 1, "_id.year" : 1}}]).exec(function(err, info){
 
 			console.log(info);
 			res.setHeader('Content-Type', 'application/json');
@@ -26,13 +26,20 @@ router.get('/allsensors', function(req, res, next) {
 router.get('/sensorbylocation', function(req, res, next) {
 
 	var loc = req.query.location;
-	console.log(loc);
+	var year = req.query.year;
-	//var location = req.query.location;
+
-	temperature.aggregate([ {$match : {location : loc}},
+	if (year == null){
+		var date = new Date();
+		year = date.getFullYear();
+	}
+
+	//query finds a entries in a collection based on location and the year specified
+	//they are then grouped by date and sorted by date as well
+	temperature.aggregate([ {$match : {location : loc, updated : {$gte : new Date('1 Jan, ' + year), $lt : new Date('1 Jan ' + year +1)}}},
 							{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
 								max : {$max : "$temperature"},
 								min : {$min : "$temperature"}}},
-							{$sort : {"_id.month" : -1, "_id.day" : -1, "_id.year" : -1}}]).exec(function(err, info){
+							{$sort : {"_id.month" : 1, "_id.day" : 1, "_id.year" : 1}}]).exec(function(err, info){
 
 			console.log(info);
 			res.setHeader('Content-Type', 'application/json');

routes/sensors.js

@@ -11,6 +11,9 @@ router.get('/', function(req, res, next) {
 
 	temperature.aggregate( [ {$sort : {location : -1, updated : -1}}, { $group : { _id : "$location", temperature : {$first : "$temperature"}, humidity : {$first : "$humidity"}, updated : {$first : "$updated"}} } ] ).exec(function(err, info){
 
+		//get month for each entry and convert 24 hour time to US time
+		//also check to see if device has sent a data point in past 5 minutes
+		//if not will show up as disconnected
 		for (var i = 0; i < info.length; i++){
 				var monthNames = ["January", "February", "March", "April", "May", "June",
   									"July", "August", "September", "October", "November", "December"];
@@ -23,6 +26,17 @@ router.get('/', function(req, res, next) {
 
 				var dateString = month + " " + date + ", " + year;
 
+				var loc = info[i]._id;
+				
+				var info_link = "/sensors/information?location="
+
+				if (loc != null){
+					loc = loc.split().join("+");
+					 info_link += loc;
+				}
+
+				info[i].info_link = info_link;
+				
 				//converting 24 hours time to AM or PM
 				if (hours < 12){
 					info[i].lastUpdate = dateString + " - " + hours + ":" + minutes + " AM (ET)";
@@ -36,7 +50,7 @@ router.get('/', function(req, res, next) {
 				}
 
 				//compared current time to last db entry - 1200000 milliseconds is 2 minutes
-				if(info[i].updated.getTime() > (Date.now() - 120000)){
+				if(info[i].updated.getTime() > (Date.now() - 350000)){
 					info[i].connected = true;
 				}
 				else {
@@ -53,7 +67,15 @@ router.get('/', function(req, res, next) {
 
 });
 
-router.post('/', function(req, res,next) {
+router.get('/information', function(req, res, err){
+
+	var sensor_location = req.query.location;
+
+	if (sensor_location == null){
+		res.redirect('/404');
+	}
+
+	res.render('sensor_information', {info : {location : sensor_location}});
 
 });
 

views/sensor_information.ejs

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<% include layout.ejs %>
+
+</head>
+
+<body>
+
+<div class="header"></div>
+
+<% include ../public/html/navbar.html %>
+
+<div class="container">
+<br>
+<h1 class="text-center" id="sensor-location"><%=info.location%></h1>
+<hr>
+<br>
+<canvas class="center" id="info-chart" width="800" height="400"></canvas>
+
+</div>
+
+
+
+
+
+
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+
+<footer class="blog-footer">
+	<p>Site created and managed by Mitchell Gerber</p>
+	<span>©2015</span>
+	<br>
+	<span>Glyphicons provided by</span><br>
+	<a href="http://glyphicons.com/" target="_blank"><span>glyphicons.com</span></a>
+</footer>
+
+</body>
+	
+	<% include layoutBottom.ejs %>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
+	<script src="/javascripts/sensor_information.js"></script>
+</html>
+

views/sensors.ejs

@@ -2,38 +2,13 @@
 <html lang="en">
 
 <head>
-	<title>mitchellg.me</title>
+	<% include layout.ejs %>
-	<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
-	<link rel="stylesheet" href="/stylesheets/style.css">
-	<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
-	<link rel="stylesheet" href="bootstrap/css/bootstrap.icon-large.min.css">
-	<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css">
 
 </head>
 
 <body>
 
-<div class="header">
+<div class="header"></div>
-	
-		<div class="container">
-
-		<% if (query[0] != null) { %>			
-							
-			<div class="lowerLeft">
-				<span class="colorWhite">ESP8266 With DHT11 Sensor</span>
-				<br>
-				<span class="colorWhite">Location: <%=query[0]._id%></span>
-				<br>
-				<span class="colorWhite">Temperature: <%=query[0].temperature%>°F</span>
-				<br>
-				<span class="colorWhite">Humidity: <%=query[0].humidity%>%</span>
-			</div>
-
-		<%}%>
-
-		</div>	
-	
-</div>
 
 <% include ../public/html/navbar.html %>
 
@@ -53,7 +28,9 @@
 			<%} else {%>
 			<span class="colorRed">Disconnected</span>
 			<%}%>
-
+			<br>
+			<br>
+			<a href="<%=query[i].info_link%>"><button class="btn btn-default">View Graph</button></a>
 		</div>
 	<%}%>
 
@@ -86,10 +63,7 @@
 	
 
 	
-	<script src="jquery-1.11.3.min.js"></script>
+	<% include layoutBottom.ejs %>
-	<script src="bootstrap/js/bootstrap.js"></script>
-	<script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
-	<script src="javascripts/custom.js"></script>
 
 </html>