Revize 1774c06d

done

website/public/css/style.css

@@ -888 +888 @@
   padding: 3px 6px 4px 12px;
 }
 
+.player .date.lock {
+  background: #0b155a;
+}
+
+.player .date.lock .lock-date {
+  border: 0px;
+  box-shadow: none;
+}
+
+.player .date.lock .lock-date:after {
+  background-position: 0 0;
+}
+
+.player .date.lock .lock-date:hover:after {
+  background-position: -8px 0;
+}
+
 .player .date .lock-date {
   width: 26px;
   height: 26px;
   margin-right: 2px;
   opacity: 1;
   border: 1px solid #ffffff;
-  box-shadow: 0 0 0 2px #0b155a;
+  /* box-shadow: 0 0 0 2px $secondary-bg-color; */
+}
+
+.player .date .lock-date:after {
+  background-position: -8px 0;
 }
 
 .player .date .lock-date:hover {
-  box-shadow: 0 0 0 2px rgba(11, 21, 90, 0.2);
+  /* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */
   background: rgba(11, 21, 90, 0.2);
 }
 
 .player .date .lock-date:hover:after {
-  background-position: -8px 0;
+  background-position: 0 0;
 }
 
 .player .date .lock-date:after {
@@ -911 +932 @@
   display: inline-block;
   width: 8px;
   height: 11px;
-  background: url("../img/btn-lock.svg") no-repeat 0 0;
+  background: url("../img/btn-lock.svg") no-repeat -8px 0;
   background-size: cover;
 }
 
-.player .date .lock-date.unlock:after {
-  background-position: -8px 0;
-}
-
-.player .date .lock-date.unlock:hover:after {
-  background-position: 0 0;
-}
-
 .player .timeline {
   display: flex;
   height: 30px;

website/public/css/style.scss

@@ -836 +836 @@
     border-radius: 15px;
     cursor: pointer;
     background: rgba(11, 21, 90, .7);
-
+    //box-shadow: 0 0 0 2px rgba(11, 21, 90, .7);
+    //border: 1px solid transparent;
     @media (max-width: 390px) {
       margin-right: 0;
     }
@@ -844 +845 @@
     span {
       padding: 3px 6px 4px 12px;
     }
+    &.lock {
+      background: rgba(11, 21, 90, 1);
+      //border-color: $primary-text-color;
+      //box-shadow: 0 0 0 2px $secondary-bg-color;
+      .lock-date {
+        border: 0px;
+        box-shadow: none;
+        &:after {
+          background-position: 0 0;
+        }
 
+        &:hover:after {
+          background-position: -8px 0;
+        }
+      }
+    }
     .lock-date {
       width: 26px;
       height: 26px;
       margin-right: 2px;
       opacity: 1;
       border: 1px solid $primary-text-color;
-      box-shadow: 0 0 0 2px $secondary-bg-color;
-
+      /* box-shadow: 0 0 0 2px $secondary-bg-color; */
+      &:after{
+        background-position: -8px 0;
+      }
       &:hover {
-        box-shadow: 0 0 0 2px rgba(11, 21, 90, .2);
+        /* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */
         background: rgba(11, 21, 90, .2);
 
         &:after {
-          background-position: -8px 0;
+          background-position: 0 0;
         }
       }
 
@@ -867 +885 @@
         display: inline-block;
         width: 8px;
         height: 11px;
-        background: url($images-dir + 'btn-lock.svg') no-repeat 0 0;
+        background: url($images-dir + 'btn-lock.svg') no-repeat -8px 0;
         background-size: cover;
       }
-
-      &.unlock {
-        &:after {
-          background-position: -8px 0;
-        }
-
-        &:hover:after {
-          background-position: 0 0;
-        }
-      }
     }
   }
 

website/public/js/zcu-heatmap.js

@@ -11 +11 @@
 
 var dataSourceRoute
 let positionsSourceRoute
-var currentTime
+
+let currentTime
+
+let currentDate
 
 var timer
 var isAnimationRunning = false
@@ -23 +26 @@
 const datasetDictNameDisplayName = {}
 var datasetSelected = []
 
