2021-08-05 06:22:19 +00:00
|
|
|
import Alpine from "alpinejs";
|
2021-07-22 21:12:27 +00:00
|
|
|
import { apiHttp } from "~/assets/js/services/http.js";
|
|
|
|
|
2021-08-05 06:22:19 +00:00
|
|
|
const startingSlide = "#quick-picks-slide";
|
2021-07-22 21:12:27 +00:00
|
|
|
|
2021-08-05 06:22:19 +00:00
|
|
|
function initInteractiveElements() {
|
2021-07-23 02:24:39 +00:00
|
|
|
let configurationToggle = document.getElementById("configuration-toggle");
|
2021-08-05 06:22:19 +00:00
|
|
|
let configurationElem = document.getElementById("configuration");
|
2021-07-23 02:24:39 +00:00
|
|
|
configurationElem.addEventListener("show.bs.collapse", function () {
|
|
|
|
configurationToggle.classList.add("active");
|
2021-07-22 21:12:27 +00:00
|
|
|
});
|
2021-07-23 02:24:39 +00:00
|
|
|
configurationElem.addEventListener("hidden.bs.collapse", function () {
|
|
|
|
configurationToggle.classList.remove("active");
|
|
|
|
});
|
2021-08-05 06:22:19 +00:00
|
|
|
}
|
2021-07-23 02:24:39 +00:00
|
|
|
|
2021-08-05 06:22:19 +00:00
|
|
|
async function initConfigurationData() {
|
|
|
|
const givenConfig = (await apiHttp.get("/SearchOutline/Filters")).data;
|
|
|
|
const disabledShops = (await apiHttp.get("/SearchOutline/DisabledShops")).data;
|
|
|
|
const availableShops = (await apiHttp.get("/Search/Available")).data;
|
|
|
|
document.addEventListener("alpine:init", () => {
|
|
|
|
Alpine.data("configuration", () => {
|
|
|
|
const configuration = {
|
|
|
|
maxPriceEnabled: givenConfig.enableUpperPrice,
|
|
|
|
maxPrice: givenConfig.upperPrice,
|
|
|
|
minPrice: givenConfig.lowerPrice,
|
|
|
|
maxShippingEnabled: givenConfig.enableMaxShippingFee,
|
|
|
|
maxShipping: givenConfig.maxShippingFee,
|
|
|
|
keepUnknownShipping: givenConfig.keepUnknownShipping,
|
|
|
|
minRating: givenConfig.minRating * 100,
|
|
|
|
keepUnrated: givenConfig.keepUnrated,
|
|
|
|
minReviews: givenConfig.minReviews,
|
|
|
|
keepUnknownReviews: givenConfig.keepUnknownReviewCount,
|
|
|
|
keepUnknownPurchases: givenConfig.keepUnknownPurchaseCount,
|
|
|
|
minPurchases: givenConfig.minPurchases,
|
|
|
|
shops: {},
|
|
|
|
};
|
|
|
|
availableShops.forEach(shop => {
|
|
|
|
configuration.shops[shop] = !disabledShops.includes(shop);
|
|
|
|
});
|
|
|
|
return configuration;
|
|
|
|
});
|
2021-07-22 21:12:27 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-08-05 06:22:19 +00:00
|
|
|
function initSlides() {
|
|
|
|
document.querySelectorAll("#content-pages > .selectors > .nav-item > button").forEach(tabElem => {
|
|
|
|
tabElem.addEventListener("click", () => {
|
|
|
|
const destUrl = new URL(tabElem.getAttribute("data-bs-target"), window.location.href);
|
|
|
|
if (location.href === destUrl.href) return;
|
|
|
|
history.pushState({}, document.title, destUrl);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const goTo = () => {
|
|
|
|
const match = location.href.match("(#[\\w-]+)");
|
|
|
|
const idAnchor = match && match[1] ? match[1] : startingSlide;
|
|
|
|
document.querySelector("#content-pages > .selectors > .nav-item > .active")?.classList.remove("active");
|
|
|
|
document.querySelector("#content-pages > .multipage-slides > .active.show")?.classList.remove("active", "show");
|
|
|
|
document.querySelector(`#content-pages > .selectors > .nav-item > [data-bs-target="${idAnchor}"]`).classList.add("active");
|
|
|
|
document.querySelector(`#content-pages > .multipage-slides > ${idAnchor}`).classList.add("active", "show");
|
|
|
|
};
|
|
|
|
window.addEventListener("popstate", goTo);
|
|
|
|
goTo();
|
|
|
|
|
|
|
|
require("bootstrap/js/dist/tab.js");
|
|
|
|
document.querySelector("#content-pages").classList.remove("invisible");
|
2021-07-22 21:12:27 +00:00
|
|
|
}
|
|
|
|
|
2021-08-05 06:22:19 +00:00
|
|
|
async function main() {
|
|
|
|
initInteractiveElements();
|
|
|
|
await initConfigurationData();
|
|
|
|
initSlides();
|
|
|
|
Alpine.start();
|
2021-07-22 21:12:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
main();
|