Added info table to live chart

public/javascripts/datetime.js
   - wrong call fixed

public/javascripts/global.js
   - direct call to live chart if sensorid is given

public/javascripts/showcharts.js
   - info table added

public/stylesheets/style.sass
   - style for infotabel
   - changed color vor nav tabs

public/javascripts/datetime.js

@@ -5,7 +5,7 @@ import { DateTime } from './luxon.min.js'
 export const showDate = (sofort) => {
     let d = DateTime.now()
     if(sofort || d.second === 0) {
-        document.querySelector('#h1datum').setHTML(d.toFormat('yyyy-MM-dd HH:mm'))
+        document.querySelector('#h1datum').innerHTML = d.toFormat('yyyy-MM-dd HH:mm')
     }
 
 }

public/javascripts/global.js

@@ -10,7 +10,7 @@ import * as chart_dayavg from './chart_dayavg.js'
 import * as chart_daynight from './chart_daynight.js'
 import * as chart_lden from './chart_lden.js'
 import * as utils from "./chart_utilities.js";
-import { tabtable, loadAll } from './showcharts.js'
+import {tabtable, loadAll, showChart} from './showcharts.js'
 import { DateTime } from './luxon.min.js'
 
 
@@ -104,18 +104,23 @@ import { DateTime } from './luxon.min.js'
         setInterval(() => dt.showDate(false), 1000)
 
         // show version and version-date
-        document.querySelector('#versn').setHTML(`Version: ${sysparams.version} vom ${sysparams.date.slice(0,10)}`)
+        document.querySelector('#versn').innerHTML =
+            `Version: ${sysparams.version} vom ${sysparams.date.slice(0,10)}`
 
         const csid = parseInt(sysparams.csid)
         if(csid !== -1) {
             let triggerEl = document.querySelector('#livetab')
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
             params.sid = csid
-            await chart_live.showLive(params)
+            let ok = await showChart(params, 'live', 'dlive')
+            if (ok) {
+                loadAll(params)
+                status.loaded = true
+            }
+        } else {
+            // show the map
+            map.showMap(params, status)
         }
-
-        // show the map
-        map.showMap(params, status)
     }
 
     main().catch(console.error)

public/javascripts/showcharts.js

@@ -70,6 +70,24 @@ export async function showChart(params, typ, container) {
                 sid: erg.params.sensorid,
                 indoor: erg.params.indoor
             }, document.getElementById(container).offsetWidth)
+            if(erg.info) {
+                let wbreit = window.innerWidth
+                let cbreit = chart.chartWidth
+                let infoposx = wbreit - ((wbreit-cbreit)/2) -200
+                let infoposy = chart.plotTop - 80
+                chart.renderer.label(
+                    erg.info.text,
+                    infoposx,
+                    infoposy,
+                    'rect', 0, 0, true)
+                    .css({
+                        fontSize: '10pt',
+                        color: 'green'
+                    })
+                    .attr({
+                        zIndex: 5,
+                    }).add();
+            }
         })
         return true
     } else {

public/stylesheets/style.css

@@ -213,4 +213,35 @@ footer #author #versn {
   font-size: 80%;
 }
 
+.infoTafel th, td {
+  margin: auto;
+  text-align: left;
+  padding: 0 10px;
+  border: 1px solid black;
+  background-color: rgba(238, 238, 238, 0.6);
+}
+
+.infoTafel th {
+  text-align: center;
+}
+
+.infoTafel tr {
+  height: 20px;
+}
+
+@media only screen and (max-width: 700px) {
+  .infoTafel, .legend {
+    display: none;
+  }
+}
+.nav-tabs .nav-item .nav-link {
+  background-color: #2D6AF8;
+  color: #FFF;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #2D6AF8;
+  background-color: #FFFFFF;
+}
+
 /*# sourceMappingURL=style.css.map */

public/stylesheets/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;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,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;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","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","file":"style.css"}

public/stylesheets/style.sass

@@ -8,6 +8,7 @@ $button-color: darkslategrey
 $header_footer_color: lightgray
 $checkboxsize: 1.5
 $inboxwidth: 70px
+$navtab-color: #2D6AF8
 
 body
   font-family: Verdana, 'Lucida Sans Unicode', sans-serif
@@ -199,3 +200,28 @@ footer
 
 #klein
   font-size: 80%
+
+.infoTafel th,td
+  margin: auto
+  text-align: left
+  padding: 0 10px
+  border: 1px solid black
+  background-color: rgba(238,238,238,0.6)
+
+.infoTafel th
+  text-align: center
+
+.infoTafel tr
+  height: 20px
+
+@media only screen and (max-width: 700px)
+  .infoTafel, .legend
+    display: none
+
+.nav-tabs .nav-item .nav-link
+  background-color: $navtab-color
+  color: #FFF
+
+.nav-tabs .nav-item .nav-link.active
+  color: $navtab-color
+  background-color: #FFFFFF