Marown/heissepreise
1
0
Fork 0
mirror of https://github.com/badlogic/heissepreise.git synced 2024-06-23 17:05:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Beginning of carts. Refactorting of frontend code.

Browse Source
This commit is contained in:
Mario Zechner 2023-05-18 18:14:51 +02:00
parent 1b0979d90e
commit df447df778
8 changed files with 161 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
site/carts.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heisse Preise</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<h2>Heisse Preise</h2>
<h3>Warenkörbe</h3>
<div class="filters">
<button id="newcart">Neuer Warenkorb</button>
</div>
<table id="carts"></table>
<table id="result"></table>
</div>
<script src="utils.js"></script>
<script src="carts.js"></script>
</body>
</html>

40
site/carts.js Normal file
View File

@ -0,0 +1,40 @@
let items = [];
async function load() {
const response = await fetch("api/index")
items = await response.json();
const newCartButton = document.querySelector("#newcart");
newCartButton.addEventListener("click", () => {
let name = prompt("Name für Warenkorb eingeben:");
if (name.length == 0) return;
for (cart of carts) {
if (cart.name == name) {
alert("Warenkorb mit Namen '" + name + "' existiert bereits");
return;
}
}
addCart(name);
location.href = "/cart.html?name=" + name;
});
showCarts();
}
function showCarts() {
const cartsTable = document.querySelector("#carts");
cartsTable.innerHTML = "";
cartsTable.appendChild(dom("tr", `
<th>Name</th>
<th>Produkte</th>
<th>Gesamtpreis</th>
`));
for (cart of carts) {
const row = dom("tr", ``);
const nameDom = dom("td")
cartsTable.appendChild(row);
}
}
load();

6
site/changes.html
View File

@ -15,11 +15,9 @@
<div class="filters">
<label>Preisänderungen am <select id="dates"></select></label>
</div>
<div class="results">
<table id="result">
</table>
</div>
<table id="result"></table>
</div>
<script src="utils.js"></script>
<script src="changes.js"></script>
</body>

32
site/changes.js
View File

@ -1,17 +1,3 @@
function currentDate() {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function dom(el, html) {
let element = document.createElement(el);
element.innerHTML = html;
return element;
}
let changeDates = [];
let items = [];
@ -49,13 +35,7 @@ function showResults(items, today) {
for (let i = 0; i < item.priceHistory.length; i++) {
if (item.priceHistory[i].date == today && i + 1 < item.priceHistory.length) {
changedItems.push({
store: item.store,
name: item.name,
unit: item.unit,
oldPrice: item.priceHistory[i + 1].price,
newPrice: item.priceHistory[i].price
});
changedItems.push(item);
}
}
}
@ -63,17 +43,11 @@ function showResults(items, today) {
const table = document.querySelector("#result");
table.innerHTML = "";
table.appendChild(dom("tr", `
<th>Kette</th><th>Name</th><th>Menge</th><th>Preis alt</th><th>Preis neu</th>
<th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th>
`));
for (item of changedItems) {
table.appendChild(dom("tr", `
<td>${item.store}</td>
<td>${item.name}</td>
<td>${item.unit ? item.unit : ""}</td>
<td>${item.oldPrice}</td>
<td style="color: ${item.oldPrice < item.newPrice ? "red" : "green"}">${item.newPrice}</td>
`));
table.appendChild(itemToDOM(item));
}
}

10
site/index.html
View File

@ -12,6 +12,10 @@
<body>
<div class="main">
<h2>Heisse Preise</h2>
<div class="filters">
<a href="changes.html">Tagespreisänderungen</a>
<a href="carts.html">Warenkörbe</a>
</div>
<input id="search" class="search" type="text" placeholder="Produkte suchen...">
<div class="filters">
<label><input id="billa" type="checkbox" checked="true"> Billa</label>
@ -23,11 +27,9 @@
<label>Max € <input id="maxprice" type="number" min="0" value="100"></label>
<label><input id="exact" type="checkbox"> Exaktes Wort</label>
</div>
<div class="results">
<table id="result">
</table>
</div>
<table id="result"></table>
</div>
<script src="utils.js"></script>
<script src="main.js"></script>
</body>

42
site/main.js
View File

@ -11,12 +11,6 @@ async function load() {
setupUI();
}
function dom(el, html) {
let element = document.createElement(el);
element.innerHTML = html;
return element;
}
function searchItems(query, exact) {
if (query.length < 3) return [];
@ -87,41 +81,7 @@ function search(query) {
if (eigenmarken && !(name.indexOf("clever") == 0 || name.indexOf("s-budget") == 0))
return;
let storeDom = dom("td", hit.store);
let nameDom = dom("td", hit.store == "spar" ?
`<a target="_blank" href="https://www.interspar.at/shop/lebensmittel/search/?q=${encodeURIComponent(hit.name)}">${hit.name}</a>` :
`<a target="_blank" href="https://shop.billa.at/search/results?category=&searchTerm=${encodeURIComponent(hit.name)}">${hit.name}</a>`);
let unitDom = dom("td", hit.unit ? hit.unit : "");
let priceDomText = hit.price + (hit.priceHistory.length > 1 ? (hit.priceHistory[0].price > hit.priceHistory[1].price ? " 📈" : " 📉") : "");
let priceDom = dom("td", priceDomText);
if (hit.priceHistory.length > 1) {
priceDom.style["cursor"] = "pointer";
priceDom.addEventListener("click", () => {
if (priceDom.innerHTML == priceDomText) {
priceDom.innerHTML = priceDomText;
let pricesText = "";
for (let i = 0; i < hit.priceHistory.length; i++) {
const date = hit.priceHistory[i].date;
const currPrice = hit.priceHistory[i].price;
const lastPrice = hit.priceHistory[i + 1] ? hit.priceHistory[i + 1].price : currPrice;
const increase = Math.round((currPrice - lastPrice) / lastPrice * 100);
let priceColor = "black";
if (increase > 0) priceColor = "red";
if (increase < 0) priceColor = "green";
pricesText += `<br><span style="color: ${priceColor}">${date} ${currPrice} ${increase > 0 ? "+" + increase : increase}%</span>`;
}
priceDom.innerHTML += pricesText;
} else {
priceDom.innerHTML = priceDomText;
}
});
}
let row = dom("tr", "");
row.appendChild(storeDom);
row.appendChild(nameDom);
row.appendChild(unitDom);
row.appendChild(priceDom);
table.appendChild(row);
table.appendChild(itemToDOM(hit));
});
}

