2023-05-15 13:53:34 +02:00
|
|
|
async function load() {
|
2023-05-23 11:21:48 +02:00
|
|
|
const items = await loadItems();
|
2023-05-23 20:07:26 +02:00
|
|
|
const chartDom = document.querySelector("#chart");
|
|
|
|
newSearchComponent(document.querySelector("#search"), items,
|
|
|
|
(hits) => {
|
|
|
|
items.forEach(item => item.chart = false);
|
|
|
|
showChart(chartDom, []);
|
|
|
|
return hits;
|
|
|
|
},
|
|
|
|
null,
|
|
|
|
(header) => {
|
2023-05-26 16:05:42 +02:00
|
|
|
header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th><th></th>`)
|
2023-05-25 16:09:34 +02:00
|
|
|
const showHideAll = header.querySelectorAll('th:nth-child(4)')[0];
|
|
|
|
showHideAll.style["cursor"] = "pointer";
|
|
|
|
showHideAll.showAll = true;
|
|
|
|
showHideAll.addEventListener("click", () => {
|
|
|
|
document.querySelectorAll(".priceinfo").forEach(el => showHideAll.showAll ? el.classList.remove("hide") : el.classList.add("hide"));
|
|
|
|
showHideAll.showAll = !showHideAll.showAll;
|
|
|
|
})
|
2023-05-23 20:07:26 +02:00
|
|
|
return header;
|
2023-05-30 11:52:35 +02:00
|
|
|
}, (item, itemDom, items, setQuery) => {
|
2023-05-23 20:07:26 +02:00
|
|
|
const chartCheckbox = dom("input");
|
2023-05-30 11:52:35 +02:00
|
|
|
const checked = (getQueryParameter("c") ?? []).includes(`${item.store}:${item.id}`);
|
2023-05-23 20:07:26 +02:00
|
|
|
chartCheckbox.setAttribute("type", "checkbox");
|
2023-05-30 11:52:35 +02:00
|
|
|
chartCheckbox.checked = checked;
|
|
|
|
item.chart = checked;
|
|
|
|
chartCheckbox.setAttribute("data-id", `${item.store}:${item.id}`);
|
2023-05-23 20:07:26 +02:00
|
|
|
const cell = dom("td", "");
|
|
|
|
cell.appendChild(chartCheckbox);
|
|
|
|
itemDom.appendChild(cell);
|
2023-05-30 11:52:35 +02:00
|
|
|
const handleClick = (eventShouldSetQuery = false) =>{
|
2023-05-23 20:07:26 +02:00
|
|
|
item.chart = chartCheckbox.checked;
|
|
|
|
const data = [];
|
|
|
|
items.forEach(i => { if (i.chart) data.push(i) });
|
|
|
|
if (data.length == 0) {
|
|
|
|
chartDom.style.display = "none";
|
|
|
|
} else {
|
|
|
|
chartDom.style.display = "block";
|
|
|
|
showChart(chartDom, data);
|
|
|
|
}
|
2023-05-30 11:52:35 +02:00
|
|
|
!!eventShouldSetQuery && setQuery();
|
|
|
|
}
|
|
|
|
chartCheckbox.addEventListener("click", handleClick);
|
|
|
|
checked && handleClick();
|
2023-05-23 20:07:26 +02:00
|
|
|
return itemDom;
|
|
|
|
});
|
2023-05-26 11:28:40 +02:00
|
|
|
const query = getQueryParameter("q");
|
|
|
|
if (query) {
|
|
|
|
document.querySelector("input").value = query;
|
|
|
|
const inputEvent = new Event('input', {
|
|
|
|
bubbles: true,
|
|
|
|
cancelable: true
|
|
|
|
});
|
|
|
|
document.querySelector("input").dispatchEvent(inputEvent);
|
|
|
|
}
|
2023-05-15 13:53:34 +02:00
|
|
|
}
|
|
|
|
|
2023-05-18 13:39:58 +02:00
|
|
|
load();
|