Revize 1a1d8f64

Re #8163 - refactoring

website/public/js/zcu-heatmap.js

@@ -34 +34 @@
 // }
 //
 var info = []
-let currentInfo = 0
+let currentPageInPopup = 0
 
 // dictionary for names of datasets
 const datasetDictNameDisplayName = {}
@@ -65 +65 @@
   },
   _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)
+  $('#btn-previous-page').prop('disabled', true)
+  $('#btn-next-page').prop('disabled', true)
   $('.popup-controls').hide()
 }
 
@@ -87 +89 @@
     }
   }, delay)
 }
+
 const loadingY = (delay = defaultLoaderDelay) => {
   loading++
   // check after nms if there is something that is loading
   loadingCallbackNested(() => loadingCallbackNested((isLoading) => loadingTimeline(isLoading), delay))
 }
+
 const loadingN = (delay = defaultLoaderDelay) => {
   loading--
   loadingCallbackNested(() => loadingCallbackNested((isLoading) => loadingTimeline(isLoading)), delay)
@@ -106 +110 @@
 }
 
 const changeCurrentDate = (date = null) => {
-  if (date) {
-    currentDate = new Date(date)
-  } else {
-    currentDate = new Date($('#date').val())
-  }
+  const dateInput = $('#date')
+  currentDate = new Date(date ? date : dateInput.val())
 
-  $('#date').val(currentDateToString())
+  dateInput.val(currentDateToString())
   $('#player-date span').html(`${currentDate.getDate()}. ${currentDate.getMonth() + 1}. ${currentDate.getFullYear()}`)
 
   data = []
 }
+
 const currentDayToString = () => {
   const day = currentDate.getDate()
   return day > 9 ? `${day}` : `0${day}`
 }
+
 const currentMonthToString = () => {
   const month = currentDate.getMonth() + 1
   return month > 9 ? `${month}` : `0${month}`
 }
+
 const currentDateToString = () => `${currentDate.getFullYear()}-${currentMonthToString()}-${currentDayToString()}`
+
 const addDayToCurrentDate = (day) => {
   currentDate.setDate(currentDate.getDate() + day)
   changeCurrentDate(currentDate)
 }
+
 const toggleDayLock = () => {
   lockedDay = !lockedDay
   $('#player-date').toggleClass('lock')
@@ -142 +148 @@
     headers: headers
   })
   const beforeJson = await fetch(myRequest)
+
   return beforeJson.json()
 }
 
@@ -152 +159 @@
     headers: headers
   })
   const beforeJson = await fetch(myRequest)
+
   return beforeJson.json()
 }
 
-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="pages">${currentPage} z ${numPages}</div>`
+const getPaginationButtonsInPopup = (currentPage, countPages) => ({
+  previousButton: '<button id="btn-previous-page" class="circle-button" onclick="setPreviousPageInPopup()"></button>',
+  pagesList: `<div id="pages">${currentPage} z ${countPages}</div>`,
+  nextButton: '<button id="btn-next-page" class="circle-button next" onclick="setNextPageInPopup()"></button>'
 })
 
 const genPopUpControls = (controls) => {
   return `<div class="popup-controls">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
 }
 
-const genMultipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
-  const popupHeader = `<strong id="dataset-info">${datasetName}</strong>`
+const genMultipleDatasetsPopUp = (sum, currentPage, countPages, datasetName) => {
+  const popupHeader = `<strong id="dataset-name">${datasetName}</strong>`
   const popupData = `<div id="number-info"><span id="current-number">${sum}</span></div>`
-  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
+  const { previousButton, nextButton, pagesList } = getPaginationButtonsInPopup(currentPage, countPages)
 
   return `
   ${popupHeader}
   ${popupData}
-  ${genPopUpControls([previousButton, posInfo, nextButton])}
+  ${genPopUpControls([previousButton, pagesList, nextButton])}
   `
 }
 
@@ -182 +190 @@
   className: className
 }).setLatLng([lat / num, lng / num])
 
