From 2e172770b603bbb759e069c1bba559450b6ab614 Mon Sep 17 00:00:00 2001 From: mgerb42 Date: Mon, 21 Dec 2015 09:24:51 -0600 Subject: [PATCH] testing loading screen for graphs --- bin/www | 2 +- package.json | 2 +- public/javascripts/sensor_information.js | 96 ++++++++++++++---------- public/stylesheets/style.css | 26 +++++++ views/sensor_information.ejs | 2 + 5 files changed, 85 insertions(+), 43 deletions(-) diff --git a/bin/www b/bin/www index d2484eb..87ffb43 100755 --- a/bin/www +++ b/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); /** diff --git a/package.json b/package.json index f24f6d9..ca0d306 100644 --- a/package.json +++ b/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", diff --git a/public/javascripts/sensor_information.js b/public/javascripts/sensor_information.js index b9d52bc..e6b80eb 100644 --- a/public/javascripts/sensor_information.js +++ b/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){ - - var json = request; - var data = {labels : [], datasets : []}; - console.log(json); - - 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: [] + $.ajax( + { + type: 'GET', + url: api_url, + data: {}, + beforeSend: function(){ + $('body').addClass("loading"); }, - { - 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: [] - }); + success: function(data){ - for (var i in json){ + $('body').removeClass("loading"); - if (month == null){ - data.labels.push(json[i]._id.month + "/" + json[i]._id.day); - } - else { - data.labels.push(json[i]._id.day); - } + var request = data; - data.datasets[0].data.push(json[i].max); - data.datasets[1].data.push(json[i].min); - } + var json = request; + var data = {labels : [], datasets : []}; + console.log(json); - // 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); + 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: [] + }); - $("#" + 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()); + } + + + }); } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 1dc7d63..d04f5d0 100644 --- a/public/stylesheets/style.css +++ b/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; } \ No newline at end of file diff --git a/views/sensor_information.ejs b/views/sensor_information.ejs index 18b0dba..1ba0654 100644 --- a/views/sensor_information.ejs +++ b/views/sensor_information.ejs @@ -68,6 +68,8 @@

+
+