Revize 2f227a6c

Feature Re #8156 show all datasets

website/public/js/zcu-heatmap.js

@@ -1 +1 @@
 /* global L */
 /* global $ */
+
 var mymap
 var heatmapLayer = null
 var marksLayer = null
@@ -10 +11 @@
 
 var dataSourceRoute
 var currentTime
-var name
-var date
 
 var timer
 var isAnimationRunning = false
 var data = []
 
 var info = []
-var currenInfo = 0
+let currentInfo = 0
+
+var datasetSelected = []
 
-// 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 = {}
+const datasetColorDict = {}
 
+/* const genColor = (datasetNames) => {
+  datasetNames.forEach((name) => {
+    datasetColorDict[name] =
+  })
+} */
+const fetchByNameDate = async (baseRoute, name, date, currentTime) => {
+  const headers = new Headers()
+  const myRequest = new Request(baseRoute + '/' + name + '/' + date + '/' + currentTime, {
+    method: 'GET',
+    headers: headers
+  })
+  const beforeJson = await fetch(myRequest)
+  return beforeJson.json()
+}
+const fetchDataSourceMarks = async (positionRoute, datasetName) => {
+  const headers = new Headers()
+  const myRequest = new Request(positionRoute + '/' + datasetName, {
+    method: 'GET',
+    headers: headers
+  })
+  const beforeJson = await fetch(myRequest)
+  return beforeJson.json()
+}
 // all marker from which popup was removed
 // contains: {key:[L.circle,L.pupup]}
 // key: x and y, x + '' + y string
 let globalMarkersChanged = {}
 
