testing loading screen for 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 || '80');
+var port = normalizePort(process.env.PORT || '3000');
 app.set('port', port);
 
 /**

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "forever ./bin/www"
+    "start": "forever -w ./bin/www"
   },
   "dependencies": {
     "body-parser": "~1.12.4",

public/javascripts/sensor_information.js

@@ -56,54 +56,68 @@ function displayChart(chart_id, chart_legend_id, year, month){
 		console.log("api 2");
 	}
 
-	$.get(api_url, function(request){
+    $.ajax(
-
+    {
-		var json = request;
+        type: 'GET',
-		var data = {labels : [], datasets : []};
+        url: api_url,
-		console.log(json);
+        data: {},
-
+        beforeSend: function(){
-		data.datasets.push({
+            $('body').addClass("loading");
-            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: []
         },
-        {
+        success: function(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){
+            $('body').removeClass("loading");
 
-			if (month == null){
+            var request = data;
-				data.labels.push(json[i]._id.month + "/" + json[i]._id.day);
-			}
-			else {
-				data.labels.push(json[i]._id.day);
-			}
 
-			data.datasets[0].data.push(json[i].max);
+            var json = request;
-			data.datasets[1].data.push(json[i].min);
+            var data = {labels : [], datasets : []};
-		}
+            console.log(json);
 
-		// Get context with jQuery - using jQuery's .get() method.
+            data.datasets.push({
-		var ctx = $("#" + chart_id).get(0).getContext("2d");
+                label: "Max Temperature",
-		// This will get the first returned node in the jQuery collection.
+                fillColor: "rgba(220,220,220,0.2)",
-		var myLineChart = new Chart(ctx).Line(data);
+                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: []
+            });
 
-		$("#" + chart_legend_id).html(myLineChart.generateLegend());
+            for (var i in json){
 
-	});
+                if (month == null){
+                    data.labels.push(json[i]._id.month + "/" + json[i]._id.day);
+                }
+                else {
+                    data.labels.push(json[i]._id.day);
+                }
+
+                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 = $("#" + chart_id).get(0).getContext("2d");
+            // This will get the first returned node in the jQuery collection.
+            var myLineChart = new Chart(ctx).Line(data);
+
+            $("#" + chart_legend_id).html(myLineChart.generateLegend());
+        }
+
+
+    });
 
 }
 

public/stylesheets/style.css

@@ -255,4 +255,30 @@ a {
     width: 12px;
     height: 12px;
     margin-right: 5px;
+}
+
+.modal {
+    display:    none;
+    position:   fixed;
+    z-index:    1000;
+    top:        0;
+    left:       0;
+    height:     100%;
+    width:      100%;
+    background: rgba( 255, 255, 255, .8 ) 
+                url('http://i.stack.imgur.com/FhHRx.gif') 
+                50% 50% 
+                no-repeat;
+}
+
+/* When the body has the loading class, we turn
+   the scrollbar off with overflow:hidden */
+body.loading {
+    overflow: hidden;   
+}
+
+/* Anytime the body has the loading class, our
+   modal element will be visible */
+body.loading .modal {
+    display: block;
 }

views/sensor_information.ejs

@@ -68,6 +68,8 @@
 <br>
 <br>
 
+<div class="modal"><!-- Place at bottom of page --></div>
+
 <footer class="blog-footer">
 	<p>Site created and managed by Mitchell Gerber</p>
 	<span>©2015</span>