71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Countdown controller for displaying remaining time until order expiration
|
|
export default class extends Controller {
|
|
static values = {
|
|
expiresAt: String, // ISO timestamp when the order expires
|
|
orderId: Number // Order ID for identification
|
|
}
|
|
|
|
connect() {
|
|
// Parse the expiration timestamp
|
|
this.expirationTime = new Date(this.expiresAtValue).getTime()
|
|
|
|
// Find the countdown element
|
|
this.countdownElement = this.element.querySelector('.countdown-timer')
|
|
|
|
if (this.countdownElement && !isNaN(this.expirationTime)) {
|
|
// Start the countdown
|
|
this.updateCountdown()
|
|
this.timer = setInterval(() => this.updateCountdown(), 1000)
|
|
}
|
|
}
|
|
|
|
disconnect() {
|
|
// Clean up the interval when the controller disconnects
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|
|
|
|
updateCountdown() {
|
|
const now = new Date().getTime()
|
|
const distance = this.expirationTime - now
|
|
|
|
// If the countdown is finished
|
|
if (distance < 0) {
|
|
this.countdownElement.innerHTML = "EXPIRÉ"
|
|
this.countdownElement.classList.add("text-red-600", "font-bold")
|
|
this.countdownElement.classList.remove("text-orange-600")
|
|
|
|
// Add a more urgent visual indicator
|
|
this.element.classList.add("bg-red-50", "border-red-200")
|
|
this.element.classList.remove("bg-orange-50", "border-orange-200")
|
|
|
|
// Stop the timer
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
}
|
|
return
|
|
}
|
|
|
|
// Calculate time components
|
|
const seconds = Math.floor(distance / 1000)
|
|
|
|
// Display the result
|
|
this.countdownElement.innerHTML = `${seconds} secondes`
|
|
|
|
// Add urgency styling when time is running low
|
|
if (seconds < 60) {
|
|
this.countdownElement.classList.add("text-red-600", "font-bold")
|
|
this.countdownElement.classList.remove("text-orange-600")
|
|
|
|
// Add background warning for extra urgency
|
|
this.element.classList.add("bg-red-50", "border-red-200")
|
|
this.element.classList.remove("bg-orange-50", "border-orange-200")
|
|
} else if (seconds < 300) { // Less than 5 minutes
|
|
this.countdownElement.classList.add("text-orange-600", "font-bold")
|
|
this.element.classList.add("bg-orange-50", "border-orange-200")
|
|
}
|
|
}
|
|
} |