Source: components/Geolocation.js

/**
 * @module components/Geolocation.js
 * @name Geolocation
 * @copyright 2023 3Liz
 * @author BOISTEAULT Nicolas
 * @license MPL-2.0
 */

import {mainLizmap, mainEventDispatcher} from '../modules/Globals.js';
import {html, render} from 'lit-html';

/**
 * @class
 * @name Geolocation
 * @augments HTMLElement
 */
export default class Geolocation extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        // Display
        const mainTemplate = () => html`
        <div class="menu-content">
            <div class="button-bar">
                <button class="btn btn-sm ${mainLizmap.geolocation.isTracking ? 'active btn-success' : ''}" @click=${ () => mainLizmap.geolocation.toggleTracking()} ?disabled=${mainLizmap.geolocation.isTracking && mainLizmap.geolocation.firstGeolocation}><span class="icon"></span>${mainLizmap.geolocation.isTracking ? (mainLizmap.geolocation.firstGeolocation ? lizDict['geolocate.toolbar.waiting'] : lizDict['geolocate.toolbar.stop']) : lizDict['geolocate.toolbar.start']}</button>
                <button class="btn btn-sm" @click=${ () => mainLizmap.geolocation.center()} ?disabled=${!mainLizmap.geolocation.isTracking | mainLizmap.geolocation.isBind | mainLizmap.geolocation.firstGeolocation}><span class="icon"></span>${lizDict['geolocate.toolbar.center']}</button>
                <div class="input-prepend input-append">
                    <button class="btn btn-sm ${mainLizmap.geolocation.isBind ? 'active btn-success' : ''}" @click=${() => mainLizmap.geolocation.toggleBind()} ?disabled=${!mainLizmap.geolocation.isTracking | mainLizmap.geolocation.firstGeolocation}><span class="icon"></span>${lizDict['geolocate.toolbar.bind']}</button>
                    <input class="input-mini" type="number" min="1" ?disabled=${!mainLizmap.geolocation.isBind || !mainLizmap.geolocation.isTracking} value="${mainLizmap.geolocation.bindIntervalInSecond}" @input=${(event) => mainLizmap.geolocation.bindIntervalInSecond = parseInt(event.target.value)}>
                    <span class="add-on">s</span>
                </div>
            </div>
            <div class="geolocation-infos">
                <div>
                    <small class="geolocation-coords">
                        <div>X : ${mainLizmap.geolocation.position ? mainLizmap.geolocation.position[0].toString() : ''}</div>
                        <div>Y : ${mainLizmap.geolocation.position ? mainLizmap.geolocation.position[1].toString() : ''}</div>
                    </small>
                </div>
                <div>
                    <small class="geolocation-accuracy">
                        <div>${lizDict['geolocate.infos.accuracy']} : ${mainLizmap.geolocation.accuracy}</div>
                    </small>
                </div>
            </div>
        </div>`;

        render(mainTemplate(), this);

        mainEventDispatcher.addListener(
            () => {
                render(mainTemplate(), this);
            },
            [
                'geolocation.isTracking',
                'geolocation.firstGeolocation',
                'geolocation.isBind',
                'geolocation.position',
                'geolocation.accuracy'
            ]
        );
    }

    disconnectedCallback() {
    }
}