implement greenzone feature, step 2

snippets/map.html

@@ -23,9 +23,9 @@
   <div class="modal-background"></div>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title">Koordinaten als gr&uuml;ne Zone &uuml;bernehmen?</p>
+      <p class="modal-card-title">Folgende Koordinaten als gr&uuml;ne Zone &uuml;bernehmen?</p>
     </header>
-    <div class="modal-card-body">
+    <div id="yesnomodalbody" class="modal-card-body">
       <!-- Content ... -->
     </div>
     <footer class="modal-card-foot">

snippets/tracker.html

@@ -68,7 +68,10 @@
       </div>
 
       <div class="field">
-        <label class="label">Koordination Gr&uuml;ne Zone</label>
+        <label class="label">Koordination Gr&uuml;ne Zone (Optional)</label>
+        <div class="is-size-7 mb-4">
+Bei Verlassen der gr&uuml;nen Zone wird ein Alarm ausgel&ouml;st. Die gr&uuml;ne Zone wird am einfachsten definiert, indem der gew&uuml;nschte Bereich in der Kartenansicht bei gedr&uuml;ckter Ctrl-Taste markiert wird.
+        </div>
         <div class="control has-icons-right">
           <input id="greenzone" class="input" type="text" maxlength="50"> <span id="greenzone_exclamation" class="icon is-small is-right">
             <i class="fas fa-exclamation-triangle"></i>
@@ -149,14 +152,14 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
   <p id="emailalarmactive_{{.Deveui}}" hidden>{{.Emailalarmactive}}</p>
   <p id="email_{{.Deveui}}" hidden>{{.Email}}</p>
   <p id="greenzone_{{.Deveui}}" hidden>{{.Greenzone}}</p>
-  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
+  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Position: {{.Timestamp}}</p>
   <p id="batpercent_{{.Deveui}}" class="has-text-centered">{{.BatteryPercentHTML}}</p>
   <div id="{{.Deveui}}" class="columns mt-3">
     <p id="lat" hidden>{{.Lat}}</p>
     <p id="lon" hidden>{{.Lon}}</p>
     <div class="column is-one-quarter"></div>
     <div class="column is-half">
-      <a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}&lat={{.Lat}}&lon={{.Lon}}">
+      <a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}{{ if ne .Greenzone "" }}&greenzone={{.Greenzone}}{{end}}">
         <div id="map_{{.Deveui}}" class="map"></div>
       </a>
     </div>

static/js/map.js

@@ -1,8 +1,6 @@
 var urlParams = new URLSearchParams(window.location.search);
 var deveui = urlParams.get('deveui');
 var alias = urlParams.get('alias');
-var lon = urlParams.get('lon');
-var lat = urlParams.get('lat');
 var map;
 var lcontrol;
 var last_slider_position;
@@ -12,14 +10,14 @@ var allmarkers = L.layerGroup();
 var woBischIcon = L.icon({
   iconUrl: '/static/images/marker.png',
   iconSize: [64, 64],
-  iconAnchor: [32, 32],
+  iconAnchor: [32, 64],
   popupAnchor: [0, -64]
 });
 var datapoints;
 var woBischIcon2 = L.icon({
   iconUrl: '/static/images/marker-all.png',
   iconSize: [64, 64],
-  iconAnchor: [32, 32],
+  iconAnchor: [32, 64],
   popupAnchor: [0, -64]
 });
 var bounds;
@@ -101,7 +99,7 @@ function refreshDatapoints(deveui, start, stop) {
       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();
+      //marker.bindPopup(myhtml).openPopup();
 
       if (allmarkers !== undefined) {
         map.removeLayer(allmarkers);
@@ -113,8 +111,15 @@ function refreshDatapoints(deveui, start, stop) {
       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')));
+        markers.push(L.marker([i[1], i[2]], { icon: woBischIcon2, zIndexOffset: 1000 }).bindPopup(moment(date).format('DD.MM.YYYY HH:mm')));
+        lat = i[1];
+        lon = i[2];
       }
+
+      if (markers.length > 0) {
+        marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map);
+      }
+
       allmarkers = L.layerGroup(markers);
       if (lcontrol != undefined) {
         //lcontrol.clearLayers();
@@ -124,6 +129,7 @@ function refreshDatapoints(deveui, start, stop) {
       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: [15, 15] });
+      marker.bindPopup(myhtml).openPopup();
     } else {
       $('#map').hide();
       $('#datetimeslider').hide();
@@ -137,8 +143,36 @@ function refreshDatapoints(deveui, start, stop) {
   });
 }
 