6
site/style.css
View File

@ -26,13 +26,7 @@ input[type="number"] {
max-width: 3em;
}
.results {
display: flex;
flex-direction: row;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid;
}

83
site/utils.js Normal file
View File

@ -0,0 +1,83 @@
function currentDate() {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function dom(el, html) {
let element = document.createElement(el);
element.innerHTML = html;
return element;
}
function itemToDOM(item) {
let storeDom = dom("td", item.store);
let nameDom = dom("td", item.store == "spar" ?
`<a target="_blank" href="https://www.interspar.at/shop/lebensmittel/search/?q=${encodeURIComponent(item.name)}">${item.name}</a>` :
`<a target="_blank" href="https://shop.billa.at/search/results?category=&searchTerm=${encodeURIComponent(item.name)}">${item.name}</a>`);
let unitDom = dom("td", item.unit ? item.unit : "");
let priceDomText = item.price + (item.priceHistory.length > 1 ? (item.priceHistory[0].price > item.priceHistory[1].price ? " 📈" : " 📉") : "");
let priceDom = dom("td", priceDomText);
if (item.priceHistory.length > 1) {
priceDom.style["cursor"] = "pointer";
priceDom.addEventListener("click", () => {
if (priceDom.innerHTML == priceDomText) {
priceDom.innerHTML = priceDomText;
let pricesText = "";
for (let i = 0; i < item.priceHistory.length; i++) {
const date = item.priceHistory[i].date;
const currPrice = item.priceHistory[i].price;
const lastPrice = item.priceHistory[i + 1] ? item.priceHistory[i + 1].price : currPrice;
const increase = Math.round((currPrice - lastPrice) / lastPrice * 100);
let priceColor = "black";
if (increase > 0) priceColor = "red";
if (increase < 0) priceColor = "green";
pricesText += `<br><span style="color: ${priceColor}">${date} ${currPrice} ${increase > 0 ? "+" + increase : increase}%</span>`;
}
priceDom.innerHTML += pricesText;
} else {
priceDom.innerHTML = priceDomText;
}
});
}
let row = dom("tr", "");
row.appendChild(storeDom);
row.appendChild(nameDom);
row.appendChild(unitDom);
row.appendChild(priceDom);
return row;
}
let carts = [];
loadCarts();
function loadCarts() {
let val = localStorage.getItem("carts");
carts = val ? JSON.parse(val) : [];
}
function saveCarts() {
localStorage.setItem("carts", JSON.stringify(carts, null, 2));
}
function hasCart(name) {
for (cart of carts) {
if (cart.name = name) return true;
}
return false;
}
function addCart(name) {
carts.push({
name: name,
items: []
});
saveCarts();
}
function removeCart(name) {
carts = carts.filter(cart => cart.name == name);
saveCarts();
}