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

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



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) {
    var popup = L.popup({
      autoPan: false
                  })
                  .setLatLng([lat / i, lng / i])
                  .setContent('<strong>Zařízení a počet:</strong><div id=\'place-info\'>' + info[currenInfo].place + '</div>' +
                              '<div id=\'number-info\'><span id=\'digit-info\'>' + info[currenInfo].number + '</span>' + '<span id=\'total-info\' style="font-size: large">/' + total +'</span></div>' + 
                              '<div class=\'popup-controls\'>' +
                                '<button id=\'previous-info-btn\' class=\'circle-button\' onclick=\'previousInfo()\'></button>' +
                                '<div id=\'count-info\'>' + (currenInfo + 1) + ' z ' + info.length + '</div>' +
                                '<button id=\'next-info-btn\' onclick=\'nextInfo()\' class=\'circle-button next\'></button>' +
                              '</div>'
                              )
                  .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: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
    success: function(result) {
      data[currentTime] = result;
      drawHeatmap(data[currentTime]);
    }
  });

  $.ajax({
    type: 'POST',
    url: positionsRoute + '/' + name,
    success: function(result) {
      drawDataSourceMarks(result)
    }
  });

  preload(currentTime, 1);
  preload(currentTime, -1);

}

function drawDataSourceMarks(data) {

  if (marksLayer != null) {
    L.removeLayer(marksLayer);
  }

  marksLayer = L.layerGroup();
  for (var key in data) {
    marksLayer.addLayer(L.circle([data[key]['x'], data[key]['y']], {radius: 1, color: 'black'}));
  }

  marksLayer.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) {
    points = data['items'].map(function (p) { return [p['x'], p['y'], p['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
    });
  });
}