Revize 883a423e

change the name of dataset in popup buble

website/public/js/zcu-heatmap.js

@@ -19 +19 @@
 var info = []
 let currentInfo = 0
 
+const datasetDictNameDisplayName = {}
 var datasetSelected = []
 
 const globalMarkersHolder = {}
@@ -54 +55 @@
 const genPopUpControls = (controls) => {
   return `<div class="popup-controls">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
 }
-const multipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
-  const header = `<strong>Dataset a počet:</strong><div id="place-info">${datasetName}</div>`
+const genMultipleDatasetsPopUp = (sum, currentPos, maxPos, datasetName) => {
+  const header = `<strong id="dataset-info">${datasetName}</strong>`
   const digitInfo = `<div id="number-info"><span id="digit-info">${sum}</span></div>`
   const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
   return `
@@ -69 +70 @@
   className: className
 }).setLatLng([lat / num, lng / num])
 
-const genPopUp = (place, number, sum, currentPos, maxPos) => {
-  const header = `<strong>Zařízení a počet:</strong><div id="place-info">${place}</div>`
+const genPopUp = (datasetName, place, number, sum, currentPos, maxPos) => {
+  const header = `<strong>${datasetName}</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>`
@@ -175 +176 @@
     const info_ = infoDict.items
     const { place, number } = info_[currentInfo]
     prepareLayerPopUp(lat, lng, i, `popup-${infoDict.datasetName}`)
-      .setContent(genPopUp(place, number, total, currentInfo + 1, info_.length))
+      .setContent(genPopUp(datasetDictNameDisplayName[infoDict.datasetName], place, number, total, currentInfo + 1, info_.length))
       .openOn(mymap)
     if (info_.length === 1) {
       $('#previous-info-btn').prop('disabled', true)
@@ -185 +186 @@
   } else {
     const { datasetName, number } = getElFromObjectInfo(currentInfo)
     prepareLayerPopUp(lat, lng, i, `popup-${datasetName}`)
-      .setContent(multipleDatasetsPopUp(number, currentInfo + 1, getInfoLength(), datasetName))
+      .setContent(genMultipleDatasetsPopUp(number, currentInfo + 1, getInfoLength(), datasetDictNameDisplayName[datasetName]))
       .openOn(mymap)
   }
 }
@@ -209 +210 @@
   const previousInfo = hasInfoMultipleDatasets() ? getElFromObjectInfo(previousInfoNum) : getElFromObjectInfo(0).items[previousInfoNum]
   const info_ = hasInfoMultipleDatasets() ? getElFromObjectInfo(currentInfo) : getElFromObjectInfo(0).items[currentInfo]
   const infoLength = getInfoLength()
+  const datasetInfo = $('#dataset-info')
+  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)
@@ -327 +332 @@
       const { x, y, name } = data[key_][key]
       const pop =
           prepareLayerPopUp(x, y, 1, `popup-${key_}`)
-            .setContent(genPopUp(name, 0, 0, 1, 1))
+            .setContent(genPopUp(datasetDictNameDisplayName[key_], name, 0, 0, 1, 1))
       const newCircle =
         L.circle([x, y], { radius: 2, fillOpacity: 0.8, color: '#004fb3', fillColor: '#004fb3', bubblingMouseEvents: true })
           .bindPopup(pop)
@@ -498 +503 @@
     if (input[0].checked) {
       datasetSelected.push(inputVal)
     }
+    datasetDictNameDisplayName[inputVal] = $(input).data('dataset-display-name')
   })
   $('#submit-btn').prop('name', '')
 }

website/templates/heatmap.html.twig

@@ -50 +50 @@
                 form_widget(form.time, {
                   'id' : 'time',
                   'attr' : {
-                    'class' : 'custom-select'
+                    'class' : 'custom-select',
                   },
                 })
               }}             
@@ -67 +67 @@
               <label class="dropdown-item custom-dropdown-item">
               <div class="custom-control custom-checkbox custom-checkbox-{{oneType.vars.value}}">
               {{ form_widget(oneType, {
-                attr: {'class': "custom-control-input custom-control-input-#{oneType.vars.value}"}
+                attr: {
+                  'class': "custom-control-input custom-control-input-#{oneType.vars.value}",
+                  'data-dataset-display-name': "#{oneType.vars.label}"
+                  }
               }) }}
               {{ form_label(oneType, null, {
                 'label_attr': {'class': 'custom-control-label'}