mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-07-01 21:05:49 +02:00
111 lines
4.6 KiB
JavaScript
111 lines
4.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-container").innerHTML = customCheckbox(`sum`, "Preissumme Gesamt", false, "gray", "gray");
|
|
document.querySelector("#sumstores-container").innerHTML = customCheckbox(`sumstores`, "Preissumme pro Kette", false, "gray", "gray");
|
|
document.querySelector("#todayonly-container").innerHTML = customCheckbox(`todayonly`, "Nur heutige Preise", false, "gray", "gray");
|
|
|
|
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();
|
|
|
|
let chartEnabled = false;
|
|
let search = newSearchComponent(
|
|
document.querySelector("#search"),
|
|
items,
|
|
(hits) => {
|
|
items.forEach((item) => (item.chart = false));
|
|
if (!chartEnabled) {
|
|
chartDom.classList.add("hidden");
|
|
} else {
|
|
if (hits.length > 0) {
|
|
chartDom.classList.remove("hidden");
|
|
} else {
|
|
chartDom.classList.add("hidden");
|
|
}
|
|
updateCharts(canvasDom, hits);
|
|
}
|
|
lastHits = hits;
|
|
return hits;
|
|
},
|
|
null,
|
|
(header) => {
|
|
header.innerHTML += "<th></th>";
|
|
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",
|
|
`<label class="flex">
|
|
<input class="hidden peer" type="checkbox" ${checked ? "checked" : ""} data-id="${dataId}">
|
|
<span class="ml-auto peer-checked:bg-blue-700 bg-transparent rounded p-1 text-sm transform group-[.decreased]:scale-x-flip hover:scale-110 cursor-pointer">📈</span>
|
|
</label>`
|
|
);
|
|
cell.classList.add("order-4", "text-right");
|
|
itemDom.appendChild(cell);
|
|
|
|
const handleClick = (eventShouldSetQuery = false) => {
|
|
item.chart = cell.children[0].children[0].checked;
|
|
if (item.chart && !search.chart.checked) {
|
|
search.chart.checked = true;
|
|
search.chart.dispatchEvent(new Event("change"));
|
|
}
|
|
updateCharts(canvasDom, lastHits);
|
|
!!eventShouldSetQuery && setQuery();
|
|
};
|
|
cell.addEventListener("click", handleClick);
|
|
checked && handleClick();
|
|
return itemDom;
|
|
},
|
|
(checked) => {
|
|
chartEnabled = checked;
|
|
if (checked) {
|
|
if (lastHits.length > 0) {
|
|
chartDom.classList.remove("hidden");
|
|
updateCharts(canvasDom, lastHits);
|
|
} else {
|
|
chartDom.classList.add("hidden");
|
|
}
|
|
} else {
|
|
chartDom.classList.add("hidden");
|
|
}
|
|
}
|
|
);
|
|
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();
|