static/ui-components.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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);