From 4cea325f5639dac40898bb39298334b946412eb0 Mon Sep 17 00:00:00 2001 From: rxf Date: Tue, 9 May 2023 16:10:07 +0200 Subject: [PATCH] Settings split according to chart 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 --- app.js | 2 +- charts/preparecharts.js | 2 +- charts/utilities.js | 9 ++ locales/de/translation.json | 5 +- locales/en/translation.json | 4 +- public/javascripts/chart_utilities.js | 17 +++- public/javascripts/global.js | 120 ++++++++++++++++++-------- public/javascripts/map.js | 36 ++++---- public/javascripts/showcharts.js | 33 ++++--- public/stylesheets/style.css | 4 +- public/stylesheets/style.css.map | 2 +- public/stylesheets/style.sass | 7 +- routes/api.js | 24 +++--- routes/index.js | 6 +- views/index.pug | 16 ++-- views/layout.pug | 9 +- 16 files changed, 190 insertions(+), 106 deletions(-) diff --git a/app.js b/app.js index 0cff2cb..bae1424 100644 --- a/app.js +++ b/app.js @@ -26,7 +26,7 @@ i18next loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json' }, fallbackLng: 'de', - debug: true, + debug: false, preload: ['de', 'en'] }); diff --git a/charts/preparecharts.js b/charts/preparecharts.js index d66fa48..d488051 100644 --- a/charts/preparecharts.js +++ b/charts/preparecharts.js @@ -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) { diff --git a/charts/utilities.js b/charts/utilities.js index a170885..f7593f9 100644 --- a/charts/utilities.js +++ b/charts/utilities.js @@ -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 +} diff --git a/locales/de/translation.json b/locales/de/translation.json index 70fd4ab..b32ac82 100644 --- a/locales/de/translation.json +++ b/locales/de/translation.json @@ -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" } \ No newline at end of file diff --git a/locales/en/translation.json b/locales/en/translation.json index 224d33b..80aa3eb 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -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" } \ No newline at end of file diff --git a/public/javascripts/chart_utilities.js b/public/javascripts/chart_utilities.js index 0c6aaeb..6996455 100644 --- a/public/javascripts/chart_utilities.js +++ b/public/javascripts/chart_utilities.js @@ -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() +} \ No newline at end of file diff --git a/public/javascripts/global.js b/public/javascripts/global.js index 7211480..f599041 100644 --- a/public/javascripts/global.js +++ b/public/javascripts/global.js @@ -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() - params.datetime = starttime + 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) } } diff --git a/public/javascripts/map.js b/public/javascripts/map.js index b8273b0..985a7b3 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -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})`) diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js index c34547f..f552750 100644 --- a/public/javascripts/showcharts.js +++ b/public/javascripts/showcharts.js @@ -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++) { - let ok = await showChart(params, tabtable[i].type, tabtable[i].container) - if (!ok) { - break; + 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; + } } } } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index f610ee3..12cf669 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -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; } diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map index 22e88e8..3d6deb5 100644 --- a/public/stylesheets/style.css.map +++ b/public/stylesheets/style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index 071d29d..4128ac3 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -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 diff --git a/routes/api.js b/routes/api.js index a98daf9..b494da9 100644 --- a/routes/api.js +++ b/routes/api.js @@ -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}`}) } }) diff --git a/routes/index.js b/routes/index.js index 1fc3579..c8007ac 100644 --- a/routes/index.js +++ b/routes/index.js @@ -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) } }) diff --git a/views/index.pug b/views/index.pug index f4bcb44..27f7540 100644 --- a/views/index.pug +++ b/views/index.pug @@ -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") × .modal-body @@ -74,27 +74,29 @@ block content span(aria-hidden="true") × .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")}:
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   (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") |   dbA span.klein   (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") |   #{t("weeks")} span.klein   (max. 52) + .column .column#sellan label.thelabels | #{t("Language")}: diff --git a/views/layout.pug b/views/layout.pug index 75795ab..55ce07d 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -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") \ No newline at end of file