loading animation added

README.md

@@ -8,7 +8,16 @@ I rolled this together in a couple of mornings and free hours to learn Flask
 and Python web app technologies. For this reason it is fairly rough around the
 edges.
 
-# Run
+## Systems Used
+
+* [Flask](http://flask.pocoo.org/)
+* [Bootstrap 4](https://v4-alpha.getbootstrap.com/) - example 'album' used as a template.
+* [Flask SocketIO](https://flask-socketio.readthedocs.io/en/latest/) - for
+  async scraping on user loading page.
+* [CSS Coding Animation](https://github.com/Chippd/css_loading_animation) -
+  used for loading placeholder.
+
+## Run
 
 Create .env file with Google Maps API key or set environment variable.
 

app.py

@@ -28,28 +28,30 @@ def get_data():
         air_data = get_data.air_data
         over40 = get_data.over40
         over200 = get_data.over200
+        error = get_data.error
     except AttributeError:
         air_data = {'Wells Rd': {'time': 0, 'error': 1},
                     'Bristol Depot': {'time': 0, 'error': 1},
                     'Parson St': {'time': 0, 'error': 1},
                     'Fishponds': {'time': 0, 'error': 1}}
         over40 = {}
         over200 = {}
+        error = 0
 
     for key in airquality.AREAS:
-        # if (time.time() - air_data[key]['time']) > (15 * 60):
-        air_data[key] = airquality.get_air_dict(key, True)
-        if air_data[key]['NO215m'] > airquality.NO2YLM:
-            over40[key] = air_data[key]['NO215m']
-        if air_data[key]['NO224h'] > airquality.NO215LM:
-            over200[key] = air_data[key]['NO224h']
-        error = air_data[key]['error']
+        if (time.time() - air_data[key]['time']) > (15 * 60):
+            air_data[key] = airquality.get_air_dict(key, False)
+            if air_data[key]['NO215m'] > airquality.NO2YLM:
+                over40[key] = air_data[key]['NO215m']
+            if air_data[key]['NO224h'] > airquality.NO215LM:
+                over200[key] = air_data[key]['NO224h']
+            error = air_data[key]['error']
 
     get_data.air_data = air_data
     get_data.over40 = over40
     get_data.over200 = over200
+    get_data.error = error
 
-    print("Error status: " + str(error))
     return air_data, over40, over200, error
 
 
@@ -78,7 +80,7 @@ def scrape_data():
     [air_data, over40, over200, err] = get_data()
     names = list(airquality.AREAS)
     over40 = list(over40.keys())
-    # print(over40)
+    print(over40)
     over200 = list(over200.keys())
     emit('data_loaded', {'air_data': air_data, 'areas': names, 'over40': over40, 'over200': over200, 'time': time.time(), 'choking': len(over40), 'error': err})
 

static/load-data.js

@@ -0,0 +1,64 @@
+function changeFavicon(src) {
+  $('link[rel="shortcut icon"]').attr('href', src)
+}
+
+$(document).ready(function(){
+  var socket = io.connect('http://' + document.domain + ':' + location.port);
+  socket.emit('ready');
+
+  socket.on('data_loaded', function(json) {
+    console.log(json);
+    if (!json.error) {
+      if (json.choking) {
+        $(".jumbotron-heading").text("Yes");
+        $(".lead").text(json.over40.join(", "))
+        $(".lead").append(" are choking")
+        changeFavicon('static/favicon-choking.ico');
+      } else {
+        $(".jumbotron-heading").text("No");
+        $(".lead").text("Bristol is doing OK")
+        changeFavicon('static/favicon-ok.ico');
+      }
+    } else {
+      $(".jumbotron-heading").text("Opps");
+      $(".lead").text("Something went wrong! Is the Bristol Air Quality site up?")
+    }
+    $(".loader-container").hide();
+    $(".scraping-heading").hide();
+    $(".status-heading").show();
+
+    var cards = ["#wells-rd", "#parson-st", "#bristol-depot", "#fishponds"];
+    var names = ["Wells Rd", "Parson St", "Bristol Depot", "Fishponds"];
+
+    if (!json.error) {
+      for (i = 0; i < cards.length; i++) {
+        $(cards[i]).find('span.no2-15m').text(json.air_data[names[i]].NO215m)
+        $(cards[i]).find('span.no2-24h').text(json.air_data[names[i]].NO224h)
+        var minutes = Math.round(((json.time - json.air_data[names[i]].time) / 60) % 60)
+        $(cards[i]).find('span.scrape-time').text(minutes);
+        // if in area
+        if (json.over40.indexOf(names[i]) != -1) {
+          $(cards[i]).find('div.card-body').addClass("bg-danger text-white")
+        }
+        // if over 200
+        if (json.over200.indexOf(names[i]) != -1) {
+          $(cards[i]).find('[data-toggle="tooltip"]').tooltip();
+          $(cards[i]).find('span.fa-exclamation-circle').show();
+          // not in area otherwise text-warning
+          if (json.over40.indexOf(names[i]) == -1) {
+            $(cards[i]).find('p.no2-24h').addClass("text-danger")
+          } else {
+            $(cards[i]).find('p.no2-24h').addClass("text-warning")
+          }
+        }
+      }
+    } else {
+      for (i = 0; i < cards.length; i++) {
+        $(cards[i]).find('span.no2-15m').addClass("text-muted");
+        $(cards[i]).find('span.no2-24h').addClass("text-muted");
+      }
+    }
+
+    $("div.album").show("fast");
+  });
+});