Source: map/importer/ui/StaUi.js

import { UiElement } from "../../../ui/UiElement.js";
import { StaLayer } from "../../layer/StaLayer/StaLayer.js";
import { openColorPicker } from "../../../utils/openColorPicker.js";
import { createLayerTreeStructure } from "../utils.js";
import "./StaUi.css";

export { StaUi };

let currentColor = "#000000";

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

    title = "STA";

    classes = ["importer-ui", "sta-ui"];
    html = `
        <div class="sta-url-input">
            <div class="sta-label">URL:</div>
            <input spellcheck="false" type="text" placeholder="Insert STA Endpoint URL ..."/>
        </div>
        <div class="sta-title-input">
            <div class="sta-label">Title:</div>
            <input spellcheck="false" type="text" placeholder="Set Layer Title ..."/>
        </div>
        <div class="sta-color-input">
            <div class="sta-label">Color:</div>
            <div style="color:${currentColor};" class="fake-input">${currentColor}</div>
        </div>
        <div class="sta-filter-input">
            <div class="sta-label">Filter Query:</div>
            <input spellcheck="false" type="text" placeholder="Optional Filter Query ..."/>
            <a target="_blank" title="Filter Documentation" href="https://fraunhoferiosb.github.io/FROST-Server/sensorthingsapi/requestingData/STA-Filtering.html">?</a>
        </div>

        <!-- ToDo: Implement filter criteria
        <div class="sta-filter-criteria-label">Filter-Criteria (optional):</div>
        <div class="sta-filter-criteria-thing">
            <div class="sta-filter-criteria-thing-form">
                <div class="sta-label">Thing-Property:</div>
                <input placeholder="e.g. 'projects'" />
                <input placeholder="e.g. 'The ARGO Project'" />
                <button>+</button>
            </div>
            <div class="sta-filter-criteria-thing-list">
            </div>
        </div>
        
        <div class="sta-filter-criteria-observedproperty">
            <div class="sta-filter-criteria-observedproperty-form">
                <div class="sta-label">Observed-Property</div>
                <input placeholder="e.g. 'Electrical Conductivity'" />
                <button>+</button>
            </div>
            <div class="sta-filter-criteria-observedproperty-list">
            </div>
        </div>
        -->

        <div class="add-button-container">
            <button>+ Add</button>
        </div>
    `;

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

        this.options = Object.assign({

        }, options || {})

        this.setHtml(this.html);
        this.setClass(this.classes);

        this.initEvents_();
    }

    initEvents_() {
        const urlInput = this.query(".sta-url-input input");
        const titleInput = this.query(".sta-title-input input");
        const colorInput = this.query(".sta-color-input .fake-input");
        const filterInput = this.query(".sta-filter-input input");

        colorInput.addEventListener("click", () => {
            openColorPicker(color => {
                currentColor = color;
                colorInput.innerText = color;
                colorInput.style.color = color;
            });
        });

        this.query(".add-button-container button").addEventListener("click", () => {
            let url = urlInput.value.trim();
            if (url.length > 0) {

                // Prepare URL and cut everything after v1.1
                if (!url.endsWith("/")) url += "/";
                const index = url.indexOf("/v1.1/");
                if (index > 0) {
                    url = url.substring(0, index + 6);
                } else {
                    console.error("Invalid STA URL");
                    return;
                }

                let title = titleInput.value.trim() || url;
                let filter = filterInput.value.trim() || "";

                const layer = new StaLayer({
                    url: url,
                    title: title,
                    filter: filter,
                    style: {
                        color: currentColor
                    }
                });

                this.fire("add_layers", createLayerTreeStructure([layer]));
            }
        })
    }

}