Source: map/importer/ui/DwsUi.js

import { UiElement } from "../../../ui/UiElement.js";
import { DwsInput } from "./DwsInput.js";
import { DwsLayer } from "../../layer/DwsLayer/DwsLayer.js";
import { createLayerTreeStructure } from "../utils.js";
import "./DwsUi.css";

export { DwsUi };

/**
 * Ui class for importing NRT layers from DWS
 * 
 * @memberof vef.map.importer.ui
 */
class DwsUi extends UiElement {

    title = "NRT Data Web Service";

    classes = ["importer-ui", "dws-ui"];
    html = `
        <div class="dws-form-label">Parameter:</div>
        <div class="device-input-wrapper"></div>
        <div class="dws-form-label">Latitude:</div>
        <div class="lat-input-wrapper"></div>
        <div class="dws-form-label">Longitude:</div>
        <div class="lon-input-wrapper"></div>
        <div class="dws-form-label">Aggregation:</div>
        <div class="aggregation-dropdown-wrapper">
            <select class="aggregation-dropdown">
                <option value="day">day</option>
                <option value="hour">hour</option>
                <option value="minute">minute</option>
                <option value="second">second</option>
            </select>
        </div>
        <div class="dws-form-label">Limit:</div>
        <div class="limit-input-wrapper"><input type="number" min="0" step="1" class="limit-input"></input></div>
        <div style="margin-top: 14px; float: left; width: 100%;"><i class="fas fa-exclamation-triangle"></i> Higher limits may slow down your browser - Default is 10000.</div>
        <div style="display:none;" class="error-msg"></div>
        <div style="float: left; width: 100%;"class="button-group">
            <button class="btn-add"><i class="fas fa-plus"></i> Add</button>
        </div>
    `;

    constructor(target, options) {
        super(target, {
            "add_layers": [],
            "close": []
        });

        this.options = Object.assign({
            aggregate: "hour",
            limit: 10000,
            dwsUrl: null
        }, options || {})

        this.deviceInput_ = null;
        this.latInput_ = null;
        this.lngInput_ = null

        this.setHtml(this.html);
        this.setClass(this.classes);
        this.initEvents_();
        this.reset_();
    }

    validateInput_() {
        if (!this.deviceInput_.getInputValue_()) return "Device URN is not set!";
        if (!this.latInput_.getInputValue_()) return "Latitude URN is not set!";
        if (!this.lngInput_.getInputValue_()) return "Longitude URN is not set!";
        return true;
    }

    addLayer_() {
        const options = {
            columnData: this.deviceInput_.getInputValue_(),
            columnLatitude: this.latInput_.getInputValue_(),
            columnLongitude: this.lngInput_.getInputValue_(),
            aggregate: this.options.aggregate,
            url: this.options.dwsUrl,
            limit: this.options.limit
        }

        this.fire("add_layers", createLayerTreeStructure([new DwsLayer(options)]));
        this.fire("close", this);
    }

    initEvents_() {
        const options = { closeable: false, dwsUrl: this.options.dwsUrl };

        this.latInput_ = new DwsInput(this.query(".lat-input-wrapper"), Object.assign({ staticQuery: ' AND (id:/.*lat.*/^20 )' }, options));
        this.lngInput_ = new DwsInput(this.query(".lon-input-wrapper"), Object.assign({ staticQuery: ' AND (id:/.*lon.*/^20 )' }, options));
        this.deviceInput_ = new DwsInput(this.query(".device-input-wrapper"), Object.assign({}, options));
        this.deviceInput_.on("select_urn", (e) => this.setDevice(e.device));

        this.query(".btn-add").addEventListener("click", (e) => {
            const message = this.validateInput_();
            if (message === true) {
                this.fire("close");
                this.addLayer_();
                this.reset();
            } else {
                const msg = this.query(".error-msg");
                msg.innerText = message;
                msg.style.display = "block";
            }
        });

        const aggregationDropdown = this.query(".aggregation-dropdown")
        aggregationDropdown.addEventListener("change", () => {
            this.options.aggregate = aggregationDropdown.value;
        });

        const limitInput = this.query(".limit-input");
        limitInput.addEventListener("change", () => {
            this.options.limit = limitInput.value;
        });
    }

    reset_() {
        this.latInput_.deselect_();
        this.lngInput_.deselect_();
        this.query(".error-msg").style.display = "none";
        this.query(".aggregation-dropdown").value = this.options.aggregate;
        this.query(".limit-input").value = this.options.limit;
    }

    setDevice(device) {
        this.reset_();

        // select code prefix for lat/lng input
        const parts = device.metadata.code.split(":");
        let prefix = parts[0];
        if (parts[1]) prefix += ":" + parts[1];

        this.latInput_.getElement().querySelector(".query").value = prefix;
        this.lngInput_.getElement().querySelector(".query").value = prefix;
        this.deviceInput_.getElement().querySelector(".query").value = device.metadata.code;
    }

    reset() {
        this.reset_();

        this.latInput_.getElement().querySelector(".query").value = "";
        this.lngInput_.getElement().querySelector(".query").value = "";
        this.deviceInput_.getElement().querySelector(".query").value = "";
    }

}