+function SetGreenzonePrecision(gz,i) {
+    var coords = gz.split(",",4);
+    return parseFloat(coords[0]).toFixed(i)+','+parseFloat(coords[1]).toFixed(i)+','+parseFloat(coords[2]).toFixed(i)+','+parseFloat(coords[3]).toFixed(i);
+}
+
+function updateURLParameter(url, param, paramVal){
+    var newAdditionalURL = "";
+    var tempArray = url.split("?");
+    var baseURL = tempArray[0];
+    var additionalURL = tempArray[1];
+    var temp = "";
+    if (additionalURL) {
+        tempArray = additionalURL.split("&");
+        for (var i=0; i<tempArray.length; i++){
+            if(tempArray[i].split('=')[0] != param){
+                newAdditionalURL += temp + tempArray[i];
+                temp = "&";
+            }
+        }
+    }
+
+    var rows_txt = temp + "" + param + "=" + paramVal;
+    return baseURL + "?" + newAdditionalURL + rows_txt;
+}
+
 $(document).ready(function () {
-  var greenzone = "";
+  var greenzone = urlParams.get('greenzone');
+  if (greenzone == null) {
+     greenzone = "";
+  }
   $("#modal-yes").click(function () {
     $("#yesnomodal").removeClass("is-active");
     $.ajax({
@@ -153,10 +187,10 @@ $(document).ready(function () {
         if (response.rc == 0) {
            $('#greenzone_'+$('#deveui').html()).html($('#greenzone').val());
         }
+        location.reload();
       },
       error: function (xhr) {
         //Do Something to handle error
-        console.log("Somethin went wrong in ajax save_tracker_greenzone...");
       }
     });
   });
@@ -178,7 +212,18 @@ $(document).ready(function () {
   map.setMinZoom(map.getBoundsZoom(map.options.maxBounds));
 
   map.on('areaselected', (e) => {
-    greenzone = (e.bounds.toBBoxString()); // lon, lat, lon, lat
+    greenzone = SetGreenzonePrecision(e.bounds.toBBoxString(),5); // lon, lat, lon, lat
+
+    // Construct URLSearchParams object instance from current URL querystring.
+    var queryParams = new URLSearchParams(window.location.search);
+ 
+    // Set new or modify existing parameter value. 
+    queryParams.set("greenzone", greenzone);
+ 
+    // Replace current querystring with the new one.
+    history.replaceState(null, null, "?"+queryParams.toString());
+    
+    $("#yesnomodalbody").html(greenzone);
     $("#yesnomodal").addClass("is-active");
   });
 
@@ -194,13 +239,26 @@ $(document).ready(function () {
     updateSliderTooltip(this);
   });
 
+  $( "#datetimeslider" ).bind('mouseup', function( event ) {
+    updateSliderTooltip(this);
+  });
+
   var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
   var tilelayer = new L.tileLayer(url);
   map.attributionControl.setPrefix('Source: Swiss Federal Office of Topography')
   map.addLayer(tilelayer);
-  marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map);
+  //marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map);
+
   $('#reportrange span').html(moment(s_start).locale('de').format('D. MMM YYYY') + ' - ' + moment(s_stop).locale('de').format('D. MMM YYYY'));
 
+  if (greenzone != "") {
+    var coords = greenzone.split(",",4);
+    var latlngs = [[coords[1], coords[0]], [coords[3], coords[2]]];
+    var rectOptions = {color: 'Green', weight: 1}
+    var rectangle = L.rectangle(latlngs, rectOptions);
+    rectangle.addTo(map);
+  }
+
   refreshDatapoints(deveui, s_start, s_stop);
 });
 
@@ -287,4 +345,5 @@ function updateSliderTooltip(c) {
   var lng = datapoints[c.value][2];
   var newLatLng = new L.LatLng(lat, lng);
   marker.setLatLng(newLatLng);
+  //console.log("updateSliderTooltip", datapoints[c.value][1], datapoints[c.value][2]);
 }