Revize 084a5972

Re #8092 redesign of markers with popups and little refactor

website/public/js/zcu-heatmap.js

@@ -15 +15 @@
 var isAnimationRunning = false;
 var data = [];
 
-
-
+// holds all instances of markers for bind/unbind popup purpose
+// contains: {key:[L.circle,L.pupup]}
+// key: x and y, x + '' + y string
+const globalMarkersHolder = {};
+
+//all marker from which popup was removed 
+// contains: {key:[L.circle,L.pupup]}
+// key: x and y, x + '' + y string
+let globalMarkersChanged = {};
+
+const genPopUpControls = (controls) => {
+  return `<div class="popup-controls">${controls.reduce((sum, item) => sum + item, '')}</div>`
+}
+const genPopUp = (place, number, sum, currentPos, maxPos) => {
+  const header = `<strong>Zařízení a počet:</strong><div id="place-info">${place}</div>`;
+  const currentNum = `<span id="digit-info">${number}</span>`;
+  const sumNum = `<span id="total-info" style="font-size: large">${sum ? '/'+sum : '' }</span>`;
+  const digitInfo = `<div id="number-info">${currentNum}${sumNum}</div>`;
+  let previousButton = `<button id="previous-info-btn" class="circle-button" onclick="previousInfo()"></button>`;
+  let nextButton = `<button id="next-info-btn" onclick="nextInfo()" class="circle-button next"></button>`;
+  let posInfo = `<div id="count-info">${currentPos} z ${maxPos}</div>`;
+
+  if (!sum) {
+    previousButton = '';
+    nextButton = '';
+    posInfo = '';
+  }
+  return `
+  ${header}
+  ${digitInfo}
+  ${genPopUpControls([previousButton, posInfo, nextButton])}
+  `
+}
 function initMap() {
   mymap = L.map('heatmap').setView([startX, startY], startZoom);
 
@@ -60 +91 @@
 
   
   if (info.length > 0) {
+    const { place, number } = info[currenInfo];
     var popup = L.popup({
       autoPan: false
                   })
                   .setLatLng([lat / i, lng / i])
-                  .setContent('<strong>Zařízení a počet:</strong><div id=\'place-info\'>' + info[currenInfo].place + '</div>' +
-                              '<div id=\'number-info\'><span id=\'digit-info\'>' + info[currenInfo].number + '</span>' + '<span id=\'total-info\' style="font-size: large">/' + total +'</span></div>' + 
-                              '<div class=\'popup-controls\'>' +
-                                '<button id=\'previous-info-btn\' class=\'circle-button\' onclick=\'previousInfo()\'></button>' +
-                                '<div id=\'count-info\'>' + (currenInfo + 1) + ' z ' + info.length + '</div>' +
-                                '<button id=\'next-info-btn\' onclick=\'nextInfo()\' class=\'circle-button next\'></button>' +
-                              '</div>'
-                              )
+                  .setContent(genPopUp(place, number, total, currenInfo+1,info.length))
                   .openOn(mymap);
     
     if (info.length == 1) {
@@ -167 +192 @@
   date = $('#date').val()
   currentTime = parseInt($('#time').children("option:selected").val());
   setTimeline();
-
-  $.ajax({
-    type: "POST",
-    url: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
-    success: function(result) {
-      data[currentTime] = result;
-      drawHeatmap(data[currentTime]);
-    }
-  });
-
   $.ajax({
     type: 'POST',
     url: positionsRoute + '/' + name,
     success: function(result) {
-      drawDataSourceMarks(result)
+      drawDataSourceMarks(result);
+      $.ajax({
+        type: "POST",
+        url: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
+        success: function(result) {
+          data[currentTime] = result;
+          drawHeatmap(data[currentTime]);
+        }
+      })
     }
   });
 
@@ -191 +214 @@
 }
 
 function drawDataSourceMarks(data) {
-
   if (marksLayer != null) {
     L.removeLayer(marksLayer);
   }
-
   marksLayer = L.layerGroup();
   for (var key in data) {
-    marksLayer.addLayer(L.circle([data[key]['x'], data[key]['y']], {radius: 1, color: 'black'}));
+    const {x,y,name} = data[key];
+    const pop = 
+      L.popup({autoPan: false})
+        .setLatLng([x, y])
+        .setContent(genPopUp(name, 0, 0, 1,1));
+    const newCircle = 
+      L.circle([x, y], {radius: 2,fillOpacity: 0.8, color: '#004fb3',fillColor: '#004fb3', bubblingMouseEvents: true})
+        .bindPopup(pop);
+    globalMarkersHolder[x+''+y] = [newCircle, pop]; //add new marker to global holders
+    marksLayer.addLayer(
+      newCircle
+    );
   }
 
-  marksLayer.addTo(mymap);
+  marksLayer.setZIndex(-1).addTo(mymap);
 
 }
 
@@ -226 +258 @@
 
   // Todo still switched
   if (data['items'] != null) {
-    points = data['items'].map(function (p) { return [p['x'], p['y'], p['number']]; });
+    //Bind back popups for markers (we dont know if there is any data for this marker or not)
+    if (Object.keys(globalMarkersChanged).length){
+      Object.keys(globalMarkersChanged).forEach(function(key) {
+        globalMarkersChanged[key][0].bindPopup(globalMarkersChanged[key][1]);
+    });
+      globalMarkersChanged = {};
+    }
+    points = data['items'].map((point) => { 
+      const {x,y,number} = point;
+      const key = x+''+y;
+      const holder = globalMarkersHolder[key];
+      if (!globalMarkersChanged[key] && number){
+        //There is data for this marker => unbind popup with zero value
+        holder[0] = holder[0].unbindPopup();
+        globalMarkersChanged[key] = holder;
+      }
+      return [x, y, number]; 
+    });
     if (heatmapLayer != null) {
       mymap.removeLayer(heatmapLayer);
     }