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