diff --git a/package.json b/package.json index d8bc00e..527906b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "laerm-web-sensorapi", - "version": "3.1.1", - "date": "2023-11-29 13:00 UTC", + "version": "3.1.2", + "date": "2023-12-08 11:00 UTC", "private": true, "scripts": { "start": "node bin/www.js >>/var/log/noise.log 2>&1" diff --git a/public/javascripts/chart_utilities.js b/public/javascripts/chart_utilities.js index 68a9f86..3c238a4 100644 --- a/public/javascripts/chart_utilities.js +++ b/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) => { diff --git a/public/javascripts/global.js b/public/javascripts/global.js index 69defbb..bb4e39e 100644 --- a/public/javascripts/global.js +++ b/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 - let starttime - if ((selDate === 'today') || (selDate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === selDate)) { - starttime = '' - } else { - starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toUTC().toISO() + for(let i = 0; i < setting.length; i++) { + if(setting[i].typ === getCurrentTab()) { + for(let j = 0; j < setting[i].show.length; j++) { + let elem = document.getElementById(setting[i].val[j]) + let val = elem.value + 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') { - document.querySelector('#ccity').style.display = 'inline' - document.querySelector('#stday').style.display = 'none' - document.querySelector('#odth').style.display = 'inline' - } - if(curtab === 'livetab') { - document.querySelector('#nbday').style.display = 'inline' - } - if( - (curtab === 'houravgtab') || (curtab === 'dayavgtab')) { - document.querySelector('#pklim').style.display = 'inline' + for(let i = 0; i < setting.length; i++) { + if(setting[i].typ === curtab) { + for(let j = 0; j < setting[i].show.length; j++) { + let x = `#${setting[i].show[j]}` + document.querySelector(`#${setting[i].show[j]}`).style.display = 'inline' + } + break + } } 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) - if (typ !== 'noise') { + const props = await getSensorType(csid) + 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) diff --git a/public/javascripts/map_noise.js b/public/javascripts/map_noise.js index 0dc47b3..b86f66c 100644 --- a/public/javascripts/map_noise.js +++ b/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] - mpp.map.setView([e.latlng.lat, e.latlng.lng]); + params.center.coords = [e.latlng.lat, e.latlng.lng] ev.preventDefault() await loadAll(params) } diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js index c889c03..5bd735b 100644 --- a/public/javascripts/showcharts.js +++ b/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) {