mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-06-15 21:24:15 +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
|
<div x-id="loader" class="progress-bar-container mx-auto mt-8">
|
||||||
zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiKDIwMSwgODQsIDU4KSI+Ci
|
<div class="progress-bar"></div>
|
||||||
AgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgI
|
</div>
|
||||||
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=">
|
|
||||||
|
|
|
@ -208,5 +208,4 @@ function loadCart() {
|
||||||
productsList.model = productsFilter.model = models.items;
|
productsList.model = productsFilter.model = models.items;
|
||||||
if (c || d) itemsChart.render();
|
if (c || d) itemsChart.render();
|
||||||
cartFilter.filter();
|
cartFilter.filter();
|
||||||
document.querySelector('[x-id="loader"]').classList.add("hidden");
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -71,5 +71,4 @@ function importCarts(importedCarts) {
|
||||||
};
|
};
|
||||||
reader.readAsText(event.target.files[0]);
|
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.model = itemsList.model = model.items;
|
||||||
itemsFilter.fireChangeEvent();
|
itemsFilter.fireChangeEvent();
|
||||||
document.querySelector('[x-id="loader"]').classList.add("hidden");
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -41,5 +41,4 @@ require("./views");
|
||||||
}
|
}
|
||||||
itemsFilter.model = itemsList.model = model.items;
|
itemsFilter.model = itemsList.model = model.items;
|
||||||
itemsFilter.fireChangeEvent();
|
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 { STORE_KEYS } = require("./stores");
|
||||||
const { Settings } = require("./settings");
|
const { Settings } = require("./settings");
|
||||||
const { log, deltaTime } = require("../js/misc");
|
const { log, deltaTime } = require("../js/misc");
|
||||||
|
const { ProgressBar } = require("../js/progress-bar");
|
||||||
|
|
||||||
|
const Bar = new ProgressBar(STORE_KEYS.length);
|
||||||
|
|
||||||
class Items extends Model {
|
class Items extends Model {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -32,6 +35,7 @@ class Items extends Model {
|
||||||
const settings = new Settings();
|
const settings = new Settings();
|
||||||
let start = performance.now();
|
let start = performance.now();
|
||||||
const compressedItemsPerStore = [];
|
const compressedItemsPerStore = [];
|
||||||
|
|
||||||
for (const store of STORE_KEYS) {
|
for (const store of STORE_KEYS) {
|
||||||
compressedItemsPerStore.push(
|
compressedItemsPerStore.push(
|
||||||
new Promise(async (resolve) => {
|
new Promise(async (resolve) => {
|
||||||
|
@ -48,9 +52,11 @@ class Items extends Model {
|
||||||
log(`Loader - error while loading compressed items for ${store} ${e.message}`);
|
log(`Loader - error while loading compressed items for ${store} ${e.message}`);
|
||||||
resolve([]);
|
resolve([]);
|
||||||
}
|
}
|
||||||
|
Bar.addStep();
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let items = [].concat(...(await Promise.all(compressedItemsPerStore)));
|
let items = [].concat(...(await Promise.all(compressedItemsPerStore)));
|
||||||
log(`Loader - loaded ${items.length} items took ${deltaTime(start).toFixed(4)} secs`);
|
log(`Loader - loaded ${items.length} items took ${deltaTime(start).toFixed(4)} secs`);
|
||||||
|
|
||||||
|
|
|
@ -246,3 +246,20 @@ thead > tr {
|
||||||
a {
|
a {
|
||||||
@apply hover:underline;
|
@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