Implemented groundwork for search configuration.

2021-07-22 16:12:27 -05:00
parent 3129e5e564
commit 2719142538
41 changed files with 1037 additions and 205 deletions
--- a/Props/assets/js/main.js
+++ b/Props/assets/js/main.js
@@ -1,2 +1,2 @@
-import "../../node_modules/bootstrap/js/dist/collapse";
+import "~/node_modules/bootstrap/js/dist/collapse";
 import "simplebar";
--- a/Props/assets/js/specific/search.js
+++ b/Props/assets/js/specific/search.js
@@ -1 +1,115 @@
-console.log("abc");
+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.