250 lines
9.0 KiB
JavaScript
250 lines
9.0 KiB
JavaScript
// Client side javascript
|
|
"use strict"
|
|
|
|
import * as map from './map.js'
|
|
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 () => {
|
|
|
|
// global variables
|
|
const params = { // set defaults
|
|
center: {name: 'Stuttgart', coords: [48.778, 9.180]},
|
|
zoom: 10,
|
|
span: 1,
|
|
peak: 70,
|
|
weeks: 4,
|
|
datetime: '',
|
|
seldate: '',
|
|
refreshRate: 5,
|
|
sid: -1
|
|
}
|
|
// END global variables
|
|
|
|
// 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])) {
|
|
map.setNewCenter(newC)
|
|
}
|
|
}
|
|
|
|
// Register events
|
|
// Button 'Save' pressed
|
|
document.querySelector('#btnSave').addEventListener('click', async () => {
|
|
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
|
|
}
|
|
let x = setting[i].param[j]
|
|
console.log('x: ', x)
|
|
if ( Array.isArray(x)) {
|
|
params[setting[i].param[j][0]][setting[i].param[j][1]] = val
|
|
} else {
|
|
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))
|
|
}
|
|
let newlng = document.querySelector('#sellan input:checked').id
|
|
let oldlng = localStorage.getItem('curlang')
|
|
localStorage.setItem('curlang', newlng)
|
|
if(newlng !== oldlng) {
|
|
location.reload()
|
|
}
|
|
await loadAll(params,0)
|
|
// ToDo:
|
|
// Load ALL incl. MAP und LIVE hier, d.h. an loadAll einen zusätzlichen Parameter übergeben
|
|
// if(params.sid !== undefined) {
|
|
// await loadAll(params)
|
|
// }
|
|
})
|
|
|
|
// Btn 'Settings' pressed
|
|
document.querySelector('#btnSet').addEventListener('click', () => {
|
|
const curtab = getCurrentTab()
|
|
let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
|
|
const lang = localStorage.getItem('curlang')
|
|
const elem = document.querySelector('#startday')
|
|
const datepicker = new Datepicker(elem, {
|
|
buttonClass: 'btn',
|
|
autohide: true,
|
|
format: 'yyyy-mm-dd',
|
|
language: lang,
|
|
maxDate: new Date(),
|
|
minDate: new Date(new Date().setDate(new Date().getDate() - 365)),
|
|
defaultViewDate: new Date(),
|
|
todayButton: true,
|
|
todayButtonMode: 1
|
|
|
|
})
|
|
document.getElementById('startday').value = params.seldate
|
|
document.getElementById('nbrofdays').value = params.span
|
|
document.getElementById('peaklim').value = params.peak
|
|
document.getElementById('olderthan').value = params.weeks
|
|
const centercity = JSON.parse(localStorage.getItem('centercity'))
|
|
document.getElementById('centercity').value = centercity.name
|
|
// select different infos depending on the selcted tab
|
|
// first clear all
|
|
document.querySelector('#ccity').style.display = 'none'
|
|
document.querySelector('#stday').style.display = 'none'
|
|
document.querySelector('#nbday').style.display = 'none'
|
|
document.querySelector('#pklim').style.display = 'none'
|
|
document.querySelector('#odth').style.display = 'none'
|
|
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()
|
|
})
|
|
|
|
const getSensorType = async (sid) => {
|
|
let url = `/srv/getoneproperty?sensorid=${sid}`
|
|
const data = await fetchfromserver(url)
|
|
return data.props
|
|
}
|
|
|
|
// main function:
|
|
// show the map if called w/o any parameter
|
|
// if called with a sensor-ID, show the live chart for this sensor
|
|
async function main() {
|
|
setNoUTC() // no UTC for HighCharts
|
|
// set correct language
|
|
let currentLang = localStorage.getItem('curlang')
|
|
if ((currentLang === null) || (currentLang === '')) {
|
|
currentLang = 'de'
|
|
localStorage.setItem('curlang', currentLang)
|
|
}
|
|
let centercity
|
|
try {
|
|
centercity = JSON.parse(localStorage.getItem('centercity'))
|
|
} catch (e) {
|
|
centercity = params.center
|
|
}
|
|
if((centercity === null) || (centercity.name === '')) {
|
|
centercity = params.center
|
|
}
|
|
localStorage.setItem('centercity', JSON.stringify(centercity))
|
|
params.center = centercity
|
|
if(currentLang === 'en') {
|
|
document.querySelector('#en').checked = true
|
|
params.seldate = 'today'
|
|
} else {
|
|
document.querySelector('#de').checked = true
|
|
params.seldate = 'heute'
|
|
}
|
|
console.log(currentLang)
|
|
if (parseInt(sysparams.csid) !== -1) {
|
|
history.pushState({}, '', `/${sysparams.csid}`)
|
|
} else {
|
|
history.pushState({}, '', '/')
|
|
}
|
|
|
|
dt.showDate(true, params)
|
|
// and show date/time every minute
|
|
setInterval(() => dt.showDate(false, params), 1000)
|
|
|
|
// initialise tabs
|
|
const triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
|
|
triggerTabList.forEach(function (triggerEl) {
|
|
let tabTrigger = new bootstrap.Tab(triggerEl)
|
|
|
|
triggerEl.addEventListener('click', function (event) {
|
|
event.preventDefault()
|
|
tabTrigger.show()
|
|
setCurrentTab(event.currentTarget.id)
|
|
if (getCurrentTab() === 'maptab') {
|
|
map.showMap(params)
|
|
}
|
|
})
|
|
})
|
|
const csid = parseInt(sysparams.csid)
|
|
if(csid !== -1) {
|
|
// check, if sid is of right type (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)
|
|
tt.show()
|
|
setCurrentTab('livetab')
|
|
let ok = await showChart(params, 'live', 'dlive')
|
|
if (ok) {
|
|
await loadAll(params)
|
|
}
|
|
} else {
|
|
// show the map
|
|
map.showMap(params)
|
|
}
|
|
}
|
|
|
|
main().catch(console.error)
|
|
|
|
})() |