-const genPopUp = (datasetName, place, currentCount, sum, currentPos, maxPos) => {
+const getPopupContent = (datasetName, placeName, currentCount, sum, currentPage, countPages) => {
   const popupHeader = `
     <strong>${datasetName}</strong>
-    <div id="place-info">${place}</div>`
+    <div id="place-name">${placeName}</div>`
   const popupData = `
     <div id="number-info">
       <span id="current-number">${currentCount}</span>
-      <span id="part-info">${(sum && (sum !== Number(currentCount))) ? '/' + sum : ''}</span>
+      <span id="part-info">${(sum && sum !== Number(currentCount)) ? '/' + sum : ''}</span>
     </div>`
-  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
+  const { previousButton, nextButton, pagesList } = getPaginationButtonsInPopup(currentPage, countPages)
 
   return `
   ${popupHeader}
   ${popupData}
-  ${genPopUpControls(maxPos > 1 ? [previousButton, posInfo, nextButton] : null)}
+  ${genPopUpControls(countPages > 1 ? [previousButton, pagesList, nextButton] : null)}
   `
 }
 
@@ -212 +220 @@
           delete data[index][datasetName]
         }
       })
+
       drawHeatmap(data[currentTime])
     })
   }
+
   updatePopup()
-  changeUrl()
+  changeUrlParameters()
 }
 
 const onArrowLeftRightKeysDownRegister = () => {
@@ -247 +257 @@
   $('#date').change(function () {
     changeCurrentDate($(this).val())
     loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
-    changeUrl()
+    changeUrlParameters()
   })
 
   $('#dropdown-time input[type="radio"]').each(function () {
@@ -283 +293 @@
   mymap.on('click', function (e) { showInfo(e) })
 }
 
-const getInfoLength = () => {
+const getCountPagesInPopup = () => {
   const infoKeys = Object.keys(info)
   if (infoKeys.length === 1) {
     // return number of records in one dataset (one dataset in area)
@@ -304 +314 @@
 
 function showInfo (e) {
   info = []
-  currentInfo = 0
-  const currentPos = 1
+  currentPageInPopup = 0
 
   // https://wiki.openstreetmap.org/wiki/Zoom_levels
   // Todo change to variable - it is used in heatmap init
@@ -336 +345 @@
       }
     })
   })
+
   // Process info for more then one dataset
   info = info.reduce((acc, item) => {
     if (!acc[item.datasetName]) {
@@ -353 +363 @@
   // There is one dataset
 
   const numDatasets = Object.keys(datasetsInRadius).length
+
   if (!numDatasets) {
     if (mymap._popup) {
       $('#part-info').text('')
@@ -362 +373 @@
 
     return
   }
+
   if (numDatasets === 1) {
     const infoDict = getElFromObjectInfo(0)
     const info_ = infoDict.items
-    const { place, number } = info_[currentInfo]
+    const { place, number } = info_[currentPageInPopup]
 
     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))
+    setGlobalPopupContent(getPopupContent(datasetDictNameDisplayName[infoDict.datasetName], place, number, total, 1, info_.length))
 
     if (info_.length === 1) {
       disablePopupControls()
     }
   } else {
-    const { datasetName, number } = getElFromObjectInfo(currentInfo)
+    const { datasetName, number } = getElFromObjectInfo(currentPageInPopup)
 
     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]))
+    setGlobalPopupContent(genMultipleDatasetsPopUp(number, 1, getCountPagesInPopup(), datasetDictNameDisplayName[datasetName]))
   }
 }
 
 // eslint-disable-next-line no-unused-vars
-function previousInfo () {
-  const infoLength = getInfoLength()
-  const previousCurrentInfo = currentInfo
+function setPreviousPageInPopup () {
+  const countPagesInPopup = getCountPagesInPopup()
+  const newPage = currentPageInPopup
 
-  currentInfo = (currentInfo + infoLength - 1) % infoLength
-  displayInfoText(previousCurrentInfo)
+  currentPageInPopup = (currentPageInPopup + countPagesInPopup - 1) % countPagesInPopup
+  setPageContentInPopup(newPage)
 }
 
 // eslint-disable-next-line no-unused-vars
-function nextInfo () {
-  const infoLength = getInfoLength()
-  const previousCurrentInfo = currentInfo
+function setNextPageInPopup () {
+  const countPagesInPopup = getCountPagesInPopup()
+  const newPage = currentPageInPopup
 
-  currentInfo = (currentInfo + 1) % infoLength
-  displayInfoText(previousCurrentInfo)
+  currentPageInPopup = (currentPageInPopup + 1) % countPagesInPopup
+  setPageContentInPopup(newPage)
 }
 
-function displayInfoText (previousInfoNum) {
-  const previousInfo = hasInfoMultipleDatasets() ? getElFromObjectInfo(previousInfoNum) : getElFromObjectInfo(0).items[previousInfoNum]
-  const info_ = hasInfoMultipleDatasets() ? getElFromObjectInfo(currentInfo) : getElFromObjectInfo(0).items[currentInfo]
-  const infoLength = getInfoLength()
-  const datasetInfo = $('#dataset-info')
+function setPageContentInPopup (page) {
+  const previousPageData = hasInfoMultipleDatasets() ? getElFromObjectInfo(page) : getElFromObjectInfo(0).items[page]
+  const currentPageData = hasInfoMultipleDatasets() ? getElFromObjectInfo(currentPageInPopup) : getElFromObjectInfo(0).items[currentPageInPopup]
+  const datasetName = $('#dataset-name')
 
-  if (datasetInfo) {
-    $(datasetInfo).html(datasetDictNameDisplayName[info_.datasetName])
+  if (datasetName) {
+    datasetName.html(datasetDictNameDisplayName[currentPageData.datasetName])
   }
 
-  $('#place-info').html(info_.place ? info_.place : info_.datasetName)
-  $('#current-number').html(info_.number)
-  $('#pages').html(currentInfo + 1 + ' z ' + infoLength)
+  $('#place-name').html(currentPageData.place ? currentPageData.place : currentPageData.datasetName)
+  $('#current-number').html(currentPageData.number)
+  $('#pages').html(currentPageInPopup + 1 + ' z ' + getCountPagesInPopup())
 
-  $('.leaflet-popup').removeClass(`popup-${previousInfo.datasetName}`)
-  $('.leaflet-popup').addClass(`popup-${info_.datasetName}`)
+  $('.leaflet-popup').removeClass(`popup-${previousPageData.datasetName}`).addClass(`popup-${currentPageData.datasetName}`)
 }
 
 // eslint-disable-next-line no-unused-vars
@@ -430 +440 @@
   localStorage.setItem('lat', latitude)
   localStorage.setItem('lng', longitude)
   localStorage.setItem('zoom', zoom)
+
   mymap.setView([latitude, longitude], zoom)
 }
 
@@ -438 +449 @@
  */
 // eslint-disable-next-line no-unused-vars
 function changeAnimationState () {
+  const btnAnimate = $('#animate-btn')
+
   isAnimationRunning = !isAnimationRunning
 
   if (isAnimationRunning) {
-    $('#animate-btn').removeClass('play').addClass('pause')
+    btnAnimate.removeClass('play').addClass('pause')
     timer = setInterval(function () { next() }, 800)
   } else {
     clearTimeout(timer)
-    $('#animate-btn').removeClass('pause').addClass('play')
+    btnAnimate.removeClass('pause').addClass('play')
   }
 }
 
@@ -457 +470 @@
 
   currentTime = (currentTime + 23) % 24
   changeHour(currentTime)
-  // mymap.closePopup()
-  if (!lockedDay && (currentTime === 23)) {
+  
+  if (!lockedDay && currentTime === 23) {
     addDayToCurrentDate(-1)
     await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
   } else {
     drawHeatmap(data[currentTime])
   }
+
   updatePopup()
 }
 
@@ -474 +488 @@
 
   currentTime = (currentTime + 1) % 24
   changeHour(currentTime)
-  if (!lockedDay && (currentTime === 0)) {
+
+  if (!lockedDay && currentTime === 0) {
     addDayToCurrentDate(1)
     await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
   } else {
     drawHeatmap(data[currentTime])
   }
+
   updatePopup()
 }
 
 /**
  * Change browser url based on animation step.
  */
-function changeUrl () {
+const changeUrlParameters = () => {
   window.history.pushState(
     '',
     document.title,
@@ -494 +510 @@
   )
 }
 
-function updateHeaderControls () {
+const updateHeaderControls = () => {
   $(`#time_${currentTime}`).prop('checked', true)
   $('#dropdownMenuButtonTime').html((currentTime < 10 ? '0' : '') + `${currentTime}:00`)
 }
 
-function setTimeline () {
+const setTimeline = () => {
   $('#player-time > span').text(currentTime + ':00')
   $('#player-time').attr('class', 'time hour-' + currentTime)
 }
@@ -511 +527 @@
     loadingNTimeline()
   }
 }
