mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-09-24 00:00:27 +02:00
Various improvements, perf, style, live-reload.
This commit is contained in:
Mario Zechner
parent
9646f07db5
commit
6281e66dc7
12
server.js
12
server.js
|
|
@ -105,11 +105,15 @@ function parseArguments() {
|
|||
const sockets = [];
|
||||
const io = socketIO(server);
|
||||
io.on("connection", (socket) => sockets.push(socket));
|
||||
let timeoutId = 0;
|
||||
chokidar.watch("site/output").on("all", () => {
|
||||
lastChangeTimestamp = Date.now();
|
||||
for (let i = 0; i < sockets.length; i++) {
|
||||
sockets[i].send(`${lastChangeTimestamp}`);
|
||||
}
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => {
|
||||
lastChangeTimestamp = Date.now();
|
||||
for (let i = 0; i < sockets.length; i++) {
|
||||
sockets[i].send(`${lastChangeTimestamp}`);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -121,11 +121,8 @@ function loadCart() {
|
|||
cartFilter.elements[store].checked = true;
|
||||
});
|
||||
cartList.elements.numItemsLabel.innerHTML = "<strong>Artikel:</strong>";
|
||||
cartList.model = cartFilter.model = cart;
|
||||
cartList.elements.enableChart.checked = true;
|
||||
cartList.elements.chart.elements.sumStores.checked = true;
|
||||
cartList.fireChangeEvent();
|
||||
cartList.elements.chart.fireChangeEvent();
|
||||
|
||||
if (cart.items.length == 0) {
|
||||
elements.noItems.classList.remove("hidden");
|
||||
|
|
@ -140,7 +137,6 @@ function loadCart() {
|
|||
|
||||
const productsFilter = elements.productsFilter;
|
||||
const productsList = elements.productsList;
|
||||
productsList.model = productsFilter.model = models.items;
|
||||
if (!cart.linked) {
|
||||
productsFilter.classList.remove("hidden");
|
||||
productsList.classList.remove("hidden");
|
||||
|
|
@ -153,4 +149,7 @@ function loadCart() {
|
|||
cartFilter.classList.remove("hidden");
|
||||
cartList.classList.remove("hidden");
|
||||
};
|
||||
|
||||
cartList.model = cartFilter.model = cart;
|
||||
productsList.model = productsFilter.model = models.items;
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ require("./views");
|
|||
const itemsList = document.querySelector("items-list");
|
||||
const itemsChart = document.querySelector("items-chart");
|
||||
itemsList.elements.sort.value = "store-and-name";
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
|
||||
const stateToUrl = (event) => {
|
||||
const filterState = itemsFilter.shareableState;
|
||||
|
|
@ -36,7 +35,7 @@ require("./views");
|
|||
for (const id of d.split(";")) {
|
||||
model.items.lookup[id].chart = true;
|
||||
}
|
||||
itemsFilter.fireChangeEvent();
|
||||
}
|
||||
itemsFilter.filter();
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
itemsFilter.fireChangeEvent();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ require("./views");
|
|||
const itemsFilter = document.querySelector("items-filter");
|
||||
const itemsList = document.querySelector("items-list");
|
||||
const itemsChart = document.querySelector("items-chart");
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
|
||||
const stateToUrl = (event) => {
|
||||
const filterState = itemsFilter.shareableState;
|
||||
|
|
@ -35,7 +34,7 @@ require("./views");
|
|||
for (const id of d.split(";")) {
|
||||
model.items.lookup[id].chart = true;
|
||||
}
|
||||
itemsFilter.fireChangeEvent();
|
||||
}
|
||||
itemsFilter.filter();
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
itemsFilter.fireChangeEvent();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -3,25 +3,25 @@ const { stores, STORE_KEYS } = require("./stores");
|
|||
const { Model } = require("./model");
|
||||
|
||||
function decompress(compressedItems) {
|
||||
const items = [];
|
||||
const storeLookup = compressedItems.stores;
|
||||
const data = compressedItems.data;
|
||||
const dates = compressedItems.dates;
|
||||
const numItems = compressedItems.n;
|
||||
const items = new Array(numItems);
|
||||
let i = 0;
|
||||
while (items.length < numItems) {
|
||||
for (let l = 0; l < numItems; l++) {
|
||||
const store = storeLookup[data[i++]];
|
||||
const id = data[i++];
|
||||
const name = data[i++];
|
||||
const numPrices = data[i++];
|
||||
const prices = [];
|
||||
const prices = new Array(numPrices);
|
||||
for (let j = 0; j < numPrices; j++) {
|
||||
const date = dates[data[i++]];
|
||||
const price = data[i++];
|
||||
prices.push({
|
||||
prices[j] = {
|
||||
date: date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8),
|
||||
price,
|
||||
});
|
||||
};
|
||||
}
|
||||
const unit = data[i++];
|
||||
const quantity = data[i++];
|
||||
|
|
@ -29,7 +29,7 @@ function decompress(compressedItems) {
|
|||
const bio = data[i++] == 1;
|
||||
const url = stores[store].getUrl({ id, name, url: data[i++] });
|
||||
|
||||
items.push({
|
||||
items[l] = {
|
||||
store,
|
||||
id,
|
||||
name,
|
||||
|
|
@ -40,7 +40,7 @@ function decompress(compressedItems) {
|
|||
quantity,
|
||||
bio,
|
||||
url,
|
||||
});
|
||||
};
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ thead > tr {
|
|||
@apply order-4 text-right;
|
||||
}
|
||||
.item > td.action {
|
||||
@apply order-5 flex items-center p-1;
|
||||
@apply order-5 flex justify-end p-1;
|
||||
}
|
||||
|
||||
.item .chevron {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@ class ItemsChart extends View {
|
|||
|
||||
this.innerHTML = /*html*/ `
|
||||
<div class="bg-stone-200 p-4 mx-auto">
|
||||
<canvas x-id="canvas" class="bg-white rounded-lg py-4"></canvas>
|
||||
<div class="w-full h-[calc(100vw*0.66)] md:h-[calc(100vw*0.5)] lg:h-[calc(100vw*0.30)]" style="position: relative;">
|
||||
<canvas x-id="canvas" class="bg-white rounded-lg py-4"></canvas>
|
||||
<div x-id="noData" class="hidden flex items-center justify-center h-full">Keine Daten ausgewählt</div>
|
||||
</div>
|
||||
<div class="filters flex items-center flex-wrap justify-center gap-2 pt-2">
|
||||
<custom-checkbox x-id="sumTotal" x-change x-state label="Preissumme Gesamt"></custom-checkbox>
|
||||
<custom-checkbox x-id="sumStores" x-change x-state label="Preissumme Ketten"></custom-checkbox>
|
||||
|
|
@ -86,11 +89,14 @@ class ItemsChart extends View {
|
|||
|
||||
renderChart(items, chartType) {
|
||||
const canvasDom = this.elements.canvas;
|
||||
const noData = this.elements.noData;
|
||||
if (items.length === 0) {
|
||||
canvasDom.classList.add("hidden");
|
||||
noData.classList.remove("hidden");
|
||||
return;
|
||||
} else {
|
||||
canvasDom.classList.remove("hidden");
|
||||
noData.classList.add("hidden");
|
||||
}
|
||||
|
||||
const startDate = this.elements.startDate.value;
|
||||
|
|
@ -147,7 +153,7 @@ class ItemsChart extends View {
|
|||
y: price.price,
|
||||
};
|
||||
}),
|
||||
// stepped: "before"
|
||||
stepped: "before",
|
||||
};
|
||||
|
||||
return dataset;
|
||||
|
|
@ -166,8 +172,9 @@ class ItemsChart extends View {
|
|||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
aspectRation: 16 / 9,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: "time",
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ class ItemsFilter extends View {
|
|||
filteredItems = queryItems(query, filteredItems, elements.exact.checked);
|
||||
}
|
||||
|
||||
if (this.model.lastQuery != query && !this._noChartClear) {
|
||||
if (this.model.lastQuery && this.model.lastQuery != query && !this._noChartClear) {
|
||||
filteredItems.forEach((item) => (item.chart = false));
|
||||
}
|
||||
this.model.lastQuery = query;
|
||||
|
|
|
|||
|
|
@ -368,6 +368,7 @@ class ItemsList extends View {
|
|||
render() {
|
||||
const start = performance.now();
|
||||
const elements = this.elements;
|
||||
if (!this.model) return;
|
||||
if (this.model.filteredItems.length != 0 && this.model.filteredItems.length <= (isMobile() ? 200 : 1500)) {
|
||||
elements.nameSimilarity.removeAttribute("disabled");
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user