Address on markers and on graph

public/javascripts/chart_utilities.js
   - add address in #addSensorID'
   - function 'addAddress' added

public/javascripts/datetime.js
   - removed unnecessary comment

public/javascripts/global.js
   - refreshrate changed to 5 min
   - typo 'autohide' corrected

views/index.pug
   - removed text 'only for live ...'

views/layout.pug
   - removed superflous links and variables

public/javascripts/maps.js
   - added address to marker popup

charts/preparecharts.js
   - translate legend texts

public/javascripts/showcharts.js
   - dont show selected tab

public/stylesheets/style.sass
   - add style for sensornumber on chart

loclae/[de|en]/translation.json
    - added translations for legend

charts/utilities.js
   - ymax for live set to 120

charts/preparecharts.js

@@ -229,14 +229,14 @@ export const havgData = (params, values) => {
     ]
     options.series =  [
         {
-            name: 'Mean value LAeq',
+            name: `${trans('MeanValueLAeq')}`,
             data: series1,
             color: utils.colors.eq,
             type: 'column',
             zIndex: 2,
             yAxis: 0
         }, {
-            name: 'Peaks',
+            name: `${trans('Peaks')}`,
             data: series2,
             color: utils.colors.peaks,
             type: 'column',
@@ -328,14 +328,14 @@ export const davgData = (params, values) => {
 
     options.series = [
         {
-            name: 'Mean value LAeq',
+            name: `${trans('MeanValueLAeq')}`,
             data: series1,
             color: utils.colors.eq,
             type: 'column',
             zIndex: 2,
             yAxis: 0
         },{
-            name: 'Peaks',
+            name: `${trans('Peaks')}`,
             data: series2,
             color: utils.colors.peaks,
             type: 'column',
@@ -409,14 +409,14 @@ export const dayNightData = (params, values) => {
     }
     options.series = [
         {
-            name: 'Day',
+            name: `${trans('Day')}`,
             data: series1,
             color: utils.colors.eq,
             type: 'column',
             zIndex: 2,
         },
         {
-            name: 'Night',
+            name: `${trans('Night')}`,
             data: series2,
             color: utils.colors.max,
             type: 'column',
@@ -491,7 +491,7 @@ export const ldenData = (params, values) => {
     }
     options.series = [
         {
-            name: 'lden',
+            name: 'Lden',
             data: series1,
             color: utils.colors.eq,
             type: 'column',

charts/utilities.js

@@ -6,6 +6,7 @@ let language = 'en'
 
 export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'};
 export const noise_ymin = 30;
+export const noise_ymax = 120;
 
 export function createGlobObtions() {
     // Options, die für alle Plots identisch sind

locales/de/translation.json

@@ -43,5 +43,9 @@
   "RemoveFromMap": "Sensoren nicht anzeigen, die nicht gesendet haben seit",
   "weeks": "Wochen",
   "ESYSCALL": "Fehler vom Serveraufruf: ",
-  "Error": "Fehler"
+  "Error": "Fehler",
+  "MeanValueLAeq": "Mittelwert LAeq",
+  "Peaks": "Spitzen",
+  "Day": "Tag",
+  "Night": "Nacht"
 }

locales/en/translation.json

@@ -43,5 +43,9 @@
   "RemoveFromMap": "Don't show sensors that have not sent for",
   "weeks": "weeks",
   "ESYSCALL": "Error from Syscall: ",
-  "Error": "Error"
+  "Error": "Error",
+  "MeanValueLAeq": "Mean value LAeq",
+  "Peaks": "Peaks",
+  "Day": "Day",
+  "Night": "Night"
 }

public/javascripts/chart_utilities.js

@@ -162,8 +162,9 @@ export function calcDays(data, isyear) {
 
 export async function addSensorID2chart(chart, sensor, width) {
     let indoor = sensor.indoor || false
+    let addr =  await addAddress(sensor.sid)
     let sens = chart.renderer.label(
-        `Sensor: ${sensor.sid} ${indoor ? ' (indoor)' : ''}`,
+        `Sensor: <span class="bigger">${sensor.sid}</span> ${indoor ? ' (indoor)' : ''}&nbsp;&nbsp;&nbsp;&nbsp;${addr}`,
         width / 2 - 100, 65,
         'text', 0, 0, true)
         .css({
@@ -213,3 +214,13 @@ export const fetchfromserver = async (url) => {
     let x = await ret.json()
     return x
 }
+
+export const addAddress = async (sid) => {
+    let url = `/api/getaddress?sensorid=${sid}`
+    let erg = await fetchfromserver(url)
+    if (!erg.err) {
+        return erg.address
+    } else {
+        return "no address"
+    }
+}

public/javascripts/datetime.js

@@ -21,31 +21,6 @@ export const showDate = (sofort, params) => {
     }
 }
 
-/* ToDo:
-        // Alle Minute die ktuelle Urzeit anzeigen und
-        //  den Plot für Tages - und Wochendaten updaten.
-        //   Alle 'refreshRate' plus 15sec die Grafiken neu zeichnen
-        //   Die Funktion wird alle Sekunde aufgerufen !
-        //
-function showUhrzeit(sofort) {
-    var d = moment()                                                                // akt. Zeit holen
-    if (sofort || (d.second() == 0)) {                              // Wenn Minute grade um
-        $('#h1uhr').html(d.format('HH:mm'));
-        $('#subtitle').html(d.format('YYYY-MM-DD'));                // dann zeit anzeigen
-    }
-    if (((d.minute() % refreshRate) == 0) && (d.second() == 15)) {  // alle ganzen refreshRate Minuten, 15sec danach
-        console.log(refreshRate, 'Minuten um, Grafik wird erneuert');
-        if ((aktsensorid != 'map') && (doUpdate == true)) {     // Wenn nicht die Karte, dann
-            doPlot('oneday',startDay);                                              // Tages- und
-            doPlot('oneweek',startDay);                                             // Wochenplot erneuern
-        }
-        else {
-            fetchAktualData();
-        }
-    }
-}
-
-*/
 export const formatJSDate = (d) => {
     return DateTime.fromJSDate(d).toFormat('yyyy-LL-dd HH:mm:ss')
 }

public/javascripts/global.js

@@ -22,7 +22,7 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
         weeks: 4,
         datetime: '',
         seldate: '',
-        refreshRate: 1,
+        refreshRate: 5,
         sid: -1
     }
 
@@ -81,7 +81,7 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
         const elem = document.querySelector('#startday')
         const datepicker = new Datepicker(elem, {
             buttonClass: 'btn',
-            autoHide: true,
+            autohide: true,
             format: 'yyyy-mm-dd',
             language: lang,
             maxDate: new Date(),

public/javascripts/map.js

@@ -3,7 +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";
+import {fetchfromserver, addAddress} from "./chart_utilities.js";
 
 let map = null
 let bounds
@@ -51,28 +51,6 @@ export async function showMap(params) {
 
     let lastdate = await buildMarkers(params)
     showLastDate(lastdate);
-
-    // map.on('popupopen', function () {
-    //     let link = document.querySelector('.speciallink')
-    //     link.addEventListener('click', async function (ev) {
-    //         console.log(`Event clicked: ${clickedSensor}`)
-    //         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)
-    //         }
-    //         params.center = [clickedcoords.lat, clickedcoords.lng]
-    //         map.setView([clickedcoords.lat, clickedcoords.lng]);
-    //         ev.preventDefault()
-    //     })
-    // })
 }
 
 
@@ -208,7 +186,6 @@ export async function buildMarkers(params) {
                 indoor: x.indoor
             })
                 .on('click', e => onMarkerClick(e, true, sensors.popuptxt, params))        // define click- and
-                .bindPopup(popuptext);                      // and bind the popup text
             markers.addLayer(marker);
         }
         map.addLayer(markers);
@@ -246,42 +223,26 @@ return popuptext
 
 async function onMarkerClick(e, click, txts, params) {
     let item = e.target.options;
-    let popup = e.target.getPopup();
     let popuptext = await bauPopupText(item, txts)
-    popup.setContent(popuptext);                        // set text into popup
+    e.target.bindPopup(popuptext).openPopup();                               // show the popup
-    e.target.openPopup();                               // show the popup
-
-
     let link = document.querySelector('.speciallink')
     link.addEventListener('click', async function (ev) {
         console.log(`Event clicked: ${clickedSensor}`)
         params.sid = item.name
         let ok = await showChart(params, 'live', 'dlive')
         if (ok) {
-                params.center = [clickedcoords.lat, clickedcoords.lng]
+            let triggerEl = document.querySelector(`#livetab`)
-                map.setView([clickedcoords.lat, clickedcoords.lng]);
+            bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+            utils.setCurrentTab('livetab')
+            params.center = [e.latlng.lat, e.latlng.lng]
+            map.setView([e.latlng.lat, e.latlng.lng]);
             ev.preventDefault()
             await loadAll(params)
         }
     })
-
-
-
-// if (click == true) {                                 // if we clicked
-//     e.target.closePopup();                          // show the popup
-// }
 }
 
 // add address to PopUp
-async function addAddress(sid) {
-    let url = `/api/getaddress?sensorid=${sid}`
-    let erg = await fetchfromserver(url)
-    if (!erg.err) {
-        return erg.address
-    } else {
-        return "no address"
-    }
-}
 /*
 async function getCoords(city) {
     let url = NOMINATIM_URL + city;

public/javascripts/showcharts.js

@@ -63,22 +63,9 @@ export async function showChart(params, typ, container) {
     }
     let erg = await fetchfromserver(url)
     if (!erg.err) {
-        let tabt = ""
-        for (let x of tabtable) {
-            if(x.type === typ) {
-                tabt = x.id
-                break
-            }
-        }
         utils.showTabs()
         document.querySelector('#odth').style.display = 'none'
         document.querySelector('#nbday').style.display = 'inline'
-        let triggerEl = document.querySelector(`#${tabt}`)
-        bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
-        localStorage.setItem('activeTab', tabt)
-        utils.setCurrentTab(tabt)
-
-
         erg.options.xAxis.labels.formatter = xformat
         erg.options.tooltip.formatter = form
         let chart = Highcharts.chart(container, erg.options, function (chart) {
@@ -119,7 +106,6 @@ export const loadAll = async (params, start = 2) => {
         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) {

public/stylesheets/style.css

@@ -260,4 +260,9 @@ footer #author #versn {
   margin-bottom: 10px;
 }
 
+.bigger {
+  font-size: 120%;
+  font-weight: bold;
+}
+
 /*# sourceMappingURL=style.css.map */

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;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAEF;EACE;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;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA","file":"style.css"}

public/stylesheets/style.sass

@@ -242,3 +242,7 @@ footer
 .addr
   font-weight: bold
   margin-bottom: 10px
+
+.bigger
+  font-size: 120%
+  font-weight: bold

views/index.pug

@@ -81,7 +81,7 @@ block content
             .column#nbday
               label.thelabels(for='nbrofdays')
                 | #{t("NumberOfDays")}:<br />
-                span.klein (#{t("Only_for_live_chart")})
+                // 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

views/layout.pug

@@ -10,7 +10,7 @@ html
       integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
       crossorigin="")
     link(rel='stylesheet', href='/stylesheets/MarkerCluster.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/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')
 
@@ -21,18 +21,6 @@ html
       csid: '#{csensor}'
       }
 
-    let urlParams = {
-      // drawlines: '#{drawlines}' === 'true',
-      // starttime: '#{starttime}',
-      // endtime: '#{endtime}',
-      // nbrentries: '#{nbrentries}',
-      // device: '#{device}',
-      // coordinates: '#{coordinates}' === 'true',
-      // center: JSON.parse('#{center}'),
-      // zoom: '#{zoom}',
-      // refresh: '#{refresh}'
-    }
-
   body
     #wrapper
       block content