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

Settings added

Browse Source 
public/chart_utilities.js
   - showError with id

public/javascripts/global.js
   - save parameter fron settings

views/index.pug
    - add settings dialog

views/layout.pug
   - add flatpicker

public/javascripts/map.js
   - add error evaluation

public/javascripts/showcharts.js
   - error avelauation added

public/stylesheets/style.sass
   - add styles for settings dialog
This commit is contained in:
rxf
2023-04-05 20:52:03 +02:00
parent 7a15817936
commit 701b763bb1
9 changed files with 182 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/chart_utilities.js
+1 -1
View File
@@ -179,7 +179,7 @@ export async function addSensorID2chart(chart, sensor, width) {
}
export const showError = (err) => {
document.querySelector('.modal-body').setHTML(err)
document.querySelector('#dialogError .modal-dialog .modal-content .modal-body').setHTML(err)
let myModal = new bootstrap.Modal(document.getElementById('dialogError'))
myModal.show()
}
public/javascripts/global.js
+43 -2
View File
@@ -11,6 +11,8 @@ import * as chart_daynight from './chart_daynight.js'
import * as chart_lden from './chart_lden.js'
import * as utils from "./chart_utilities.js";
import { tabtable, loadAll } from './showcharts.js'
import { DateTime } from './luxon.min.js'
(async () => {
@@ -24,9 +26,11 @@ import { tabtable, loadAll } from './showcharts.js'
let params = { // set defaults
center: Stuttgart,
zoom: 10,
span: 1,
peak: 70,
datetime: '',
seldate: 'today',
refresh: 0,
starttime: '2023-01-01T00:00:00Z', //date2ISO(defaultStartime),
endtime: '2023-03-01T00:00:00Z' //date2ISO(emptyTimes.emptyHMtime)
}
let status = {
@@ -34,6 +38,43 @@ import { tabtable, loadAll } from './showcharts.js'
}
// END global variables
// Register events
document.querySelector('#btnSave').addEventListener('click', () => {
const selDate = document.getElementById('startday').value
let starttime
if (selDate === 'today') {
starttime = DateTime.now().toISO()
} else {
starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toISO()
}
params.seldate = selDate
const span = document.getElementById('nbrofdays').value
const peak = document.getElementById('peaklim').value
console.log(starttime, span, peak)
params.datetime = starttime
if(span < 10) {
params.span = span
}
if(peak < 130 ) {
params.peak = peak
}
status.loaded = false
})
document.querySelector('#btnSet').addEventListener('click', () => {
// document.querySelector('#dialogSettings .modal-dialog .modal-content .modal-body').setHTML('Das ist das Setting')
let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
flatpickr('#startday', {
maxDate: 'today',
minDate: new Date().fp_incr(-365),
})
document.getElementById('startday').value = params.seldate
document.getElementById('nbrofdays').value = params.span
document.getElementById('peaklim').value = params.peak
myModal.show()
})
// main function:
// show the map if calle w/o any parameter
public/javascripts/map.js
+5 -6
View File
@@ -59,15 +59,14 @@ export async function showMap(params, status) {
params.sid = clickedSensor
let triggerEl = document.querySelector('#livetab')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
await showChart(params, 'live', 'dlive')
loadAll(params)
status.loaded = true
let ok = await showChart(params, 'live', 'dlive')
if (ok) {
loadAll(params)
status.loaded = true
}
map.setView([clickedcoords.lat, clickedcoords.lng]);
})
})
}
public/javascripts/showcharts.js
+20 -10
View File
@@ -2,6 +2,7 @@ import {logerror} from "./logit.js";
import * as utils from "./chart_utilities.js";
import { DateTime } from './luxon.min.js'
import * as map from "./map.js";
import {showError} from "./chart_utilities.js";
// table to distribute the different charts
export const tabtable = [
@@ -55,25 +56,34 @@ export async function showChart(params, typ, container) {
}
}
const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}`
const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}&span=${params.span}&datetime=${params.datetime.slice(0,-10)}&peak=${params.peak}`
let ret = await fetch(url)
.catch(e => {
logerror(e)
});
let erg = await ret.json()
erg.options.xAxis.labels.formatter = xformat
erg.options.tooltip.formatter = form
let chart = Highcharts.chart(container, erg.options, function (chart) {
utils.addSensorID2chart(chart, {
sid: erg.params.sensorid,
indoor: erg.params.indoor
}, document.getElementById(container).offsetWidth)
})
if (!erg.err) {
erg.options.xAxis.labels.formatter = xformat
erg.options.tooltip.formatter = form
let chart = Highcharts.chart(container, erg.options, function (chart) {
utils.addSensorID2chart(chart, {
sid: erg.params.sensorid,
indoor: erg.params.indoor
}, document.getElementById(container).offsetWidth)
})
return true
} else {
showError(erg.err)
return false
}
}
export const loadAll = async (params) => {
console.log('now load all in Background')
for (let i = 2; i < tabtable.length; i++) {
await showChart(params, tabtable[i].type, tabtable[i].container)
let ok = await showChart(params, tabtable[i].type, tabtable[i].container)
if (!ok) {
break;
}
}
}
public/stylesheets/style.css
+41
View File
@@ -172,4 +172,45 @@ footer #author #versn {
zIndex: 5;
}
.settings {
text-align: left;
}
.thelabels {
width: 40%;
float: left;
}
.theInputs {
float: left;
}
.rows {
width: 100%;
display: block;
}
.column {
width: 100%;
display: inline-block;
margin-bottom: 15px;
}
#startday {
width: 60%;
}
#nbrofdays, #peaklim {
width: 20%;
}
.addit {
width: 20%;
border: 1px solid blue;
}
#klein {
font-size: 80%;
}
/*# sourceMappingURL=style.css.map */
public/stylesheets/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE","file":"style.css"}
public/stylesheets/style.sass
+34
View File
@@ -165,3 +165,37 @@ footer
zIndex: 5
.settings
text-align: left
.thelabels
width: 40%
float: left
// border: 1px solid green
.theInputs
//width: 60%
float: left
// border: 1px red solid
.rows
width: 100%
display: block
.column
width: 100%
display: inline-block
margin-bottom: 15px
#startday
width: 60%
#nbrofdays, #peaklim
width: 20%
.addit
width: 20%
border: 1px solid blue
#klein
font-size: 80%
views/index.pug
+32 -2
View File
@@ -35,7 +35,7 @@ block content
#dlive
.tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
#dhour
Peaks merged to .tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
.tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
#dday
.tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
#ddaynight DayNightTAB
@@ -44,7 +44,7 @@ Peaks merged to .tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="m
// Error-Dialog
.modal.fade#dialogError(tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true")
.modal.fade#dialogError(tabindex="-1" role="dialog" aria-labelledby="Error" aria-hidden="true")
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
@@ -55,3 +55,33 @@ Peaks merged to .tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="m
.modal-footer
//button(type="button" class="btn btn-secondary" data-bs-dismiss="modal") Close
// button(type="button" class="btn btn-primary") Save changes
// Settings-Dialog
.modal.fade#dialogSettings(tabindex="-1" role="dialog" aria-labelledby="Settings" aria-hidden="true")
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
h5.modal-title.dialogErrorTitle Settings
button(type="button" class="close" data-bs-dismiss="modal" aria-label="Close")
span(aria-hidden="true") &times;
.modal-body.settings
.rows
.column
label.thelabels(for='startday')
| Start date:
input.theInputs#startday(name='startday' )
.column
label.thelabels(for='nbrofdays')
| Number of days:<br />
span#klein (Only for live chart)
input.theInputs#nbrofdays(type = 'number' name = 'nbrofdays')
| &nbsp;&nbsp;(max. 10)
.column
label.thelabels(for='peaklim')
| Count peaks over
input.theInputs#peaklim(type = 'number' name = 'peaklim')
| &nbsp;&nbsp;dbA
.modal-footer
button.btn.btn-secondary(type="button" data-bs-dismiss="modal") Close
button#btnSave.btn.btn-primary(type="button" data-bs-dismiss="modal") Save changes
views/layout.pug
+5 -1
View File
@@ -10,6 +10,8 @@ html
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin="")
link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css")
link(rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css")
link(rel='stylesheet', href='/stylesheets/style.css')
script.
@@ -46,5 +48,7 @@ html
crossorigin="")
script(src="/javascripts/leaflet.markercluster.js")
script(src="https://code.highcharts.com/highcharts.js")
script(src="https://code.highcharts.com/modules/accessibility.js")
script(src="https://cdn.jsdelivr.net/npm/flatpickr")
script(src="https://unpkg.com/flatpickr@4.2.3/dist/plugins/confirmDate/confirmDate.js")
//script(src="https://unpkg.com/flatpickr@4.6.9/dist/plugins/confirmDate.js")
script(type="module" src="/javascripts/global.js")