noise/public/javascripts/global.js

// Client side javascript
"use strict"

import * as map from './map.js'
import * as dt from './datetime.js'
import {loadAll, showChart, setNoUTC} from './showcharts.js'
import { DateTime } from './luxon.min.js'
import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_utilities.js";

(async () => {

    // global constants
    const Stuttgart = [48.779, 9.16]
    // END global constants

    // global variables
    const params = {                                  // set defaults
        center: Stuttgart,
        zoom: 10,
        span: 1,
        peak: 70,
        weeks: 4,
        datetime: '',
        seldate: '',
        refreshRate: 5,
        sid: -1
    }

    // END global variables




    // Register events
    // Every input with value check
    const checkPlausibility = (id, min, max) => {
        document.getElementById(id).addEventListener('change', function() {
            let v = parseInt(this.value)
            if(v < min) this.value = min
            if (v > max) this.value = max
        })
    }

    checkPlausibility('nbrofdays', 1, 10)
    checkPlausibility('peaklim', 10, 130)
    checkPlausibility('olderthan', 0, 52)

    // Button 'Save' pressed
    document.querySelector('#btnSave').addEventListener('click', async () => {
        const selDate = document.getElementById('startday').value
        let starttime
        if ((selDate === 'today') || (selDate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === selDate)) {
            starttime = ''
        } else {
            starttime = DateTime.fromFormat(selDate, 'yyyy-MM-dd').toUTC().toISO()
        }
        params.datetime = starttime
        params.seldate = selDate
        params.span = parseInt(document.getElementById('nbrofdays').value)
        params.peak = parseInt(document.getElementById('peaklim').value)
        params.weeks = parseInt(document.getElementById('olderthan').value)
        let newlng = document.querySelector('#sellan input:checked').id
        let oldlng = localStorage.getItem('curlang')
        localStorage.setItem('curlang', newlng)
        if(newlng !== oldlng) {
            location.reload()
        }
        await loadAll(params,0)
        // ToDo:
        // Load ALL incl. MAP und LIVE hier, d.h. an loadAll einen zusätzlichen Parameter übergeben
        // if(params.sid !== undefined) {
        //     await loadAll(params)
        // }
    })

    // Btn 'Settings' pressed
    document.querySelector('#btnSet').addEventListener('click', () => {
        const curtab = getCurrentTab()
        let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
        const lang = localStorage.getItem('curlang')
        const elem = document.querySelector('#startday')
        const datepicker = new Datepicker(elem, {
            buttonClass: 'btn',
            autohide: true,
            format: 'yyyy-mm-dd',
            language: lang,
            maxDate: new Date(),
            minDate: new Date(new Date().setDate(new Date().getDate() - 365)),
            defaultViewDate: new Date(),
            todayButton: true,
            todayButtonMode: 1

        })
        document.getElementById('startday').value = params.seldate
        document.getElementById('nbrofdays').value = params.span
        document.getElementById('peaklim').value = params.peak
        document.getElementById('olderthan').value = params.weeks
        // select different infos depoending on the selcted tab
        // first clear all
        document.querySelector('#stday').style.display = 'inline'
        document.querySelector('#nbday').style.display = 'none'
        document.querySelector('#pklim').style.display = 'none'
        document.querySelector('#odth').style.display = 'none'
        if(curtab === 'maptab') {
            document.querySelector('#stday').style.display = 'none'
            document.querySelector('#odth').style.display = 'inline'
        }
        if(curtab === 'livetab') {
            document.querySelector('#nbday').style.display = 'inline'
        }
        if(
            (curtab === 'houravgtab') || (curtab === 'dayavgtab')) {
            document.querySelector('#pklim').style.display = 'inline'
        }
        myModal.show()
    })

    const getSensorType = async (sid) => {
        let url = `/srv/getoneproperty?sensorid=${sid}`
        const data = await fetchfromserver(url)
        return data.props.type
    }

    // 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() {
        setNoUTC()                                              // no UTC for HighCharts
        // set correct language
        const currentLang =  localStorage.getItem('curlang')
        if(currentLang === 'en') {
            document.querySelector('#en').checked = true
            params.seldate = 'today'
        } else {
            document.querySelector('#de').checked = true
            params.seldate = 'heute'
        }
        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()
                setCurrentTab(event.currentTarget.id)
                if (getCurrentTab() === 'maptab') {
                    map.showMap(params)
                }
            })
        })

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

        const csid = parseInt(sysparams.csid)
        if(csid !== -1) {
            // check, if sid is of right type (noise)
            const typ = await getSensorType(csid)
            if (typ !== 'noise') {
                // wrong sensor type
                showError('Sensor ID ' + csid + ' is not of type noise')
                return
            }
            params.sid = csid
            let ok = await showChart(params, 'live', 'dlive')
            setCurrentTab('livetab')
            if (ok) {
                await loadAll(params)
            }
        } else {
            // show the map
            map.showMap(params)
        }
    }

    main().catch(console.error)

})()