mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-09-22 00:00:59 +02:00
ProgressBar instead of Loading-Spinner
Flexible Progressbar which shows the state loading/encoding of the json files
This commit is contained in:
parent
04f9899566
commit
68cc1f14b3
|
@ -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=">
|
||||
<div x-id="loader" class="progress-bar-container mx-auto mt-8">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -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");
|
||||
})();
|
||||
|
|
|
@ -71,5 +71,4 @@ function importCarts(importedCarts) {
|
|||
};
|
||||
reader.readAsText(event.target.files[0]);
|
||||
});
|
||||
document.querySelector('[x-id="loader"]').classList.add("hidden");
|
||||
})();
|
||||
|
|
|
@ -38,5 +38,4 @@ require("./views");
|
|||
}
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
itemsFilter.fireChangeEvent();
|
||||
document.querySelector('[x-id="loader"]').classList.add("hidden");
|
||||
})();
|
||||
|
|
|
@ -41,5 +41,4 @@ require("./views");
|
|||
}
|
||||
itemsFilter.model = itemsList.model = model.items;
|
||||
itemsFilter.fireChangeEvent();
|
||||
document.querySelector('[x-id="loader"]').classList.add("hidden");
|
||||
})();
|
||||
|
|
31
site/js/progress-bar.js
Normal file
31
site/js/progress-bar.js
Normal file
|
@ -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;
|
|
@ -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`);
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user