wo-bisch-web/static/js/map.js

var urlParams = new URLSearchParams(window.location.search);
var deveui = urlParams.get('deveui');
var start = urlParams.get('start');
var stop = urlParams.get('stop');
var lon = urlParams.get('lon');
var lat = urlParams.get('lat');
var map;
var last_slider_position;

if (start == null) {
  var dstart = moment({hour: 0});
  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
}

if (stop == null) {
  var dstop = moment();
  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
}

var datapoints;

function vbat2icon(level) {
    switch (level) {
      case 1:
        fa_battery_string = "fa-battery-empty";
        icon_color = "has-text-danger";
        break;
      case 2:
        fa_battery_string = "fa-battery-quarter";
        icon_color = "has-text-warning";
        break;
      case 3:
        fa_battery_string = "fa-battery-half";
        icon_color = "has-text-info";
        break;
      case 4:
        fa_battery_string = "fa-battery-three-quarters";
        icon_color = "has-text-link";
        break;
      case 5:
        fa_battery_string = "fa-battery-full";
        icon_color = "has-text-success";
        break;
      default:
        fa_battery_string = "fa-battery-slash";
        icon_color = "has-text-danger";
    }

    return '<span class="icon ' + icon_color + '"><i class="fas ' + fa_battery_string + '"></i></span>';
}

function refreshDatapoints(deveui, start, stop) {
  range = ""
  range = range + "&start=" + start;
  range = range + "&stop=" + stop;

  $.getJSON('https://wo-bisch.ch/metrics?deveui=' + deveui + range, function(mydata) {
    if ("msg" in mydata) {
      if (mydata.msg.includes("expired")) {
        $('#chart').html(`<article class="message is-danger">
  <div class="message-body">
    Abo ist abgelaufen
  </div>
</article>`);
      } else if (mydata.msg.includes("error:")) {
        $('#myselectors').hide();
        $('#chart').html(`<article class="message is-danger">
  <div class="message-body">
    Fehler im Aufruf
  </div>
</article>`);
      } else {
        location.reload(true);
      }
      return;
    }

    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);
    
    var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[datapoints.length - 1][4]) + ' (' + datapoints[datapoints.length - 1][3] + ' mV)';
    console.log(myhtml);
    $('#tooltiptext').html(myhtml);
  });
}

var myfeature;

$(document).ready(function() {
  var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
  
  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
  map = new ga.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      center: position,
      resolution: 20
    })
  });
  
  // Create the layer with the icon
  myfeature = new ol.Feature({
        geometry: new ol.geom.Point(position)
      })
  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [myfeature]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '/static/images/marker.png'
      })
    })
  });
  map.addLayer(vectorLayer);

  $('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY'));

  refreshDatapoints(deveui,start,stop);
  console.log("End of document ready...");
});


$(function() {
    var start = moment({hour: 0});
    var end = moment();
    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');

    console.log("XXX: "+start.format());

    function cb(start, end) {
        $('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
        console.log("Start: " + s_start + ' End: ' + s_end);
        //drawGraph(deveui, alias, property, s_start,s_end, false);
        refreshDatapoints(deveui, s_start, s_end);
    }

    $('#reportrange').daterangepicker({
        startDate: start.local(),
        endDate: end.local(),
        regional: [ "de" ],
        "locale": {
            format: 'DD.MM.YYYY',
            "separator": " - ",
            "applyLabel": "Anwenden",
            "cancelLabel": "Abbrechen",
            "fromLabel": "Von",
            "toLabel": "Bis",
            customRangeLabel: 'Benutzerdefiniert',
            "weekLabel": "W",
            "daysOfWeek": [
                "So",
                "Mo",
                "Di",
                "Mi",
                "Do",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "Jan",
                "Feb",
                "M&auml;r",
                "Apr",
                "Mai",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Okt",
                "Nov",
                "Dez"
            ],
            "firstDay": 1
        },
        ranges: {
           'Heute': [moment(), moment()],
           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    //cb(start, end);

});


function updateSliderTooltip(c)
{
  if (datapoints.length == 0) {
     return
  }
  if (c.value == last_slider_position) {
    // we don't do anything if slider position did not change...
    return
  }

  last_slider_position = c.value;
  console.log("Slider position changed...");
  var unix_timestamp = datapoints[c.value][0];
  var date = new Date(unix_timestamp * 1000);
  var myhtml = '<p>' + moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[c.value][4]) + ' (' + datapoints[c.value][3] + ' mV)</p>';
  $('#tooltiptext').html(myhtml);
  console.log(myhtml);

  var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
  console.log(position);
  myfeature.setGeometry(new ol.geom.Point(position));
}