aswi2020sebela-gitlab/website/public/js/zcu-heatmap.js @ 81980e82

/* global L */
/* global $ */
var mymap
var heatmapLayer = null
var marksLayer = null

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

var dataSourceRoute
var currentTime
var name
var date

var timer
var isAnimationRunning = false
var data = []

var info = []
var currenInfo = 0

// 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 = {}

// all marker from which popup was removed
// contains: {key:[L.circle,L.pupup]}
// key: x and y, x + '' + y string
let globalMarkersChanged = {}

const genPopUpControls = (controls) => {
  return `<div class="popup-controls">${controls.reduce((sum, item) => sum + item, '')}</div>`
}
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 = ''
  }
  return `
  ${header}
  ${digitInfo}
  ${genPopUpControls([previousButton, posInfo, nextButton])}
  `
}
/**
 * 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)
}

function showInfo (e) {
  info = []
  currenInfo = 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++
    }
  })

  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)

    if (info.length === 1) {
      $('#previous-info-btn').prop('disabled', true)
      $('#next-info-btn').prop('disabled', true)
      $('.popup-controls').hide()
    }
  }
}

// eslint-disable-next-line no-unused-vars
function previousInfo () {
  currenInfo = (currenInfo + info.length - 1) % info.length
  displayInfoText()
}

// eslint-disable-next-line no-unused-vars
function nextInfo () {
  currenInfo = (currenInfo + 1) % info.length
  displayInfoText()
}

function displayInfoText () {
  $('#place-info').html(info[currenInfo].place)
  $('#digit-info').html(info[currenInfo].number)
  $('#count-info').html(currenInfo + 1 + ' z ' + info.length)
}

// 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 + `?data_set[date]=${$('#date').val()}&data_set[time]=${currentTime}&data_set[type]=${$('#type').children('option:selected').val()}`
  )
}

function updateHeaderControls () {
  document.getElementById('time').value = currentTime
}

function setTimeline () {
  $('#timeline').text(currentTime + ':00')
  $('#timeline').attr('class', 'time hour-' + currentTime)
}

/**
 * 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
function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
  dataSourceRoute = opendataRoute
  data = []

  name = $('#type').children('option:selected').val()
  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])
        }
      })
    }
  })

  preload(currentTime, 1)
  preload(currentTime, -1)
}

function drawDataSourceMarks (data) {
  if (marksLayer != null) {
    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
    )
  }

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

function drawHeatmap (data) {
  // Todo still switched
  if (data.items != 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) {
        // There is data for this marker => unbind popup with zero value
        holder[0] = holder[0].unbindPopup()
        globalMarkersChanged[key] = holder
      }
      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)
    }
  }

  // var heat_01 = ...
  // on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
  // $(.leaflet-heatmap-layer).css('opacity', 'value');
}

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

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)
    } else {
      $(this).prop('disabled', false)
      if (allOptionsDisabled) {
        $(this).prop('selected', true)
        allOptionsDisabled = false
      }
      isOptionEnabled = false
    }
  })
  allOptionsDisabled = isOptionEnabled

  $('#submit-btn').prop('disabled', isOptionEnabled)
}

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