+
 const loadingYTimeline = () => {
   $('#player-time > .spinner-border').removeClass('d-none')
   $('#player-time > span').text('')
 }
+
 const loadingNTimeline = () => {
   $('#player-time > .spinner-border').addClass('d-none')
   setTimeline()
 }
+
 const onChangeHour = (hour) => {
   changeHour(hour)
   drawHeatmap(data[currentTime])
@@ -529 +548 @@
   changeCurrentTime(hour)
   updateHeaderControls()
   setTimeline()
-  changeUrl()
+  changeUrlParameters()
   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
@@ -560 +580 @@
     if (!(datasetName in dataSourceMarks)) {
       dataSourceMarks[datasetName] = await fetchDataSourceMarks(positionsRoute, datasetName)
     }
+
     const datasetData = await fetchByNameDate(dataSourceRoute, datasetName, currentDateToString(), currentTime)
     data[currentTime][datasetName] = datasetData
   }
@@ -568 +589 @@
   })
 
   loadingY(loaderDelay)
+
   await Promise.all(allPromises).then(
     () => {
       loadingN(0)
@@ -591 +613 @@
       const { x, y, name } = data[key_][key]
       const pop =
           prepareLayerPopUp(x, y, 1, `popup-${key_}`)
-            .setContent(genPopUp(datasetDictNameDisplayName[key_], name, 0, 0, 1, 1))
+            .setContent(getPopupContent(datasetDictNameDisplayName[key_], name, 0, 0, 1, 1))
       const newCircle =
         L.circle([x, y], { radius: 2, fillOpacity: 0.8, color: '#004fb3', fillColor: '#004fb3', bubblingMouseEvents: true })
           .bindPopup(pop)
@@ -607 +629 @@
 
 async function preload (time, change, date) {
   loadingY()
+
   for (let nTime = time + change; nTime >= 0 && nTime <= 23; nTime = nTime + change) {
     if (!data[nTime]) {
       data[nTime] = {}
@@ -618 +641 @@
       }
     })
   }
+
   loadingN()
 }
 
