fix total calculation for empty dataset

[pulsecounter.git] / web / index.html
diff --git a/web/index.html b/web/index.html

index af389ee758a574c1cc40ceb273405683a5cd3565..a1745afe9684bb469b686fb7c6dad6832a852c42 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
  <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <script>
-  var dbg;
+  var dbg, errordiv;
    var canvas, ctx;
    var ww, wh;
    var hmax, hfact;
@@ -220,6 +220,8 @@
    }
  
    function redraw() {
+    errordiv.style.visibility = "hidden";
+    errordiv.innerHTML = "";
      clearplot();
      if (cold_d.length || hot_d.length) {
        tfact = (ww - xzero) / (tmax - tmin);
@@ -234,10 +236,20 @@
    }
  
    function gotdata(data) {
-    document.getElementById("cold").innerHTML =
+    document.getElementById("curcold").innerHTML =
        (data.current.cold / 100).toFixed(2);
-    document.getElementById("hot").innerHTML =
+    document.getElementById("curhot").innerHTML =
        (data.current.hot / 100).toFixed(2);
+
+    if (data.cold.length)
+      document.getElementById("totcold").innerHTML =
+        ((data.cold[data.cold.length - 1][1] - data.cold[0][1]) * 10);
+    else document.getElementById("totcold").innerHTML = "0";
+    if (data.hot.length)
+      document.getElementById("tothot").innerHTML =
+        ((data.hot[data.hot.length - 1][1] - data.hot[0][1]) * 10);
+    else document.getElementById("tothot").innerHTML = "0";
+
      tmin = data.range.lo;
      tmax = data.range.hi;
      //dbg.innerHTML = "from " + tmin + " to " + tmax
@@ -257,11 +269,16 @@
  
      //dbg.innerHTML = url;
      xmlhttp.onreadystatechange = function() {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        // dbg.innerHTML = xmlhttp.responseText;
-        var myData = JSON.parse(xmlhttp.responseText);
-        gotdata(myData);
-      }
+      if (xmlhttp.readyState == 4)
+        if (xmlhttp.status == 200) {
+          // dbg.innerHTML = xmlhttp.responseText;
+          var myData = JSON.parse(xmlhttp.responseText);
+          gotdata(myData);
+        } else {
+          errordiv.style.visibility = "visible";
+          errordiv.style.display = "block";
+          errordiv.innerHTML = xmlhttp.responseText;
+        }
      }
      xmlhttp.open("GET", url, true);
      clearplot();
@@ -339,6 +356,7 @@
      var qstr = window.location.search;
  
      dbg = document.getElementById("debug");
+    errordiv = document.getElementById("errormsg");
      canvas = document.getElementById("plot");
      ctx = canvas.getContext("2d");
      resize();
@@ -381,17 +399,25 @@ div#currentvals {
    text-align: center;
    font-size: 150%;
  }
+div#totalvals {
+  width: 18em;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 100%;
+}
  div.current {
    position: relative;
    padding: 0.2em;
    border: solid 1px black;
    margin: 0.2em;
  }
-div#cold {
+div.cold {
    float: left;
    background-color: #d0e0ff;
  }
-div#hot {
+div.hot {
    float: right;
    background-color: #ffd0e0;
  }
@@ -403,6 +429,11 @@ canvas#plot {
    height: 320px;
    /* border: solid 1px black; */
  }
+div#errormsg {
+  visibility: hidden;
+  color: red;
+  text-align: center;
+}
  div#queries {
    margin-left: auto;
    margin-right: auto;
@@ -434,13 +465,21 @@ body {
  </head><body>
  <h1>WATER METERS</h1>
  <div id="currentvals">
-  Current Values
-  <div class="current" id="cold">cold</div>
-  <div class="current" id="hot">hot</div>
+  Current Readings (m<sup>3</sup>)
+  <div class="current cold" id="curcold">cold</div>
+  <div class="current hot" id="curhot">hot</div>
  </div>
  <br />
  <canvas id="plot" width="640" height = "320"></canvas>
  <br />
+<div id="errormsg"></div>
+<br />
+<div id="totalvals">
+  Total for the period (l)
+  <div class="current cold" id="totcold">cold</div>
+  <div class="current hot" id="tothot">hot</div>
+</div>
+<br />
  <div id="queries">
   <div class="query" id="prevweek"><div class="label">PREVIOUS WEEK</div></div>
   <div class="query" id="beforeyesterday"><div class="label">DAY