+// data only for one day
+let lockedDay = false
+
+let loading = 0
+
+// 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 loadingY = () => {
+  loading++
+}
+const loadingN = () => {
+  loading--
+}
+
+const changeCurrentTime = (time = null) => {
+  if (time !== null) {
+    currentTime = time
+  } else {
+    $('#dropdown-time input[type="radio"]:checked').each(function () {
+      currentTime = parseInt($(this).val())
+    })
+  }
+}
+
+const changeCurrentDate = (date = null) => {
+  if (date) {
+    currentDate = new Date(date)
+  } else {
+    currentDate = new Date($('#date').val())
+  }
+  $('#player-date span').html(`${currentDate.getDate()}. ${currentDate.getMonth() + 1}. ${currentDate.getFullYear()}`)
+  $('#date').val(currentDateToString())
+  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()
@@ -40 +95 @@
   return beforeJson.json()
 }
 
-
 const fetchDataSourceMarks = async (positionRoute, datasetName) => {
   const headers = new Headers()
   const myRequest = new Request(positionRoute + '/' + datasetName, {
@@ -51 +105 @@
   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>`
@@ -76 +127 @@
   `
 }
 
-
 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>
@@ -101 +150 @@
   `
 }
 
-
 const onCheckboxClicked = async (checkbox) => {
   if ($(checkbox).prop('checked')) {
     loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
     changeUrl()
-  }
-  else {
+  } else {
     loadCheckboxDatasetNameData()
 
     data.forEach((item, index) => {
@@ -123 +170 @@
   }
 }
 
-
 const debounce = (func, delay) => {
   let inDebounce
   return function () {
@@ -134 +180 @@
   }
 }
 
-
 const onValueChangeRegister = () => {
   $('#date').change(function () {
-    data = []
+    changeCurrentDate($(this).val())
     loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
-    const date = new Date($(this).val())
-    $('#player-date').html(`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()}`)
     changeUrl()
   })
 
   $('#dropdown-time input[type="radio"]').each(function () {
     $(this).change(function () {
-      currentTime = parseInt($(this).val())
-      updateHeaderControls()
-      setTimeline()
+      changeHour(parseInt($(this).val()))
       drawHeatmap(data[currentTime])
-      changeUrl()
     })
   })
 
@@ -161 +201 @@
   })
 }
 
-
 /**
  * Initialize leaflet map on start position which can be default or set based on user action
  */
@@ -181 +220 @@
   mymap.on('click', showInfo)
 }
 
-
 const getInfoLength = () => {
   const infoKeys = Object.keys(info)
   if (infoKeys.length === 1) {
@@ -192 +230 @@
   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
@@ -272 +307 @@
       $('#next-info-btn').prop('disabled', true)
       $('.popup-controls').hide()
     }
-  }
-  else {
+  } else {
     const { datasetName, number } = getElFromObjectInfo(currentInfo)
 
     prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
@@ -282 +316 @@
   }
 }
 
-
 // eslint-disable-next-line no-unused-vars
 function previousInfo () {
   const infoLength = getInfoLength()
@@ -292 +325 @@
   displayInfoText(previousCurrentInfo)
 }
 
-
 // eslint-disable-next-line no-unused-vars
 function nextInfo () {
   const infoLength = getInfoLength()
@@ -302 +334 @@
   displayInfoText(previousCurrentInfo)
 }
 
-
 function displayInfoText (previousInfoNum) {
   const previousInfo = hasInfoMultipleDatasets() ? getElFromObjectInfo(previousInfoNum) : getElFromObjectInfo(0).items[previousInfoNum]
   const info_ = hasInfoMultipleDatasets() ? getElFromObjectInfo(currentInfo) : getElFromObjectInfo(0).items[currentInfo]
@@ -312 +343 @@
   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)
@@ -321 +352 @@
   $('.leaflet-popup').addClass(`popup-${info_.datasetName}`)
 }
 
-
 // eslint-disable-next-line no-unused-vars
 function setMapView (latitude, longitude, zoom) {
   localStorage.setItem('lat', latitude)
@@ -330 +360 @@
   mymap.setView([latitude, longitude], zoom)
 }
 
-
 /**
  * Change animation start from playing to stopped or the other way round
  */
@@ -340 +369 @@
 
   if (isAnimationRunning) {
     $('#play-pause').attr('class', 'pause')
-    timer = setInterval(function() { next() }, 800)
-  }
-  else {
+    timer = setInterval(function () { next() }, 800)
+  } else {
     clearTimeout(timer)
     $('#play-pause').attr('class', 'play')
   }
 }
 
-
 // eslint-disable-next-line no-unused-vars
-function previous () {
+async function previous () {
+  if (loading) {
+    return
+  }
   currentTime = (currentTime + 23) % 24
-  drawHeatmap(data[currentTime])
-  setTimeline()
+  changeHour(currentTime)
   mymap.closePopup()
-  updateHeaderControls()
-  changeUrl()
+  if (!lockedDay && (currentTime === 23)) {
+    addDayToCurrentDate(-1)
+    await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+  } else {
+    drawHeatmap(data[currentTime])
+  }
 }
 
-
-function next () {
+async function next () {
+  if (loading) {
+    return
+  }
   currentTime = (currentTime + 1) % 24
-  drawHeatmap(data[currentTime])
-  setTimeline()
+  changeHour(currentTime)
   mymap.closePopup()
-  updateHeaderControls()
-  changeUrl()
+  if (!lockedDay && (currentTime === 0)) {
+    addDayToCurrentDate(1)
+    await loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+  } else {
+    drawHeatmap(data[currentTime])
+  }
 }
 
-
 /**
  * Change browser url based on animation step.
  */
@@ -377 +414 @@
   window.history.pushState(
     '',
     document.title,
-    window.location.origin + window.location.pathname + `?date=${$('#date').val()}&time=${currentTime}${datasetSelected.reduce((acc, current) => acc + '&type=' + current, '')}`
+    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 () {
   $('#timeline').text(currentTime + ':00')
   $('#timeline').attr('class', 'time hour-' + currentTime)
 }
-
-
-function changeHour(hour) {
-  currentTime = hour
+const onChangeHour = (hour) => {
+  changeHour(hour)
+  drawHeatmap(data[currentTime])
+}
+const changeHour = (hour) => {
+  changeCurrentTime(hour)
   updateHeaderControls()
   setTimeline()
-  drawHeatmap(data[currentTime])
   changeUrl()
 }
 
-
 /**
  * Load and display heatmap layer for current data
  * @param {string} opendataRoute route to dataset source
@@ -414 +449 @@
 
   dataSourceRoute = opendataRoute
   positionsSourceRoute = positionsRoute
-  const dataSourceMarks = {}
   const allPromises = []
-  const date = $('#date').val()
-  currentTime = parseInt($('#dropdown-time input[type="radio"]:checked').val())
-
-  setTimeline()
   data[currentTime] = {}
+
   const dataSelectedHandler = async (datasetName) => {
-    const marks = await fetchDataSourceMarks(positionsRoute, datasetName)
-    const datasetData = await fetchByNameDate(dataSourceRoute, datasetName, date, currentTime)
-    dataSourceMarks[datasetName] = marks
+    if (!(datasetName in dataSourceMarks)) {
+      dataSourceMarks[datasetName] = await fetchDataSourceMarks(positionsRoute, datasetName)
+    }
+    const datasetData = await fetchByNameDate(dataSourceRoute, datasetName, currentDateToString(), currentTime)
     data[currentTime][datasetName] = datasetData
   }
-
-  await datasetSelected.forEach((datasetName) => {
+  datasetSelected.forEach((datasetName) => {
     allPromises.push(dataSelectedHandler(datasetName))
   })
 
+  loadingY()
   Promise.all(allPromises).then(
     () => {
+      loadingN()
       drawDataSourceMarks(dataSourceMarks)
       drawHeatmap(data[currentTime])
-      preload(currentTime, 1, date)
-      preload(currentTime, -1, date)
+      preload(currentTime, 1, currentDateToString())
+      preload(currentTime, -1, currentDateToString())
     }
   )
 }
 
-
 function drawDataSourceMarks (data) {
   if (marksLayer != null) {
     mymap.removeLayer(marksLayer)
@@ -469 +501 @@
   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] = {}
@@ -482 +514 @@
       }
     })
   }
+  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])
@@ -518 +550 @@
         return [x, y, number]
       })
       mergedPoints.push(...points)
-    }
-    else {
+    } else {
       if (heatmapLayer != null) {
         mymap.removeLayer(heatmapLayer)
       }
@@ -535 +566 @@
   }
 }
 
-
 /**
  * Checks dataset availibility
  * @param {string} route authority for datasets availibility checks
@@ -545 +575 @@
   $.ajax({
     type: 'POST',
     // Todo it might be good idea to change db collections format
-    url: route + '/' + $('#date').val(),
+    url: route + '/' + currentDateToString(),
     success: function (result) {
       updateAvailableDataSets(result)
     }
   })
 }
 
-
 function updateAvailableDataSets (available) {
   let leastOneOptionEnabled = false
-  // datasetSelected = []
 
   $('#dropdown-dataset .dropdown-item').each(function () {
     const input = $(this).find('input')
@@ -564 +592 @@
     if (!(inputVal in available)) {
       $(this).addClass('disabled')
       $(input).prop('checked', false)
-    }
-    else {
+    } else {
       leastOneOptionEnabled = true
       $(this).removeClass('disabled')
     }
@@ -574 +601 @@
   $('#btn-update-heatmap').prop('disabled', !leastOneOptionEnabled)
 }
 
-
 function formatDate (date) {
   var day = String(date.getDate())
   var month = String(date.getMonth() + 1)
@@ -590 +616 @@
   return date.getFullYear() + '-' + month + '-' + day
 }
 
-
 // eslint-disable-next-line no-unused-vars
 function initDatepicker (availableDatesSource) {
   var availableDates = ''
@@ -608 +633 @@
       beforeShowDay: function (date) {
         if (availableDates.indexOf(formatDate(date)) < 0) {
           return { enabled: false, tooltip: 'Žádná data' }
-        }
-        else {
+        } else {
           return { enabled: true }
         }
       },
@@ -618 +642 @@
   })
 }
 
-
 function initLocationsMenu () {
   var locationsWrapper = '.locations'
   var locationsDisplayClass = 'show'
 
   if ($(window).width() <= 480) {
     $(locationsWrapper).removeClass(locationsDisplayClass)
-  }
-  else {
+  } else {
     $(locationsWrapper).addClass(locationsDisplayClass)
   }
 }
 
-
-function openDatepicker () {
-  if ($(window).width() <= 990) {
-    $('.navbar-collapse').collapse()
-  }
-
-  $('#date').datepicker('show')
-}
-
-
 function onDocumentReady () {
   $('#dropdown-dataset').on('click', function (e) {
     e.stopPropagation()
   })
 
   $('#btn-update-heatmap').prop('name', '')
+  changeCurrentTime()
+  setTimeline()
+  changeCurrentDate()
   onValueChangeRegister()
 }
 
-
 const loadCheckboxDatasetNameData = () => {
   datasetSelected = []
   $('#dropdown-dataset .dropdown-item').each(function () {

website/templates/heatmap.html.twig

@@ -117 +117 @@
 
     <div class="datetime">
       {% if form.vars.value.date %}
-      <div class="date" id="player-date">
-        <span onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</span>
+      <div class="date" id="player-date" onclick="toggleDayLock()">
+        <span>{{ form.vars.value.date|date('j. n. Y') }}</span>
         <div class="lock-date"></div>
       </div>
       {% endif %}
@@ -127 +127 @@
         <div class="time hour-0" id="timeline">0:00</div>
 
         {% for i in 0..23 %}
-        <div class="hour" title="{{ i }}:00" onclick="changeHour('{{ i }}')"></div>
+        <div class="hour" title="{{ i }}:00" onclick="onChangeHour('{{ i }}')"></div>
         {% endfor %}
         <div class="end-dot"></div>
       </div>