Sort of fix CSS for mobile. Filter in Preisänderungen.

This commit is contained in:
Mario Zechner 2023-05-25 13:32:53 +02:00
parent 9bbaf4677e
commit c54f9261df
6 changed files with 30 additions and 10 deletions

View File

@ -31,6 +31,7 @@ function sparToCanonical(rawItems, today) {
else {
price = item.masterValues.price;
unit = item.masterValues["short-description-3"];
if (!unit) unit = "";
}
canonicalItems.push({
store: "spar",

View File

@ -21,6 +21,7 @@
<label>Teurer<input id="increases" type="checkbox" checked="true"></label>
<label>Billiger<input id="decreases" type="checkbox" checked="true"></label>
</div>
<input id="filter" type="text" style="max-width: 800px; width: 100%;" placeholder="Filtern...">
<table id="result"></table>
</div>
<script src="utils.js"></script>

View File

@ -3,8 +3,7 @@ let items = [];
async function load() {
const today = currentDate();
const response = await fetch("api/index")
items = await response.json();
items = await loadItems();
items.sort((a, b) => {
if (a.store < b.store) {
return -1;
@ -30,6 +29,7 @@ async function load() {
document.querySelector("#spar").addEventListener("change", () => showResults(items, currentDate()));
document.querySelector("#increases").addEventListener("change", () => showResults(items, currentDate()));
document.querySelector("#decreases").addEventListener("change", () => showResults(items, currentDate()));
document.querySelector("#filter").addEventListener("input", () => showResults(items, currentDate()));
}
function showResults(items, today) {
@ -38,8 +38,7 @@ function showResults(items, today) {
const billa = document.querySelector("#billa").checked;
const spar = document.querySelector("#spar").checked;
const hofer = document.querySelector("#hofer").checked;
const fullHistory = true;
const changedItems = [];
let changedItems = [];
for (item of items) {
if (item.priceHistory.length < 2) continue;
@ -54,6 +53,8 @@ function showResults(items, today) {
}
}
}
const query = document.querySelector("#filter").value.trim();
if (query.length >= 3) changedItems = searchItems(changedItems, document.querySelector("#filter").value, billa, spar, hofer, false, 0, 10000, false, false);
const table = document.querySelector("#result");
table.innerHTML = "";
@ -72,7 +73,8 @@ function showResults(items, today) {
for (item of changedItems) {
item = JSON.parse(JSON.stringify(item));
table.appendChild(itemToDOM(item));
const itemDom = itemToDOM(item);
table.appendChild(itemDom);
}
}

View File

@ -3,8 +3,7 @@ let items = [];
async function load() {
const today = currentDate();
const response = await fetch("api/index")
items = await response.json();
items = await loadItems();
items.sort((a, b) => {
if (a.store < b.store) {
return -1;

View File

@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 1em;
@ -53,10 +57,23 @@ th {
text-align: left;
}
.itemname {
word-wrap: break-word;
word-break: break-all;
}
.priceinfo {
margin-top: 0;
}
.increase {
color: red;
}
.decrease {
color: green;
}
.hide {
display: none;
}

View File

@ -102,14 +102,14 @@ function itemToStoreLink(item) {
function itemToDOM(item) {
let storeDom = dom("td", item.store);
let nameDom = dom("td", itemToStoreLink(item));
let nameDom = dom("td", `<div class="itemname">${itemToStoreLink(item)}</div>`);
let unitDom = dom("td", item.unit ? item.unit : "");
let increase = "";
if (item.priceHistory.length > 1) {
let percentageChange = Math.round((item.priceHistory[0].price - item.priceHistory[1].price) / item.priceHistory[1].price * 100);
increase = (percentageChange > 0 ? "+" + percentageChange : percentageChange) + "%";
increase = `<span class="${percentageChange > 0 ? "increase" : "decrease"}">${(percentageChange > 0 ? "+" + percentageChange : percentageChange)}%</span>`;
}
let priceDomText = item.price + (item.priceHistory.length > 1 ? (item.priceHistory[0].price > item.priceHistory[1].price ? " 📈" : " 📉") + " " + increase + " (" + (item.priceHistory.length - 1) + ")" : "");
let priceDomText = `${item.price} ${increase} ${item.priceHistory.length > 1 ? "(" + (item.priceHistory.length - 1) + ")" : ""}`;
let pricesText = "";
for (let i = 0; i < item.priceHistory.length; i++) {
const date = item.priceHistory[i].date;