@ -15,7 +15,7 @@
< div class = "grid-x" >
< div class = "cell medium-6 large-6 padding10" >
< h1 class = "club padding10 topmargin20 " > Inscription : {{ tournament.display_name }} {{ tournament.get_federal_age_category_display}}< / h1 >
< h1 class = "club padding10" > Inscription : {{ tournament.display_name }} {{ tournament.get_federal_age_category_display}}< / h1 >
< div class = "bubble" >
@ -28,8 +28,15 @@
{% else %}
{% if not registration_successful %}
< div class = "info-box" >
< p > Votre session d'inscription est active. Complétez le formulaire pour confirmer votre participation.< / p >
< p > DEBUG reserved_spots: {{ tournament.reserved_spots }}< / p >
< p > Votre session d'inscription est active. Complétez le formulaire dans le délai accordé pour confirmer votre participation et garantir votre place.< / p >
{% if not cart_data.is_cart_expired %}
< p class = "semibold highlight" > Votre session d'inscription expirera le {{ cart_data.expiry|date:"d/m/Y à H:i" }}< / p >
< p > Temps restant: < span id = "countdown" data-expiry = "{{ cart_data.expiry|date:'Y-m-d H:i:s' }}" > {{ cart_data.expiry|timeuntil }}< / span > < / p >
{% else %}
< p class = "alert alert-danger" >
Votre session d'inscription a expiré. Veuillez recommencer le processus d'inscription. Votre place n'est plus garantie.
< / p >
{% endif %}
< / div >
{% endif %}
@ -196,4 +203,88 @@
< / div >
< / div >
< / div >
< script >
// Safe countdown script with no automatic reloads
document.addEventListener('DOMContentLoaded', function() {
// Get the countdown element
const countdownElement = document.getElementById('countdown');
if (!countdownElement) return;
// Only proceed with countdown if cart is not expired according to backend
const cartExpiredDiv = document.querySelector('.alert-danger');
if (cartExpiredDiv & & cartExpiredDiv.textContent.includes('expiré')) {
// Cart is already expired according to backend, don't set up countdown
return;
}
// Get the expiry date from the data attribute
const expiryDateStr = countdownElement.getAttribute('data-expiry');
if (!expiryDateStr) return;
// Parse the expiry date properly (keeping local time interpretation)
// Format received: "YYYY-MM-DD HH:MM:SS"
const [datePart, timePart] = expiryDateStr.split(' ');
const [year, month, day] = datePart.split('-').map(Number);
const [hours, minutes, seconds] = timePart.split(':').map(Number);
// Create date object using local time components (month is 0-indexed in JS)
const expiryDate = new Date(year, month-1, day, hours, minutes, seconds);
// Function to update countdown text
function updateCountdown() {
const now = new Date();
let timeRemaining = Math.max(0, Math.floor((expiryDate - now) / 1000)); // in seconds
if (timeRemaining < = 0) {
countdownElement.textContent = "Expiré";
// Set a flag in localStorage to prevent infinite reload
if (!localStorage.getItem('cartExpired')) {
localStorage.setItem('cartExpired', 'true');
// Reload once when expired
window.location.reload();
}
return;
}
// Calculate days, hours, minutes, seconds
const days = Math.floor(timeRemaining / 86400);
timeRemaining %= 86400;
const hours = Math.floor(timeRemaining / 3600);
timeRemaining %= 3600;
const minutes = Math.floor(timeRemaining / 60);
const seconds = timeRemaining % 60;
// Format the countdown text - ALWAYS include seconds
let countdownText = '';
if (days > 0) {
countdownText += `${days} jour${days > 1 ? 's' : ''}, `;
}
if (hours > 0 || days > 0) {
countdownText += `${hours} heure${hours > 1 ? 's' : ''}, `;
}
if (minutes > 0 || hours > 0 || days > 0) {
countdownText += `${minutes} minute${minutes > 1 ? 's' : ''}, `;
}
countdownText += `${seconds} seconde${seconds > 1 ? 's' : ''}`;
countdownElement.textContent = countdownText;
}
// Clear previous expiry flag when starting a new countdown
localStorage.removeItem('cartExpired');
// Update immediately
updateCountdown();
// Update every second
const countdownInterval = setInterval(updateCountdown, 1000);
// Clean up interval when page unloads
window.addEventListener('unload', function() {
clearInterval(countdownInterval);
});
});
< / script >
{% endblock %}
