Geht jetzt ohne Bootstrap/jquery

public/javascripts/chart_utilities.js

@@ -180,17 +180,41 @@ export async function addSensorID2chart(chart, sensor, width) {
 }
 
 export const showError = (err) => {
-    let e = document.querySelector('#dialogError .modal-dialog .modal-content .modal-body')
-    e.innerHTML = err
-    let myModal = new bootstrap.Modal(document.getElementById('dialogError'))
-    myModal.show()
+    const dialog = document.getElementById('dialogError')
+    const body = dialog.querySelector('.dialog-body')
+    body.innerHTML = err
+    dialog.showModal()
 }
 
 export const showReset = () => {
-    let myModal = new bootstrap.Modal(document.getElementById('dialogReset'))
-    myModal.show()
+    const dialog = document.getElementById('dialogReset')
+    dialog.showModal()
 }
 
+// Setup dialog close buttons
+document.addEventListener('DOMContentLoaded', () => {
+    const errorClose = document.querySelector('#dialogError .dialog-close')
+    if (errorClose) {
+        errorClose.addEventListener('click', () => {
+            document.getElementById('dialogError').close()
+        })
+    }
+    
+    const resetClose = document.querySelector('#dialogReset .dialog-close')
+    if (resetClose) {
+        resetClose.addEventListener('click', () => {
+            document.getElementById('dialogReset').close()
+        })
+    }
+    
+    const resetOk = document.querySelector('#btnResetOk')
+    if (resetOk) {
+        resetOk.addEventListener('click', () => {
+            document.getElementById('dialogReset').close()
+        })
+    }
+})
+
 // remove the taps (if shownig the map)
 export const removeTabs = () => {
     document.querySelector('#navi').style.display = 'none'

public/javascripts/global.js

@@ -135,37 +135,32 @@ import * as spin from './spinner.js'
         // }
     })
 
-    $.datepicker.regional['de'] = {
-        monthNames: ['Januar','Februar','März','April','Mai','Juni',
-        'Juli','August','September','Oktober','November','Dezember'],
-        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
-        'Jul','Aug','Sep','Okt','Nov','Dez'],
-        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
-        dayNamesShort: ['Son','Mon','Die','Mit','Don','Fre','Sam'],
-        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
-        firstDay: 1};
-
     // Btn 'Settings' pressed
     document.querySelector('#btnSet').addEventListener('click', () => {
         const curtab = getCurrentTab()
-        let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
-        const lang = localStorage.getItem('curlang')
-        $('#startday').datepicker($.extend(
-            {},
-            $.datepicker.regional[lang],
-            {
-                dateFormat: 'yy-mm-dd',
-                maxDate: new Date(),
-                minDate: minDate,
-            })
-        )
-        document.getElementById('startday').value = params.seldate
+        const dialog = document.getElementById('dialogSettings')
+        
+        // Set max and min dates for date input
+        const today = new Date().toISOString().split('T')[0]
+        const minDateStr = minDate.toISOString().split('T')[0]
+        const startdayInput = document.getElementById('startday')
+        startdayInput.max = today
+        startdayInput.min = minDateStr
+        
+        // Convert seldate format if needed
+        let seldate = params.seldate
+        if (seldate === 'today' || seldate === 'heute') {
+            seldate = today
+        }
+        
+        startdayInput.value = seldate
         document.getElementById('nbrofdays').value = params.span
         document.getElementById('peaklim').value = params.peak
         document.getElementById('olderthan').value = params.weeks
         const centercity = JSON.parse(localStorage.getItem('centercity'))
         document.getElementById('centercity').value = centercity.name
-        // select different infos depending on the selcted tab
+        
+        // select different infos depending on the selected tab
         // first clear all
         document.querySelector('#ccity').style.display = 'none'
         document.querySelector('#stday').style.display = 'none'
@@ -175,13 +170,22 @@ import * as spin from './spinner.js'
         for(let i = 0; i < setting.length; i++) {
             if(setting[i].typ === curtab) {
                 for(let j = 0; j < setting[i].show.length; j++) {
-                    let x = `#${setting[i].show[j]}`
                     document.querySelector(`#${setting[i].show[j]}`).style.display = 'inline'
                 }
                 break
             }
         }
-        myModal.show()
+        dialog.showModal()
+    })
+    
+    // Close button for settings dialog
+    document.querySelector('#dialogSettings .dialog-close').addEventListener('click', () => {
+        document.getElementById('dialogSettings').close()
+    })
+    
+    // Close button (secondary button)
+    document.querySelector('#btnClose').addEventListener('click', () => {
+        document.getElementById('dialogSettings').close()
     })
 
     const getSensorType = async (sid) => {
@@ -231,13 +235,20 @@ import * as spin from './spinner.js'
         setInterval(() => dt.showDate(false, params), 1000)
 
         // initialise tabs
-        const triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
+        const triggerTabList = [].slice.call(document.querySelectorAll('.tab-button'))
         triggerTabList.forEach(function (triggerEl) {
-            let tabTrigger = new bootstrap.Tab(triggerEl)
-
             triggerEl.addEventListener('click', function (event) {
                 event.preventDefault()
-                tabTrigger.show()
+                
+                // Remove active from all tabs
+                triggerTabList.forEach(tab => tab.classList.remove('active'))
+                document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'))
+                
+                // Add active to clicked tab
+                triggerEl.classList.add('active')
+                const targetId = triggerEl.getAttribute('data-target')
+                document.getElementById(targetId).classList.add('active')
+                
                 let newtab = event.currentTarget.id
                 setCurrentTab(newtab)
                 let tab = tabtable.find(tab => tab.id === newtab)
@@ -263,8 +274,13 @@ import * as spin from './spinner.js'
             params.center.coords = [props.location[0].loc.coordinates[1], props.location[0].loc.coordinates[0]] 
             params.sid = csid
             let t = triggerTabList[1]
-            let tt = new bootstrap.Tab(t)
-            tt.show()
+            
+            // Switch to live tab
+            triggerTabList.forEach(tab => tab.classList.remove('active'))
+            document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'))
+            t.classList.add('active')
+            document.getElementById('t_live').classList.add('active')
+            
             setCurrentTab('livetab')
             let err = await showChart(params, ttIndex.live)
             spin.spinner.stop()

public/javascripts/map_noise.js

@@ -151,8 +151,13 @@ async function onMarkerClick(e, click, txts, params, mpp) {
         let ok = await showChart(params, utils.ttIndex.live)
         spin.spinner.stop()
         if (ok) {
+            // Switch to live tab
             let triggerEl = document.querySelector(`#livetab`)
-            bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+            document.querySelectorAll('.tab-button').forEach(tab => tab.classList.remove('active'))
+            document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'))
+            triggerEl.classList.add('active')
+            document.getElementById('t_live').classList.add('active')
+            
             params.center.coords = [e.latlng.lat, e.latlng.lng]
             ev.preventDefault()
             await loadAll(params)