From 68cc1f14b311722451d0a5a2b974c0ab6e78f5c1 Mon Sep 17 00:00:00 2001
From: Markus Tiefenbacher <markus.tiefenbacher@blue-tomato.com>
Date: Sun, 25 Jun 2023 00:07:27 +0200
Subject: [PATCH] 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 @@
-<img x-id="loader" class="mx-auto mt-8" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM1IiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDEzNSAxNDAiIHhtbG5
-zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiKDIwMSwgODQsIDU4KSI+Ci
-AgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgI
-DxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjVz
-IiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMjA7MTEwOzEwMDs5MDs4MDs3MDs2MDs
-1MDs0MDsxNDA7MTIwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bn
-Q9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIKICAgI
-CAgICAgICAgIGJlZ2luPSIwLjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsx
-NTsyMDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICA
-gICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PS
-IzMCIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pb
-WF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiIGR1
-cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEyMDsxMTA7MTAwOzkwOzgwOzcwOzYwOzUwOzQ
-wOzE0MDsxMjAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW
-5kZWZpbml0ZSIgLz4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IgogICAgICAgI
-CAgICAgYmVnaW49IjAuMjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsxNTsy
-MDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICA
-gcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSI2MC
-Igd2lkdGg9IjE1IiBoZWlnaHQ9IjE0MCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpY
-nV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxcyIKICAgICAg
-ICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2F
-sY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg
-ogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iM
-HMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1
-OzUwOzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5
-kZWZpbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjkwIiB5PSIxMCIgd2lkdGg9Ij
-E1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9I
-mhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIKICAgICAgICAgICAg
-IHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU
-9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgIC
-AgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiI
-GR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1OzUw
-OzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZ
-pbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjEyMCIgeT0iMTAiIHdpZHRoPSIxNS
-IgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZ
-WlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZh
-bHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9Imx
-pbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgID
-xhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyP
-SIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTA7MTU7MjA7MjU7MzA7MzU7NDA7NDU7NTA7MDsx
-MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXR
-lIiAvPgogICAgPC9yZWN0Pgo8L3N2Zz4=">
\ No newline at end of file
+<div x-id="loader" class="progress-bar-container mx-auto mt-8">
+    <div class="progress-bar"></div>
+</div>
+
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;
+}