Revize 8feb1753

Feature gui changes haeder + linter for js

website/public/js/zcu-heatmap.js

@@ -1 @@
-var mymap;
-var heatmapLayer = null;
-var marksLayer = null;
+/* global L */
+/* global $ */
+var mymap
+var heatmapLayer = null
+var marksLayer = null
 
-var startX = 49.7248;
-var startY = 13.3521;
-var startZoom = 17;
+var startX = 49.7248
+var startY = 13.3521
+var startZoom = 17
 
-var dataSourceRoute;
-var currentTime;
-var name;
-var date;
+var dataSourceRoute
+var currentTime
+var name
+var date
 
-var timer;
-var isAnimationRunning = false;
-var data = [];
+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 = {};
+const globalMarkersHolder = {}
 
-//all marker from which popup was removed 
+// all marker from which popup was removed
 // contains: {key:[L.circle,L.pupup]}
 // key: x and y, x + '' + y string
-let globalMarkersChanged = {};
+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>`;
+  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 = '';
+    previousButton = ''
+    nextButton = ''
+    posInfo = ''
   }
   return `
   ${header}
@@ -48 +50 @@
   ${genPopUpControls([previousButton, posInfo, nextButton])}
   `
 }
-function initMap() {
-  mymap = L.map('heatmap').setView([startX, startY], startZoom);
+// eslint-disable-next-line no-unused-vars
+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);
+  }).addTo(mymap)
 
+  mymap.on('click', showInfo)
 }
 
-var info = [];
-var currenInfo = 0;
-var infoLength = 0;
-
-function showInfo(e) {
+var info = []
+var currenInfo = 0
 
+function showInfo (e) {
   info = []
-  currenInfo = 0;
+  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 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 i = 0
+  var lat = 0
+  var lng = 0
 
-  var total = 0;
-  data[currentTime]['items'].forEach(element => {
+  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++;
+      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({
+    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();
+    })
+      .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();
+// eslint-disable-next-line no-unused-vars
+function previousInfo () {
+  currenInfo = (currenInfo + info.length - 1) % info.length
+  displayInfoText()
 }
 
-function nextInfo() {
+// eslint-disable-next-line no-unused-vars
+function nextInfo () {
   currenInfo = (currenInfo + 1) % info.length
-  displayInfoText();
+  displayInfoText()
 }
 
-function displayInfoText() {
+function displayInfoText () {
   $('#place-info').html(info[currenInfo].place)
   $('#digit-info').html(info[currenInfo].number)
-  $('#count-info').html(currenInfo + 1 + ' z ' + info.length);
+  $('#count-info').html(currenInfo + 1 + ' z ' + info.length)
 }
 
-function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
-  mymap.setView([latitude, longitude], zoom);
+// eslint-disable-next-line no-unused-vars
+function setMapView (latitude = startX, longitude = startY, zoom = startZoom) {
+  mymap.setView([latitude, longitude], zoom)
 }
 
-function changeAnimationState() {
-
+// eslint-disable-next-line no-unused-vars
+function changeAnimationState () {
   isAnimationRunning = !isAnimationRunning
   if (isAnimationRunning) {
-    $('#play-pause').attr('class', 'pause');
+    $('#play-pause').attr('class', 'pause')
     timer = setInterval(
-      function() {
-        next();
+      function () {
+        next()
       },
       800
-    );
+    )
+  } else {
+    clearTimeout(timer)
+    $('#play-pause').attr('class', 'play')
   }
-  else {
-    clearTimeout(timer);
-    $('#play-pause').attr('class', 'play');
-  }
-
-
 }
 
-function previous() {
-  currentTime = (currentTime + 23) % 24;
-  drawHeatmap(data[currentTime]);
-  setTimeline();
-  mymap.closePopup();
-  updateHeaderControls();
-  changeUrl();
+// 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();
+function next () {
+  currentTime = (currentTime + 1) % 24
+  drawHeatmap(data[currentTime])
+  setTimeline()
+  mymap.closePopup()
+  updateHeaderControls()
+  changeUrl()
 }
 
-function 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()}`
-  );
+    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 updateHeaderControls () {
+  document.getElementById('time').value = currentTime
 }
 
