Revize 1cf1413d

Feature Re #8184 ajax form

website/public/js/zcu-heatmap.js

@@ -10 +10 @@
 var startZoom = 17
 
 var dataSourceRoute
+let positionsSourceRoute
 var currentTime
 
 var timer
@@ -83 +84 @@
   ${genPopUpControls(maxPos > 1 ? [previousButton, posInfo, nextButton] : null)}
   `
 }
+const onCheckboxClicked = async (checkbox) => {
+  if ($(checkbox).prop('checked')) {
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    changeUrl()
+  } else {
+    loadCheckboxDatasetNameData()
+    data.forEach((item, index) => {
+      Object.keys(item).forEach((datasetName) => {
+        if (datasetName === $(checkbox).val()) {
+          delete data[index][datasetName]
+        }
+      })
+      drawHeatmap(data[currentTime])
+    })
+    changeUrl()
+  }
+}
+const debounce = (func, delay) => {
+  let inDebounce
+  return function () {
+    const context = this
+    const args = arguments
+    clearTimeout(inDebounce)
+    inDebounce = setTimeout(() => func.apply(context, args), delay)
+  }
+}
+const onValueChangeRegister = () => {
+  $('#date').change(function () {
+    data = []
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    console.log('VAL:', $(this).val())
+    const date = new Date($(this).val())
+    $('#player-date').html(`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()}`)
+  })
+  $('#dataset-dropdown-time input[type="radio"]').each(function () {
+    $(this).change(function () {
+      currentTime = $(this).val()
+      updateHeaderControls()
+      setTimeline()
+      drawHeatmap(data[currentTime])
+    })
+  })
+  $('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
  */
@@ -280 +329 @@
 }
 
 function updateHeaderControls () {
-  document.getElementById('time').value = currentTime
+  $(`#time_${currentTime}`).prop('checked', true)
+  $('#dropdownMenuButton-time').html(currentTime >= 10 ? `${currentTime}:00` : `0${currentTime}:00`)
 }
 
 function setTimeline () {
@@ -295 +345 @@
  */
 // eslint-disable-next-line no-unused-vars
 async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
+  loadCheckboxDatasetNameData()
   dataSourceRoute = opendataRoute
-  data = []
+  positionsSourceRoute = positionsRoute
   const dataSourceMarks = {}
   const allPromises = []
   const date = $('#date').val()
-  currentTime = parseInt($('#time').children('option:selected').val())
+  currentTime = parseInt($('#dataset-dropdown-time input[type="radio"]:checked').val())
+
   setTimeline()
   data[currentTime] = {}
   const dataSelectedHandler = async (datasetName) => {
@@ -324 +376 @@
 
 function drawDataSourceMarks (data) {
   if (marksLayer != null) {
-    L.removeLayer(marksLayer)
+    mymap.removeLayer(marksLayer)
   }
   marksLayer = L.layerGroup()
   Object.keys(data).forEach((key_) => {
@@ -350 +402 @@
   for (let nTime = time + change; nTime >= 0 && nTime <= 23; nTime = nTime + change) {
     if (!data[nTime]) {
       data[nTime] = {}
-      datasetSelected.forEach(async (datasetName) => {
-        data[nTime][datasetName] = await fetchByNameDate(dataSourceRoute, datasetName, date, nTime)
-      })
     }
+    datasetSelected.forEach(async (datasetName) => {
+      if (!data[nTime][datasetName]) {
+        data[nTime][datasetName] = await fetchByNameDate(dataSourceRoute, datasetName, date, nTime)
+      }
+    })
   }
 }
 
@@ -496 +550 @@
   $('#dataset-dropdown').on('click', function (e) {
     e.stopPropagation()
   })
+
+  $('#submit-btn').prop('name', '')
+  onValueChangeRegister()
+}
+const loadCheckboxDatasetNameData = () => {
   datasetSelected = []
   $('#dataset-dropdown .dropdown-item').each(function () {
     const input = $(this).find('input')
@@ -505 +564 @@
     }
     datasetDictNameDisplayName[inputVal] = $(input).data('dataset-display-name')
   })
-  $('#submit-btn').prop('name', '')
 }