Revize c892003d

Re #8159 - CSS improvements, timeline clickable, code refactoring

website/public/js/zcu-heatmap.js

@@ -29 +29 @@
 // key: x and y, x + '' + y string
 let globalMarkersChanged = {}
 
+
 const fetchByNameDate = async (baseRoute, name, date, currentTime) => {
   const headers = new Headers()
   const myRequest = new Request(baseRoute + '/' + name + '/' + date + '/' + currentTime, {
@@ -38 +39 @@
   const beforeJson = await fetch(myRequest)
   return beforeJson.json()
 }
+
+
 const fetchDataSourceMarks = async (positionRoute, datasetName) => {
   const headers = new Headers()
   const myRequest = new Request(positionRoute + '/' + datasetName, {
@@ -48 +51 @@
   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" onclick="nextInfo()" class="circle-button next"></button>',
+  nextButton: '<button id="next-info-btn" class="circle-button next" onclick="nextInfo()"></button>',
   posInfo: `<div id="count-info">${currentPage} z ${numPages}</div>`
 })
+
+
 const genPopUpControls = (controls) => {
   return `<div class="popup-controls">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
 }
+
+
 const genMultipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
-  const header = `<strong id="dataset-info">${datasetName}</strong>`
-  const digitInfo = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
+  const popupHeader = `<strong id="dataset-info">${datasetName}</strong>`
+  const popupData = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
   const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
+
   return `
-  ${header}
-  ${digitInfo}
+  ${popupHeader}
+  ${popupData}
   ${genPopUpControls([previousButton, posInfo, nextButton])}
   `
 }
+
+
 const prepareLayerPopUp = (lat, lng, num, className) => L.popup({
   autoPan: false,
   className: className
 }).setLatLng([lat / num, lng / num])
 
+
 const genPopUp = (datasetName, place, count, sum, currentPos, maxPos) => {
   const popupHeader = `
     <strong>${datasetName}</strong>
@@ -88 +100 @@
   ${genPopUpControls(maxPos > 1 ? [previousButton, posInfo, nextButton] : null)}
   `
 }
+
+
 const onCheckboxClicked = async (checkbox) => {
   if ($(checkbox).prop('checked')) {
     loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
     changeUrl()
-  } else {
+  }
+  else {
     loadCheckboxDatasetNameData()
+
     data.forEach((item, index) => {
       Object.keys(item).forEach((datasetName) => {
         if (datasetName === $(checkbox).val()) {
@@ -102 +118 @@
       })
       drawHeatmap(data[currentTime])
     })
+
     changeUrl()
   }
 }
+
+
 const debounce = (func, delay) => {
   let inDebounce
   return function () {
@@ -115 +134 @@
   }
 }
 
+
 const onValueChangeRegister = () => {
   $('#date').change(function () {
     data = []
@@ -124 +144 @@
     changeUrl()
   })
 
-  $('#dataset-dropdown-time input[type="radio"]').each(function () {
+  $('#dropdown-time input[type="radio"]').each(function () {
     $(this).change(function () {
       currentTime = parseInt($(this).val())
       updateHeaderControls()
@@ -134 +154 @@
     })
   })
 
-  $('input[type=checkbox]').each(function () {
+  $('#dropdown-dataset input[type="checkbox"]').each(function () {
     $(this).change(
       debounce(() => onCheckboxClicked(this), 1000)
     )
   })
 }
 
+
 /**
  * Initialize leaflet map on start position which can be default or set based on user action
  */
@@ -159 +180 @@
 
   mymap.on('click', showInfo)
 }
+
+
 const getInfoLength = () => {
   const infoKeys = Object.keys(info)
   if (infoKeys.length === 1) {
@@ -168 +191 @@
   // return number of datasets (agregation of all datasets in area)
   return infoKeys.length
 }
+
+
 const getElFromObjectInfo = (position) => {
   const keys = Object.keys(info)
   return info[keys[position]]
 }
+
+
 const hasInfoMultipleDatasets = () => {
   return Object.keys(info).length > 1
 }
+
+
 function showInfo (e) {
   info = []
   currentInfo = 0
@@ -216 +245 @@
         datasetName: item.datasetName
       }
     }
+
     acc[item.datasetName].items.push(item)
     acc[item.datasetName].number += Number(item.number)
     return acc
@@ -236 +266 @@
     prepareLayerPopUp(lat, lng, i, `popup-${infoDict.datasetName}`)
       .setContent(genPopUp(datasetDictNameDisplayName[infoDict.datasetName], place, number, total, currentInfo + 1, info_.length))
       .openOn(mymap)
+
     if (info_.length === 1) {
       $('#previous-info-btn').prop('disabled', true)
       $('#next-info-btn').prop('disabled', true)
       $('.popup-controls').hide()
     }
-  } else {
+  }
+  else {
     const { datasetName, number } = getElFromObjectInfo(currentInfo)
+
     prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
       .setContent(genMultipleDatasetsPopUp(number, currentInfo + 1, getInfoLength(), datasetDictNameDisplayName[datasetName]))
       .openOn(mymap)
   }
 }
 
+
 // eslint-disable-next-line no-unused-vars
 function previousInfo () {
   const infoLength = getInfoLength()
   const previousCurrentInfo = currentInfo
+
   currentInfo = (currentInfo + infoLength - 1) % infoLength
   displayInfoText(previousCurrentInfo)
 }
 
+
 // eslint-disable-next-line no-unused-vars
 function nextInfo () {
   const infoLength = getInfoLength()
   const previousCurrentInfo = currentInfo
+
   currentInfo = (currentInfo + 1) % infoLength
   displayInfoText(previousCurrentInfo)
 }
+
+
 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')
+
   if (datasetInfo) {
     $(datasetInfo).html(datasetDictNameDisplayName[info_.datasetName])
   }
+  
   $('#place-info').html(info_.place ? info_.place : info_.datasetName)
   $('#digit-info').html(info_.number)
   $('#count-info').html(currentInfo + 1 + ' z ' + infoLength)
+
   $('.leaflet-popup').removeClass(`popup-${previousInfo.datasetName}`)
   $('.leaflet-popup').addClass(`popup-${info_.datasetName}`)
 }
 
+
 // eslint-disable-next-line no-unused-vars
 function setMapView (latitude, longitude, zoom) {
   localStorage.setItem('lat', latitude)
@@ -287 +330 @@
   mymap.setView([latitude, longitude], zoom)
 }
 
+
 /**
  * Change animation start from playing to stopped or the other way round
  */
 // eslint-disable-next-line no-unused-vars
 function changeAnimationState () {
   isAnimationRunning = !isAnimationRunning
+
   if (isAnimationRunning) {
     $('#play-pause').attr('class', 'pause')
-    timer = setInterval(
-      function () {
-        next()
-      },
-      800
-    )
-  } else {
+    timer = setInterval(function() { next() }, 800)
+  }
+  else {
     clearTimeout(timer)
     $('#play-pause').attr('class', 'play')
   }
 }
 
+
 // eslint-disable-next-line no-unused-vars
 function previous () {
   currentTime = (currentTime + 23) % 24
@@ -317 +359 @@
   changeUrl()
 }
 
+
 function next () {
   currentTime = (currentTime + 1) % 24
   drawHeatmap(data[currentTime])
@@ -325 +368 @@
   updateHeaderControls()
   changeUrl()
 }
-const typeUrlReducer = (accumulator, currentValue) => accumulator + currentValue
+
+
 /**
- * Change browser url based on animation step
+ * Change browser url based on animation step.
  */
 function changeUrl () {
   window.history.pushState(
     '',
     document.title,
-    window.location.origin + window.location.pathname + `?date=${$('#date').val()}&time=${currentTime}${datasetSelected.reduce((acc, current) => acc + '&type[]=' + current, '')}`
+    window.location.origin + window.location.pathname + `?date=${$('#date').val()}&time=${currentTime}${datasetSelected.reduce((acc, current) => acc + '&type=' + current, '')}`
   )
 }
 
+
 function updateHeaderControls () {
   $(`#time_${currentTime}`).prop('checked', true)
   $('#dropdownMenuButtonTime').html((currentTime < 10 ? '0' : '') + `${currentTime}:00`)
 }
 
+
 function setTimeline () {
   $('#timeline').text(currentTime + ':00')
   $('#timeline').attr('class', 'time hour-' + currentTime)
 }
 
+
+function changeHour(hour) {
+  currentTime = hour
+  updateHeaderControls()
+  setTimeline()
+  drawHeatmap(data[currentTime])
+  changeUrl()
+}
+
+
 /**
  * Load and display heatmap layer for current data
  * @param {string} opendataRoute route to dataset source
@@ -355 +411 @@
 // eslint-disable-next-line no-unused-vars
 async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
   loadCheckboxDatasetNameData()
+
   dataSourceRoute = opendataRoute
   positionsSourceRoute = positionsRoute
   const dataSourceMarks = {}
   const allPromises = []
   const date = $('#date').val()
-  currentTime = parseInt($('#dataset-dropdown-time input[type="radio"]:checked').val())
+  currentTime = parseInt($('#dropdown-time input[type="radio"]:checked').val())
 
   setTimeline()
   data[currentTime] = {}
@@ -370 +427 @@
     dataSourceMarks[datasetName] = marks
     data[currentTime][datasetName] = datasetData
   }
+
   await datasetSelected.forEach((datasetName) => {
     allPromises.push(dataSelectedHandler(datasetName))
   })
+
   Promise.all(allPromises).then(
     () => {
       drawDataSourceMarks(dataSourceMarks)
@@ -383 +442 @@
   )
 }
 
+
 function drawDataSourceMarks (data) {
   if (marksLayer != null) {
     mymap.removeLayer(marksLayer)
   }
+
   marksLayer = L.layerGroup()
+
   Object.keys(data).forEach((key_) => {
     for (var key in data[key_]) {
       const { x, y, name } = data[key_][key]
@@ -407 +469 @@
   marksLayer.setZIndex(-1).addTo(mymap)
 }
 
+
 async function preload (time, change, date) {
   for (let nTime = time + change; nTime >= 0 && nTime <= 23; nTime = nTime + change) {
     if (!data[nTime]) {
       data[nTime] = {}
     }
+
     datasetSelected.forEach(async (datasetName) => {
       if (!data[nTime][datasetName]) {
         data[nTime][datasetName] = await fetchByNameDate(dataSourceRoute, datasetName, date, nTime)
@@ -420 +484 @@
   }
 }
 
+
 function drawHeatmap (dataRaw) {
   // Todo still switched
   const dataDict = dataRaw
   const mergedPoints = []
   let max = 0
+  
   if (Object.keys(globalMarkersChanged).length) {
     Object.keys(globalMarkersChanged).forEach(function (key) {
       globalMarkersChanged[key][0].bindPopup(globalMarkersChanged[key][1])
     })
     globalMarkersChanged = {}
   }
+
   Object.keys(dataDict).forEach((key) => {
     const data = dataDict[key]
     max = Math.max(max, data.max)
+
     if (data != null) {
     // Bind back popups for markers (we dont know if there is any data for this marker or not)
       const 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]
       })
       mergedPoints.push(...points)
-    } else {
+    }
+    else {
       if (heatmapLayer != null) {
         mymap.removeLayer(heatmapLayer)
       }
     }
   })
+
   if (heatmapLayer != null) {
     mymap.removeLayer(heatmapLayer)
   }
+
   if (mergedPoints.length) {
     heatmapLayer = L.heatLayer(mergedPoints, { max: max, minOpacity: 0.5, radius: 35, blur: 30 }).addTo(mymap)
   }
 }
 
+
 /**
  * Checks dataset availibility
  * @param {string} route authority for datasets availibility checks
@@ -478 +552 @@
   })
 }
 
+
 function updateAvailableDataSets (available) {
   let leastOneOptionEnabled = false
   // datasetSelected = []
-  $('#dataset-dropdown .dropdown-item').each(function () {
+
+  $('#dropdown-dataset .dropdown-item').each(function () {
     const input = $(this).find('input')
     const inputVal = input[0].value
+
     if (!(inputVal in available)) {
       $(this).addClass('disabled')
       $(input).prop('checked', false)
-    } else {
+    }
+    else {
       leastOneOptionEnabled = true
       $(this).removeClass('disabled')
     }
@@ -496 +574 @@
   $('#btn-update-heatmap').prop('disabled', !leastOneOptionEnabled)
 }
 
+
 function formatDate (date) {
   var day = String(date.getDate())
   var month = String(date.getMonth() + 1)
@@ -511 +590 @@
   return date.getFullYear() + '-' + month + '-' + day
 }
 
+
 // eslint-disable-next-line no-unused-vars
 function initDatepicker (availableDatesSource) {
   var availableDates = ''
@@ -528 +608 @@
       beforeShowDay: function (date) {
         if (availableDates.indexOf(formatDate(date)) < 0) {
           return { enabled: false, tooltip: 'Žádná data' }
-        } else {
+        }
+        else {
           return { enabled: true }
         }
       },
@@ -537 +618 @@
   })
 }
 
+
 function initLocationsMenu () {
   var locationsWrapper = '.locations'
   var locationsDisplayClass = 'show'
 
   if ($(window).width() <= 480) {
     $(locationsWrapper).removeClass(locationsDisplayClass)
-  } else {
+  }
+  else {
     $(locationsWrapper).addClass(locationsDisplayClass)
   }
 }
 
+
 function openDatepicker () {
   if ($(window).width() <= 990) {
     $('.navbar-collapse').collapse()
@@ -555 +639 @@
 
   $('#date').datepicker('show')
 }
+
+
 function onDocumentReady () {
-  $('#dataset-dropdown').on('click', function (e) {
+  $('#dropdown-dataset').on('click', function (e) {
     e.stopPropagation()
   })
 
   $('#btn-update-heatmap').prop('name', '')
   onValueChangeRegister()
 }
+
+
 const loadCheckboxDatasetNameData = () => {
   datasetSelected = []
-  $('#dataset-dropdown .dropdown-item').each(function () {
+  $('#dropdown-dataset .dropdown-item').each(function () {
     const input = $(this).find('input')
     const inputVal = input[0].value
+
     if (input[0].checked) {
       datasetSelected.push(inputVal)
     }
+
     datasetDictNameDisplayName[inputVal] = $(input).data('dataset-display-name')
   })
 }