117 lines
4.7 KiB
JavaScript
117 lines
4.7 KiB
JavaScript
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.
|