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)

public/stylesheets/style.css

@@ -261,15 +261,6 @@ footer #author #versn {
     display: none;
   }
 }
-.nav-tabs .nav-item .nav-link {
-  background-color: #2D6AF8;
-  color: #FFF;
-}
-
-.nav-tabs .nav-item .nav-link.active {
-  color: #2D6AF8;
-  background-color: #FFFFFF;
-}
 
 #stday, #nbday, #pklim, #odth {
   display: none;
@@ -298,4 +289,199 @@ footer #author #versn {
 
 .errdiv {
   display: none;
-}/*# sourceMappingURL=style.css.map */
+}
+
+/* Button Styles */
+button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+button:hover {
+  background-color: #e9ecef;
+}
+
+button:active {
+  background-color: #dee2e6;
+}
+
+#btnSet, #btnHelp {
+  background-color: #2D6AF8;
+  color: white;
+  border-color: #2D6AF8;
+}
+
+#btnSet:hover, #btnHelp:hover {
+  background-color: #1e5ae8;
+}
+
+#btnMyLocation {
+  background-color: white;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 2px;
+  background-color: #f1f1f1;
+  border-bottom: 1px solid #ccc;
+  padding: 0;
+  margin: 0 0.5vw;
+}
+
+.tab-button {
+  background-color: #2D6AF8;
+  color: white;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.tab-button:hover {
+  background-color: #1e5ae8;
+}
+
+.tab-button.active {
+  background-color: white;
+  color: #2D6AF8;
+  border-bottom: 2px solid white;
+}
+
+.tab-content {
+  display: block;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* Dialog Styles */
+dialog {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  max-width: 600px;
+  width: 90%;
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.dialog-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  opacity: 0.5;
+}
+
+.dialog-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.dialog-body {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: 60vh;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.dialog-button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.dialog-button.primary {
+  background-color: #2D6AF8;
+  color: white;
+  border-color: #2D6AF8;
+}
+
+.dialog-button.primary:hover {
+  background-color: #1e5ae8;
+}
+
+.dialog-button.secondary {
+  background-color: #6c757d;
+  color: white;
+  border-color: #6c757d;
+}
+
+.dialog-button.secondary:hover {
+  background-color: #5a6268;
+}
+
+/* Radio buttons */
+.radio-group {
+  display: flex;
+  gap: 15px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.radio-label input[type="radio"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=style.css.map */