diff options
| author | Steven Le Rouzic <steven.lerouzic@gmail.com> | 2024-04-13 23:48:00 +0200 |
|---|---|---|
| committer | Steven Le Rouzic <steven.lerouzic@gmail.com> | 2024-04-13 23:48:00 +0200 |
| commit | c3b66fc95102b36bf21eacdc960183216683c270 (patch) | |
| tree | 76b94129c680dd67979e44bf2adf48213513a0d3 /static/ui-components.js | |
| parent | 5e12dabced6ce55031f5c7f13afb15048d03edcd (diff) | |
Show timer, set time on create
Diffstat (limited to 'static/ui-components.js')
| -rw-r--r-- | static/ui-components.js | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/static/ui-components.js b/static/ui-components.js new file mode 100644 index 0000000..b825f23 --- /dev/null +++ b/static/ui-components.js @@ -0,0 +1,65 @@ +class LocalDate extends HTMLElement {
+ connectedCallback() {
+ let utcDate = new Date(this.innerText);
+ this.innerText = utcDate.toLocaleString();
+ }
+}
+customElements.define("local-date", LocalDate);
+
+class TimerCountdown extends HTMLElement {
+ startTime;
+ endTime;
+ refreshInterval = null;
+
+ refreshCountdown() {
+ let diff = Math.floor((this.endTime - this.startTime) / 1000);
+ if (diff <= 0) {
+ this.innerText = "Finished";
+ return;
+ }
+
+ let days = Math.floor(diff / (24 * 60 * 60));
+ diff -= days * 24 * 60 * 60;
+ let hours = Math.floor(diff / (60 * 60));
+ diff -= hours * 60 * 60;
+ let minutes = Math.floor(diff / 60);
+ diff -= minutes * 60;
+ let seconds = diff;
+
+ let newText = "";
+ if (days > 0) {
+ newText += `${days} days, `;
+ }
+ newText += `${hours.toFixed(0).padStart(2, "0")}:`
+ + `${minutes.toFixed(0).padStart(2, "0")}:`
+ + `${seconds.toFixed(0).padStart(2, "0")}`;
+
+ this.innerText = newText;
+ }
+
+ refreshCountdownNow() {
+ this.startTime = (new Date()).getTime();
+ this.refreshCountdown();
+ }
+
+ connectedCallback() {
+ this.endTime = (new Date(this.getAttribute("end"))).getTime();
+ if (this.hasAttribute("start")) {
+ this.startTime = (new Date(this.getAttribute("start"))).getTime();
+ this.refreshCountdown();
+ }
+ else {
+ this.startTime = (new Date()).getTime();
+ this.refreshCountdown();
+ this.refreshInterval = setInterval(this.refreshCountdownNow.bind(this), 1000);
+ }
+ }
+
+ disconnectedCallback() {
+ if (this.refreshInterval !== null) {
+ clearInterval(this.refreshInterval);
+ }
+ }
+}
+customElements.define("timer-countdown", TimerCountdown);
+
|