function handleFormSubmit(e) {
e.preventDefault();
const lockerNumber = document.getElementById('lockerNumber').value;
const zone = document.getElementById('zone').value;
fetch(`${API_URL}/lockers`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
number: lockerNumber,
zone: zone,
name: document.getElementById('lastName').value,
firstName: document.getElementById('firstName').value,
code: document.getElementById('code').value,
birthDate: document.getElementById('birthDate').value
})
})
.then(res => {
if (!res.ok) throw new Error('Erreur ' + res.status);
closeModal();
loadData();
showStatus('Casier enregistré', 'success');
})
.catch(err => {
showStatus('Erreur: ' + err.message, 'error');
});
} function loadData() {
fetch(`${API_URL}/lockers`)
.then(res => {
if (!res.ok) throw new Error('Erreur ' + res.status);
return res.json();
})
.then(data => {
DATA = data;
console.log('Données chargées:', DATA.length);
renderAllTables();
})
.catch(err => {
console.error('Erreur chargement:', err);
alert('Erreur: Impossible de charger les données.\n\nAssurez-vous que:\n1. Le serveur Node.js est lancé (npm run dev)\n2. L\'URL est: ' + API_URL);
});
} .sync-indicator {
text-align: center;
padding: 10px;
font-size: 12px;
color: #999;
transition: all 0.3s;
}
.sync-indicator.syncing {
color: #0066cc;
font-weight: 500;
}
.sync-indicator.updated {
color: #2e7d32;
font-weight: 500;
} function loadData() {
fetch(`${API_URL}/lockers`)
.then(res => {
if (!res.ok) throw new Error('Erreur ' + res.status);
return res.json();
})
.then(data => {
DATA = data;
console.log('Données chargées:', DATA.length);
renderAllTables();
})
.catch(err => {
console.error('Erreur chargement:', err);
alert('Erreur: Impossible de charger les données.\n\nAssurez-vous que:\n1. Le serveur Node.js est lancé (npm run dev)\n2. L\'URL est: ' + API_URL);
});
} function setupApp() {
console.log('Détection de l\'API...');
// Déterminer l'URL correcte
const protocol = window.location.protocol;
const host = window.location.host;
API_URL = `${protocol}//${host}/api`;
console.log('API_URL:', API_URL);
// Attacher les événements
document.querySelectorAll('.tab-button').forEach(btn => {
btn.addEventListener('click', function() {
switchTab(this.dataset.zone);
loadData(); // Rafraîchir quand on change d'onglet
});
});
document.getElementById('globalSearch').addEventListener('input', function(e) {
if (e.target.value.trim()) {
searchLockers(e.target.value);
} else {
renderAllTables();
}
});
document.getElementById('lockerForm').addEventListener('submit', handleFormSubmit);
// Charger les données
loadData();
checkServerStatus();
// Rafraîchir automatiquement toutes les 60 secondes
setInterval(() => {
console.log('Rafraîchissement automatique...');
loadData();
checkServerStatus();
}, 60000); // 60000 ms = 1 minute
} function openModal(zone) {
document.getElementById('zone').value = zone;
document.getElementById('modalTitle').textContent = 'Attribuer un casier';
document.getElementById('lastName').value = '';
document.getElementById('firstName').value = '';
document.getElementById('code').value = '';
document.getElementById('birthDate').value = '';
document.getElementById('statusMessage').innerHTML = '';
populateLockerSelect(zone);
document.getElementById('modal').classList.add('active');
}
function openModalEdit(lockerNumber) {
const locker = DATA.find(l => l.number === lockerNumber);
if (!locker) return;
document.getElementById('zone').value = locker.zone;
document.getElementById('modalTitle').textContent = `Modifier ${locker.number}`;
document.getElementById('lockerNumber').value = lockerNumber;
document.getElementById('lastName').value = locker.name;
document.getElementById('firstName').value = locker.firstName;
document.getElementById('code').value = locker.code;
document.getElementById('birthDate').value = locker.birthDate;
document.getElementById('statusMessage').innerHTML = '';
populateLockerSelect(locker.zone, lockerNumber);
document.getElementById('modal').classList.add('active');
}
Gestion des Casiers
| N° Casier |
Nom |
Prénom |
Code ID |
Date de naissance |
Statut |
Actions |
| N° Casier |
Nom |
Prénom |
Code ID |
Date de naissance |
Statut |
Actions |
| N° Casier |
Nom |
Prénom |
Code ID |
Date de naissance |
Statut |
Actions |
✓ À jour
