{% extends "base.html" %}
{% block head_style %}
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<style>
  .bold {
    font-weight: bold;
  }

  #container {
    height: 400px;
  }

  html,
  body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
  }

  .map {
    height: 100%;
    width: 100%;
  }

  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 300px;
  }

  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .ol-popup-closer:after {
    content: "✖";
  }
</style>
{% endblock %}
{% block head_script %}
<script
  src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
{% endblock %}
{% block content %}
<div id="timeSpan">
  <A HREF="/map?since=72"><span id="H72">72h</span></A>&nbsp;
  <A HREF="/map?since=48"><span id="H48">48h</span></A>&nbsp;
  <A HREF="/map?since=36"><span id="H36">36h</span></A>&nbsp;
  <A HREF="/map?since=24"><span id="H24">24h</span></A>&nbsp;
  <A HREF="/map?since=12"><span id="H12">12h</span></A>&nbsp;
  <A HREF="/map?since=6"><span id="H6">6h</span></A>&nbsp;
  <A HREF="/map?since=3"><span id="H3">3h</span></A>&nbsp;
  <A HREF="/map?since=1"><span id="H1">1h</span></A>&nbsp;
</div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>
{% endblock %}
{% block footer_script %}
<script>
  var lat = {{ nodeInfo['position']['latitude'] }};
  var lon = {{ nodeInfo['position']['longitude'] }};
  var z = 10;
  var myProjectionName = "EPSG:3857";
  var nodes = {{ nodesList | safe }};
  var locations = [];


  function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
        return sParameterName[1];
      }
    }
  }
  var timeSpan = (GetURLParameter('since') ? GetURLParameter('since') : '6');
  for (k = 0; k < nodes.length; k++) {
    if (parseInt(nodes[k][5]) <= parseInt(timeSpan)) {
      locations.push(nodes[k]);
    }
  }

  var selectedSpan = 'H' + timeSpan;
  document.getElementById(selectedSpan).classList.add("bold");


  /**
   * Elements that make up the popup.
   */
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');


  /**
   * Add a click handler to hide the popup.
   * @return {boolean} Don't follow the href.
   */
  closer.onclick = function () {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
  };


  /**
   * Create an overlay to anchor the popup to the map.
   */
  var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  });


  var features = [];
  for (var i = 0; i < locations.length; i++) {
    features.push(coloredSvgMarker([locations[i][2], locations[i][1]], locations[i][0], locations[i][3]));
  }

  var vectorSource = new ol.source.Vector({ // VectorSource({
    features: features
  });

  var vectorLayer = new ol.layer.Vector({ // VectorLayer({
    source: vectorSource
  });

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({ // TileLayer({
        source: new ol.source.OSM()
      }), vectorLayer
    ],
    overlays: [overlay],
    target: 'map',
    view: new ol.View({
      projection: myProjectionName,
      center: ol.proj.fromLonLat([lon, lat]),
      zoom: z
    })
  });

  // make the map's view to zoom and pan enough to display all the points
  //map.getView().fit(vectorSource.getExtent()-5, map.getSize());
  var proj1 = ol.proj.get(myProjectionName);
  var geolocation = new ol.Geolocation({
    projection: myProjectionName,
    tracking: true
  });
  /*geolocation.on('change', function (evt) {
    //console.log(geolocation.getPosition());
    map.getView().setCenter(geolocation.getPosition());
  });*/

  /**
   * Add a click handler to the map to render the popup.
   */
  map.on('singleclick', function (evt) {
    var name = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
      return feature.get('name');
    })
    if (name) {
      var textContent = "";
      for (i = 0; i < locations.length; i++) {
        if (locations[i].indexOf(name) >= 0) {
          textContent = locations[i][4];
        }
      }
      container.style.display = "block";
      var coordinate = evt.coordinate;
      content.innerHTML = textContent;
      overlay.setPosition(coordinate);
    } else {
      container.style.display = "none";
    }
  });
  map.on('pointermove', function (evt) {
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
  });


  function coloredSvgMarker(lonLat, name, color, text) {
    if (!color) color = 'red';
    var feature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat(lonLat)),
      name: name
    });
    var svg = '<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  width="32.000000pt" height="32.000000pt" viewBox="0 0 512.000000 512.000000"  preserveAspectRatio="xMidYMid meet">' +
      '<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="' + color + '">' +
      '<path d="M497 5042 c-230 -330 -376 -714 -429 -1132 -16 -124 -15 -468 1 -595 53 -415 194 -786 428 -1126 37 -55 59 -77 66 -71 7 5 67 50 134 101 l122 91 -74 110 c-174 259 -298 590 -339 905 -21 154 -21 426 0 580 41 314 164 643 338 904 l74 110 -133 100 -134 100 -54 -77z"/>' +
      '<path d="M4434 5019 l-132 -100 74 -110 c129 -193 228 -418 289 -655 46 -178 65 -335 65 -539 0 -204 -19 -361 -65 -539 -61 -238 -161 -464 -290 -656 l-74 -110 122 -91 c67 -51 127 -96 134 -101 7 -6 29 16 66 71 234 340 375 711 428 1126 16 127 17 471 1 595 -45 349 -153 673 -320 960 -48 81 -160 251 -165 249 -1 0 -61 -45 -133 -100z"/>' +
      '<path d="M1313 4457 c-267 -390 -330 -912 -164 -1366 35 -96 116 -252 170 -327 l37 -52 132 99 c86 65 130 104 126 112 -4 7 -20 31 -36 54 -47 69 -116 222 -142 315 -66 229 -59 481 17 703 29 83 85 197 134 272 20 29 34 55 32 57 -17 14 -246 184 -254 188 -5 3 -29 -22 -52 -55z"/>' +
      '<path d="M3634 4423 c-71 -53 -131 -98 -133 -99 -2 -2 12 -28 32 -57 190 -287 246 -645 151 -975 -26 -93 -95 -246 -142 -315 -16 -23 -32 -47 -36 -54 -4 -8 40 -47 126 -112 l132 -99 37 52 c185 258 283 623 258 961 -19 263 -117 544 -258 741 l-38 54 -129 -97z"/>' +
      '<path d="M2485 4110 c-339 -55 -524 -420 -369 -726 36 -72 125 -164 195 -203 l56 -31 -569 -1566 c-313 -861 -568 -1568 -566 -1570 2 -2 65 27 139 65 760 384 1618 384 2378 0 74 -38 137 -67 139 -65 2 2 -253 709 -566 1570 l-569 1566 56 31 c150 83 251 257 251 435 0 299 -282 542 -575 494z m455 -2451 c206 -567 376 -1037 378 -1044 2 -10 -18 -8 -80 7 -444 104 -912 104 -1356 0 -62 -15 -82 -17 -80 -7 8 34 754 2075 758 2075 3 0 174 -464 380 -1031z"/></g></svg>';

    feature.setStyle(
      new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1.0],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
          src: 'data:image/svg+xml,' + escape(svg),
          scale: 0.7,
        }),
        text: new ol.style.Text({
          text: name,
          fill: new ol.style.Fill({ color: 'black' }),
          stroke: new ol.style.Stroke({ color: 'white', width: 1 }),
          font: 'bold 12px Arial, Verdana, Helvetica, sans-serif',
          offsetX: 0,
          offsetY: -40
        })
      })
    );
    return feature;
  }
</script>
{% endblock %}