84 lines
3.6 KiB
JavaScript
84 lines
3.6 KiB
JavaScript
function updateCharts(canvasDom, items) {
|
|
const now = performance.now();
|
|
const sum = document.querySelector("#sum").checked;
|
|
const sumStores = document.querySelector("#sumstores").checked;
|
|
const todayOnly = document.querySelector("#todayonly").checked;
|
|
let startDate = document.querySelector("#start").value;
|
|
let endDate = document.querySelector("#end").value;
|
|
if (start > endDate) {
|
|
let tmp = start;
|
|
start = endDate;
|
|
endDate = tmp;
|
|
}
|
|
showCharts(canvasDom, items, sum, sumStores, todayOnly, startDate, endDate);
|
|
console.log("Updating charts took: " + (performance.now() - now) / 1000 + " seconds");
|
|
}
|
|
async function load() {
|
|
const items = await loadItems();
|
|
const chartDom = document.querySelector("#chart");
|
|
const canvasDom = chartDom.querySelector("canvas");
|
|
let lastHits = null;
|
|
document.querySelector("#sum").addEventListener("change", () => updateCharts(canvasDom, lastHits));
|
|
document.querySelector("#sumstores").addEventListener("change", () => updateCharts(canvasDom, lastHits));
|
|
document.querySelector("#todayonly").addEventListener("change", () => updateCharts(canvasDom, lastHits));
|
|
document.querySelector("#start").addEventListener("change", () => updateCharts(canvasDom, lastHits));
|
|
document.querySelector("#end").addEventListener("change", () => updateCharts(canvasDom, lastHits));
|
|
document.querySelector("#start").value = getOldestDate(items);
|
|
document.querySelector("#end").value = currentDate();
|
|
|
|
newSearchComponent(
|
|
document.querySelector("#search"),
|
|
items,
|
|
(hits) => {
|
|
items.forEach((item) => (item.chart = false));
|
|
if (hits.length > 0) {
|
|
chartDom.classList.remove("hide");
|
|
} else {
|
|
chartDom.classList.add("hide");
|
|
}
|
|
updateCharts(canvasDom, hits);
|
|
lastHits = hits;
|
|
return hits;
|
|
},
|
|
null,
|
|
(header) => {
|
|
header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th><th></th>`);
|
|
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;
|
|
});
|
|
return header;
|
|
},
|
|
(item, itemDom, items, setQuery) => {
|
|
const checked = (item.chart = (getQueryParameter("c") ?? []).includes(`${item.store}:${item.id}`));
|
|
const dataId = item.store + ":" + item.id;
|
|
const cell = dom("td", `<input type="checkbox" ${checked ? "checked" : ""} data-id="${dataId}">`);
|
|
itemDom.appendChild(cell);
|
|
const handleClick = (eventShouldSetQuery = false) => {
|
|
item.chart = cell.children[0].checked;
|
|
updateCharts(canvasDom, lastHits);
|
|
!!eventShouldSetQuery && setQuery();
|
|
};
|
|
cell.children[0].addEventListener("click", handleClick);
|
|
checked && handleClick();
|
|
return itemDom;
|
|
}
|
|
);
|
|
const query = getQueryParameter("q");
|
|
if (query) {
|
|
document.querySelector(".search").value = query;
|
|
const inputEvent = new Event("input", {
|
|
bubbles: true,
|
|
cancelable: false,
|
|
});
|
|
document.querySelector(".search").dispatchEvent(inputEvent);
|
|
}
|
|
}
|
|
|
|
load();
|