Revize e6097215

Feature Re #8189 visible and updated popup

website/public/js/zcu-heatmap.js

@@ -24 +24 @@
 var isAnimationRunning = false
 var data = []
 
+//
+// info = {
+//  DATASETNAME: {
+//    items: Array,
+//    number: Number,
+//    datasetName: String
+// }
+// }
+//
 var info = []
 let currentInfo = 0
 
@@ -49 +58 @@
 // key: x and y, x + '' + y string
 let globalMarkersChanged = {}
 
+const globalPopup = {
+  coord: {
+    lat: 0,
+    lng: 0
+  },
+  _popup: null
+}
+const setGlobalPopupContent = (content) => {
+  globalPopup._popup.setContent(content)
+  globalPopup._popup.openOn(mymap)
+}
+const disablePopupControls = () => {
+  $('#previous-info-btn').prop('disabled', true)
+  $('#next-info-btn').prop('disabled', true)
+  $('.popup-controls').hide()
+}
+
+const areSameCoord = (first, second) => {
+  return first.lat === second.lat && first.lng === second.lng
+}
+
 const loadingCallbackNested = (func, delay) => {
   setTimeout(() => {
     func(loading)
@@ -128 +158 @@
 const genPopUpControlButtons = (currentPage, numPages, onNextClick, onPreviousClick) => ({
   previousButton: '<button id="previous-info-btn" class="circle-button" onclick="previousInfo()"></button>',
   nextButton: '<button id="next-info-btn" class="circle-button next" onclick="nextInfo()"></button>',
-  posInfo: `<div id="count-info">${currentPage} z ${numPages}</div>`
+  posInfo: `<div id="pages">${currentPage} z ${numPages}</div>`
 })
 
 const genPopUpControls = (controls) => {
@@ -137 +167 @@
 
 const genMultipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
   const popupHeader = `<strong id="dataset-info">${datasetName}</strong>`
-  const popupData = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
+  const popupData = `<div id="number-info"><span id="current-number">${sum}</span></div>`
   const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
 
   return `
@@ -152 +182 @@
   className: className
 }).setLatLng([lat / num, lng / num])
 
-const genPopUp = (datasetName, place, count, sum, currentPos, maxPos) => {
+const genPopUp = (datasetName, place, currentCount, sum, currentPos, maxPos) => {
   const popupHeader = `
     <strong>${datasetName}</strong>
     <div id="place-info">${place}</div>`
   const popupData = `
     <div id="number-info">
-      <span id="digit-info">${count}</span>
-      <span id="total-info">${(sum && (sum != count)) ? '/' + sum : ''}</span>
+      <span id="current-number">${currentCount}</span>
+      <span id="part-info">${(sum && (sum !== Number(currentCount))) ? '/' + sum : ''}</span>
     </div>`
   const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
 
@@ -172 +202 @@
 
 const onCheckboxClicked = async (checkbox) => {
   if ($(checkbox).prop('checked')) {
-    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
-    changeUrl()
+    await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
   } else {
     loadCheckboxDatasetNameData()
 
@@ -185 +214 @@
       })
       drawHeatmap(data[currentTime])
     })
-
-    changeUrl()
   }
+  updatePopup()
+  changeUrl()
 }
 
 const onArrowLeftRightKeysDownRegister = () => {
@@ -251 +280 @@
     maxZoom: 19
   }).addTo(mymap)
 
-  mymap.on('click', showInfo)
+  mymap.on('click', function (e) { showInfo(e) })
 }
 
 const getInfoLength = () => {
@@ -276 +305 @@
 function showInfo (e) {
   info = []
   currentInfo = 0
+  const currentPos = 1
 
   // https://wiki.openstreetmap.org/wiki/Zoom_levels
   // Todo change to variable - it is used in heatmap init
@@ -289 +319 @@
   let total = 0
 
   const datasetsInRadius = {}
-
+  const eventCoord = {
+    lng: e.latlng.lng,
+    lat: e.latlng.lat
+  }
   Object.keys(data[currentTime]).forEach((key) => {
     const namedData = data[currentTime][key]
     namedData.items.forEach(element => {
@@ -303 +336 @@
       }
     })
   })
-
   // Process info for more then one dataset
-
   info = info.reduce((acc, item) => {
     if (!acc[item.datasetName]) {
       acc[item.datasetName] = {
@@ -319 +350 @@
     acc[item.datasetName].number += Number(item.number)
     return acc
   }, {})
-
   // There is one dataset
 
   const numDatasets = Object.keys(datasetsInRadius).length
-
   if (!numDatasets) {
+    if (mymap._popup) {
+      $('#part-info').text('')
+      $('#current-number').html(0)
+      disablePopupControls()
+    }
+
     return
   }
-
   if (numDatasets === 1) {
     const infoDict = getElFromObjectInfo(0)
     const info_ = infoDict.items
     const { place, number } = info_[currentInfo]
-    prepareLayerPopUp(lat, lng, i, `popup-${infoDict.datasetName}`)
-      .setContent(genPopUp(datasetDictNameDisplayName[infoDict.datasetName], place, number, total, currentInfo + 1, info_.length))
-      .openOn(mymap)
+
+    if (!globalPopup._popup || !areSameCoord(globalPopup.coord, eventCoord)) {
+      globalPopup._popup = prepareLayerPopUp(lat, lng, i, `popup-${infoDict.datasetName}`)
+      globalPopup.coord = eventCoord
+    }
+
+    setGlobalPopupContent(genPopUp(datasetDictNameDisplayName[infoDict.datasetName], place, number, total, currentPos, info_.length))
 
     if (info_.length === 1) {
-      $('#previous-info-btn').prop('disabled', true)
-      $('#next-info-btn').prop('disabled', true)
-      $('.popup-controls').hide()
+      disablePopupControls()
     }
   } else {
     const { datasetName, number } = getElFromObjectInfo(currentInfo)
 
-    prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
-      .setContent(genMultipleDatasetsPopUp(number, currentInfo + 1, getInfoLength(), datasetDictNameDisplayName[datasetName]))
-      .openOn(mymap)
+    if (!globalPopup._popup || !areSameCoord(globalPopup.coord, eventCoord)) {
+      globalPopup._popup = prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
+      globalPopup.coord = eventCoord
+    }
+
+    setGlobalPopupContent(genMultipleDatasetsPopUp(number, currentPos, getInfoLength(), datasetDictNameDisplayName[datasetName]))
   }
 }
 
@@ -379 +418 @@
   }
 
   $('#place-info').html(info_.place ? info_.place : info_.datasetName)
-  $('#digit-info').html(info_.number)
-  $('#count-info').html(currentInfo + 1 + ' z ' + infoLength)
+  $('#current-number').html(info_.number)
+  $('#pages').html(currentInfo + 1 + ' z ' + infoLength)
 
   $('.leaflet-popup').removeClass(`popup-${previousInfo.datasetName}`)
   $('.leaflet-popup').addClass(`popup-${info_.datasetName}`)
@@ -418 +457 @@
 
   currentTime = (currentTime + 23) % 24
   changeHour(currentTime)
-  mymap.closePopup()
+  // mymap.closePopup()
   if (!lockedDay && (currentTime === 23)) {
     addDayToCurrentDate(-1)
     await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
   } else {
     drawHeatmap(data[currentTime])
   }
+  updatePopup()
 }
 
 async function next () {
@@ -434 +474 @@
 
   currentTime = (currentTime + 1) % 24
   changeHour(currentTime)
-  mymap.closePopup()
   if (!lockedDay && (currentTime === 0)) {
     addDayToCurrentDate(1)
     await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
   } else {
     drawHeatmap(data[currentTime])
   }
+  updatePopup()
 }
 
 /**
@@ -490 +530 @@
   updateHeaderControls()
   setTimeline()
   changeUrl()
+  updatePopup()
 }
 
+const updatePopup = () => {
+  const { _popup } = mymap
+  if (_popup) {
+    showInfo({
+      latlng: _popup.getLatLng()
+    }
+    )
+  }
+}
 /**
  * Load and display heatmap layer for current data
  * @param {string} opendataRoute route to dataset source
@@ -518 +568 @@
   })
 
   loadingY(loaderDelay)
-  Promise.all(allPromises).then(
+  await Promise.all(allPromises).then(
     () => {
       loadingN(0)
       drawDataSourceMarks(dataSourceMarks)
@@ -594 +644 @@
         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
+          // There is data for this marker => unbind popup with zero value
           holder[0] = holder[0].unbindPopup()
           globalMarkersChanged[key] = holder
         }