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.getElementById("configuration").querySelector(".invisible").classList.remove("invisible"); // Load completed, show the UI. } function setupInteractiveBehavior() { document.getElementById("config-check-toggle").addEventListener("change", function () { let configElem = document.getElementById("configuration"); if (this.checked) { configElem.classList.remove("d-none"); } else { configElem.classList.add("d-none"); } }); 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.