@@ -746 +770 @@
 }
 
 function initLocationsMenu () {
-  var locationsWrapper = '.locations'
-  var locationsDisplayClass = 'show'
+  const elmLocationsList = $('.locations')
+  const locationsDisplayClass = 'show'
 
   if ($(window).width() <= 480) {
-    $(locationsWrapper).removeClass(locationsDisplayClass)
+    elmLocationsList.removeClass(locationsDisplayClass)
   } else {
-    $(locationsWrapper).addClass(locationsDisplayClass)
+    elmLocationsList.addClass(locationsDisplayClass)
   }
 }
 
@@ -770 +794 @@
 
 const loadCheckboxDatasetNameData = () => {
   datasetSelected = []
+
   $('#dropdown-dataset .dropdown-item').each(function () {
     const input = $(this).find('input')
     const inputVal = input[0].value
@@ -782 +807 @@
   })
 }
 
-function dragTimeline () {
+const dragTimeline = () => {
   const hourElemWidthPx = 26
 
   const elem = $('#player-time')
@@ -791 +816 @@
   if (offset >= 0 && offset <= elem.parent().width()) {
     const hour = Math.round(offset / hourElemWidthPx)
 
-    if (hour != currentTime) {
+    if (hour !== currentTime) {
       elem.attr('class', 'time hour-' + hour)
       $('#player-time span').html(hour + ':00')