Source: map/filters/ui/MagnituteFilter.js

import { FilterUi } from "./FilterUi.js"
import "./MagnituteFilter.css";
import { EventManager } from "../../../events/EventManager.js";
import { displayMessage } from "../../../utils/utils.js";


export { MagnituteFilter };

/**
 * 
 * @memberof vef.map.filters.ui
 */
class MagnituteFilter extends FilterUi {

    changeSELECT = true;
    classname = "text-filter";
    html = `<div class="mags_filter_display"><div class="mags_filter_display_mag">
                <span>Magnitude</span><span class="mags_filter_display_mag_value">---</span>
            </div>
            <div class="mags_filter_display_long">
                <span>Longitude</span><span class="mags_filter_display_long_value">---</span>
            </div>
            <div class="mags_filter_display_lat">
                <span>Latitude</span><span class="mags_filter_display_lat_value">---</span>
            </div></div>`;

    /**
     * @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({
            title: "Filter By Magnitute",
            placeholder: "Magnitute Filter",
            column: ""
        }, options || {});

        super(target, options, layers);

        this.currentMagValue = this.options_.starting_Mag;
        this.currentLonValue = this.options_.starting_Lon;
        this.currentLatValue = this.options_.starting_Lat;
        this.current_I_Value = this.options_.starting_I;
        this.current_J_Value = this.options_.starting_J;

        this.setClass(this.classname);
        this.setContent(this.html);
        this.initFilterEvents_();
        this.startingValues();
        this.applyOptions_();
    }

    applyOptions_() {
        this.setTitle(this.options_.title);
        this.query(".mags_filter_display_mag_value").placeholder = this.options_.placeholder;
    }

    reloadOptions_() {
        this.applyOptions_();
        this.fire("change", this);
    }

    /**
     * Get the filter object to pass it
     * on to the Layers. Override this method in child implementations.
     * 
     * @returns {object} filter object
     */
    getActiveFilter() {
        const value = parseInt(this.currentMagValue + this.current_J_Value + this.current_I_Value);
        // console.log(value)

        if (value.length > 0) {
            return [{
                type: "attribute",
                column: this.options_.column,
                values: [["eq", value]],
                excludedLayers: this.getExcludedLayers()
            }];
        }
        return [];
    }

    startingValues() {
        //hier updateFilter... aufrufen
        const magnitute = this.query(".mags_filter_display_mag_value")
        const longitude = this.query(".mags_filter_display_long_value")
        const latitude = this.query(".mags_filter_display_lat_value")

        magnitute.innerText = this.currentMagValue;
        longitude.innerText = this.currentLonValue;
        latitude.innerText = this.currentLatValue;
        this.getActiveFilter();
        this.reloadOptions_();
    }

    updateFilterValuesexistingPopup(element) {
        const magnitute = this.query(".mags_filter_display_mag_value")
        const longitude = this.query(".mags_filter_display_long_value")
        const latitude = this.query(".mags_filter_display_lat_value")
        const dropdown = element;

        // Values out of Popups
        if (dropdown.parentElement.parentElement.nextElementSibling.firstElementChild.title === "Longitude") {
            const longValue = dropdown.parentElement.parentElement.nextElementSibling.children[1].title
            longitude.innerText = longValue
            this.currentLonValue = longValue
        }
        const longPopup = dropdown.parentElement.parentElement.nextElementSibling.firstElementChild;

        if (longPopup.parentElement.nextElementSibling.firstElementChild.title === "Latitude") {
            const latValue = longPopup.parentElement.nextElementSibling.children[1].title
            latitude.innerText = latValue
            this.currentLatValue = latValue
        }

        const latPopup = longPopup.parentElement.nextElementSibling.firstElementChild;

        if (latPopup.parentElement.nextElementSibling.firstElementChild.title === "epi_i") {
            const i = latPopup.parentElement.nextElementSibling.children[1].title
            this.current_I_Value = i
        }

        const i_Popup = latPopup.parentElement.nextElementSibling.firstElementChild;

        if (i_Popup.parentElement.nextElementSibling.firstElementChild.title === "epi_j") {
            const j = i_Popup.parentElement.nextElementSibling.children[1].title
            this.current_J_Value = j
        }

        this.getActiveFilter();
    }

    changeSelectEvent() {
        const magnitute = this.query(".mags_filter_display_mag_value")
        const select = document.querySelectorAll(".pop-up_select_dropdown");


        select.forEach(element => {
            element.addEventListener("change", () => {
                let valueSelect = element.value;
                magnitute.innerText = valueSelect;
                this.currentMagValue = valueSelect;
                this.updateFilterValuesexistingPopup(element);
                this.reloadOptions_();
                displayMessage("FILTER CHANGED", 5000);

            })
        });
    }
    getOptions() {
        const options = super.getOptions();
        options.values = JSON.parse(JSON.stringify(this.getActiveFilter()));
        return options;
    }

    initFilterEvents_() {
        // listen to global filter requests
        // if (this.options_.applyGlobalFilters){
        //     EventManager.on("values_Magnitute_filter", filter => {  
        //         // displayMessage("FILTER SET", 5000);
        //         return;
        //     });
        // } 
        if (this.options_.applyGlobalFilters) {
            EventManager.on("backToSidebar", () => {
                this.changeSelectEvent();
                return;
            });
        }
    }
}