noise/public/javascripts/global.js

// Client side javascript
"use strict"

import * as map from './map.js'
import * as dt from './datetime.js'
import {logerror, logit} from './logit.js'
import {tabtable, loadAll, showChart} from './showcharts.js'
import { DateTime } from './luxon.min.js'

(async () => {

    // global constants
    const Stuttgart = [48.779, 9.16]
    const MAXROWS_IN_TABLE = 1000
    const defaultStartime = '2023-01-01 00:00'
    // END global constants

    // global variables
    let params = {                                  // set defaults
        center: Stuttgart,
        zoom: 10,
        span: 1,
        peak: 70,
        datetime: '',
        seldate: 'today',
        refresh: 0,
    }
    let currentTab = ''

    // END global variables




    // Register events
    document.querySelector('#btnSave').addEventListener('click', async () => {
        const selDate = document.getElementById('startday').value
        let starttime
        if (selDate === 'today') {
            starttime = DateTime.now().toISO()
            params.datetime = ''
        } else {
            starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toISO()
            params.datetime = starttime
        }
        params.seldate = selDate
        const span = document.getElementById('nbrofdays').value
        const peak = document.getElementById('peaklim').value
        console.log(starttime, span, peak)
        if(span < 10) {
            params.span = span
        }
        if(peak < 130 ) {
            params.peak = peak
        }
        let newlng = document.querySelector('#sellan input:checked').id
        let oldlng = localStorage.getItem('curlang')
        localStorage.setItem('curlang', newlng)
        if(newlng !== oldlng) {
            location.reload()
        }
        if(params.sid !== undefined) {
            await loadAll(params)
        }
    })


    document.querySelector('#btnSet').addEventListener('click', () => {
//        document.querySelector('#dialogSettings .modal-dialog .modal-content .modal-body').setHTML('Das ist das Setting')
        let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
        flatpickr('#startday', {
            maxDate: 'today',
            minDate: new Date().fp_incr(-365),
        })
        document.getElementById('startday').value = params.seldate
        document.getElementById('nbrofdays').value = params.span
        document.getElementById('peaklim').value = params.peak
        myModal.show()
    })


    // main function:
    // show the map if called w/o any parameter
    // if called with a sensor-ID, show the live chart for this sensor
    async function main() {
        // set correct language
        const currentLang =  localStorage.getItem('curlang')
        if(currentLang === 'en') {
            document.querySelector('#en').checked = true
        } else {
            document.querySelector('#de').checked = true
        }
        console.log(currentLang)
        history.pushState({}, '', '/')

        // initialise tabs
        let triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
        triggerTabList.forEach(function (triggerEl) {
            let tabTrigger = new bootstrap.Tab(triggerEl)

            triggerEl.addEventListener('click', function (event) {
                event.preventDefault()
                tabTrigger.show()
                currentTab = event.currentTarget.id
                if (currentTab === 'maptab') {
                    map.showMap(params, sysparams)
//                    document.querySelector('#sellan').style.display = 'inline'
                }
            })
        })

        dt.showDate(true)
        // and show date/time every minute
        setInterval(() => dt.showDate(false), 1000)

        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
            let ok = await showChart(params, 'live', 'dlive')
            if (ok) {
                await loadAll(params)
            }
        } else {
            // show the map
            document.querySelector('#sellan').style.display = 'inline'
            map.showMap(params,sysparams)
        }
    }

    main().catch(console.error)

})()