props/Props/assets/js/specific/search.js

import { apiHttp } from "~/assets/js/services/http.js";

// All input fields.
let inputs = {
    maxPriceEnabled: document.getElementById("max-price-enabled"),
    maxShippingEnabled: document.getElementById("max-shipping-enabled"),
    minRating: document.getElementById("min-rating"),
    maxPrice: document.getElementById("max-price"),
    maxShipping: document.getElementById("max-shipping"),
    keepUnknownPurchases: document.getElementById("keep-unknown-purchases"),
    keepUnknownReviews: document.getElementById("keep-unknown-reviews"),
    keepUnknownShipping: document.getElementById("keep-unknown-shipping"),
    keepUnrated: document.getElementById("keep-unrated"),
    minPrice: document.getElementById("min-price"),
    minPurchases: document.getElementById("min-purchases"),
    minReviews: document.getElementById("min-reviews"),
    shopToggles: {}
};

async function main() {
    setupInteractiveBehavior();
    await setupInitialValues((await apiHttp.get("/Search/Default/Outline/Filters")).data);
    await setupShopToggles((await apiHttp.get("/Search/Shops/Available")).data);

    document.querySelector("#configuration .invisible").classList.remove("invisible"); // Load completed, show the UI.
}

function setupInteractiveBehavior() {
    let configurationElem = document.getElementById("configuration");
    let configurationToggle = document.getElementById("configuration-toggle");
    configurationElem.addEventListener("show.bs.collapse", function () {
        configurationToggle.classList.add("active");
    });
    configurationElem.addEventListener("hidden.bs.collapse", function () {
        configurationToggle.classList.remove("active");
    });


    inputs.maxPriceEnabled.addEventListener("change", function () {
        inputs.maxPrice.disabled = !this.checked;
    });

    inputs.maxShippingEnabled.addEventListener("change", function () {
        inputs.maxShipping.disabled = !this.checked;
    });

    inputs.minRating.addEventListener("input", function () {
        document.getElementById("min-rating-display").innerHTML = `Minimum rating: ${this.value}%`;
    });
}

async function setupInitialValues(filters) {
    inputs.maxShippingEnabled.checked = filters.enableMaxShippingFee;
    inputs.maxShippingEnabled.dispatchEvent(new Event("change"));

    inputs.maxPriceEnabled.checked = filters.enableUpperPrice;
    inputs.maxPriceEnabled.dispatchEvent(new Event("change"));

    inputs.keepUnknownPurchases.checked = filters.keepUnknownPurchaseCount;
    inputs.keepUnknownPurchases.dispatchEvent(new Event("change"));

    inputs.keepUnknownReviews.checked = filters.keepUnknownReviewCount;
    inputs.keepUnknownReviews.dispatchEvent(new Event("change"));

    inputs.keepUnknownShipping.checked = filters.keepUnknownShipping;
    inputs.keepUnknownShipping.dispatchEvent(new Event("change"));

    inputs.keepUnrated.checked = filters.keepUnrated;
    inputs.keepUnrated.dispatchEvent(new Event("change"));

    inputs.minPrice.value = filters.lowerPrice;
    inputs.minPrice.dispatchEvent(new Event("change"));

    inputs.maxShipping.value = filters.maxShippingFee;
    inputs.maxShipping.dispatchEvent(new Event("change"));

    inputs.minPurchases.value = filters.minPurchases;
    inputs.minPurchases.dispatchEvent(new Event("change"));

    inputs.minRating.value = filters.minRating * 100;
    inputs.minRating.dispatchEvent(new Event("input"));

    inputs.minReviews.value = filters.minReviews;
    inputs.minReviews.dispatchEvent(new Event("change"));

    inputs.maxPrice.value = filters.upperPrice;
    inputs.maxPrice.dispatchEvent(new Event("change"));
}

async function setupShopToggles(availableShops) {
    let disabledShops = (await apiHttp.get("/Search/Default/Outline/DisabledShops")).data;
    let shopsElem = document.getElementById("shop-checkboxes");
    availableShops.forEach(shopName => {
        let id = `${shopName}-enabled`;
        let shopLabelElem = document.createElement("label");
        shopLabelElem.classList.add("form-check-label");
        shopLabelElem.htmlFor = id;
        shopLabelElem.innerHTML = `Enable ${shopName}`;

        let shopCheckboxElem = document.createElement("input");
        shopCheckboxElem.classList.add("form-check-input");
        shopCheckboxElem.type = "checkbox";
        shopCheckboxElem.id = id;
        shopCheckboxElem.checked = !disabledShops.includes(shopName);
        inputs.shopToggles[shopName] = shopCheckboxElem;

        let shopToggleElem = document.createElement("div");
        shopToggleElem.classList.add("form-check");
        shopToggleElem.appendChild(shopCheckboxElem);
        shopToggleElem.appendChild(shopLabelElem);
        shopsElem.appendChild(shopToggleElem);
    });
}

main();
// TODO: Animate configuration toggle.