Source: map/filters/ui/VerticalFilter.js

import { Dropdown } from "../../../ui/Dropdown.js";
import { RangeFilter } from "./RangeFilter.js";

export { VerticalFilter };

/**
 * A class that defines the Ui for a Vertical Range Filter
 * 
 * @author rhess <robin.hess@awi.de>
 * @memberof vef.map.filters.ui
 */
class VerticalFilter extends RangeFilter {

    /**
     * @param {HTMLElement | string} target
     * @param {object} options filter specific options
     * @param {LayerManager} layers Used for included/excluded layers
     */
    constructor(target, options, layers) {

        // apply default options
        options = Object.assign({
            columns: {
                "DEPTH, sediment/rock": {},
                "DEPTH, sediment, experiment": {},
                "DEPTH, soil": {},
                "DEPTH, water": {},
                "DEPTH, water, experiment": {},
                "DEPTH, ice/snow": {},
                "ELEVATION [m a.s.l.]": {},
                "ALTITUDE": {},
                "HEIGHT above ground": {},
            }
        }, options || {});

        super(target, options, layers);

        this.options_.title = "Filter by " + this.options_.column;
        this.setTitle("Filter by " + this.options_.title);

        this.dropdown_ = null;
        this.initColumnSelection_();
    }

    initColumnSelection_() {
        this.dropdown_ = new Dropdown(null, {
            placeholder: "select a column...",
            deselectLabel: null,
            showDeselectItem: false,
            search: false,
        });

        this.dropdown_.setItems(this.options_.columns);
        this.dropdown_.select(this.options_.column);

        this.dropdown_.on("select", e => {
            this.options_.column = e.key;
            this.fire("change", this);
            this.setTitle("Filter by " + e.key);
        });

        const element = this.dropdown_.getElement();
        element.style.marginBottom = "10px";
        this.content_.insertAdjacentElement("afterbegin", element);
    }
}