54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
|
import { Controller } from "/vendor/hotwired/stimulus.js";
|
||
|
|
|
||
|
|
export default class extends Controller {
|
||
|
|
static values = {
|
||
|
|
expiresAt: Number,
|
||
|
|
interval: { type: Number, default: 60_000 },
|
||
|
|
};
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
this.update();
|
||
|
|
if (this.expiresAtValue > Date.now()) {
|
||
|
|
this.clock = window.setInterval(() => this.update(), this.intervalValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
disconnect() {
|
||
|
|
window.clearInterval(this.clock);
|
||
|
|
}
|
||
|
|
|
||
|
|
update() {
|
||
|
|
const remaining = this.expiresAtValue - Date.now();
|
||
|
|
if (remaining <= 0) {
|
||
|
|
this.element.textContent = "Expired";
|
||
|
|
this.setTone("text-red-400");
|
||
|
|
window.clearInterval(this.clock);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const days = Math.floor(remaining / 86_400_000);
|
||
|
|
const hours = Math.floor((remaining % 86_400_000) / 3_600_000);
|
||
|
|
const minutes = Math.floor((remaining % 3_600_000) / 60_000);
|
||
|
|
this.element.textContent = days > 0
|
||
|
|
? `${days}d ${hours}h`
|
||
|
|
: hours > 0
|
||
|
|
? `${hours}h ${minutes}m`
|
||
|
|
: `${minutes}m`;
|
||
|
|
this.setTone(days >= 3
|
||
|
|
? "text-green-400"
|
||
|
|
: days >= 1
|
||
|
|
? "text-yellow-400"
|
||
|
|
: "text-orange-400");
|
||
|
|
}
|
||
|
|
|
||
|
|
setTone(tone) {
|
||
|
|
this.element.classList.remove(
|
||
|
|
"text-red-400",
|
||
|
|
"text-green-400",
|
||
|
|
"text-yellow-400",
|
||
|
|
"text-orange-400",
|
||
|
|
);
|
||
|
|
this.element.classList.add(tone, "font-medium");
|
||
|
|
}
|
||
|
|
}
|