mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-06-30 20:35:50 +02:00
110 lines
4.5 KiB
JavaScript
110 lines
4.5 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");
|
||
|
document.querySelector("#sumstores-container").innerHTML = customCheckbox(`sumstores`, "Preissumme pro Kette", false, "gray");
|
||
|
document.querySelector("#todayonly-container").innerHTML = customCheckbox(`todayonly`, "Nur heutige Preise", false, "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 group-[.decreased]:scale-x-flip btn-action">📈</span>
|
||
|
</label>`
|
||
|
);
|
||
|
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();
|