From 701b763bb16a70e44cc7878b0a8354d22123037c Mon Sep 17 00:00:00 2001 From: rxf Date: Wed, 5 Apr 2023 20:52:03 +0200 Subject: [PATCH] Settings added 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 --- public/javascripts/chart_utilities.js | 2 +- public/javascripts/global.js | 45 +++++++++++++++++++++++++-- public/javascripts/map.js | 11 +++---- public/javascripts/showcharts.js | 30 ++++++++++++------ public/stylesheets/style.css | 41 ++++++++++++++++++++++++ public/stylesheets/style.css.map | 2 +- public/stylesheets/style.sass | 34 ++++++++++++++++++++ views/index.pug | 34 ++++++++++++++++++-- views/layout.pug | 6 +++- 9 files changed, 182 insertions(+), 23 deletions(-) diff --git a/public/javascripts/chart_utilities.js b/public/javascripts/chart_utilities.js index f7d2712..9ceb7d1 100644 --- a/public/javascripts/chart_utilities.js +++ b/public/javascripts/chart_utilities.js @@ -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() } diff --git a/public/javascripts/global.js b/public/javascripts/global.js index 4c44a3c..f50522e 100644 --- a/public/javascripts/global.js +++ b/public/javascripts/global.js @@ -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 diff --git a/public/javascripts/map.js b/public/javascripts/map.js index 1c00797..dab4cec 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -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]); - - }) }) - } diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js index 1b788b3..64b8153 100644 --- a/public/javascripts/showcharts.js +++ b/public/javascripts/showcharts.js @@ -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; + } } } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 3d0ac6d..4561dc0 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -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 */ diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map index 851d78c..c34f40a 100644 --- a/public/stylesheets/style.css.map +++ b/public/stylesheets/style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index f588a1c..f0df9a4 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -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% \ No newline at end of file diff --git a/views/index.pug b/views/index.pug index c50b920..a803b55 100644 --- a/views/index.pug +++ b/views/index.pug @@ -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") × + .modal-body.settings + .rows + .column + label.thelabels(for='startday') + | Start date: + input.theInputs#startday(name='startday' ) + .column + label.thelabels(for='nbrofdays') + | Number of days:
+ span#klein (Only for live chart) + input.theInputs#nbrofdays(type = 'number' name = 'nbrofdays') + |   (max. 10) + .column + label.thelabels(for='peaklim') + | Count peaks over + input.theInputs#peaklim(type = 'number' name = 'peaklim') + |   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 diff --git a/views/layout.pug b/views/layout.pug index c3df28d..ec2727f 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -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") \ No newline at end of file