From df447df778b80bea9d122106f4ad421a245e8e6e Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Thu, 18 May 2023 18:14:51 +0200 Subject: [PATCH] Beginning of carts. Refactorting of frontend code. --- site/carts.html | 26 +++++++++++++++ site/carts.js | 40 +++++++++++++++++++++++ site/changes.html | 6 ++-- site/changes.js | 32 ++---------------- site/index.html | 10 +++--- site/main.js | 42 +----------------------- site/style.css | 6 ---- site/utils.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 161 insertions(+), 84 deletions(-) create mode 100644 site/carts.html create mode 100644 site/carts.js create mode 100644 site/utils.js diff --git a/site/carts.html b/site/carts.html new file mode 100644 index 0000000..1b1947a --- /dev/null +++ b/site/carts.html @@ -0,0 +1,26 @@ + + + + + + + + Heisse Preise + + + + +
+

Heisse Preise

+

Warenkörbe

+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/site/carts.js b/site/carts.js new file mode 100644 index 0000000..f84fbfd --- /dev/null +++ b/site/carts.js @@ -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", ` + Name + Produkte + Gesamtpreis + `)); + + for (cart of carts) { + const row = dom("tr", ``); + const nameDom = dom("td") + cartsTable.appendChild(row); + } +} + +load(); \ No newline at end of file diff --git a/site/changes.html b/site/changes.html index 408bf09..54186f8 100644 --- a/site/changes.html +++ b/site/changes.html @@ -15,11 +15,9 @@
-
- -
-
+
+ diff --git a/site/changes.js b/site/changes.js index ac97315..884f44e 100644 --- a/site/changes.js +++ b/site/changes.js @@ -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", ` - KetteNameMengePreis altPreis neu + KetteNameMengePreis `)); for (item of changedItems) { - table.appendChild(dom("tr", ` - ${item.store} - ${item.name} - ${item.unit ? item.unit : ""} - ${item.oldPrice} - ${item.newPrice} - `)); + table.appendChild(itemToDOM(item)); } } diff --git a/site/index.html b/site/index.html index dde0524..44d8461 100644 --- a/site/index.html +++ b/site/index.html @@ -12,6 +12,10 @@

Heisse Preise

+
+ Tagespreisänderungen + Warenkörbe +
@@ -23,11 +27,9 @@
-
- -
-
+
+ diff --git a/site/main.js b/site/main.js index 0b412c1..3fc7e7d 100644 --- a/site/main.js +++ b/site/main.js @@ -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" ? - `${hit.name}` : - `${hit.name}`); - 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 += `
${date} ${currPrice} ${increase > 0 ? "+" + increase : increase}%`; - } - 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)); }); } diff --git a/site/style.css b/site/style.css index 9c5cb74..ca91d48 100644 --- a/site/style.css +++ b/site/style.css @@ -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; } diff --git a/site/utils.js b/site/utils.js new file mode 100644 index 0000000..37cd2e8 --- /dev/null +++ b/site/utils.js @@ -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" ? + `${item.name}` : + `${item.name}`); + 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 += `
${date} ${currPrice} ${increase > 0 ? "+" + increase : increase}%`; + } + 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(); +} \ No newline at end of file