-function setTimeline() {
-  $('#timeline').text(currentTime + ":00");
-  $('#timeline').attr('class', 'time hour-' + currentTime);
+function setTimeline () {
+  $('#timeline').text(currentTime + ':00')
+  $('#timeline').attr('class', 'time hour-' + currentTime)
 }
 
-function loadCurrentTimeHeatmap(opendataRoute, positionsRoute) {
+// eslint-disable-next-line no-unused-vars
+function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
+  dataSourceRoute = opendataRoute
+  data = []
 
-  dataSourceRoute = opendataRoute;
-  data = [];
-
-  name = $('#type').children("option:selected").val();
+  name = $('#type').children('option:selected').val()
   date = $('#date').val()
-  currentTime = parseInt($('#time').children("option:selected").val());
-  setTimeline();
+  currentTime = parseInt($('#time').children('option:selected').val())
+  setTimeline()
   $.ajax({
     type: 'POST',
     url: positionsRoute + '/' + name,
-    success: function(result) {
-      drawDataSourceMarks(result);
+    success: function (result) {
+      drawDataSourceMarks(result)
       $.ajax({
-        type: "POST",
-        url: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
-        success: function(result) {
-          data[currentTime] = result;
-          drawHeatmap(data[currentTime]);
+        type: 'POST',
+        url: dataSourceRoute + '/' + name + '/' + date + '/' + currentTime,
+        success: function (result) {
+          data[currentTime] = result
+          drawHeatmap(data[currentTime])
         }
       })
     }
-  });
-
-  preload(currentTime, 1);
-  preload(currentTime, -1);
+  })
 
+  preload(currentTime, 1)
+  preload(currentTime, -1)
 }
 
-function drawDataSourceMarks(data) {
+function drawDataSourceMarks (data) {
   if (marksLayer != null) {
-    L.removeLayer(marksLayer);
+    L.removeLayer(marksLayer)
   }
-  marksLayer = L.layerGroup();
+  marksLayer = L.layerGroup()
   for (var key in data) {
-    const {x,y,name} = data[key];
-    const pop = 
-      L.popup({autoPan: false})
+    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
+        .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);
-
+  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 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) {
-
+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 = {};
+  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;
+    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]; 
-    });
+      return [x, y, number]
+    })
     if (heatmapLayer != null) {
-      mymap.removeLayer(heatmapLayer);
+      mymap.removeLayer(heatmapLayer)
     }
-    heatmapLayer = L.heatLayer(points, {'max' : data['max'], 'minOpacity' : 0.5, 'radius' : 35, 'blur' : 30}).addTo(mymap);
-  }
-  else {
+    heatmapLayer = L.heatLayer(points, { max: data.max, minOpacity: 0.5, radius: 35, blur: 30 }).addTo(mymap)
+  } else {
     if (heatmapLayer != null) {
-      mymap.removeLayer(heatmapLayer);
+      mymap.removeLayer(heatmapLayer)
     }
   }
 
@@ -292 +284 @@
   // $(.leaflet-heatmap-layer).css('opacity', 'value');
 }
 
-function checkDataSetsAvailability(route) {
-
+// eslint-disable-next-line no-unused-vars
+function checkDataSetsAvailability (route) {
   $.ajax({
-    type: "POST",
+    type: 'POST',
     // Todo it might be good idea to change db collections format
     url: route + '/' + $('#date').val(),
-    success: function(result) {
-      updateAvailableDataSets(result);
+    success: function (result) {
+      updateAvailableDataSets(result)
     }
-  });
+  })
 }
 
-var allOptionsDisabled = false;
+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 {
+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;
+        $(this).prop('selected', true)
+        allOptionsDisabled = false
       }
-      isOptionEnabled = false;
+      isOptionEnabled = false
     }
-  });
-  allOptionsDisabled = isOptionEnabled;
-
-  $('#submit-btn').prop('disabled', isOptionEnabled);
+  })
+  allOptionsDisabled = isOptionEnabled
 
+  $('#submit-btn').prop('disabled', isOptionEnabled)
 }
 
-
-function formatDate(date) {
-  var day = String(date.getDate());
-  var month = String(date.getMonth() + 1);
+function formatDate (date) {
+  var day = String(date.getDate())
+  var month = String(date.getMonth() + 1)
 
   if (day.length === 1) {
-    day = '0' + day;
+    day = '0' + day
   }
 
   if (month.length === 1) {
-    month = '0' + month;
+    month = '0' + month
   }
 
-  return date.getFullYear() + '-' + month + '-' + day;
+  return date.getFullYear() + '-' + month + '-' + day
 }
 
-function initDatepicker(availableDatesSource) {
-  var availableDates = '';
+// eslint-disable-next-line no-unused-vars
+function initDatepicker (availableDatesSource) {
+  var availableDates = ''
 
   $.ajax({
     type: 'GET',
     url: availableDatesSource,
-    success: function(result) {
-      availableDates = String(result).split(',');
+    success: function (result) {
+      availableDates = String(result).split(',')
     }
   }).then(function () {
     $('#date').datepicker({
       format: 'yyyy-mm-dd',
       language: 'cs',
-      beforeShowDay: function(date) {
+      beforeShowDay: function (date) {
         if (availableDates.indexOf(formatDate(date)) < 0) {
-          return {enabled: false, tooltip: 'Žádná data'}
-        }
-        else {
-          return {enabled: true}
+          return { enabled: false, tooltip: 'Žádná data' }
+        } else {
+          return { enabled: true }
         }
       },
       autoclose: true
-    });
-  });
-}
+    })
+  })
+}