admin/noise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auswahl der Settings via Tabelle

Browse Source 
MAP immer auf den Sensor zentrieren
This commit is contained in:
rxf
2023-12-08 15:22:19 +01:00
parent bf53bd8929
commit 98f0355641
5 changed files with 87 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/chart_utilities.js
+3 -1
View File
@@ -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
+80 -53
View File
@@ -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)
public/javascripts/map_noise.js
+2 -3
View File
@@ -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)
}
public/javascripts/showcharts.js
-2
View File
@@ -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) {