const { today, dom, getBooleanAttribute } = require("../misc");
const { stores, STORE_KEYS, BUDGET_BRANDS } = require("../model/stores");
const { View } = require("./view");
class ItemsFilter extends View {
constructor() {
super();
this._hidePriceChanges = getBooleanAttribute(this, "pricechanges") ? "" : "hidden";
this._hidePriceDirection = getBooleanAttribute(this, "pricedirection") ? "" : "hidden";
this._hideStores = getBooleanAttribute(this, "stores") ? "" : "hidden";
this._hideMisc = getBooleanAttribute(this, "misc") ? "" : "hidden";
this._placeholder = this.hasAttribute("placeholder") ? this.getAttribute("placeholder") : "Produkte suchen... (mind. 3 Zeichen)";
this.innerHTML = /*html*/ `
${STORE_KEYS.map(
(store) => /*html*/ `
`
).join("")}
`;
this.classList.add("items-filter");
const elements = this.elements;
const DEBOUNCE_MS = 100;
let timeoutId;
elements.query.addEventListener("input", (event) => {
event.stopPropagation();
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
this.dispatchEvent(
new CustomEvent("change", {
bubbles: true,
cancelable: true,
})
);
}, DEBOUNCE_MS);
});
elements.allStores.addEventListener("change", (event) => {
event.stopPropagation();
const checked = elements.allStores.checked;
STORE_KEYS.forEach((store) => (elements[store].checked = checked));
this.fireChangeEvent();
});
elements.priceChangesToday.addEventListener("change", (event) => {
event.stopPropagation();
if (elements.priceChangesToday.checked) elements.priceDirection.classList.remove("hidden");
else elements.priceDirection.classList.add("hidden");
this.fireChangeEvent();
});
elements.priceChangesSinceLast.addEventListener("change", (event) => {
event.stopPropagation();
if (elements.priceChangesSinceLast.checked) elements.priceDirection.classList.add("hidden");
else elements.priceDirection.classList.remove("hidden");
this.fireChangeEvent();
});
this.setupEventHandlers();
}
render() {
const now = performance.now();
const elements = this.elements;
const items = this.model.items;
const dates = {};
for (const item of items) {
if (item.priceHistory.length == 1) continue;
for (let i = 0; i < item.priceHistory.length; i++) {
const price = item.priceHistory[i];
if (i + 1 < item.priceHistory.length) {
if (item.priceHistory[i].price != item.priceHistory[i + 1].price)
dates[price.date] = dates[price.date] ? dates[price.date] + 1 : 1;
}
}
}
const priceChangesDates = elements.priceChangesDate;
priceChangesDates.innerHTML = "";
for (const date of Object.keys(dates).sort((a, b) => b.localeCompare(a))) {
const dateDom = dom("option");
dateDom.value = date;
dateDom.innerText = `${date} (${dates[date]})`;
priceChangesDates.append(dateDom);
}
console.log("Rendering items filter took " + (performance.now() - now) / 1000);
}
get checkedStores() {
return STORE_KEYS.filter((store) => elements[store].checked);
}
}
customElements.define("items-filter", ItemsFilter);