Language switching works

app.js
   - call to index.js changed

public/javascripts/global.js
   - no more show version
   - no more 'showReset

routes/index.js
   - added 'translate'-function

views/index.pug
   - texts changed for translation

views/layout.pug
   - show version and date

public/javascripts/map.js
   - added text from server

charts/preparecharts.js
   - translate texts

locales/[en|de]/translation.json
   - new translations

charts/urils.js
   - added translations

package.json
  "version": "3.0.2",
   "date": "2023-04-19 11:00 UTC",

charts/preparecharts.js

@@ -1,5 +1,6 @@
 // Prepare all data to plot the charts
 import * as utils from '../charts/utilities.js'
+import { translate as trans } from '../routes/index.js'
 
 /**********************************************
  * Live-Data
@@ -38,7 +39,7 @@ export const liveData = (params, values, req) => {
         // InfoTafel füllen
         infoTafel =
             '<table class="infoTafel"><tr >' +
-            '<th colspan="3">' + req.t("ActualValues") + '</th>' +
+            '<th colspan="3">' + trans("ActualValues") + '</th>' +
             '</tr><tr>' +
             '<td>LAeq</td><td>' + (aktVal.LAeq).toFixed(1) + '</td><td>dbA</td>'
         infoTafel +=
@@ -137,9 +138,9 @@ export const liveData = (params, values, req) => {
     options.yAxis = []
     options.series[0] = series_LAeq
     options.series[1] = series_LAMin
-    options.title.text = req.i18n.t('Noise_levels_last_24_hours')
+    options.title.text = trans('NoiseLevelsLast24Hours')
     options.subtitle.useHTML = true
-    options.subtitle.text = '2.5min log. average values <br /> &nbsp'
+    options.subtitle.text = `${trans("25minlogAverageValues")}<br />&nbsp;`
     options.series[2] = series_LAMax
 //        options.yAxis[2] = yAxis_LAMin
     options.yAxis[0] = yAxis_LAeq
@@ -252,8 +253,8 @@ export const havgData = (params, values) => {
         groupPadding: 0.1
     }
 
-    options.title.text = 'Hourly mean values / Peaks over ' + params.peak + ' dbA'
-    options.subtitle.text =  'Hourly mean values of LAeq for each full hour / Number of peaks per hour'
+    options.title.text = `${trans('HourlyMeanValues')} / ${trans('PeaksOver')}  ${params.peak}  dbA`
+    options.subtitle.text =  `${trans('HourlyMeanValuesOfLAeqForEachFullHour')} / ${trans('NumberOfPeaksPerHour')}<br />&nbsp;`
     options.subtitle.useHTML = true
     options.chart.zoomType = 'x'
     options.chart.resetZoomButton=  {
@@ -346,8 +347,8 @@ export const davgData = (params, values) => {
         pointWidth: 20,
         groupPadding: 0.1
     }
-    options.title.text = 'Daily mean values / Peaks over ' + params.peak + ' dbA'
-    options.subtitle.text = 'Daily mean values of LAeq for each full day / Number of peaks per day'
+    options.title.text = `${trans('DailyMeanValues')} / ${trans('PeaksOver')}  ${params.peak}  dbA`
+    options.subtitle.text = `${trans('DailyMeanValuesOfLAeqForEachFullDay')} / ${trans('NumberOfPeaksPerDay')}<br />&nbsp;`
     options.subtitle.useHTML = true
     options.chart.zoomType = 'x'
     options.chart.resetZoomButton = {
@@ -389,7 +390,7 @@ export const dayNightData = (params, values) => {
     let options = utils.createGlobObtions()
 //    options.xAxis.plotBands =  utils.calcWeekends(data, true)
     options.xAxis.tickInterval = 24 * 3600 * 1000
-    options.xAxis.title.text = 'Date'
+    options.xAxis.title.text = trans('Date')
     // options.xAxis.labels = {
     //     formatter: function () {
     //         return this.axis.defaultLabelFormatter.call(this);
@@ -429,8 +430,8 @@ export const dayNightData = (params, values) => {
         pointWidth: 20,
         groupPadding: 0.3
     }
-    options.title.text = 'Average values during the day and night hours'
-    options.subtitle.text = 'Daily mean values of LAeq from 6h00 to 22h00 <br /> Nightly mean values of LAeq from 22h00 to 6h00'
+    options.title.text = trans('AverageValuesDuringTheDayAndNightHours')
+    options.subtitle.text = `${trans('DailyMeanValuesOfLAeqFrom6h00To22h00')}<br />${trans('NightlyMeanValuesOfLAeqFrom22h00To6h00')}<br />&nbsp;`
     options.subtitle.useHTML = true
     options.chart.zoomType = 'x'
     options.chart.resetZoomButton = {
@@ -469,7 +470,7 @@ export const ldenData = (params, values) => {
 
 //    options.xAxis.plotBands = utils.calcWeekends(data, true)
     options.xAxis.tickInterval = 24 * 3600 * 1000
-    options.xAxis.title = 'Date'
+    options.xAxis.title.text = trans('Date')
     options.xAxis.labels = {
         formatter: function () {
             let lbl = this.axis.defaultLabelFormatter.call(this);
@@ -504,8 +505,8 @@ export const ldenData = (params, values) => {
         pointWidth: 20,
         groupPadding: 0.1
     }
-    options.title.text = 'L<sub>DEN</sub>-Index'
-    options.subtitle.text = 'Daily mean values of L<sub>DEN</sub>\-Index'
+    options.title.text = trans('LDEN-Index')
+    options.subtitle.text = `${trans('DailyMeanValuesOfLDEN-Index')}<br />&nbsp;`
     options.subtitle.useHTML = true
     options.chart.zoomType = 'x'
     options.chart.resetZoomButton = {
@@ -541,6 +542,24 @@ export const ldenData = (params, values) => {
  * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params}}
  **********************************/
 export const mapData = (params, values) => {
-    return {...params, values: values}
+    let actsensors = 0
+    for (let x of values) {
+        if (x.value >= 0) {
+            actsensors++
+        }
+    }
+    return {
+        ...params,
+        values: values,
+        actsensors: `${trans("ActiveSensors")} ${actsensors}`,
+        registered: `(${trans("registered")} ${params.count})`,
+        valfromtxt: trans("ValuesFrom"),
+        popuptxt: {
+            offline: trans('offline'),
+            sensor: trans('Sensor'),
+            lastseen: trans('LastSeen'),
+            showchart: trans('ShowChart')
+        }
+    }
 }
 

charts/utilities.js

@@ -1,5 +1,7 @@
 // Utility routine for plotting the data
 
+import { translate as trans } from '../routes/index.js'
+
 export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'};
 export const noise_ymin = 30;
 
@@ -47,7 +49,7 @@ export function createGlobObtions() {
         xAxis: {
             type: 'datetime',
             title: {
-                text: 'date/time',
+                text: trans('datetime'),
             },
             gridLineWidth: 2,
             labels: {