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

/* 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

let currentTime

let currentDate

var timer
var isAnimationRunning = false
var data = []

var info = []
let currentInfo = 0

// dictionary for names of datasets
const datasetDictNameDisplayName = {}
var datasetSelected = []

// data only for one day
let lockedDay = false

// loading information for async operations
let loading = 0

// default loader showup delay
const defaultLoaderDelay = 1000

// marks for all datasets
const dataSourceMarks = {}

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 loadingCallbackNested = (func, delay) => {
  setTimeout(() => {
    func(loading)
    if (loading) {
      loadingCallbackNested(func, delay)
    }
  }, 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)
}

const changeCurrentTime = (time = null) => {
  if (time !== null) {
    currentTime = time
  } else {
    currentTime = parseInt($('#dropdown-time input[type="radio"]:checked').val())
  }
}

const changeCurrentDate = (date = null) => {
  if (date) {
    currentDate = new Date(date)
  } else {
    currentDate = new Date($('#date').val())
  }

  $('#date').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')
}

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, 0)
    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 () {
    changeCurrentDate($(this).val())
    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
    changeUrl()
  })

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

  $('#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) {
    $('#animate-btn').removeClass('play').addClass('pause')
    timer = setInterval(function () { next() }, 800)
  } else {
    clearTimeout(timer)
    $('#animate-btn').removeClass('pause').addClass('play')
  }
}

// eslint-disable-next-line no-unused-vars
async function previous () {
  if (loading) {
    return
  }

  $("#player-time").removeAttr("style");

  currentTime = (currentTime + 23) % 24
  changeHour(currentTime)
  mymap.closePopup()
  if (!lockedDay && (currentTime === 23)) {
    addDayToCurrentDate(-1)
    await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
  } else {
    drawHeatmap(data[currentTime])
  }
}

async function next () {
  if (loading) {
    return
  }

  $("#player-time").removeAttr("style");
  
  currentTime = (currentTime + 1) % 24
  changeHour(currentTime)
  mymap.closePopup()
  if (!lockedDay && (currentTime === 0)) {
    addDayToCurrentDate(1)
    await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
  } else {
    drawHeatmap(data[currentTime])
  }
}

/**
 * Change browser url based on animation step.
 */
function changeUrl () {
  window.history.pushState(
    '',
    document.title,
    window.location.origin + window.location.pathname + `?date=${currentDateToString()}&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 () {
  $('#player-time > span').text(currentTime + ':00')
  $('#player-time').attr('class', 'time hour-' + currentTime)
}
const loadingTimeline = (isLoading) => {
  if (isLoading) {
    loadingYTimeline()
  } else {
    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])
}

const changeHour = (hour) => {
  changeCurrentTime(hour)
  updateHeaderControls()
  setTimeline()
  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, loaderDelay = defaultLoaderDelay) {
  loadCheckboxDatasetNameData()

  dataSourceRoute = opendataRoute
  positionsSourceRoute = positionsRoute
  const allPromises = []
  data[currentTime] = {}

  const dataSelectedHandler = async (datasetName) => {
    if (!(datasetName in dataSourceMarks)) {
      dataSourceMarks[datasetName] = await fetchDataSourceMarks(positionsRoute, datasetName)
    }
    const datasetData = await fetchByNameDate(dataSourceRoute, datasetName, currentDateToString(), currentTime)
    data[currentTime][datasetName] = datasetData
  }
  datasetSelected.forEach((datasetName) => {
    allPromises.push(dataSelectedHandler(datasetName))
  })

  loadingY(loaderDelay)
  Promise.all(allPromises).then(
    () => {
      loadingN(0)
      drawDataSourceMarks(dataSourceMarks)
      drawHeatmap(data[currentTime])
      preload(currentTime, 1, currentDateToString())
      preload(currentTime, -1, currentDateToString())
    }
  )
}

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) {
  loadingY()
  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)
      }
    })
  }
  loadingN()
}

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 + '/' + currentDateToString(),
    success: function (result) {
      updateAvailableDataSets(result)
    }
  })
}

function updateAvailableDataSets (available) {
  let leastOneOptionEnabled = false

  $('#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 onDocumentReady () {
  $('#dropdown-dataset').on('click', function (e) {
    e.stopPropagation()
  })

  $('#btn-update-heatmap').prop('name', '')
  changeCurrentTime()
  changeCurrentDate()
  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')
  })
}

function dragTimeline() {
  let hourElemWidthPx = 26

  let elem = $("#player-time")
  let offset = elem.offset().left - elem.parent().offset().left

  elem.draggable({ containment: "parent", axis: "x", cursor: "ew-resize" })

  if (offset >= 0 && offset <= elem.parent().width()) {
    let hour = Math.round(offset / hourElemWidthPx)
    
    elem.attr("class", "time hour-" + hour)
    $("#player-time span").html(hour + ":00")

    onChangeHour(hour)
  }
}