From 68cc1f14b311722451d0a5a2b974c0ab6e78f5c1 Mon Sep 17 00:00:00 2001 From: Markus Tiefenbacher 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 @@ - \ 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; +}