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,7 +56,19 @@ function displayChart(chart_id, chart_legend_id, year, month){
 		console.log("api 2");
 	}
 
-	$.get(api_url, function(request){
+    $.ajax(
+    {
+        type: 'GET',
+        url: api_url,
+        data: {},
+        beforeSend: function(){
+            $('body').addClass("loading");
+        },
+        success: function(data){
+
+            $('body').removeClass("loading");
+
+            var request = data;
 
             var json = request;
             var data = {labels : [], datasets : []};
@@ -102,6 +114,8 @@ function displayChart(chart_id, chart_legend_id, year, month){
             var myLineChart = new Chart(ctx).Line(data);
 
             $("#" + chart_legend_id).html(myLineChart.generateLegend());
+        }
+
 
     });
 

public/stylesheets/style.css

@@ -256,3 +256,29 @@ a {
     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>