admin/noise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings split according to chart

Browse Source 
routes/api.js
   - check type of sensor
   - translate error message

app.js
   - debug = false at i18n

public/javascripts/chart_utilities.js
   - setter/getter for current Tab

public/javascripts/global.js
   - settings dialog completely rearranged
   - if only sensorid is given, check type

routes/index.js
   - set language to global variable

views/index.pug
   - reaggange settings dialog
   - translate 'Error'

views/layout.pug
   - load new datepicker (vanillajs-datepicker)

public/javascripts/map.js
   - fetching from server refactored to function
   - reenable tabs after leaving map

charts/preparecharts
   - typo

public/javascripts/showcharts.js
   - loadAll extended to  load also live and map

public/stylesheets/style.sass
   - a few changes for settinds dialog

locales/[de|en]
   - added a few words

charts/utilities.js
   - setter and getter for language
This commit is contained in:
rxf
2023-05-09 16:10:07 +02:00
parent 58e25bf468
commit 4cea325f56
16 changed files with 190 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+1 -1
View File
@@ -26,7 +26,7 @@ i18next
loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json'
},
fallbackLng: 'de',
debug: true,
debug: false,
preload: ['de', 'en']
});
charts/preparecharts.js
+1 -1
View File
@@ -191,7 +191,7 @@ export const liveData = (params, values, req) => {
export const havgData = (params, values) => {
let series1 = []
let series2 = []
// Put values into the serieses
// Put values into the series
let cnt = 0
values.forEach((x) => {
if (x.n_AVG != -1) {
charts/utilities.js
+9
View File
@@ -2,6 +2,8 @@
import { translate as trans } from '../routes/index.js'
let language = 'en'
export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'};
export const noise_ymin = 30;
@@ -139,3 +141,10 @@ export function calcDays(data, isyear) {
return days;
};
export const setLanguage = (lng) => {
language = lng
}
export const getLanguage = () => {
return language
}
locales/de/translation.json
+3 -2
View File
@@ -41,6 +41,7 @@
"Version": "Version",
"from": "vom",
"RemoveFromMap": "Sensoren nicht anzeigen, die nicht gesendet haben seit",
"weeks": "Wochen"
"weeks": "Wochen",
"ESYSCALL": "Fehler vom Serveraufruf: ",
"Error": "Fehler"
}
locales/en/translation.json
+3 -1
View File
@@ -41,5 +41,7 @@
"Version": "Version",
"from": "from",
"RemoveFromMap": "Don't show sensors that have not sent for",
"weeks": "weeks"
"weeks": "weeks",
"ESYSCALL": "Error from Syscall: ",
"Error": "Error"
}
public/javascripts/chart_utilities.js
+16 -1
View File
@@ -15,7 +15,7 @@ let stucols = 1; // Anzeige nur Balken (StundenMittel)
export const noise_ymin = 30; // lowest value on y-axis for noise
export const noise_ymax = 120; // highest value on y-axis for noise
let activeTab = 0; // active TAB number
let activeTab = 'maptab'; // active TAB ID
export let peaklim = 70; // threshold for peak count
export const url = '/api'
@@ -197,3 +197,18 @@ export const showTabs = () => {
document.querySelector('#navi').style.display = 'block'
}
export const setCurrentTab = (tab) => {
activeTab = tab
}
export const getCurrentTab = () => {
return activeTab
}
export const fetchfromserver = async (url) => {
const ret = await fetch(url)
.catch(e => {
showError(e)
});
return await ret.json()
}
public/javascripts/global.js
+82 -38
View File
@@ -3,16 +3,14 @@
import * as map from './map.js'
import * as dt from './datetime.js'
import {logerror, logit} from './logit.js'
import {tabtable, loadAll, showChart} from './showcharts.js'
import {loadAll, showChart} from './showcharts.js'
import { DateTime } from './luxon.min.js'
import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_utilities.js";
(async () => {
// global constants
const Stuttgart = [48.779, 9.16]
const MAXROWS_IN_TABLE = 1000
const defaultStartime = '2023-01-01 00:00'
// END global constants
// global variables
@@ -23,10 +21,10 @@ import { DateTime } from './luxon.min.js'
peak: 70,
weeks: 4,
datetime: '',
seldate: 'today',
seldate: '',
refresh: 0,
sid: ''
}
let currentTab = ''
// END global variables
@@ -34,56 +32,94 @@ import { DateTime } from './luxon.min.js'
// Register events
// Every input with value check
const checkPlausibility = (id, min, max) => {
document.getElementById(id).addEventListener('change', function() {
let v = parseInt(this.value)
if(v < min) this.value = min
if (v > max) this.value = max
})
}
checkPlausibility('nbrofdays', 1, 10)
checkPlausibility('peaklim', 10, 130)
checkPlausibility('olderthan', 0, 52)
// Button 'Save' pressed
document.querySelector('#btnSave').addEventListener('click', async () => {
const selDate = document.getElementById('startday').value
let starttime
if (selDate === 'today') {
starttime = DateTime.now().toISO()
params.datetime = ''
if ((selDate === 'today') || (selDate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === selDate)) {
starttime = ''
} else {
starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toISO()
starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toUTC().toISO()
}
params.datetime = starttime
}
params.seldate = selDate
const span = document.getElementById('nbrofdays').value
const peak = document.getElementById('peaklim').value
const weeks = document.getElementById('olderthan').value
console.log(starttime, span, peak)
if(span < 10) {
params.span = span
}
if(peak < 130 ) {
params.peak = peak
}
if (weeks < 52) {
params.weeks = weeks
}
params.span = parseInt(document.getElementById('nbrofdays').value)
params.peak = parseInt(document.getElementById('peaklim').value)
params.weeks = parseInt(document.getElementById('olderthan').value)
let newlng = document.querySelector('#sellan input:checked').id
let oldlng = localStorage.getItem('curlang')
localStorage.setItem('curlang', newlng)
if(newlng !== oldlng) {
location.reload()
}
if(params.sid !== undefined) {
await loadAll(params)
}
await loadAll(params,0)
// ToDo:
// Load ALL incl. MAP und LIVE hier, d.h. an loadAll einen zusätzlichen Parameter übergeben
// if(params.sid !== undefined) {
// await loadAll(params)
// }
})
// Btn 'Settings' pressed
document.querySelector('#btnSet').addEventListener('click', () => {
// document.querySelector('#dialogSettings .modal-dialog .modal-content .modal-body').setHTML('Das ist das Setting')
const curtab = getCurrentTab()
let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
flatpickr('#startday', {
maxDate: 'today',
minDate: new Date().fp_incr(-365),
const lang = localStorage.getItem('curlang')
const elem = document.querySelector('#startday')
const datepicker = new Datepicker(elem, {
buttonClass: 'btn',
autoHide: true,
format: 'yyyy-mm-dd',
language: lang,
maxDate: new Date(),
minDate: new Date(new Date().setDate(new Date().getDate() - 365)),
defaultViewDate: new Date(),
todayButton: true,
todayButtonMode: 1
})
document.getElementById('startday').value = params.seldate
document.getElementById('nbrofdays').value = params.span
document.getElementById('peaklim').value = params.peak
document.getElementById('olderthan').value = params.weeks
// select different infos depoending on the selcted tab
// first clear all
document.querySelector('#stday').style.display = 'inline'
document.querySelector('#nbday').style.display = 'none'
document.querySelector('#pklim').style.display = 'none'
document.querySelector('#odth').style.display = 'none'
if(curtab === 'maptab') {
document.querySelector('#stday').style.display = 'none'
document.querySelector('#odth').style.display = 'inline'
}
if(curtab === 'livetab') {
document.querySelector('#nbday').style.display = 'inline'
}
if(
(curtab === 'houravgtab') || (curtab === 'dayavgtab')) {
document.querySelector('#pklim').style.display = 'inline'
}
myModal.show()
})
const getSensorType = async (sid) => {
let url = `/api/getoneproperty?sensorid=${sid}`
const data = await fetchfromserver(url)
return data.props.type
}
// main function:
// show the map if called w/o any parameter
@@ -93,8 +129,10 @@ import { DateTime } from './luxon.min.js'
const currentLang = localStorage.getItem('curlang')
if(currentLang === 'en') {
document.querySelector('#en').checked = true
params.seldate = 'today'
} else {
document.querySelector('#de').checked = true
params.seldate = 'heute'
}
console.log(currentLang)
history.pushState({}, '', '/')
@@ -107,10 +145,9 @@ import { DateTime } from './luxon.min.js'
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
currentTab = event.currentTarget.id
if (currentTab === 'maptab') {
map.showMap(params, sysparams)
// document.querySelector('#sellan').style.display = 'inline'
setCurrentTab(event.currentTarget.id)
if (getCurrentTab() === 'maptab') {
map.showMap(params)
}
})
})
@@ -121,17 +158,24 @@ import { DateTime } from './luxon.min.js'
const csid = parseInt(sysparams.csid)
if(csid !== -1) {
// check, if sid is of right type (noise)
const typ = await getSensorType(csid)
if (typ !== 'noise') {
// wrong sensor type
showError('Sensor ID ' + csid + ' is not of type noise')
return
}
let triggerEl = document.querySelector('#livetab')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
params.sid = csid
let ok = await showChart(params, 'live', 'dlive')
setCurrentTab('livetab')
if (ok) {
await loadAll(params)
}
} else {
// show the map
document.querySelector('#sellan').style.display = 'inline'
map.showMap(params,sysparams)
map.showMap(params)
}
}
public/javascripts/map.js
+17 -19
View File
@@ -3,6 +3,7 @@
import * as dt from './datetime.js'
import * as utils from "./chart_utilities.js"
import { showChart, loadAll } from './showcharts.js'
import {fetchfromserver} from "./chart_utilities.js";
let map = null
let bounds
@@ -14,7 +15,7 @@ const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#328
const dba = [100, 80, 60, 40, 20, 0, -999];
const APIURL = '/api/getmapdata?'
export async function showMap(params, sysparams) {
export async function showMap(params) {
utils.removeTabs()
if(map && map.remove) {
map.off();
@@ -29,7 +30,7 @@ export async function showMap(params, sysparams) {
map.on('moveend', async function () {
bounds = map.getBounds()
await buildMarkers(bounds)
await buildMarkers(params)
});
let legend = L.control({position: 'bottomright'})
@@ -48,17 +49,20 @@ export async function showMap(params, sysparams) {
};
legend.addTo(map)
let lastdate = await buildMarkers()
let lastdate = await buildMarkers(params)
showLastDate(lastdate);
map.on('popupopen', function () {
document.querySelector('.speciallink').addEventListener('click', async function (x) {
console.log(`Event clicked: ${clickedSensor}`)
document.querySelector('#navi').style.display = 'block'
utils.showTabs()
document.querySelector('#odth').style.display = 'none'
document.querySelector('#nbday').style.display = 'inline'
params.sid = clickedSensor
let triggerEl = document.querySelector('#livetab')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
localStorage.setItem('activeTab', 'livetab')
utils.setCurrentTab('livetab')
let ok = await showChart(params, 'live', 'dlive')
if (ok) {
await loadAll(params)
@@ -160,19 +164,14 @@ function buildIcon(color, n, indoor) {
}
export async function buildMarkers() {
export async function buildMarkers(params) {
// debug_log('buildMarkers(bounds)');
const box = {
west: bounds.getWest(), south: bounds.getSouth(),
east: bounds.getEast(), north: bounds.getNorth()
}
const url = APIURL + `type=noise&box=${bounds.toBBoxString()}`
let ret = await fetch(url)
.catch(e => {
console.log(e)
});
let sensors = await ret.json()
let sensors = await fetchfromserver(url)
if (!sensors.err) {
let markers = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
@@ -190,9 +189,11 @@ export async function buildMarkers() {
});
for (let x of sensors.values) {
if (x.value <= -4) {
if ((params.weeks > 0) && (x.weeks > params.weeks))
continue
}
// if (x.value <= -4) {
// continue
// }
let marker = L.marker([x.location[1], x.location[0]], {
icon: new L.Icon({
iconUrl: buildIcon(getColor(parseInt(x.value)), 0, x.indoor),
@@ -249,6 +250,7 @@ export async function buildMarkers() {
}
/*
async function getCoords(city) {
let url = NOMINATIM_URL + city;
const response = await axios.get(encodeURI(url));
@@ -262,16 +264,12 @@ async function setCenter(adr) {
map.setView([parseFloat(data.lat), parseFloat(data.lon)]);
console.log(data);
}
*/
// Show the last date below tha map grafics
async function showLastDate(ld) {
const url = APIURL + 'type=noise'
let ret = await fetch(url)
.catch(e => {
console.log(e)
});
let sensors = await ret.json()
let sensors = await fetchfromserver(url)
document.querySelector('#mapdate').innerText = `${sensors.valfromtxt} ${dt.formatISODate(ld).slice(0,-3)}`
document.querySelector('#actsensors').innerText = `${sensors.actsensors} ${sensors.registered}`
// $('#actsensors').html(`${erg.count} aktive Sensoren (angemeldet ${allsens})`)
public/javascripts/showcharts.js
+17 -10
View File
@@ -2,7 +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";
import {fetchfromserver, showError} from "./chart_utilities.js";
// table to distribute the different charts
export const tabtable = [
@@ -55,13 +55,13 @@ export async function showChart(params, typ, container) {
return this.axis.defaultLabelFormatter.call(this);
}
}
const curlang = localStorage.getItem('curlang')
const url = `/api/getsensordata?sensorid=${params.sid}&data=${typ}&span=${params.span}&datetime=${params.datetime.slice(0,-10)}&peak=${params.peak}&lng=en`
let ret = await fetch(url)
.catch(e => {
logerror(e)
});
let erg = await ret.json()
let url = `/api/getsensordata?sensorid=${params.sid}&data=${typ}&datetime=${params.datetime}`
if (typ === 'live') {
url += `&span=${params.span}`
} else if ((typ === 'havg') || (typ === 'davg')) {
url += `&peak=${params.peak}`
}
let erg = await fetchfromserver(url)
if (!erg.err) {
erg.options.xAxis.labels.formatter = xformat
erg.options.tooltip.formatter = form
@@ -96,12 +96,19 @@ export async function showChart(params, typ, container) {
}
}
export const loadAll = async (params) => {
export const loadAll = async (params, start = 2) => {
console.log('now load all in Background')
for (let i = 1; i < tabtable.length; i++) {
if (start == 0) {
map.showMap(params)
start++
}
if (params.sid !== -1) {
utils.showTabs()
for (let i = start; i < tabtable.length; i++) {
let ok = await showChart(params, tabtable[i].type, tabtable[i].container)
if (!ok) {
break;
}
}
}
}
public/stylesheets/style.css
+2 -2
View File
@@ -201,7 +201,7 @@ footer #author #versn {
}
#nbrofdays, #peaklim, #olderthan {
width: 10%;
width: 13%;
}
.addit {
@@ -244,7 +244,7 @@ footer #author #versn {
background-color: #FFFFFF;
}
#sellan {
#stday, #nbday, #pklim, #odth {
display: none;
}
public/stylesheets/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA9BoB;;AAgCpB;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,eA5Ec;EA6Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBAhGoB;;AAkGpB;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;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;IACE;;;AAEJ;EACE,kBAnNa;EAoNb;;;AAEF;EACE,OAvNa;EAwNb;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA9BoB;;AAgCpB;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,eA5Ec;EA6Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBAhGoB;;AAkGpB;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;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;IACE;;;AAEJ;EACE,kBAnNa;EAoNb;;;AAEF;EACE,OAvNa;EAwNb;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA","file":"style.css"}
public/stylesheets/style.sass
+5 -2
View File
@@ -192,7 +192,7 @@ footer
width: 40%
#nbrofdays, #peaklim, #olderthan
width: 10%
width: 13%
.addit
width: 20%
@@ -226,9 +226,12 @@ footer
color: $navtab-color
background-color: #FFFFFF
#sellan
// for settings: set all to 'none'
#stday, #nbday, #pklim, #odth
display: none
// for first page to show 'Loading ...'
#first
display: flex
routes/api.js
+13 -11
View File
@@ -1,6 +1,8 @@
import express from 'express'
import axios from 'axios'
import * as prep from '../charts/preparecharts.js'
import { getLanguage } from '../charts/utilities.js'
import { translate as trans } from '../routes/index.js'
const router = express.Router()
@@ -15,28 +17,28 @@ const disttable = [
let APIHOST = process.env.APIHOST || 'http://localhost:3004'
/* GET home page. */
router.get('/:cmd', async function(req, res, next) {
req.i18n.changeLanguage(req.query.lng)
let l = req.i18n.resolvedLanguage
let txt = req.i18n.t('Settings')
// req.i18n.changeLanguage(req.query.lng)
const cmd = req.params.cmd
const lng = getLanguage()
// console.log('api.js: cmd = ' + cmd + ', language = ' + lng)
let url = APIHOST
if(isNaN(cmd)) {
url += req.originalUrl
} else {
// cmd is a number ==> sid
url += `getsensordata?sid=${cmd}`
}
url += (req.originalUrl + `&lng=${lng}`)
try {
const response = await axios(encodeURI(url));
if (response.status !== 200) {
res.json({err: `Error from servercall: status = ${response.status}`})
res.json({err: `${trans('ESYSCALL')} status=${response.status}`})
}
if(response.data.err) {
res.json(response.data)
return
}
if (cmd === 'getoneproperty') {
res.json(response.data)
return
}
const options = response.data.options
for(let x of disttable) {
if (x.type === options.data) {
@@ -46,7 +48,7 @@ router.get('/:cmd', async function(req, res, next) {
}
}
} catch (e) {
res.json({err: `Error from servercall: ${e}`})
res.json({err: `${trans('ESYSCALL')} ${e}`})
}
})
routes/index.js
+4 -2
View File
@@ -1,5 +1,6 @@
import express from 'express'
import pkg from '../package.json' assert { type: "json" }
import { setLanguage } from '../charts/utilities.js'
const router = express.Router()
const { name, version, date } = pkg
@@ -18,8 +19,8 @@ let i18n;
const translate = (x) => {
return i18n.t(x)
}
/* GET home page. If there is no parameter 'lng=xx', checke stored language and call
te page again wird correct language (chglang.js))
/* GET home page. If there is no parameter 'lng=xx', check stored language and call
te page again with correct language (chglang.js))
*/
router.get('/', function(req, res, next) {
// req.i18n.changeLanguage('de')
@@ -28,6 +29,7 @@ router.get('/', function(req, res, next) {
} else {
i18n = req.i18n
let opts = renderOpts(-1)
setLanguage(req.query.lng)
res.render('index', opts)
}
})
views/index.pug
+9 -7
View File
@@ -55,7 +55,7 @@ block content
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
h5.modal-title.dialogErrorTitle Error
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
@@ -74,27 +74,29 @@ block content
span(aria-hidden="true") &times;
.modal-body.settings
.rows
.column
.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')
input.theInputs#nbrofdays(type = 'number' name = 'nbrofdays', min="1", max="10")
span.klein &nbsp;&nbsp;(max. 10)
.column
.column#pklim
label.thelabels(for='peaklim')
| #{t("Count_peaks_over")}
input.theInputs#peaklim(type = 'number' name = 'peaklim')
input.theInputs#peaklim(type = 'number' name = 'peaklim', min="10", max="130")
| &nbsp;&nbsp;dbA
span.klein &nbsp;&nbsp;(max. 130)
.column
.column#odth
label.thelabels(for='olderthan')
| #{t("RemoveFromMap")}
input.theInputs#olderthan(type = 'number' name = 'olderthan')
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")}:
views/layout.pug
+4 -5
View File
@@ -10,8 +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="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css")
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/css/datepicker.min.css")
link(rel='stylesheet', href='/stylesheets/style.css')
script.
@@ -50,7 +50,6 @@ html
crossorigin="")
script(src="/javascripts/leaflet.markercluster.js")
script(src="https://code.highcharts.com/highcharts.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(src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/js/datepicker-full.min.js")
script(src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/js/locales/de.js")
script(type="module" src="/javascripts/global.js")