+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>',
+  posInfo: `<div id="count-info">${currentPage} z ${numPages}</div>`
+})
 const genPopUpControls = (controls) => {
-  return `<div class="popup-controls">${controls.reduce((sum, item) => sum + item, '')}</div>`
+  return `<div class="popup-controls">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
 }
+const multipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
+  const header = `<strong>Dataset a počet:</strong><div id="place-info">${datasetName}</div>`
+  const digitInfo = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
+  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
+  return `
+  ${header}
+  ${digitInfo}
+  ${genPopUpControls([previousButton, posInfo, nextButton])}
+  `
+}
+const prepareLayerPopUp = (lat, lng, num, className) => L.popup({
+  autoPan: false,
+  className: className
+}).setLatLng([lat / num, lng / num])
+
 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>`
   // eslint-disable-next-line eqeqeq
   const sumNum = `<span id="total-info" style="font-size: large">${(sum && (sum != number)) ? '/' + 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 = ''
-  }
+  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
   return `
   ${header}
   ${digitInfo}
-  ${genPopUpControls([previousButton, posInfo, nextButton])}
+  ${genPopUpControls(maxPos > 1 ? [previousButton, posInfo, nextButton] : null)}
   `
 }
 /**
@@ -72 +106 @@
 
   mymap.on('click', showInfo)
 }
-
+const getInfoLength = () => {
+  const infoKeys = Object.keys(info)
+  if (infoKeys.length === 1) {
+    // return number of records in one dataset (one dataset in area)
+    return info[infoKeys[0]].items.length
+  }
+  // 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 = []
-  currenInfo = 0
+  currentInfo = 0
 
   // https://wiki.openstreetmap.org/wiki/Zoom_levels
   // Todo change to variable - it is used in heatmap init
-  var stile = 40075016.686 * Math.cos(startX) / Math.pow(2, mymap.getZoom())
-  var radius = 25 * stile / 256
-
-  var i = 0
-  var lat = 0
-  var lng = 0
-
-  var total = 0
-  data[currentTime].items.forEach(element => {
-    if (e.latlng.distanceTo(new L.LatLng(element.x, element.y)) < radius) {
-      lat += element.x
-      lng += element.y
-      info[i] = { place: element.place, number: element.number }
-      total += parseInt(element.number)
-      i++
-    }
+  const stile = 40075016.686 * Math.cos(startX) / Math.pow(2, mymap.getZoom())
+  const radius = 25 * stile / 256
+
+  let i = 0
+  let lat = 0
+  let lng = 0
+
+  let total = 0
+
+  const datasetsInRadius = {}
+
+  Object.keys(data[currentTime]).forEach((key) => {
+    const namedData = data[currentTime][key]
+    namedData.items.forEach(element => {
+      if (e.latlng.distanceTo(new L.LatLng(element.x, element.y)) < radius) {
+        lat += element.x
+        lng += element.y
+        info[i] = { place: element.place, number: element.number, datasetName: key }
+        total += parseInt(element.number)
+        i++
+        datasetsInRadius[key] = true
+      }
+    })
   })
 
-  if (info.length > 0) {
-    const { place, number } = info[currenInfo]
-    L.popup({
-      autoPan: false
-    })
-      .setLatLng([lat / i, lng / i])
-      .setContent(genPopUp(place, number, total, currenInfo + 1, info.length))
-      .openOn(mymap)
+  // Process info for more then one dataset
 
-    if (info.length === 1) {
+  info = info.reduce((acc, item) => {
+    if (!acc[item.datasetName]) {
+      acc[item.datasetName] = {
+        items: [],
+        number: 0,
+        datasetName: item.datasetName
+      }
+    }
+    acc[item.datasetName].items.push(item)
+    acc[item.datasetName].number += Number(item.number)
+    return acc
+  }, {})
+
+  // There is one dataset
+
+  const numDatasets = Object.keys(datasetsInRadius).length
+
+  if (!numDatasets) { 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(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 {
+    const { datasetName, number } = getElFromObjectInfo(currentInfo)
+    prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
+      .setContent(multipleDatasetsPopUp(number, currentInfo + 1, getInfoLength(), datasetName))
+      .openOn(mymap)
   }
 }
 
 // eslint-disable-next-line no-unused-vars
 function previousInfo () {
-  currenInfo = (currenInfo + info.length - 1) % info.length
-  displayInfoText()
+  const infoLength = getInfoLength()
+  const previousCurrentInfo = currentInfo
+  currentInfo = (currentInfo + infoLength - 1) % infoLength
+  displayInfoText(previousCurrentInfo)
 }
 
 // eslint-disable-next-line no-unused-vars
 function nextInfo () {
-  currenInfo = (currenInfo + 1) % info.length
-  displayInfoText()
+  const infoLength = getInfoLength()
+  const previousCurrentInfo = currentInfo
+  currentInfo = (currentInfo + 1) % infoLength
+  displayInfoText(previousCurrentInfo)
 }
-
-function displayInfoText () {
-  $('#place-info').html(info[currenInfo].place)
-  $('#digit-info').html(info[currenInfo].number)
-  $('#count-info').html(currenInfo + 1 + ' z ' + info.length)
+function displayInfoText (previousInfoNum) {
+  const previousInfo = hasInfoMultipleDatasets() ? getElFromObjectInfo(previousInfoNum) : getElFromObjectInfo(0).items[previousInfoNum]
+  const info_ = hasInfoMultipleDatasets() ? getElFromObjectInfo(currentInfo) : getElFromObjectInfo(0).items[currentInfo]
+  const infoLength = getInfoLength()
+  $('#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
@@ -178 +266 @@
   updateHeaderControls()
   changeUrl()
 }
-
+const typeUrlReducer = (accumulator, currentValue) => accumulator + currentValue
 /**
  * Change browser url based on animation step
  */
@@ -186 +274 @@
   window.history.pushState(
     '',
     document.title,
-    window.location.origin + window.location.pathname + `?data_set[date]=${$('#date').val()}&data_set[time]=${currentTime}&data_set[type]=${$('#type').children('option:selected').val()}`
+    window.location.origin + window.location.pathname + `?date=${$('#date').val()}&time=${currentTime}${datasetSelected.reduce((acc, current) => acc + '&type[]=' + current, '')}`
   )
 }
 
@@ -205 +293 @@
  * @param {string} positionsRoute  route to dataset postitions source
  */
 // eslint-disable-next-line no-unused-vars
-function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
+async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
   dataSourceRoute = opendataRoute
   data = []
-
-  name = $('#type').children('option:selected').val()
-  date = $('#date').val()
+  const dataSourceMarks = {}
+  const allPromises = []
+  const date = $('#date').val()
   currentTime = parseInt($('#time').children('option:selected').val())
   setTimeline()
-  $.ajax({
-    type: 'POST',
-    url: positionsRoute + '/' + name,
-    success: function (result) {
-      drawDataSourceMarks(result)
-      $.ajax({
-        type: 'POST',
-        url: dataSourceRoute + '/' + name + '/' + date + '/' + currentTime,
-        success: function (result) {
-          data[currentTime] = result
-          drawHeatmap(data[currentTime])
-        }
-      })
-    }
+  data[currentTime] = {}
+  const dataSelectedHandler = async (datasetName) => {
+    const marks = await fetchDataSourceMarks(positionsRoute, datasetName)
+    const datasetData = await fetchByNameDate(dataSourceRoute, datasetName, date, currentTime)
+    dataSourceMarks[datasetName] = marks
+    data[currentTime][datasetName] = datasetData
+  }
+  await datasetSelected.forEach((datasetName) => {
+    allPromises.push(dataSelectedHandler(datasetName))
   })
-
-  preload(currentTime, 1)
-  preload(currentTime, -1)
+  Promise.all(allPromises).then(
+    () => {
+      drawDataSourceMarks(dataSourceMarks)
+      drawHeatmap(data[currentTime])
+      preload(currentTime, 1, date)
+      preload(currentTime, -1, date)
+    }
+  )
 }
 
 function drawDataSourceMarks (data) {
@@ -238 +326 @@
     L.removeLayer(marksLayer)
   }
   marksLayer = L.layerGroup()
-  for (var key in data) {
-    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
-    )
-  }
+  Object.keys(data).forEach((key_) => {
+    for (var key in data[key_]) {
+      const { x, y, name } = data[key_][key]
+      const pop =
+          prepareLayerPopUp(x, y, 1, `popup-${key_}`)
+            .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.setZIndex(-1).addTo(mymap)
 }
 
-function preload (time, change) {
-  var ntime = time + change
-  if (ntime >= 0 && ntime <= 23) {
-    $.ajax({
-      type: 'POST',
-      url: dataSourceRoute + '/' + name + '/' + date + '/' + ntime,
-      success: function (result) {
-        data[ntime] = result
-        preload(ntime, change)
-      }
-    })
+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) => {
+        data[nTime][datasetName] = await fetchByNameDate(dataSourceRoute, datasetName, date, nTime)
+      })
+    }
   }
 }
 
-function drawHeatmap (data) {
+function drawHeatmap (dataRaw) {
   // Todo still switched
-  if (data.items != null) {
+  const dataDict = dataRaw
+  const mergedPoints = []
+  let max = 0
+  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)
-    if (Object.keys(globalMarkersChanged).length) {
-      Object.keys(globalMarkersChanged).forEach(function (key) {
-        globalMarkersChanged[key][0].bindPopup(globalMarkersChanged[key][1])
-      })
-      globalMarkersChanged = {}
-    }
-    const points = data.items.map((point) => {
-      const { x, y, number } = point
-      const key = x + '' + y
-      const holder = globalMarkersHolder[key]
-      if (!globalMarkersChanged[key] && number) {
+      if (Object.keys(globalMarkersChanged).length) {
+        Object.keys(globalMarkersChanged).forEach(function (key) {
+          globalMarkersChanged[key][0].bindPopup(globalMarkersChanged[key][1])
+        })
+        globalMarkersChanged = {}
+      }
+      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
+          holder[0] = holder[0].unbindPopup()
+          globalMarkersChanged[key] = holder
+        }
+        return [x, y, number]
+      })
+      mergedPoints.push(...points)
+    } else {
+      if (heatmapLayer != null) {
+        mymap.removeLayer(heatmapLayer)
       }
-      return [x, y, number]
-    })
-    if (heatmapLayer != null) {
-      mymap.removeLayer(heatmapLayer)
-    }
-    heatmapLayer = L.heatLayer(points, { max: data.max, minOpacity: 0.5, radius: 35, blur: 30 }).addTo(mymap)
-  } 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)
   }
-
-  // var heat_01 = ...
-  // on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
-  // $(.leaflet-heatmap-layer).css('opacity', 'value');
 }
 
 /**
@@ -322 +414 @@
   })
 }
 
-var allOptionsDisabled = false
-
 function updateAvailableDataSets (available) {
-  var isOptionEnabled = true
-  $('#type > option').each(function () {
-    if ((this.value in available) === false) {
-      $(this).prop('disabled', true)
-      $(this).prop('selected', false)
+  let leastOneOptionEnabled = false
+  // datasetSelected = []
+  $('#dataset-dropdown .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 {
-      $(this).prop('disabled', false)
-      if (allOptionsDisabled) {
-        $(this).prop('selected', true)
-        allOptionsDisabled = false
-      }
-      isOptionEnabled = false
+      leastOneOptionEnabled = true
+      $(this).removeClass('disabled')
     }
   })
-  allOptionsDisabled = isOptionEnabled
 
-  $('#submit-btn').prop('disabled', isOptionEnabled)
+  $('#submit-btn').prop('disabled', !leastOneOptionEnabled)
 }
 
 function formatDate (date) {
@@ -403 +491 @@
 
   $('#date').datepicker('show')
 }
+function onDocumentReady () {
+  $('#dataset-dropdown').on('click', function (e) {
+    e.stopPropagation()
+  })
+  datasetSelected = []
+  $('#dataset-dropdown .dropdown-item').each(function () {
+    const input = $(this).find('input')
+    const inputVal = input[0].value
+    if (input[0].checked) {
+      datasetSelected.push(inputVal)
+    }
+  })
+  $('#submit-btn').prop('name', '')
+}