From 74fec075be716e6ff89fd7df4583911d2e6e2c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= Date: Tue, 28 Nov 2023 15:15:03 +0000 Subject: [PATCH] add cityCoords params for city chnaged add 'center city' in settings --- locales/de/translation.json | 3 +- locales/dev/translation.json | 3 +- locales/en/translation.json | 5 +-- public/javascripts/chart_utilities.js | 13 +++++++- public/javascripts/global.js | 44 +++++++++++++++++++++------ public/javascripts/map.js | 6 +++- public/javascripts/map_geiger.js | 2 +- public/javascripts/map_noise.js | 2 +- public/javascripts/map_utilities.js | 13 +------- routes/api.js | 2 +- views/index_noise.pug | 10 ++---- 11 files changed, 66 insertions(+), 37 deletions(-) diff --git a/locales/de/translation.json b/locales/de/translation.json index d79f7a8..3e858ef 100644 --- a/locales/de/translation.json +++ b/locales/de/translation.json @@ -48,5 +48,6 @@ "MeanValueLAeq": "Mittelwert LAeq", "Peaks": "Spitzen", "Day": "Tag", - "Night": "Nacht" + "Night": "Nacht", + "CenterMap": "Karte zentrieren auf" } \ No newline at end of file diff --git a/locales/dev/translation.json b/locales/dev/translation.json index 70fd4ab..45f152c 100644 --- a/locales/dev/translation.json +++ b/locales/dev/translation.json @@ -41,6 +41,7 @@ "Version": "Version", "from": "vom", "RemoveFromMap": "Sensoren nicht anzeigen, die nicht gesendet haben seit", - "weeks": "Wochen" + "weeks": "Wochen", + "CenterMap": "Center map on" } \ No newline at end of file diff --git a/locales/en/translation.json b/locales/en/translation.json index ac13877..7e6e3ca 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -48,5 +48,6 @@ "MeanValueLAeq": "Mean value LAeq", "Peaks": "Peaks", "Day": "Day", - "Night": "Night" -} \ No newline at end of file + "Night": "Night", + "CenterMap": "Center map on" +} diff --git a/public/javascripts/chart_utilities.js b/public/javascripts/chart_utilities.js index 2014e8d..68a9f86 100644 --- a/public/javascripts/chart_utilities.js +++ b/public/javascripts/chart_utilities.js @@ -207,7 +207,7 @@ export const getCurrentTab = () => { } export const fetchfromserver = async (url) => { - const ret = await fetch(url) + const ret = await fetch(encodeURI(url)) .catch(e => { showError(e) }); @@ -225,3 +225,14 @@ export const addAddress = async (sid) => { return "no address" } } + +export const cityCoords = async (city) => { + let url = `/srv/getcitycoords?city=${city}` + let erg = await fetchfromserver(url) + if (!erg.err) { + return erg.coords + } else { + return "no coordinates" + } +} + diff --git a/public/javascripts/global.js b/public/javascripts/global.js index 7255116..f69216c 100644 --- a/public/javascripts/global.js +++ b/public/javascripts/global.js @@ -5,17 +5,13 @@ import * as map from './map.js' import * as dt from './datetime.js' import {loadAll, showChart, setNoUTC} from './showcharts.js' import { DateTime } from './luxon.min.js' -import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_utilities.js"; +import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js"; (async () => { - // global constants - const Stuttgart = [48.779, 9.16] - // END global constants - // global variables const params = { // set defaults - center: Stuttgart, + center: {name: 'Stuttgart', coords: [48.778, 9.180]}, zoom: 10, span: 1, peak: 70, @@ -25,11 +21,17 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_ refreshRate: 5, sid: -1 } - // END global variables + + // localStorage.clear() - + // Check new map center + const checkNewCenter = (oldC, newC) => { + if((oldC[0] !== newC[0]) || (oldC[1] !== newC[1])) { + map.setNewCenter(newC) + } + } // Register events // Every input with value check @@ -59,6 +61,12 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_ params.span = parseInt(document.getElementById('nbrofdays').value) params.peak = parseInt(document.getElementById('peaklim').value) params.weeks = parseInt(document.getElementById('olderthan').value) + const city = document.getElementById('centercity').value + const oldCoords = params.center + params.center.coords = await cityCoords(city) + params.center.name = city + checkNewCenter(oldCoords, params.center.coords) + localStorage.setItem('centercity',JSON.stringify(params.center)) let newlng = document.querySelector('#sellan input:checked').id let oldlng = localStorage.getItem('curlang') localStorage.setItem('curlang', newlng) @@ -95,13 +103,17 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_ 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 depoending on the selcted tab // first clear all + document.querySelector('#ccity').style.display = 'none' 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('#ccity').style.display = 'inline' document.querySelector('#stday').style.display = 'none' document.querySelector('#odth').style.display = 'inline' } @@ -127,7 +139,21 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_ async function main() { setNoUTC() // no UTC for HighCharts // set correct language - const currentLang = localStorage.getItem('curlang') + let currentLang = localStorage.getItem('curlang') + if ((currentLang === null) || (currentLang === '')) { + currentLang = 'de' + localStorage.setItem('curlang', currentLang) + } + let centercity + try { + centercity = JSON.parse(localStorage.getItem('centercity')) + } catch (e) { + centercity = params.center + } + if((centercity === null) || (centercity.name === '')) { + centercity = params.center + } + localStorage.setItem('centercity', JSON.stringify(centercity)) if(currentLang === 'en') { document.querySelector('#en').checked = true params.seldate = 'today' diff --git a/public/javascripts/map.js b/public/javascripts/map.js index 2b786bf..6d73b38 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -24,7 +24,7 @@ export async function showMap(params) { mapparams.map.remove(); } } - mapparams.map = L.map('map', {scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom)) + mapparams.map = L.map('map', {scrollWheelZoom: false}).setView(params.center.coords, parseInt(params.zoom)) L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: mapparams.MAXZOOM, attribution: '© OpenStreetMap' @@ -51,3 +51,7 @@ const buildMarkers = async (params, mapparams) => { return mapg.buildMarkers(params, mapparams) } } + +export const setNewCenter = (center) => { + mapparams.map.setView(center) +} diff --git a/public/javascripts/map_geiger.js b/public/javascripts/map_geiger.js index a1bd804..0e1da85 100644 --- a/public/javascripts/map_geiger.js +++ b/public/javascripts/map_geiger.js @@ -226,7 +226,7 @@ async function onMarkerClick(e, click, txts, params, mpp) { let triggerEl = document.querySelector(`#livetab`) bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name utils.setCurrentTab('livetab') - params.center = [e.latlng.lat, e.latlng.lng] + params.center.coords = [e.latlng.lat, e.latlng.lng] mpp.map.setView([e.latlng.lat, e.latlng.lng]); ev.preventDefault() await loadAll(params) diff --git a/public/javascripts/map_noise.js b/public/javascripts/map_noise.js index a380293..0dc47b3 100644 --- a/public/javascripts/map_noise.js +++ b/public/javascripts/map_noise.js @@ -149,7 +149,7 @@ async function onMarkerClick(e, click, txts, params, mpp) { let triggerEl = document.querySelector(`#livetab`) bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name utils.setCurrentTab('livetab') - params.center = [e.latlng.lat, e.latlng.lng] +// params.center.coords = [e.latlng.lat, e.latlng.lng] mpp.map.setView([e.latlng.lat, e.latlng.lng]); ev.preventDefault() await loadAll(params) diff --git a/public/javascripts/map_utilities.js b/public/javascripts/map_utilities.js index 7ec5cb6..e6d17b3 100644 --- a/public/javascripts/map_utilities.js +++ b/public/javascripts/map_utilities.js @@ -1,18 +1,6 @@ -import * as mapn from './map_noise.js'; -import * as mapg from './map_geiger.js'; import * as utils from "./chart_utilities.js" import * as dt from './datetime.js' -function getColor(d, mapparams) { - if(sysparams.category === 'noise') { - return mapn.getColor(d, mapparams) - } else if(sysparams.category === 'multigeiger') { - return mapg.getColor(d, mapparams) - } -} - - - // Show the last date below tha map grafics export async function showLastDate(ld, mpp) { let url @@ -26,3 +14,4 @@ export async function showLastDate(ld, mpp) { document.querySelector('#actsensors').innerText = `${sensors.actsensors} ${sensors.registered}` // $('#actsensors').html(`${erg.count} aktive Sensoren (angemeldet ${allsens})`) } + diff --git a/routes/api.js b/routes/api.js index daa81fc..13ba8a2 100644 --- a/routes/api.js +++ b/routes/api.js @@ -36,7 +36,7 @@ router.get('/:cmd', async function(req, res, next) { return } // if called as '/api' then directly return the data - if ((calledAs === '/api') || (cmd === 'getoneproperty') || (cmd === 'getaddress')) { + if ((calledAs === '/api') || (cmd === 'getoneproperty') || (cmd === 'getaddress') || (cmd === 'getcitycoords')) { if(pretty) { res.setHeader('Content-Type', 'text/plain; charset=utf-8'); res.send(JSON.stringify(response.data,null,2)) diff --git a/views/index_noise.pug b/views/index_noise.pug index 57f62ca..d619d9b 100644 --- a/views/index_noise.pug +++ b/views/index_noise.pug @@ -1,13 +1,6 @@ extends layout block content - script. - function chglang(x) { - // localStorage.setItem('curlang', x.slice(-2)) - // location.href = x - // history.pushState({}, '', '/') - } - header #hline1 #h1name #{t("NoiseMeasurement")} @@ -73,6 +66,9 @@ block content span(aria-hidden="true") × .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' )