aswi2020sebela-gitlab/website/public/js/zcu-heatmap.js @ c892003d

/* global L */
/* global $ */

var mymap
var heatmapLayer = null
var marksLayer = null

var startX = 49.7248
var startY = 13.3521
var startZoom = 17

var dataSourceRoute
let positionsSourceRoute
var currentTime

var timer
var isAnimationRunning = false
var data = []

var info = []
let currentInfo = 0

const datasetDictNameDisplayName = {}
var datasetSelected = []

const globalMarkersHolder = {}
// all marker from which popup was removed
// contains: {key:[L.circle,L.pupup]}
// 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, {
    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()
}


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>`
})


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 popupData = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)

  return `
  ${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>
    <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>
    </div>`
  const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)

  return `
  ${popupHeader}
  ${popupData}
  ${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)
    const date = new Date($(this).val())
    $('#player-date').html(`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()}`)
    changeUrl()
  })

  $('#dropdown-time input[type="radio"]').each(function () {
    $(this).change(function () {
      currentTime = parseInt($(this).val())
      updateHeaderControls()
      setTimeline()
      drawHeatmap(data[currentTime])
      changeUrl()
    })
  })

  $('#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
 */
// eslint-disable-next-line no-unused-vars
function initMap () {
  startX = localStorage.getItem('lat') || startX
  startY = localStorage.getItem('lng') || startY
  startZoom = localStorage.getItem('zoom') || startZoom

  mymap = L.map('heatmap').setView([startX, startY], startZoom)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '',
    maxZoom: 19
  }).addTo(mymap)

  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 = []
  currentInfo = 0

  // https://wiki.openstreetmap.org/wiki/Zoom_levels
  // Todo change to variable - it is used in heatmap init
  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
      }
    })
  })

  // Process info for more then one dataset

  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(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 {
    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)
  localStorage.setItem('lng', longitude)
  localStorage.setItem('zoom', zoom)
  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 {
    clearTimeout(timer)
    $('#play-pause').attr('class', 'play')
  }
}


// eslint-disable-next-line no-unused-vars
function previous () {
  currentTime = (currentTime + 23) % 24
  drawHeatmap(data[currentTime])
  setTimeline()
  mymap.closePopup()
  updateHeaderControls()
  changeUrl()
}


function next () {
  currentTime = (currentTime + 1) % 24
  drawHeatmap(data[currentTime])
  setTimeline()
  mymap.closePopup()
  updateHeaderControls()
  changeUrl()
}


/**
 * 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, '')}`
  )
}


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
 * @param {string} positionsRoute  route to dataset postitions source
 */
// 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($('#dropdown-time input[type="radio"]:checked').val())

  setTimeline()
  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))
  })

  Promise.all(allPromises).then(
    () => {
      drawDataSourceMarks(dataSourceMarks)
      drawHeatmap(data[currentTime])
      preload(currentTime, 1, date)
      preload(currentTime, -1, date)
    }
  )
}


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]
      const pop =
          prepareLayerPopUp(x, y, 1, `popup-${key_}`)
            .setContent(genPopUp(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)
      globalMarkersHolder[x + '' + y] = [newCircle, pop] // add new marker to global holders
      marksLayer.addLayer(
        newCircle
      )
    }
  })

  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)
      }
    })
  }
}


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 {
      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
 */
// eslint-disable-next-line no-unused-vars
function checkDataSetsAvailability (route) {
  $.ajax({
    type: 'POST',
    // Todo it might be good idea to change db collections format
    url: route + '/' + $('#date').val(),
    success: function (result) {
      updateAvailableDataSets(result)
    }
  })
}


function updateAvailableDataSets (available) {
  let leastOneOptionEnabled = false
  // datasetSelected = []

  $('#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 {
      leastOneOptionEnabled = true
      $(this).removeClass('disabled')
    }
  })

  $('#btn-update-heatmap').prop('disabled', !leastOneOptionEnabled)
}


function formatDate (date) {
  var day = String(date.getDate())
  var month = String(date.getMonth() + 1)

  if (day.length === 1) {
    day = '0' + day
  }

  if (month.length === 1) {
    month = '0' + month
  }

  return date.getFullYear() + '-' + month + '-' + day
}


// eslint-disable-next-line no-unused-vars
function initDatepicker (availableDatesSource) {
  var availableDates = ''

  $.ajax({
    type: 'GET',
    url: availableDatesSource,
    success: function (result) {
      availableDates = String(result).split(',')
    }
  }).then(function () {
    $('#date').datepicker({
      format: 'yyyy-mm-dd',
      language: 'cs',
      beforeShowDay: function (date) {
        if (availableDates.indexOf(formatDate(date)) < 0) {
          return { enabled: false, tooltip: 'Žádná data' }
        }
        else {
          return { enabled: true }
        }
      },
      autoclose: true
    })
  })
}


function initLocationsMenu () {
  var locationsWrapper = '.locations'
  var locationsDisplayClass = 'show'

  if ($(window).width() <= 480) {
    $(locationsWrapper).removeClass(locationsDisplayClass)
  }
  else {
    $(locationsWrapper).addClass(locationsDisplayClass)
  }
}


function openDatepicker () {
  if ($(window).width() <= 990) {
    $('.navbar-collapse').collapse()
  }

  $('#date').datepicker('show')
}


function onDocumentReady () {
  $('#dropdown-dataset').on('click', function (e) {
    e.stopPropagation()
  })

  $('#btn-update-heatmap').prop('name', '')
  onValueChangeRegister()
}


const loadCheckboxDatasetNameData = () => {
  datasetSelected = []
  $('#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')
  })
}