apon2/Parking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mise à jour du projet

Browse Source
This commit is contained in:
apon
2026-04-02 22:30:40 +02:00
parent 98825db072
commit 085cf33114
6 changed files with 448 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
js/admin.js
View File

@@ -1,175 +1,141 @@
/**
* ============================================
* ADMIN.JS - Panel d'administration
* Smart Parking - BTS CIEL IR
* Smart Parking v3.0
* CORRIGÉ :
* - Suppression du graphique d'occupation
* - Historique affiche la date complète
* (jour + mois + année + heure + minute)
* ============================================
*/
// Initialisation
document.addEventListener('DOMContentLoaded', () => {
console.log('⚙️ Initialisation du panel admin...');
// Vérifier si l'utilisateur est admin
if (!isAdmin()) return;
initAdminPanel();
});
/**
* Vérifie si l'utilisateur est admin
*/
function isAdmin() {
const user = JSON.parse(localStorage.getItem('smart_parking_user') || 'null');
return user && user.role === 'admin';
}
/**
* Initialise le panel admin
*/
function initAdminPanel() {
loadAdminStats();
initPlacesControl();
loadUsersTable();
loadReservationsTable();
initOccupancyChart();
loadHistoryLog();
// Rafraîchissement périodique
// Rafraîchissement périodique toutes les 10 secondes
setInterval(() => {
loadAdminStats();
loadReservationsTable();
loadHistoryLog();
}, 10000);
}
/**
* Charge les statistiques admin
*/
// ============================================
// STATISTIQUES ADMIN
// ============================================
function loadAdminStats() {
const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
const reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
// Calculer les stats
const totalUsers = users.length + 1; // +1 pour l'admin par défaut
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
const totalUsers = users.length + 1;
const totalReservations = reservations.length;
const totalRevenue = reservations
const totalRevenue = reservations
.filter(r => r.status === 'active' || r.status === 'completed')
.reduce((sum, r) => sum + (r.price || 0), 0);
const occupied = spots.filter(s => s.status === 'occupied').length;
const reserved = spots.filter(s => s.status === 'reserved').length;
const occupancyRate = spots.length > 0
? Math.round(((occupied + reserved) / spots.length) * 100)
const occupied = spots.filter(s => s.status === 'occupied').length;
const reserved = spots.filter(s => s.status === 'reserved').length;
const occupancyRate = spots.length > 0
? Math.round(((occupied + reserved) / spots.length) * 100)
: 0;
// Mettre à jour l'affichage
document.getElementById('adminTotalUsers').textContent = totalUsers;
document.getElementById('adminTotalUsers').textContent = totalUsers;
document.getElementById('adminTotalReservations').textContent = totalReservations;
document.getElementById('adminTotalRevenue').textContent = totalRevenue + '€';
document.getElementById('adminOccupancyRate').textContent = occupancyRate + '%';
document.getElementById('adminTotalRevenue').textContent = totalRevenue + '€';
document.getElementById('adminOccupancyRate').textContent = occupancyRate + '%';
}
/**
* Initialise le contrôle des places
*/
// ============================================
// GESTION DES PLACES
// ============================================
function initPlacesControl() {
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
// Mettre à jour le champ du nombre de places
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
const spotsInput = document.getElementById('adminTotalSpots');
if (spotsInput) {
spotsInput.value = spots.length || 10;
}
// Bouton de mise à jour
if (spotsInput) spotsInput.value = spots.length || 10;
document.getElementById('updateSpotsBtn')?.addEventListener('click', () => {
const newCount = parseInt(document.getElementById('adminTotalSpots').value);
if (newCount < 5 || newCount > 50) {
Dashboard.showToast('Le nombre de places doit être entre 5 et 50', 'error');
return;
}
if (window.ParkingMap) {
window.ParkingMap.setTotalSpots(newCount);
renderAdminPlacesList();
Dashboard.showToast('Nombre de places mis à jour', 'success');
}
});
// Rendre la liste des places
renderAdminPlacesList();
}
/**
* Rend la liste des places dans l'admin
*/
function renderAdminPlacesList() {
const container = document.getElementById('adminPlacesList');
if (!container) return;
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
container.innerHTML = spots.map(spot => `
<div
class="admin-place-item ${spot.status}"
<div
class="admin-place-item ${spot.status}"
onclick="toggleSpotStatus(${spot.id})"
title="Place ${spot.number} - Cliquez pour changer"
title="Place ${spot.number} — Cliquez pour changer"
>
${spot.number}
</div>
`).join('');
}
/**
* Change le statut d'une place (admin)
*/
function toggleSpotStatus(spotId) {
const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
const spot = spots.find(s => s.id === spotId);
const spot = spots.find(s => s.id === spotId);
if (!spot) return;
// Cycle: free -> occupied -> reserved -> free
const cycle = ['free', 'occupied', 'reserved'];
const currentIndex = cycle.indexOf(spot.status);
const nextStatus = cycle[(currentIndex + 1) % cycle.length];
spot.status = nextStatus;
spot.lastUpdate = new Date().toISOString();
const cycle = ['free', 'occupied', 'reserved'];
const nextStatus = cycle[(cycle.indexOf(spot.status) + 1) % cycle.length];
spot.status = nextStatus;
spot.lastUpdate = new Date().toISOString();
localStorage.setItem('smart_parking_spots', JSON.stringify(spots));
// Rafraîchir
renderAdminPlacesList();
if (window.ParkingMap) {
window.ParkingMap.refresh();
}
if (window.ParkingMap) window.ParkingMap.refresh();
loadAdminStats();
Dashboard.showToast(`Place ${spot.number} - ${getStatusLabel(nextStatus)}`, 'success');
Dashboard.showToast(`Place ${spot.number} — ${getStatusLabel(nextStatus)}`, 'success');
}
/**
* Charge le tableau des utilisateurs
*/
// ============================================
// TABLEAU UTILISATEURS
// ============================================
function loadUsersTable() {
const tbody = document.getElementById('adminUsersTable');
if (!tbody) return;
const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
// Ajouter l'admin par défaut
const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
const allUsers = [
{
id: 0,
name: 'Administrateur',
email: 'admin@smartparking.fr',
phone: '01 23 45 67 89',
role: 'admin'
},
{ id: 0, name: 'Administrateur', email: 'admin@smartparking.fr', phone: '01 23 45 67 89', role: 'admin' },
...users
];
tbody.innerHTML = allUsers.map(user => `
<tr>
<td>#${user.id}</td>
@@ -184,9 +150,8 @@ function loadUsersTable() {
<td>
<div class="table-actions">
${user.role !== 'admin' ? `
<button class="btn btn-danger btn-small btn-icon-only" onclick="deleteUser(${user.id})" title="Supprimer">
🗑️
</button>
<button class="btn btn-danger btn-small btn-icon-only"
onclick="deleteUser(${user.id})" title="Supprimer">🗑️</button>
` : '-'}
</div>
</td>
@@ -194,48 +159,44 @@ function loadUsersTable() {
`).join('');
}
/**
* Supprime un utilisateur
*/
function deleteUser(userId) {
if (!confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ?')) return;
let users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
users = users.filter(u => u.id !== userId);
users = users.filter(u => u.id !== userId);
localStorage.setItem('smart_parking_users', JSON.stringify(users));
// Supprimer aussi ses réservations
let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
reservations = reservations.filter(r => r.userId !== userId);
reservations = reservations.filter(r => r.userId !== userId);
localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
loadUsersTable();
loadReservationsTable();
loadAdminStats();
Dashboard.showToast('Utilisateur supprimé', 'success');
}
/**
* Charge le tableau des réservations
*/
// ============================================
// TABLEAU RÉSERVATIONS
// ============================================
function loadReservationsTable() {
const tbody = document.getElementById('adminReservationsTable');
if (!tbody) return;
const reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
if (reservations.length === 0) {
tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: var(--text-muted);">Aucune réservation</td></tr>';
tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;color:var(--text-muted)">Aucune réservation</td></tr>';
return;
}
tbody.innerHTML = reservations.slice().reverse().map(res => `
<tr>
<td>#${res.id}</td>
<td>${res.userName}</td>
<td>Place ${res.spotNumber}</td>
<td>${formatDate(res.date)}</td>
<td>${formatDateShort(res.date)}</td>
<td>${res.startTime} - ${res.endTime}</td>
<td>${res.price}€</td>
<td>
@@ -246,12 +207,10 @@ function loadReservationsTable() {
<td>
<div class="table-actions">
${res.status === 'active' ? `
<button class="btn btn-success btn-small btn-icon-only" onclick="completeReservation(${res.id})" title="Terminer">
✓
</button>
<button class="btn btn-danger btn-small btn-icon-only" onclick="adminCancelReservation(${res.id})" title="Annuler">
✕
</button>
<button class="btn btn-success btn-small btn-icon-only"
onclick="completeReservation(${res.id})" title="Terminer">✓</button>
<button class="btn btn-danger btn-small btn-icon-only"
onclick="adminCancelReservation(${res.id})" title="Annuler">✕</button>
` : '-'}
</div>
</td>
@@ -259,168 +218,104 @@ function loadReservationsTable() {
`).join('');
}
/**
* Termine une réservation
*/
function completeReservation(reservationId) {
let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
const reservation = reservations.find(r => r.id === reservationId);
if (reservation) {
reservation.status = 'completed';
localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
// Libérer la place
if (window.ParkingMap) {
window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
}
loadReservationsTable();
loadAdminStats();
Dashboard.showToast('Réservation terminée', 'success');
}
if (!reservation) return;
reservation.status = 'completed';
localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
if (window.ParkingMap) window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
loadReservationsTable();
loadAdminStats();
Dashboard.showToast('Réservation terminée', 'success');
}
/**
* Annule une réservation (admin)
*/
function adminCancelReservation(reservationId) {
if (!confirm('Êtes-vous sûr de vouloir annuler cette réservation ?')) return;
let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
const reservation = reservations.find(r => r.id === reservationId);
if (reservation) {
reservation.status = 'cancelled';
localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
// Libérer la place
if (window.ParkingMap) {
window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
}
loadReservationsTable();
loadAdminStats();
Dashboard.showToast('Réservation annulée', 'success');
}
if (!reservation) return;
reservation.status = 'cancelled';
localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
if (window.ParkingMap) window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
loadReservationsTable();
loadAdminStats();
Dashboard.showToast('Réservation annulée', 'success');
}
/**
* Initialise le graphique d'occupation
*/
function initOccupancyChart() {
const ctx = document.getElementById('adminOccupancyChart');
if (!ctx) return;
// Générer des données d'exemple
const labels = [];
const data = [];
for (let i = 6; i >= 0; i--) {
const date = new Date();
date.setDate(date.getDate() - i);
labels.push(date.toLocaleDateString('fr-FR', { weekday: 'short' }));
data.push(Math.floor(Math.random() * 40) + 30); // 30-70% d'occupation
}
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Taux d\'occupation (%)',
data: data,
backgroundColor: 'rgba(99, 102, 241, 0.5)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: { color: '#f1f5f9' }
}
},
scales: {
x: {
grid: { color: '#334155' },
ticks: { color: '#94a3b8' }
},
y: {
min: 0,
max: 100,
grid: { color: '#334155' },
ticks: {
color: '#94a3b8',
callback: value => value + '%'
}
}
}
}
});
}
// ============================================
// HISTORIQUE — CORRIGÉ : date complète
// ============================================
/**
* Charge l'historique
*/
function loadHistoryLog() {
const container = document.getElementById('adminLogContainer');
if (!container) return;
const history = JSON.parse(localStorage.getItem('smart_parking_history') || '[]');
if (history.length === 0) {
container.innerHTML = '<p style="color: var(--text-muted); text-align: center;">Aucun historique</p>';
container.innerHTML = '<p style="color:var(--text-muted);text-align:center">Aucun historique</p>';
return;
}
container.innerHTML = history.slice(0, 20).map(item => `
container.innerHTML = history.slice(0, 50).map(item => `
<div class="log-item">
<span class="log-time">${formatTime(item.timestamp)}</span>
<span><strong>${item.action}:</strong> ${item.details}</span>
<span class="log-time">${formatDateComplete(item.timestamp)}</span>
<span><strong>${item.action} :</strong> ${item.details}</span>
</div>
`).join('');
}
// ============================================
// FONCTIONS DE FORMAT DATE
// ============================================
/**
* Formate une date
* CORRIGÉ — Affiche la date complète dans l'historique
* Avant : seulement "14:32"
* Après : "12/06/2025 à 14:32"
*/
function formatDate(dateString) {
function formatDateComplete(dateString) {
if (!dateString) return 'N/A';
const date = new Date(dateString);
return date.toLocaleDateString('fr-FR', {
day: '2-digit',
month: '2-digit'
const jour = String(date.getDate()).padStart(2, '0');
const mois = String(date.getMonth() + 1).padStart(2, '0');
const annee = date.getFullYear();
const heure = String(date.getHours()).padStart(2, '0');
const min = String(date.getMinutes()).padStart(2, '0');
return `${jour}/${mois}/${annee} à ${heure}:${min}`;
}
function formatDateShort(dateString) {
if (!dateString) return 'N/A';
return new Date(dateString).toLocaleDateString('fr-FR', {
day: '2-digit', month: '2-digit'
});
}
/**
* Formate une heure
*/
function formatTime(dateString) {
const date = new Date(dateString);
return date.toLocaleTimeString('fr-FR', {
hour: '2-digit',
minute: '2-digit'
});
}
/**
* Retourne le label du statut
*/
function getStatusLabel(status) {
const labels = {
'pending': 'En attente',
'active': 'Active',
'completed': 'Terminée',
'cancelled': 'Annulée'
};
return labels[status] || status;
return {
pending: 'En attente',
active: 'Active',
completed: 'Terminée',
cancelled: 'Annulée',
free: 'Libre',
occupied: 'Occupée',
reserved: 'Réservée'
}[status] || status;
}
// Exporter les fonctions
// ============================================
// EXPORT
// ============================================
window.AdminModule = {
refresh: () => {
loadAdminStats();
@@ -433,4 +328,4 @@ window.AdminModule = {
deleteUser,
completeReservation,
adminCancelReservation
};
};