Add error to coffee display when there is a connection problem

Resolves #87

coffee_scale/static/js/coffee.js

@@ -36,12 +36,29 @@ function onConnect() {
 // data update and parse functions
 function parseCups(ev){
     var cups = parseFloat(ev.detail).toFixed(1)
-    var cupsEvent = new CustomEvent("cupsChanged", {'detail': cups});
-    window.dispatchEvent(cupsEvent);
+    if (String(cups) !== '-1.0') {
+        var cupsEvent = new CustomEvent("cupsChanged", {'detail': cups});
+        window.dispatchEvent(cupsEvent);
+    } else {
+        var cupsEvent = new CustomEvent("cupsError", {'detail': 'Error: unable to fetch cups :('});
+        window.dispatchEvent(cupsEvent);
+    }
 }
 function updateCups(ev){
     $("#text").text(ev.detail);
 }
+function showCupsError(ev) {
+    $('#text').text(ev.detail);
+    $('#text').css({
+        'font-size': '7vh',
+        'left': '0',
+        'top': '40%',
+        'width': '100%',
+        'text-align': 'center',
+        'color': 'red',
+    });
+    $('#lower').css({'background-image': 'none'});
+}
 function updateScale(ev){
      $("#scale2").css({width: Math.min(ev.detail/9*100,100) + '%'});
 }
@@ -72,7 +89,6 @@ function brewAnimStart(){
     $(".text").addClass("brewing");
     $(".layerone").hide();
     $(".layertwo").show();
-
 }
 function brewAnimEnd(){
     $(".text").removeClass("brewing");
@@ -145,6 +161,11 @@ $(document).ready(function(){
  window.addEventListener("cupsChanged", coffeeLowEffect);
  window.addEventListener("cupsChanged", updateScale);
  window.addEventListener("cupsChanged", resize);
+
+ window.addEventListener("cupsError", showCupsError);
+ window.addEventListener("cupsError", coffeeLowEffect);
+ window.addEventListener("cupsError", updateScale);
+
  window.addEventListener("brewStart", brewAnimStart);
  window.addEventListener("brewEnd", brewAnimEnd);
  window.addEventListener("brewEnd", coffeeReadyEffect);