Geht jetzt ohne Bootstrap/jquery

This commit is contained in:
2025-11-05 22:30:57 +00:00
parent 4a50033040
commit 7ba400d79f
6 changed files with 355 additions and 148 deletions
+76 -91
View File
@@ -5,125 +5,110 @@ block content
#hline1
#h1name #{t("NoiseMeasurement")}
#buttonsRight
button.btn.btn-primary#btnSet(value='set') #{t("Settings")}
// button.btn.btn-primary#btnHelp(value='help') #{t("Info")}
button#btnSet(value='set') #{t("Settings")}
// button#btnHelp(value='help') #{t("Info")}
#h1datum
#fenster
#spinner
#navi
ul.nav.nav-tabs#tablist
li.nav-item(role='presentation')
button.nav-link.active#maptab(data-bs-toggle="tab" data-bs-target="#t_map" type="button" role="tab" aria-controls="map" aria-selected="true") #{t("Map")}
li.nav-item(role='presentation')
button.nav-link#livetab(data-bs-toggle="tab" data-bs-target="#t_live" type="button" role="tab" aria-controls="live" aria-selected="true") #{t("Live")}
li.nav-item(role='presentation')
button.nav-link#houravgtab(data-bs-toggle="tab" data-bs-target="#t_houravg" type="button" role="tab" aria-controls="houravg" aria-selected="true") #{t("Hour_AVG")}
li.nav-item(role='presentation')
button.nav-link#dayavgtab(data-bs-toggle="tab" data-bs-target="#t_dayavg" type="button" role="tab" aria-controls="dayavg" aria-selected="true") #{t("Day_AVG")}
li.nav-item(role='presentation')
button.nav-link#daynighttab(data-bs-toggle="tab" data-bs-target="#t_daynight" type="button" role="tab" aria-controls="daynight" aria-selected="true") #{t("Day_Night")}
li.nav-item(role='presentation')
button.nav-link#ldentab(data-bs-toggle="tab" data-bs-target="#t_lden" type="button" role="tab" aria-controls="lden" aria-selected="true") L<sub>DEN</sub>-Index
.tabs#tablist
button.tab-button.active#maptab(data-target="t_map" type="button" role="tab" aria-controls="map" aria-selected="true") #{t("Map")}
button.tab-button#livetab(data-target="t_live" type="button" role="tab" aria-controls="live") #{t("Live")}
button.tab-button#houravgtab(data-target="t_houravg" type="button" role="tab" aria-controls="houravg") #{t("Hour_AVG")}
button.tab-button#dayavgtab(data-target="t_dayavg" type="button" role="tab" aria-controls="dayavg") #{t("Day_AVG")}
button.tab-button#daynighttab(data-target="t_daynight" type="button" role="tab" aria-controls="daynight") #{t("Day_Night")}
button.tab-button#ldentab(data-target="t_lden" type="button" role="tab" aria-controls="lden") L<sub>DEN</sub>-Index
.tab-content#thetabs
.tab-pane.fade.show.active#t_map(role="tabpanel" aria-labelledby="map-tab")
.tab-pane.active#t_map(role="tabpanel")
#map
button.btn.btn-light#btnMyLocation(type="button" title=t("MyLocation"))
button#btnMyLocation(type="button" title=t("MyLocation"))
span 📍
#maptaberr.errdiv
#mapdateactsens
#actsensors
#mapdate
.tab-pane.fade#t_live(role="tabpanel" aria-labelledby="live-tab")
.tab-pane#t_live(role="tabpanel")
#dlive
#livetaberr.errdiv
.tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
.tab-pane#t_houravg(role="tabpanel")
#dhour
#houravgtaberr.errdiv
.tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
.tab-pane#t_dayavg(role="tabpanel")
#dday
#dayavgtaberr.errdiv
.tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
.tab-pane#t_daynight(role="tabpanel")
#ddaynight
#daynighttaberr.errdiv
.tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")
.tab-pane#t_lden(role="tabpanel")
#dlden
#ldentaberr.errdiv
// Error-Dialog
.modal.fade#dialogError(tabindex="-1" role="dialog" aria-labelledby="Error" aria-hidden="true")
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
h5.modal-title.dialogErrorTitle #{t("Error")}
button(type="button" class="close" data-bs-dismiss="modal" aria-label="Close")
span(aria-hidden="true") &times;
.modal-body
.modal-footer
//button(type="button" class="btn btn-secondary" data-bs-dismiss="modal") Close
// button(type="button" class="btn btn-primary") Save changes
dialog#dialogError
.dialog-content
.dialog-header
h3.dialog-title #{t("Error")}
button.dialog-close(type="button" aria-label="Close") &times;
.dialog-body
.dialog-footer
// 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 #{t("Settings")}
button(type="button" class="close" data-bs-dismiss="modal" aria-label="Close")
span(aria-hidden="true") &times;
.modal-body.settings
.rows
.comlumn#ccity
label.thelabels(for='city') #{t("CenterMap")}:
input.theInputs#centercity(name="centercity")
.column#stday
label.thelabels(for='startday') #{t("StartDate")}:
input.theInputs#startday(name='startday' )
.column
.column#nbday
label.thelabels(for='nbrofdays')
| #{t("NumberOfDays")}:<br />
// span.klein (#{t("Only_for_live_chart")})
input.theInputs#nbrofdays(type = 'number' name = 'nbrofdays', min="1", max="10")
span.klein &nbsp;&nbsp;(max. 10)
.column#pklim
label.thelabels(for='peaklim')
| #{t("Count_peaks_over")}
input.theInputs#peaklim(type = 'number' name = 'peaklim', min="10", max="130")
| &nbsp;&nbsp;dbA
span.klein &nbsp;&nbsp;(max. 130)
.column#odth
label.thelabels(for='olderthan')
| #{t("RemoveFromMap")}
input.theInputs#olderthan(type = 'number' name = 'olderthan', min="0", max="52")
| &nbsp;&nbsp;#{t("weeks")}
span.klein &nbsp;&nbsp;(max. 52)
.column
.column#sellan
label.thelabels
| #{t("Language")}:
.form-check.form-check-inline
input#de.form-check-input(type="radio" name="lanbut")
label.form-check-label(for='de') Deutsch
.form-check.form-check-inline
input#en.form-check-input(type="radio" name="lanbut", checked)
label.form-check-label(for="en") English
.modal-footer
button.btn.btn-secondary(type="button" data-bs-dismiss="modal") #{t("Close")}
button#btnSave.btn.btn-primary(type="button" data-bs-dismiss="modal") #{t("Save_changes")}
dialog#dialogSettings
.dialog-content
.dialog-header
h3.dialog-title #{t("Settings")}
button.dialog-close(type="button" aria-label="Close") &times;
.dialog-body.settings
.rows
.column#ccity
label.thelabels(for='city') #{t("CenterMap")}:
input.theInputs#centercity(name="centercity")
.column#stday
label.thelabels(for='startday') #{t("StartDate")}:
input.theInputs#startday(type='date' name='startday')
.column
.column#nbday
label.thelabels(for='nbrofdays')
| #{t("NumberOfDays")}:<br />
input.theInputs#nbrofdays(type='number' name='nbrofdays' min="1" max="10")
span.klein &nbsp;&nbsp;(max. 10)
.column#pklim
label.thelabels(for='peaklim')
| #{t("Count_peaks_over")}
input.theInputs#peaklim(type='number' name='peaklim' min="10" max="130")
| &nbsp;&nbsp;dbA
span.klein &nbsp;&nbsp;(max. 130)
.column#odth
label.thelabels(for='olderthan')
| #{t("RemoveFromMap")}
input.theInputs#olderthan(type='number' name='olderthan' min="0" max="52")
| &nbsp;&nbsp;#{t("weeks")}
span.klein &nbsp;&nbsp;(max. 52)
.column
.column#sellan
label.thelabels
| #{t("Language")}:
.radio-group
label.radio-label
input#de(type="radio" name="lanbut")
span Deutsch
label.radio-label
input#en(type="radio" name="lanbut" checked)
span English
.dialog-footer
button.dialog-button.secondary#btnClose(type="button") #{t("Close")}
button.dialog-button.primary#btnSave(type="button") #{t("Save_changes")}
// Reset-Dialog
.modal.fade#dialogReset(tabindex="-1" role="dialog" aria-labelledby="Error" aria-hidden="true")
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
h5.modal-title.dialogErrorTitle Info
button(type="button" class="close" data-bs-dismiss="modal" aria-label="Close")
span(aria-hidden="true") &times;
.modal-body
.modal-footer
//button(type="button" class="btn btn-secondary" data-bs-dismiss="modal") Close
button(type="button" class="btn btn-primary" data-bs-dismiss="modal") OK
dialog#dialogReset
.dialog-content
.dialog-header
h3.dialog-title Info
button.dialog-close(type="button" aria-label="Close") &times;
.dialog-body
.dialog-footer
button.dialog-button.primary#btnResetOk(type="button") OK
-9
View File
@@ -3,14 +3,10 @@ html
head
title= title
meta(name="viewport" content="width=device-width, initial-scale=1" charset="utf-8")
link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous")
link(rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin="")
link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
link(rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css")
link(rel='stylesheet', href='/spin.js/spin.css')
@@ -33,14 +29,9 @@ html
a(href="mailto:rexfue@gmail.com") mailto:rexfue@gmail.com
#versn #{t('Version')}: #{version} #{t('from')} #{date}
script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous")
script(src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin="")
script(src="/javascripts/leaflet.markercluster.js")
script(src="https://code.highcharts.com/highcharts.js")
script(src="https://code.jquery.com/jquery-3.7.1.min.js")
script(src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js")
script(type="module" src="/javascripts/global.js")