aswi2020sebela-gitlab/website/public/js/zcu-heatmap.js @ 084a5972

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 = [];

// 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>`;
  const sumNum = `<span id="total-info" style="font-size: large">${sum ? '/'+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])}
  `
}
function initMap() {
  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);

}

var info = [];
var currenInfo = 0;
var infoLength = 0;

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];
    var popup = 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();
    }
  }

}

function previousInfo() {
  currenInfo = (currenInfo + info.length - 1) % info.length;
  displayInfoText();
}

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

function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
  mymap.setView([latitude, longitude], zoom);
}

function changeAnimationState() {

  isAnimationRunning = !isAnimationRunning
  if (isAnimationRunning) {
    $('#play-pause').attr('class', 'pause');
    timer = setInterval(
      function() {
        next();
      },
      800
    );
  }
  else {
    clearTimeout(timer);
    $('#play-pause').attr('class', 'play');
  }


}

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

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

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 (0 <=  ntime && 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 = {};
    }
    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');
}

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

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