Fix filtering in aktionen, add billiger.html/.js to show all products that are cheaper than their previous price.

This commit is contained in:
Mario Zechner 2023-05-29 12:31:14 +02:00
parent 25d4821ccf
commit 684794e961
3 changed files with 97 additions and 0 deletions

View File

@ -30,6 +30,7 @@ async function load() {
document.querySelector("#filters-changes").querySelectorAll("input").forEach(input => {
input.addEventListener("change", () => showResults(items, currentDate()));
});
document.querySelector("#filter").addEventListener("input", () => showResults(items, currentDate()));
showResults(items, currentDate());
}

25
site/billiger.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heisse Preise</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="column">
<h2>Billiger seit letzter Preisänderung</h2>
<div class="filters" id="filters-store">
</div>
<input id="filter" type="text" style="max-width: 800px; width: 100%;" placeholder="Filtern...">
<div id="numresults"></div>
<table id="result"></table>
</div>
<script src="utils.js"></script>
<script src="billiger.js"></script>
</body>
</html>

71
site/billiger.js Normal file
View File

@ -0,0 +1,71 @@
let changeDates = [];
let items = [];
async function load() {
const today = currentDate();
items = await loadItems();
items.sort((a, b) => {
if (a.store < b.store) {
return -1;
} else if (a.store > b.store) {
return 1;
}
if (a.name < b.name) {
return -1;
} else if (a.name > b.name) {
return 1;
}
return 0;
});
const filtersStore = document.querySelector("#filters-store");
filtersStore.innerHTML = STORE_KEYS.map(store => `<label><input id="${store}" type="checkbox" checked="true">${stores[store].name}</label>`).join(" ");
filtersStore.querySelectorAll("input").forEach(input => {
input.addEventListener("change", () => showResults(items, currentDate()));
});
document.querySelector("#filter").addEventListener("input", () => showResults(items, currentDate()));
showResults(items, currentDate());
}
function showResults(items, today) {
const storeCheckboxes = STORE_KEYS.map(store => document.querySelector(`#${store}`));
const checkedStores = STORE_KEYS.filter((store, i) => storeCheckboxes[i].checked)
let changedItems = [];
for (item of items) {
if (item.priceHistory.length < 2) continue;
if (!checkedStores.includes(item.store)) continue;
if (item.priceHistory[0].price < item.priceHistory[1].price && item.priceHistory[1].date.indexOf("2020") != 0)
changedItems.push(item);
}
const query = document.querySelector("#filter").value.trim();
const total = changedItems.length;
if (query.length >= 3) changedItems = searchItems(changedItems, document.querySelector("#filter").value, checkedStores, false, 0, 10000, false, false);
document.querySelector("#numresults").innerText = "Resultate: " + changedItems.length + (total > changedItems.length ? " / " + total : "");
const table = document.querySelector("#result");
table.innerHTML = "";
const header = dom("thead", `
<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th></tr>
`)
const showHideAll = header.querySelectorAll('th:nth-child(4)')[0];
showHideAll.style["cursor"] = "pointer";
showHideAll.showAll = true;
showHideAll.addEventListener("click", () => {
table.querySelectorAll(".priceinfo").forEach(el => showHideAll.showAll ? el.classList.remove("hide") : el.classList.add("hide"));
showHideAll.showAll = !showHideAll.showAll;
})
table.appendChild(header);
for (item of changedItems) {
item = JSON.parse(JSON.stringify(item));
const itemDom = itemToDOM(item);
table.appendChild(itemDom);
}
}
load();