progress screen progress bar

This commit is contained in:
Matt Walsh
2022-08-05 15:40:53 -05:00
parent eae3b321c7
commit 8cc6e4a1eb
13 changed files with 148 additions and 17 deletions

View File

@@ -126,10 +126,15 @@ const navigation = (() => {
postMessage('loaded');
};
const countLoadedCanvases = () => displays.reduce((acc, display) => {
if (display.status !== STATUS.loading) return acc + 1;
return acc;
}, 0);
const countLoadedCanvases = () => {
const result = displays.reduce((acc, display) => {
console.log(display.name, display.status);
if (display.status !== STATUS.loading) return acc + 1;
return acc;
}, 0);
console.log(result);
return result;
};
const hideAllCanvases = () => {
displays.forEach((display) => display.hideCanvas());

View File

@@ -22,6 +22,9 @@ class Progress extends WeatherDisplay {
async drawCanvas(displays, loadedCount) {
super.drawCanvas();
// get the progress bar cover (makes percentage)
if (!this.progressCover) this.progressCover = this.elem.querySelector('.scroll .cover');
// if no displays provided just draw the backgrounds (above)
if (!displays) return;
const lines = displays.map((display, index) => {
@@ -73,11 +76,12 @@ class Progress extends WeatherDisplay {
const loadedPercent = (loadedCount / displays.length);
if (loadedPercent < 1.0) {
// Draw a box for the progress.
// show the progress bar and set width
this.progressCover.parentNode.classList.add('show');
this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
} else {
// restore the background
// hide the progressbar
this.progressCover.parentNode.classList.remove('show');
}
}