Auswahl der Settings via Tabelle

MAP immer auf den Sensor zentrieren

package.json

@@ -1,7 +1,7 @@
 {
   "name": "laerm-web-sensorapi",
-  "version": "3.1.1",
+  "version": "3.1.2",
-  "date": "2023-11-29 13:00 UTC",
+  "date": "2023-12-08 11:00 UTC",
   "private": true,
   "scripts": {
     "start": "node bin/www.js >>/var/log/noise.log 2>&1"

public/javascripts/chart_utilities.js

@@ -195,7 +195,9 @@ export const removeTabs = () => {
 
 // show thw tabs again
 export const showTabs = () => {
-    document.querySelector('#navi').style.display = 'block'
+    if (activeTab !== 'maptab') {
+        document.querySelector('#navi').style.display = 'block'
+    }
 }
 
 export const setCurrentTab = (tab) => {

public/javascripts/global.js

@@ -6,6 +6,7 @@ import * as dt from './datetime.js'
 import {loadAll, showChart, setNoUTC} from './showcharts.js'
 import { DateTime } from './luxon.min.js'
 import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
+import * as utils from "./chart_utilities.js";
 
 (async () => {
 
@@ -25,7 +26,40 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
     
  //   localStorage.clear()
 
-
+    const setting = [
+        {
+            typ: 'maptab', 
+            show: ['ccity', 'odth'],
+            val: ['centercity', 'olderthan'],
+            param: ['center.name', 'weeks']
+        },
+        {
+            typ: 'livetab',
+            show: ['stday', 'nbday'],
+            val: ['startday', 'nbrofdays'],
+            param: ['seldate', 'span'] 
+        },{
+            typ: 'houravgtab',    
+            show: ['stday','pklim'],
+            val: ['startday', 'peaklim'],
+            param: ['seldate', 'peak']
+        },{
+            typ: 'dayavgtab',    
+            show: ['stday','pklim'],
+            val: ['startday', 'peaklim'],
+            param: ['seldate', 'peak']
+        },{
+            typ: 'daynighttab',    
+            show: ['stday'],
+            val: ['startday'],
+            param: ['seldate']
+        },{
+            typ: 'ldentab',    
+            show: ['stday'],
+            val: ['startday'],
+            param: ['seldate']
+        }   
+    ]
     // Check new map center
     const checkNewCenter = (oldC, newC) => {
         if((oldC[0] !== newC[0]) || (oldC[1] !== newC[1])) {
@@ -34,39 +68,35 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
     }
 
     // Register events
-    // Every input with value check
-    const checkPlausibility = (id, min, max) => {
-        document.getElementById(id).addEventListener('change', function() {
-            let v = parseInt(this.value)
-            if(v < min) this.value = min
-            if (v > max) this.value = max
-        })
-    }
-
-    checkPlausibility('nbrofdays', 1, 10)
-    checkPlausibility('peaklim', 10, 130)
-    checkPlausibility('olderthan', 0, 52)
-
     // Button 'Save' pressed
     document.querySelector('#btnSave').addEventListener('click', async () => {
-        const selDate = document.getElementById('startday').value
+        for(let i = 0; i < setting.length; i++) {
-        let starttime
+            if(setting[i].typ === getCurrentTab()) {
-        if ((selDate === 'today') || (selDate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === selDate)) {
+                for(let j = 0; j < setting[i].show.length; j++) {
-            starttime = ''
+                    let elem = document.getElementById(setting[i].val[j])
-        } else {
+                    let val = elem.value
-            starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toUTC().toISO()
+                    if(elem.type === 'checkbox') {
+                        val = elem.checked
+                    }
+                    params[setting[i].param[j]] = val
+                }
+                break
+            }
+        }
+        if (getCurrentTab() !== 'maptab') {
+            let starttime
+            if ((params.seldate === 'today') || (params.seldate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === params.seldate)) {
+                starttime = ''
+            } else {
+                starttime = DateTime.fromFormat(params.seldate, 'yyyy-MM-dd').toUTC().toISO()
+            }
+            params.datetime = starttime
+        } else {
+            const oldCoords = params.center.coords
+            params.center.coords = await cityCoords(params.center.name)
+            checkNewCenter(oldCoords, params.center.coords)
+            localStorage.setItem('centercity',JSON.stringify(params.center))
         }
-        params.datetime = starttime
-        params.seldate = selDate
-        params.span = parseInt(document.getElementById('nbrofdays').value)
-        params.peak = parseInt(document.getElementById('peaklim').value)
-        params.weeks = parseInt(document.getElementById('olderthan').value)
-        const city = document.getElementById('centercity').value
-        const oldCoords = params.center
-        params.center.coords = await cityCoords(city)
-        params.center.name = city
-        checkNewCenter(oldCoords, params.center.coords)
-        localStorage.setItem('centercity',JSON.stringify(params.center))
         let newlng = document.querySelector('#sellan input:checked').id
         let oldlng = localStorage.getItem('curlang')
         localStorage.setItem('curlang', newlng)
@@ -105,24 +135,21 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
         document.getElementById('olderthan').value = params.weeks
         const centercity = JSON.parse(localStorage.getItem('centercity'))
         document.getElementById('centercity').value = centercity.name
-        // select different infos depoending on the selcted tab
+        // select different infos depending on the selcted tab
         // first clear all
         document.querySelector('#ccity').style.display = 'none'
-        document.querySelector('#stday').style.display = 'inline'
+        document.querySelector('#stday').style.display = 'none'
         document.querySelector('#nbday').style.display = 'none'
         document.querySelector('#pklim').style.display = 'none'
         document.querySelector('#odth').style.display = 'none'
-        if(curtab === 'maptab') {
+        for(let i = 0; i < setting.length; i++) {
-            document.querySelector('#ccity').style.display = 'inline'
+            if(setting[i].typ === curtab) {
-            document.querySelector('#stday').style.display = 'none'
+                for(let j = 0; j < setting[i].show.length; j++) {
-            document.querySelector('#odth').style.display = 'inline'
+                    let x = `#${setting[i].show[j]}`
-        }
+                    document.querySelector(`#${setting[i].show[j]}`).style.display = 'inline'
-        if(curtab === 'livetab') {
+                }
-            document.querySelector('#nbday').style.display = 'inline'
+                break
-        }
+            }
-        if(
-            (curtab === 'houravgtab') || (curtab === 'dayavgtab')) {
-            document.querySelector('#pklim').style.display = 'inline'
         }
         myModal.show()
     })
@@ -130,7 +157,7 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
     const getSensorType = async (sid) => {
         let url = `/srv/getoneproperty?sensorid=${sid}`
         const data = await fetchfromserver(url)
-        return data.props.type
+        return data.props
     }
 
     // main function:
@@ -165,8 +192,12 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
         console.log(currentLang)
         history.pushState({}, '', '/')
 
+        dt.showDate(true, params)
+        // and show date/time every minute
+        setInterval(() => dt.showDate(false, params), 1000)
+
         // initialise tabs
-        let triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
+        const triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
         triggerTabList.forEach(function (triggerEl) {
             let tabTrigger = new bootstrap.Tab(triggerEl)
 
@@ -179,20 +210,16 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} fr
                 }
             })
         })
-
-        dt.showDate(true, params)
-        // and show date/time every minute
-        setInterval(() => dt.showDate(false, params), 1000)
-
         const csid = parseInt(sysparams.csid)
         if(csid !== -1) {
             // check, if sid is of right type (noise)
-            const typ = await getSensorType(csid)
+            const props = await getSensorType(csid)
-            if (typ !== 'noise') {
+            if (props.type !== 'noise') {
                 // wrong sensor type
                 showError('Sensor ID ' + csid + ' is not of type noise')
                 return
             }
+            params.center.coords = [props.location[0].loc.coordinates[1], props.location[0].loc.coordinates[0]] 
             params.sid = csid
             let t = triggerTabList[1]
             let tt = new bootstrap.Tab(t)

public/javascripts/map_noise.js

@@ -144,13 +144,12 @@ async function onMarkerClick(e, click, txts, params, mpp) {
     link.addEventListener('click', async function (ev) {
         console.log(`Event clicked: ${mpp.clickedSensor}`)
         params.sid = item.name
+        utils.setCurrentTab('livetab')
         let ok = await showChart(params, 'live', 'dlive')
         if (ok) {
             let triggerEl = document.querySelector(`#livetab`)
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
-            utils.setCurrentTab('livetab')
+            params.center.coords = [e.latlng.lat, e.latlng.lng]
-//            params.center.coords = [e.latlng.lat, e.latlng.lng]
-            mpp.map.setView([e.latlng.lat, e.latlng.lng]);
             ev.preventDefault()
             await loadAll(params)
         }

public/javascripts/showcharts.js

@@ -66,8 +66,6 @@ export async function showChart(params, typ, container) {
         if(sysparams.category === 'noise') {
             utils.showTabs()
         }
-        document.querySelector('#odth').style.display = 'none'
-        document.querySelector('#nbday').style.display = 'inline'
         erg.options.xAxis.labels.formatter = xformat
         erg.options.tooltip.formatter = form
         let chart = Highcharts.chart(container, erg.options, function (chart) {