*** WIP *** Language switching works

public/javascripts/checklang.js
   - better description in comment

views/chglang.pug
   - text for 'h1' changed

routers/index.js
   - more comment

views/index.pug
   - no more action on click at language

package.json
  "version": "3.0.1",
  "date": "2023-04-17 13:00 UTC",

public/stylesheets/style.sass
   - css for 'Loading' on first page

locales/en/translation.json
   - type

locales/en/translation.json

@@ -13,9 +13,9 @@
   "Live": "Live",
   "Hour_AVG": "Hour_AVG",
   "Day_AVG": "Day_AVG",
-  "Day_Night": "Day_Night"
+  "Day_Night": "Day_Night",
   "doReset": "Please reload page to change language.",
   "ActualValues": "Actual Values",
   "Noise_levels_last_24_hours": "Noise levels last 24 hours"
 
-}
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "laerm-web-sensorapi",
-  "version": "3.0.0",
+  "version": "3.0.1",
-  "date": "2023-04-07 16:30 UTC",
+  "date": "2023-04-17 13:00 UTC",
   "private": true,
   "scripts": {
     "start": "node bin/www.js >>log/laerm_web.log 2>&1"

public/javascripts/checklang.js

@@ -1,4 +1,4 @@
-// set correct language
+// set correct language (will be called by chglang.pug)
 let currentLang
 const navLang = navigator.language.slice(0,2)
 const selectedLang =  localStorage.getItem('curlang')

public/stylesheets/style.css

@@ -248,4 +248,11 @@ footer #author #versn {
   display: none;
 }
 
+#first {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
 /*# 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;;;AAEF;EACE","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;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"style.css"}

public/stylesheets/style.sass

@@ -227,4 +227,12 @@ footer
   background-color: #FFFFFF
 
 #sellan
-  display: none
+  display: none
+
+// for first page to show 'Loading ...'
+#first
+  display: flex
+  align-items: center
+  justify-content: center
+  text-align: center
+

routes/index.js

@@ -13,7 +13,9 @@ const renderOpts = (sid) => {
   }
 }
 
-/* GET home page. */
+/* GET home page. If there is no parameter 'lng=xx', checke stored language and call 
+te page again wird correct language (chglang.js))
+*/
 router.get('/', function(req, res, next) {
 //  req.i18n.changeLanguage('de')
   if(req.query.lng === undefined) {

views/chglang.pug

@@ -3,6 +3,8 @@ html
     head
         title= title
         meta(name="viewport" content="width=device-width, initial-scale=1" charset="utf-8")
+        link(rel='stylesheet', href='/stylesheets/style.css')
     body
-        h1 Haloole
+        #first
+            h1 Loading...
         script(type="module" src="/javascripts/checklang.js")

views/index.pug

@@ -92,10 +92,10 @@ block content
               label.thelabels
                 | #{t("Language")}:
               .form-check.form-check-inline
-                input#en.form-check-input(type="radio" name="lanbut" onchange='chglang("lng/?lng=en")', checked)
+                input#en.form-check-input(type="radio" name="lanbut", checked)
                 label.form-check-label(for="en") English
               .form-check.form-check-inline
-                input#de.form-check-input(type="radio" name="lanbut" onchange='chglang("lng/?lng=de")')
+                input#de.form-check-input(type="radio" name="lanbut")
                 label.form-check-label(for='de') Deutsch
         .modal-footer
             button.btn.btn-secondary(type="button" data-bs-dismiss="modal") #{t("Close")}