*** WIP WIP *** load all charts in advance

2023-04-04 10:39:13 +02:00
parent 5082eb408f
commit 71a59fb9e8
6 changed files with 56 additions and 58 deletions
@@ -24,6 +24,9 @@ export function createGlobObtions() {
    // Options, die für alle Plots identisch sind
    let globObject = {
        chart: {
+            accessibility: {
+                enabled: false
+            },
            height: 600,
 //            width: 1000,
            spacingRight: 20,
@@ -160,7 +163,7 @@ export function calcDays(data, isyear) {

 export async function addSensorID2chart(chart, sensor, width) {
    console.log('widht: ',width);
-    let indoor =sensor.indoor
+    let indoor = sensor.indoor || false
    console.log('indoor: ',indoor)
    let sens = chart.renderer.label(
        `Sensor: ${sensor.sid} ${indoor ? ' (indoor)' : ''}`,
@@ -180,3 +183,14 @@ export const showError = (err) => {
    let myModal = new bootstrap.Modal(document.getElementById('dialogError'))
    myModal.show()
 }
+
+// remove the taps (if shownig the map)
+export const removeTabs = () => {
+    document.querySelector('#navi').style.display = 'none'
+}
+
+// show thw tabs again
+export const showTabs = () => {
+    document.querySelector('#navi').style.display = 'block'
+}
+
@@ -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} from './showcharts.js'
+import { tabtable, loadAll } from './showcharts.js'

 (async () => {

@@ -22,29 +22,19 @@ import {tabtable} from './showcharts.js'

    // global variables
    let params = {                                  // set defaults
-        drawlines: false,
-        nbrentries: 0,
-        device: '',
-        coordinates: false,
        center: Stuttgart,
        zoom: 10,
        refresh: 0,
        starttime: '2023-01-01T00:00:00Z',  //date2ISO(defaultStartime),
        endtime: '2023-03-01T00:00:00Z'    //date2ISO(emptyTimes.emptyHMtime)
    }
+
+    let status = {
+        loaded: false
+    }
    // END global variables


-    // remove the taps (if shownig the map)
-    const removeTabs = () => {
-        document.querySelector('#navi').style.display = 'none'
-    }
-
-    // show thw tabs again
-    const showTabs = () => {
-        document.querySelector('#navi').style.display = 'block'
-    }
-
    // main function:
    // show the map if calle w/o any parameter
    // if called with a sensor-ID, show the live chart for this sensor
@@ -57,12 +47,14 @@ import {tabtable} from './showcharts.js'
            triggerEl.addEventListener('click', function (event) {
                event.preventDefault()
                tabTrigger.show()
-                for(let x of tabtable) {
+                if((!status.loaded) || (this.id === 'kartentab')) {
+                    for (let x of tabtable) {
                        if (x.id === event.currentTarget.id) {
                            x.func(params, x.type, x.container)
                        }
                    }
-                logit(`tab chaned to ${event.currentTarget.id}`)
+                    logit(`tab changed to ${event.currentTarget.id}`)
+                }
            })
        })

@@ -80,10 +72,11 @@ import {tabtable} from './showcharts.js'
            params.sid = csid
            await chart_live.showLive(params)
        }
+
        // show the map
-        removeTabs()
-        map.showMap(params)
+        map.showMap(params, status)
    }
+
    main().catch(console.error)

 })()
@@ -3,19 +3,25 @@
 import * as dt from './datetime.js'
 import * as chart_live from "./chart_live.js"
 import * as utils from "./chart_utilities.js"
-import { showChart } from './showcharts.js'
+import { showChart, loadAll } from './showcharts.js'

 let map = null
 let bounds
 let popuptext = ''
 let clickedSensor = 0
+let clickedcoords = {}

 const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
 const dba = [100, 80, 60, 40, 20, 0, -999];

-export async function showMap(params) {
-    if (map) return
-    map = L.map('map',{ scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
+export async function showMap(params, status) {
+    utils.removeTabs()
+
+    if(map && map.remove) {
+        map.off();
+        map.remove();
+    }
+    map = L.map('map', {scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.js.openstreetmap.org/copyright">OpenStreetMap</a>'
@@ -54,6 +60,11 @@ export async function showMap(params) {
            let triggerEl = document.querySelector('#livetab')
            bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
            await showChart(params, 'live', 'dlive')
+            loadAll(params)
+            status.loaded = true
+            map.setView([clickedcoords.lat, clickedcoords.lng]);
+
+
        })
    })

@@ -209,6 +220,7 @@ export async function buildMarkers() {
    async function onMarkerClick(e, click) {
    let item = e.target.options;
    clickedSensor = item.name;
+    clickedcoords = e.latlng

    let offlinetext = `
 <tr><td colspan="2"><span style="color:red;">offline</span></td></tr>
@@ -255,32 +267,6 @@ async function setCenter(adr) {

 // Show the last date below tha map grafics
 async function showLastDate(ld) {
-    // const url = `http://localhost:3004/getproperties?type=noise&box=${bounds.toBBoxString()}`
-    //
-    // let ret = await fetch(url)
-    //     .catch(e => {
-    //         console.log(e)
-    //     });
-    // let sensors = await ret.json()
-    //
-    // let url = '/api/getdata';
-    // let ld = moment(dt);
-    // let last = ld.subtract(1,'h')
-    // let erg;
-    // let allsens
-    // try {
-    //     erg = await $.getJSON(url + `?data=props&last=1900-01-01`);
-    //     allsens = erg.count
-    //     erg = await $.getJSON(url + `?data=props&last=${last.format('YYYY-MM-DD HH:mm')}`);
-    //     if ((erg != undefined) && (erg.values[0].error != undefined)) {
-    //         showError(3,erg.values[0].error,aktsensorid);
-    //         return;
-    //     }
-    // }
-    // catch(e) {
-    //     console.log(e)
-    // }
-    // fetch all sensors
    const url = `/chart/getmapdata?type=noise`
    let ret = await fetch(url)
        .catch(e => {
@@ -55,17 +55,15 @@ export async function showChart(params, typ, container) {
        }
    }

-
    const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}`
    let ret = await fetch(url)
        .catch(e => {
            logerror(e)
        });
    let erg = await ret.json()
-
    erg.options.xAxis.labels.formatter = xformat
    erg.options.tooltip.formatter = form
-    let chr = Highcharts.chart(container, erg.options, function (chart) {
+    let chart = Highcharts.chart(container, erg.options, function (chart) {
        utils.addSensorID2chart(chart, {
            sid: erg.params.sensorid,
            indoor: erg.params.indoor
@@ -79,4 +77,9 @@ export async function showChart(params, typ, container) {
        }
 }

-
+export const loadAll = async (params) => {
+    console.log('now load all in Background')
+    for (let i = 2; i < tabtable.length; i++) {
+        await showChart(params, tabtable[i].type, tabtable[i].container)
+    }
+}
@@ -162,3 +162,4 @@ footer

 .highcharts-tooltip
  zIndex: 5
+
@@ -46,4 +46,5 @@ html
      crossorigin="")
    script(src="/javascripts/leaflet.markercluster.js")
    script(src="https://code.highcharts.com/highcharts.js")
+    script(src="https://code.highcharts.com/modules/accessibility.js")
    script(type="module" src="/javascripts/global.js")