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

@@ -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

@@ -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

@@ -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')
+            let ok = await showChart(params, 'live', 'dlive')
-            loadAll(params)
+            if (ok) {
-            status.loaded = true
+                loadAll(params)
+                status.loaded = true
+            }
             map.setView([clickedcoords.lat, clickedcoords.lng]);
-
-
         })
     })
-
 }
 
 

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
+    if (!erg.err) {
-    erg.options.tooltip.formatter = form
+        erg.options.xAxis.labels.formatter = xformat
-    let chart = Highcharts.chart(container, erg.options, function (chart) {
+        erg.options.tooltip.formatter = form
-        utils.addSensorID2chart(chart, {
+        let chart = Highcharts.chart(container, erg.options, function (chart) {
-            sid: erg.params.sensorid,
+            utils.addSensorID2chart(chart, {
-            indoor: erg.params.indoor
+                sid: erg.params.sensorid,
-        }, document.getElementById(container).offsetWidth)
+                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

@@ -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 @@
-{"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

@@ -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

@@ -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:<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

@@ -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")