mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-06-24 09:25:53 +02:00
Sort of fix CSS for mobile. Filter in Preisänderungen.
This commit is contained in:
parent
9bbaf4677e
commit
c54f9261df
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue
Block a user