From 68cc1f14b311722451d0a5a2b974c0ab6e78f5c1 Mon Sep 17 00:00:00 2001 From: Markus Tiefenbacher Date: Sun, 25 Jun 2023 00:07:27 +0200 Subject: [PATCH 1/3] ProgressBar instead of Loading-Spinner Flexible Progressbar which shows the state loading/encoding of the json files --- site/_templates/_loader.html | 46 ++++-------------------------------- site/cart.js | 1 - site/carts.js | 1 - site/changes.js | 1 - site/index.js | 1 - site/js/progress-bar.js | 31 ++++++++++++++++++++++++ site/model/items.js | 6 +++++ site/style.css | 17 +++++++++++++ 8 files changed, 58 insertions(+), 46 deletions(-) create mode 100644 site/js/progress-bar.js diff --git a/site/_templates/_loader.html b/site/_templates/_loader.html index bdba530..b276c99 100644 --- a/site/_templates/_loader.html +++ b/site/_templates/_loader.html @@ -1,42 +1,4 @@ - \ No newline at end of file +
+
+
+ diff --git a/site/cart.js b/site/cart.js index 32e20ed..bb42bab 100644 --- a/site/cart.js +++ b/site/cart.js @@ -208,5 +208,4 @@ function loadCart() { productsList.model = productsFilter.model = models.items; if (c || d) itemsChart.render(); cartFilter.filter(); - document.querySelector('[x-id="loader"]').classList.add("hidden"); })(); diff --git a/site/carts.js b/site/carts.js index cd5c14c..590cea5 100644 --- a/site/carts.js +++ b/site/carts.js @@ -71,5 +71,4 @@ function importCarts(importedCarts) { }; reader.readAsText(event.target.files[0]); }); - document.querySelector('[x-id="loader"]').classList.add("hidden"); })(); diff --git a/site/changes.js b/site/changes.js index 683548f..cbb9cfe 100644 --- a/site/changes.js +++ b/site/changes.js @@ -38,5 +38,4 @@ require("./views"); } itemsFilter.model = itemsList.model = model.items; itemsFilter.fireChangeEvent(); - document.querySelector('[x-id="loader"]').classList.add("hidden"); })(); diff --git a/site/index.js b/site/index.js index 3b9acf0..3023534 100644 --- a/site/index.js +++ b/site/index.js @@ -41,5 +41,4 @@ require("./views"); } itemsFilter.model = itemsList.model = model.items; itemsFilter.fireChangeEvent(); - document.querySelector('[x-id="loader"]').classList.add("hidden"); })(); diff --git a/site/js/progress-bar.js b/site/js/progress-bar.js new file mode 100644 index 0000000..2ad021c --- /dev/null +++ b/site/js/progress-bar.js @@ -0,0 +1,31 @@ +class ProgressBar { + constructor(steps) { + this.progress = 0; + this.steps = steps ?? 0; + this.step = 100 / this.steps; + this.container = document.querySelector('[x-id="loader"]'); + this.progressBar = this.container.querySelector(".progress-bar"); + } + + setSteps(steps) { + this.steps = steps; + this.step = 100 / steps; + } + + addStep() { + this.progress += this.step; + this.progressBar.style.transform = `scaleX(${this.progress / 100})`; + if (this.progress >= 100) { + this.finished(); + } + } + + finished() { + const element = this.container; + setTimeout(function () { + element.classList.add("hidden"); + }, 250); + } +} + +exports.ProgressBar = ProgressBar; diff --git a/site/model/items.js b/site/model/items.js index f4f6654..144a9ce 100644 --- a/site/model/items.js +++ b/site/model/items.js @@ -2,6 +2,9 @@ const { Model } = require("./model"); const { STORE_KEYS } = require("./stores"); const { Settings } = require("./settings"); const { log, deltaTime } = require("../js/misc"); +const { ProgressBar } = require("../js/progress-bar"); + +const Bar = new ProgressBar(STORE_KEYS.length); class Items extends Model { constructor() { @@ -32,6 +35,7 @@ class Items extends Model { const settings = new Settings(); let start = performance.now(); const compressedItemsPerStore = []; + for (const store of STORE_KEYS) { compressedItemsPerStore.push( new Promise(async (resolve) => { @@ -48,9 +52,11 @@ class Items extends Model { log(`Loader - error while loading compressed items for ${store} ${e.message}`); resolve([]); } + Bar.addStep(); }) ); } + let items = [].concat(...(await Promise.all(compressedItemsPerStore))); log(`Loader - loaded ${items.length} items took ${deltaTime(start).toFixed(4)} secs`); diff --git a/site/style.css b/site/style.css index 3050cc6..d6dd3de 100644 --- a/site/style.css +++ b/site/style.css @@ -246,3 +246,20 @@ thead > tr { a { @apply hover:underline; } + +/* loading-bar */ +.progress-bar-container { + @apply bg-stone-200 rounded-xl; + width: 300px; + height: 10px; +} + +.progress-bar { + @apply bg-primary rounded-xl; + height: 10px; + transform: scaleX(0%); + will-change: transform; + transition: scaleX 0.5s; + width: 100%; + transform-origin: left center; +} From 495571b8a7e37b871dd222773f99848f80529796 Mon Sep 17 00:00:00 2001 From: HannesOberreiter Date: Sun, 25 Jun 2023 20:13:18 +0200 Subject: [PATCH 2/3] fix: :bug: prevent html tags to be highlighted --- site/views/items-list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/views/items-list.js b/site/views/items-list.js index 8685baf..d695d22 100644 --- a/site/views/items-list.js +++ b/site/views/items-list.js @@ -212,7 +212,8 @@ class ItemsList extends View { let highlightedName = name; for (let i = 0; i < keywords.length; i++) { const string = keywords[i]; - const regex = new RegExp(string, "gi"); + // check if keyword is not preceded by a < or $&"); } return `${highlightedName}`; From b844232a65048e70789d842fdd31ba06986a9bb9 Mon Sep 17 00:00:00 2001 From: HannesOberreiter Date: Sun, 25 Jun 2023 20:14:55 +0200 Subject: [PATCH 3/3] perf: :zap: compare without type casting --- site/views/items-list.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/site/views/items-list.js b/site/views/items-list.js index d695d22..b4a7417 100644 --- a/site/views/items-list.js +++ b/site/views/items-list.js @@ -272,9 +272,9 @@ class ItemsList extends View { let quantity = item.quantity || ""; let unit = item.unit || ""; - if (quantity >= 1000 && (unit == "g" || unit == "ml")) { + if (quantity >= 1000 && (unit === "g" || unit === "ml")) { quantity = parseFloat((0.001 * quantity).toFixed(2)); - unit = unit == "ml" ? "l" : "kg"; + unit = unit === "ml" ? "l" : "kg"; } let percentageChange = ""; if (prevPrice != -1) { @@ -284,8 +284,8 @@ class ItemsList extends View { let showUnitPrice = this.elements.unitPrice.checked; let priceUnit = ""; if (showUnitPrice) { - if (item.unit == "g") priceUnit = " / kg"; - else if (item.unit == "ml") priceUnit = " / l"; + if (item.unit === "g") priceUnit = " / kg"; + else if (item.unit === "ml") priceUnit = " / l"; else priceUnit = " / stk"; } @@ -395,7 +395,7 @@ class ItemsList extends View { elements.up.addEventListener("click", () => { const index = itemDom.rowIndex - 1; - if (index == 0) return; + if (index === 0) return; let otherItem = this.model.items[index - 1]; this.model.items[index - 1] = item; this.model.items[index] = otherItem; @@ -408,7 +408,7 @@ class ItemsList extends View { elements.down.addEventListener("click", () => { const index = itemDom.rowIndex - 1; - if (index == this.model.items.length - 1) return; + if (index === this.model.items.length - 1) return; let otherItem = this.model.items[index + 1]; this.model.items[index + 1] = item; this.model.items[index] = otherItem; @@ -432,11 +432,11 @@ class ItemsList extends View { elements.nameSimilarity.removeAttribute("disabled"); } else { elements.nameSimilarity.setAttribute("disabled", "true"); - if (this.model.filteredItems.length != 0 && elements.sort.value == "name-similarity") elements.sort.value = "price-asc"; + if (this.model.filteredItems.length != 0 && elements.sort.value === "name-similarity") elements.sort.value = "price-asc"; } let items = [...this.model.filteredItems]; - if (this.model.lastQuery && this.model.lastQuery.charAt(0) == "!" && this.model.lastQuery.toLowerCase().indexOf("order by") >= 0) { + if (this.model.lastQuery && this.model.lastQuery.charAt(0) === "!" && this.model.lastQuery.toLowerCase().indexOf("order by") >= 0) { elements.sort.parentElement.classList.add("hidden"); } else { if (!this._noSort) { @@ -444,7 +444,7 @@ class ItemsList extends View { items = this.sort(items); } } - if (items.length == 0) { + if (items.length === 0) { elements.chart.classList.add("hidden"); elements.options.classList.add("hidden"); elements.itemsTable.classList.add("hidden"); @@ -462,7 +462,7 @@ class ItemsList extends View { const batches = []; let batch = []; items.forEach((item) => { - if (batch.length == 25) { + if (batch.length === 25) { batches.push(batch); batch = []; }