From b738ac7663a483d1aa844c43c9317a7940de1cf3 Mon Sep 17 00:00:00 2001
From: Joerg Lehmann <joerg.lehmann@nbit.ch>
Date: Thu, 25 Mar 2021 16:20:52 +0100
Subject: [PATCH] display message when no datapoints

---
 static/js/map.js | 75 ++++++++++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/static/js/map.js b/static/js/map.js
index 6a72025..a67ed93 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -67,19 +67,24 @@ function refreshDatapoints(deveui, start, stop) {
 
   $.getJSON('https://wo-bisch.ch/metrics?deveui=' + deveui + range, function (mydata) {
     if ("msg" in mydata) {
+      $('#map').hide();
+      $('#datetimeslider').hide();
       if (mydata.msg.includes("expired")) {
         $('#chart').html(`<article class="message is-danger">
   <div class="message-body">
     Abo ist abgelaufen
   </div>
 </article>`);
+        $('#chart').show();
       } else if (mydata.msg.includes("error:")) {
-        $('#myselectors').hide();
+        $('#map').hide();
+        $('#datetimeslider').hide();
         $('#chart').html(`<article class="message is-danger">
   <div class="message-body">
     Fehler im Aufruf
   </div>
 </article>`);
+        $('#chart').show();
       } else {
         location.reload(true);
       }
@@ -87,36 +92,50 @@ function refreshDatapoints(deveui, start, stop) {
     }
 
     datapoints = mydata['data'];
-    $('#datetimeslider').attr('max', datapoints.length - 1);
-    $('#datetimeslider').val(datapoints.length - 1);
-    last_slider_position = datapoints.length - 1;
-    var unix_timestamp = datapoints[datapoints.length - 1][0];
-    var date = new Date(unix_timestamp * 1000);
+    if (datapoints.length > 0) {
+      $('#chart').hide();
+      $('#map').show();
+      $('#datetimeslider').attr('max', datapoints.length - 1);
+      $('#datetimeslider').val(datapoints.length - 1);
+      $('#datetimeslider').show();
+      last_slider_position = datapoints.length - 1;
+      var unix_timestamp = datapoints[datapoints.length - 1][0];
+      var date = new Date(unix_timestamp * 1000);
 
-    var myhtml = '<p class="has-text-centered"><b>' + alias + '</b><br />' + moment(date).format('DD.MM.YYYY HH:mm') + '<br />' + vbat2icon(datapoints[datapoints.length - 1][4]) + '</p>';
-    marker.bindPopup(myhtml).openPopup();
+      var myhtml = '<p class="has-text-centered"><b>' + alias + '</b><br />' + moment(date).format('DD.MM.YYYY HH:mm') + '<br />' + vbat2icon(datapoints[datapoints.length - 1][4]) + '</p>';
+      marker.bindPopup(myhtml).openPopup();
 
-    if (allmarkers !== undefined) {
-      map.removeLayer(allmarkers);
+      if (allmarkers !== undefined) {
+        map.removeLayer(allmarkers);
+      }
+
+      markers = [];
+
+      // we create the layer group with all positions
+      for (let i of datapoints) {
+        unix_timestamp = i[0];
+        date = new Date(unix_timestamp * 1000);
+        markers.push(L.marker([i[1], i[2]], { icon: woBischIcon2 }).bindPopup(moment(date).format('DD.MM.YYYY HH:mm')));
+      }
+      allmarkers = L.layerGroup(markers);
+      if (lcontrol != undefined) {
+        //lcontrol.clearLayers();
+        lcontrol.remove();
+      }
+      lcontrol = L.control.layers({}).addTo(map);
+      lcontrol.addOverlay(allmarkers, 'alle Positionen anzeigen');
+      bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]);
+      map.fitBounds(bounds, { padding: [20, 20] });
+    } else {
+      $('#map').hide();
+      $('#datetimeslider').hide();
+      $('#chart').html(`<article class="message is-danger">
+  <div class="message-body">
+    Keine Messpunkte f&uuml;r diese Zeitperiode
+  </div>
+</article>`);
+      $('#chart').show();
     }
-
-    markers = [];
-
-    // we create the layer group with all positions
-    for (let i of datapoints) {
-      unix_timestamp = i[0];
-      date = new Date(unix_timestamp * 1000);
-      markers.push(L.marker([i[1], i[2]], { icon: woBischIcon2 }).bindPopup(moment(date).format('DD.MM.YYYY HH:mm')));
-    }
-    allmarkers = L.layerGroup(markers);
-    if (lcontrol != undefined) {
-      //lcontrol.clearLayers();
-      lcontrol.remove();
-    }
-    lcontrol = L.control.layers({}).addTo(map);
-    lcontrol.addOverlay(allmarkers, 'alle Positionen anzeigen');
-    bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]);
-    map.fitBounds(bounds, { padding: [20, 20] });
   });
 }