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

Settings split according to chart

Browse Source 
routes/api.js
   - check type of sensor
   - translate error message

app.js
   - debug = false at i18n

public/javascripts/chart_utilities.js
   - setter/getter for current Tab

public/javascripts/global.js
   - settings dialog completely rearranged
   - if only sensorid is given, check type

routes/index.js
   - set language to global variable

views/index.pug
   - reaggange settings dialog
   - translate 'Error'

views/layout.pug
   - load new datepicker (vanillajs-datepicker)

public/javascripts/map.js
   - fetching from server refactored to function
   - reenable tabs after leaving map

charts/preparecharts
   - typo

public/javascripts/showcharts.js
   - loadAll extended to  load also live and map

public/stylesheets/style.sass
   - a few changes for settinds dialog

locales/[de|en]
   - added a few words

charts/utilities.js
   - setter and getter for language
This commit is contained in:
rxf
2023-05-09 16:10:07 +02:00
parent 58e25bf468
commit 4cea325f56
16 changed files with 190 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/global.js
+82 -38
View File
@@ -3,16 +3,14 @@
import * as map from './map.js'
import * as dt from './datetime.js'
import {logerror, logit} from './logit.js'
import {tabtable, loadAll, showChart} from './showcharts.js'
import {loadAll, showChart} from './showcharts.js'
import { DateTime } from './luxon.min.js'
import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_utilities.js";
(async () => {
// global constants
const Stuttgart = [48.779, 9.16]
const MAXROWS_IN_TABLE = 1000
const defaultStartime = '2023-01-01 00:00'
// END global constants
// global variables
@@ -23,10 +21,10 @@ import { DateTime } from './luxon.min.js'
peak: 70,
weeks: 4,
datetime: '',
seldate: 'today',
seldate: '',
refresh: 0,
sid: ''
}
let currentTab = ''
// END global variables
@@ -34,56 +32,94 @@ import { DateTime } from './luxon.min.js'
// 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') {
starttime = DateTime.now().toISO()
params.datetime = ''
if ((selDate === 'today') || (selDate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === selDate)) {
starttime = ''
} else {
starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toISO()
params.datetime = starttime
starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toUTC().toISO()
}
params.datetime = starttime
params.seldate = selDate
const span = document.getElementById('nbrofdays').value
const peak = document.getElementById('peaklim').value
const weeks = document.getElementById('olderthan').value
console.log(starttime, span, peak)
if(span < 10) {
params.span = span
}
if(peak < 130 ) {
params.peak = peak
}
if (weeks < 52) {
params.weeks = weeks
}
params.span = parseInt(document.getElementById('nbrofdays').value)
params.peak = parseInt(document.getElementById('peaklim').value)
params.weeks = parseInt(document.getElementById('olderthan').value)
let newlng = document.querySelector('#sellan input:checked').id
let oldlng = localStorage.getItem('curlang')
localStorage.setItem('curlang', newlng)
if(newlng !== oldlng) {
location.reload()
}
if(params.sid !== undefined) {
await loadAll(params)
}
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', () => {
// document.querySelector('#dialogSettings .modal-dialog .modal-content .modal-body').setHTML('Das ist das Setting')
const curtab = getCurrentTab()
let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
flatpickr('#startday', {
maxDate: 'today',
minDate: new Date().fp_incr(-365),
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
// select different infos depoending on the selcted tab
// first clear all
document.querySelector('#stday').style.display = 'inline'
document.querySelector('#nbday').style.display = 'none'
document.querySelector('#pklim').style.display = 'none'
document.querySelector('#odth').style.display = 'none'
if(curtab === 'maptab') {
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'
}
myModal.show()
})
const getSensorType = async (sid) => {
let url = `/api/getoneproperty?sensorid=${sid}`
const data = await fetchfromserver(url)
return data.props.type
}
// main function:
// show the map if called w/o any parameter
@@ -93,8 +129,10 @@ import { DateTime } from './luxon.min.js'
const currentLang = localStorage.getItem('curlang')
if(currentLang === 'en') {
document.querySelector('#en').checked = true
params.seldate = 'today'
} else {
document.querySelector('#de').checked = true
params.seldate = 'heute'
}
console.log(currentLang)
history.pushState({}, '', '/')
@@ -107,10 +145,9 @@ import { DateTime } from './luxon.min.js'
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
currentTab = event.currentTarget.id
if (currentTab === 'maptab') {
map.showMap(params, sysparams)
// document.querySelector('#sellan').style.display = 'inline'
setCurrentTab(event.currentTarget.id)
if (getCurrentTab() === 'maptab') {
map.showMap(params)
}
})
})
@@ -121,17 +158,24 @@ import { DateTime } from './luxon.min.js'
const csid = parseInt(sysparams.csid)
if(csid !== -1) {
// check, if sid is of right type (noise)
const typ = await getSensorType(csid)
if (typ !== 'noise') {
// wrong sensor type
showError('Sensor ID ' + csid + ' is not of type noise')
return
}
let triggerEl = document.querySelector('#livetab')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
params.sid = csid
let ok = await showChart(params, 'live', 'dlive')
setCurrentTab('livetab')
if (ok) {
await loadAll(params)
}
} else {
// show the map
document.querySelector('#sellan').style.display = 'inline'
map.showMap(params,sysparams)
map.showMap(params)
}
}