From 6fa2bbfdf97596f4e334ed4c06eb8abf63c2513b Mon Sep 17 00:00:00 2001 From: Chralu Date: Wed, 29 May 2024 10:51:01 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20progressbars=20to=20profil?= =?UTF-8?q?e=20page.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- profile/index.html | 77 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 73 insertions(+), 4 deletions(-) diff --git a/profile/index.html b/profile/index.html index 23cf3e9..961713c 100644 --- a/profile/index.html +++ b/profile/index.html @@ -219,15 +219,84 @@ return this.steps[this.fulfilledSteps] } } + export class ProgressBarView extends LitElement { + static properties = { + value: { attribute: true } + } + + static styles = css` + .progress-bar { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + text-align: center; + white-space: nowrap; + transition: + width 0.6s ease, + background-color 0.6s ease; + } + .progress, .progress-stacked { + display: flex; + height: 6pt; + overflow: hidden; + background-color: white; + border-radius: 6pt; + } + `; + + get percentValue() { return Math.round(this.value * 100) } + + render() { + return html` +
+
+
+ `; + } + + firstUpdated() { + } + + interpolateColorComponent(start, end, progress) { + return Math.round(start + progress * (end - start)) + } + + interpolateColors(start, end, progress) { + return [ + this.interpolateColorComponent(start[0], end[0], progress), + this.interpolateColorComponent(start[1], end[1], progress), + this.interpolateColorComponent(start[2], end[2], progress), + ] + } + + updated() { + const color1 = [249, 124, 27] + const color2 = [154, 212, 201] + const progressbar = this.renderRoot.querySelector('.progress-bar') + + const interpolatedColor = this.interpolateColors(color1, color2, this.value) + progressbar.style.backgroundColor = `rgb(${interpolatedColor[0]},${interpolatedColor[1]},${interpolatedColor[2]})` + + } + } + customElements.define('progress-bar', ProgressBarView); + export class GlobalProgressView extends LitElement { static properties = { /** @type {GlobalProgress} */ globalProgress: { attribute: false } } - // Define scoped styles right with your component, in plain CSS static styles = css` + h2 { + margin-bottom: 8pt + } + ul { + list-style: none; + padding-left: 0; + } `; constructor() { @@ -273,8 +342,8 @@ */ renderProgression(that, progression) { return html`
-

${progression.title} : ${Math.round(progression.progress * 100)}%

- +

${progression.title} :

+ @@ -284,7 +353,7 @@

${progression.title} : ${Math.round(progression.progress * 100)}%

// Render the UI as a function of component state render() { return html` -
Global progress : ${this.globalProgress.fulfilledSteps} / ${this.globalProgress.steps.length - 1}
+
Global progress : ${this.globalProgress.fulfilledSteps} / ${this.globalProgress.steps.length - 1}
${this.globalProgress.currentStepLabel}
${this.globalProgress.progressions.map((progression) => this.renderProgression(this, progression))} `;