Source: map/importer/ui/ServiceUi.js

import { Tree } from "../../../ui/Tree.js";
import { UiElement } from "../../../ui/UiElement.js";
import { OgcBinder } from "../binder/OgcBinder.js";
import "./ServiceUi.css";

export { ServiceUi };

/**
 * Ui class for importing OGC layers from WMS or WFS
 * 
 * @memberof vef.map.importer.ui
 */
class ServiceUi extends UiElement {

    title = "OGC Service";

    classes = ["importer-ui", "service-ui"];
    html = `
        <div class="url-input-form">
            <select name="type" class="url-select-type">
                <option value="AUTO">AUTO</option>
                <option value="WMS">WMS</option>
                <option value="WFS">WFS</option>
            </select><!--
            --><input spellcheck="false" type="text" placeholder="Service URL" class="url-input"/><!--
            --><button class="url-input-button"><i class="fas fa-spinner fa-spin fa-fw"></i><i class="fas fa-sync"></i></button>
        </div>
        <div class="layer-list">
            <div class="error-msg">Could not load any layers</div>
        </div>
        <div class="button-group">
            <button class="btn-add" disabled="true"><i class="fas fa-plus"></i> Add</button>
        </div>
    `;

    /**
     * @param {HTMLElement} target 
     * @param {object} options 
     */
    constructor(target, options) {
        super(target, {
            "add_layers": [],
            "close": []
        });

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

        this.currentRequest = null;
        this.tree_ = new Tree(this.query(".layer-list"));

        this.initEvents_();
    }

    initEvents_() {
        this.query(".url-input").addEventListener("keydown", e => {
            if (e.key == "Enter") this.requestService_();
        });

        const btnAdd = this.query(".btn-add")
        btnAdd.addEventListener("click", e => {
            if (!btnAdd.disabled) {
                this.fire("add_layers", this.getSelectedLayers_());
                this.fire("close", this);
                this.clear_();
            }
        });

        this.query(".url-input-button").addEventListener("click", () => this.requestService_());
    }

    requestService_() {
        const url = this.query(".url-input").value.trim();
        if (url.length == 0) return;

        this.clear_();
        this.loading_();

        const type = this.query(".url-select-type").value;
        OgcBinder.getCapabilities(null, url, (type !== "AUTO") ? type : null).then(layers => {
            this.initTree_(layers);
        })
    }

    initTree_(data) {
        this.query(".url-select-type").disabled = false;
        this.query(".url-input").disabled = false;
        this.query(".url-input-button").disabled = false;

        if (!Array.isArray(data)) data = [data];
        for (let i = 0; i < data.length; ++i) {
            if (data[i] && ("layers" in data[i]) && ("structure" in data[i])) {
                this.tree_.addStructuredItems(data[i].layers, data[i].structure);
            }
        }

        if ((this.tree_.getElement().childNodes.length > 0)) {
            this.query(".btn-add").disabled = false;
            this.query(".error-msg").style.display = "none";
            this.tree_.selectAll();
        } else {
            this.query(".error-msg").style.display = "block";
        }
    }

    getSelectedLayers_() {
        const layers = this.tree_.getItems(true)
        for (let i in layers) {
            layers[i].active = false;
        }

        return {
            structure: this.tree_.getStructure(true),
            layers: layers
        }
    }

    clear_() {
        this.query(".btn-add").disabled = true;
        this.tree_.clear();
        this.cache_ = [];
    }

    loading_() {
        this.query(".url-select-type").disabled = true;
        this.query(".url-input").disabled = true;
        this.query(".url-input-button").disabled = true;
    }

}