From c54f9261dfd5cd442cfee6f3ebea1b05cefe3d06 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Thu, 25 May 2023 13:32:53 +0200
Subject: [PATCH] =?UTF-8?q?Sort=20of=20fix=20CSS=20for=20mobile.=20Filter?=
 =?UTF-8?q?=20in=20Preis=C3=A4nderungen.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 analysis.js        |  1 +
 site/aktionen.html |  1 +
 site/aktionen.js   | 12 +++++++-----
 site/changes.js    |  3 +--
 site/style.css     | 17 +++++++++++++++++
 site/utils.js      |  6 +++---
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/analysis.js b/analysis.js
index 0b93ced..6df1599 100644
--- a/analysis.js
+++ b/analysis.js
@@ -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",
diff --git a/site/aktionen.html b/site/aktionen.html
index f0b3a7f..e5e5c31 100644
--- a/site/aktionen.html
+++ b/site/aktionen.html
@@ -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>
diff --git a/site/aktionen.js b/site/aktionen.js
index 4e277f2..e0419cc 100644
--- a/site/aktionen.js
+++ b/site/aktionen.js
@@ -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);
     }
 }
 
diff --git a/site/changes.js b/site/changes.js
index f2a6e34..ab99f88 100644
--- a/site/changes.js
+++ b/site/changes.js
@@ -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;
diff --git a/site/style.css b/site/style.css
index 839ce11..2efdea5 100644
--- a/site/style.css
+++ b/site/style.css
@@ -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;
 }
\ No newline at end of file
diff --git a/site/utils.js b/site/utils.js
index 014f5db..bfa17ab 100644
--- a/site/utils.js
+++ b/site/utils.js
@@ -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;