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

235
pages/dashboard.html
View File

@@ -6,8 +6,7 @@
<title>Smart Parking - Dashboard</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/dashboard.css">
<!-- SUPPRIMÉ : qrcode.min.js (plus nécessaire) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Chart.js retiré car le graphique d'occupation a été supprimé -->
</head>
<body>
<!-- Header -->
@@ -21,25 +20,19 @@
</div>
<nav class="nav">
<a href="#map" class="nav-link active" data-page="map">
<span class="nav-icon">🗺️</span>
Carte
<span class="nav-icon">🗺️</span>Carte
</a>
<a href="#reservation" class="nav-link" data-page="reservation">
<span class="nav-icon">📅</span>
Réservation
<span class="nav-icon">📅</span>Réservation
</a>
<a href="#my-reservations" class="nav-link" data-page="my-reservations">
<span class="nav-icon">🎫</span>
Mes réservations
<span class="nav-icon">🎫</span>Mes réservations
</a>
<a href="#profile" class="nav-link" data-page="profile">
<span class="nav-icon">👤</span>
Profil
<span class="nav-icon">👤</span>Profil
</a>
<!-- Lien admin (visible uniquement pour admin) -->
<a href="#admin" class="nav-link admin-only hidden" data-page="admin">
<span class="nav-icon">⚙️</span>
Admin
<span class="nav-icon">⚙️</span>Admin
</a>
</nav>
<div class="header-right">
@@ -48,24 +41,19 @@
<span id="userRole" class="user-role">Client</span>
</div>
<button id="logoutBtn" class="btn btn-secondary btn-small">
<span class="btn-icon">🚪</span>
Déconnexion
<span class="btn-icon">🚪</span>Déconnexion
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main">
<!-- PAGE: CARTE DES PLACES -->
<!-- ═══ PAGE : CARTE DES PLACES ═══ -->
<section id="map" class="page active">
<div class="container">
<h2 class="page-title">
<span class="icon">🗺️</span>
Carte du Parking
</h2>
<h2 class="page-title"><span class="icon">🗺️</span>Carte du Parking</h2>
<!-- Statistiques des places -->
<div class="stats-grid">
<div class="stat-card free">
<div class="stat-icon">✅</div>
@@ -97,30 +85,16 @@
</div>
</div>
<!-- Carte des places -->
<div class="parking-section">
<div class="parking-map-container">
<h3>Vue du parking</h3>
<div class="parking-map" id="parkingMap">
<!-- Les places seront générées par JS -->
</div>
<div class="parking-map" id="parkingMap"></div>
<div class="legend">
<div class="legend-item">
<span class="legend-color free"></span>
<span>Libre</span>
</div>
<div class="legend-item">
<span class="legend-color occupied"></span>
<span>Occupée</span>
</div>
<div class="legend-item">
<span class="legend-color reserved"></span>
<span>Réservée</span>
</div>
<div class="legend-item"><span class="legend-color free"></span><span>Libre</span></div>
<div class="legend-item"><span class="legend-color occupied"></span><span>Occupée</span></div>
<div class="legend-item"><span class="legend-color reserved"></span><span>Réservée</span></div>
</div>
</div>
<!-- Détails de la place sélectionnée -->
<div class="spot-details-container">
<h3>Détails de la place</h3>
<div id="spotDetails" class="spot-details">
@@ -129,42 +103,23 @@
</div>
</div>
<!-- Tarifs -->
<div class="pricing-section">
<h3>💰 Nos tarifs</h3>
<div class="pricing-cards">
<div class="pricing-card">
<h4>30 minutes</h4>
<span class="price">2€</span>
</div>
<div class="pricing-card">
<h4>1 heure</h4>
<span class="price">3€</span>
</div>
<div class="pricing-card">
<h4>2 heures</h4>
<span class="price">5€</span>
</div>
<div class="pricing-card">
<h4>4 heures</h4>
<span class="price">8€</span>
</div>
<div class="pricing-card">
<h4>Journée</h4>
<span class="price">15€</span>
</div>
<div class="pricing-card"><h4>30 minutes</h4><span class="price">2€</span></div>
<div class="pricing-card"><h4>1 heure</h4><span class="price">3€</span></div>
<div class="pricing-card"><h4>2 heures</h4><span class="price">5€</span></div>
<div class="pricing-card"><h4>4 heures</h4><span class="price">8€</span></div>
<div class="pricing-card"><h4>Journée</h4><span class="price">15€</span></div>
</div>
</div>
</div>
</section>
<!-- PAGE: RÉSERVATION -->
<!-- ═══ PAGE : RÉSERVATION ═══ -->
<section id="reservation" class="page hidden">
<div class="container">
<h2 class="page-title">
<span class="icon">📅</span>
Réserver une place
</h2>
<h2 class="page-title"><span class="icon">📅</span>Réserver une place</h2>
<div class="reservation-form-container">
<form id="reservationForm" class="reservation-form">
@@ -180,7 +135,6 @@
<input type="date" id="resDate" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="resStartTime">Heure d'arrivée</label>
@@ -191,34 +145,29 @@
<div class="form-group">
<label for="resDuration">Durée</label>
<select id="resDuration" class="form-control" required>
<option value="30">30 min - 2€</option>
<option value="60">1h - 3€</option>
<option value="120" selected>2h - 5€</option>
<option value="240">4h - 8€</option>
<option value="480">Journée (8h) - 15€</option>
<option value="30">30 min — 2€</option>
<option value="60">1h — 3€</option>
<option value="120" selected>2h — 5€</option>
<option value="240">4h — 8€</option>
<option value="480">Journée (8h) — 15€</option>
</select>
</div>
</div>
<div class="form-group">
<label for="resVehicle">Plaque d'immatriculation</label>
<input type="text" id="resVehicle" class="form-control" placeholder="AB-123-CD" required>
</div>
<div class="price-preview">
<span>Prix total :</span>
<span id="previewPrice" class="price-amount">5€</span>
</div>
<!-- MODIFIÉ : bouton "Valider la réservation" au lieu de "Procéder au paiement" -->
<button type="submit" class="btn btn-primary btn-block">
<span class="btn-icon">✅</span>
Valider la réservation
<span class="btn-icon">✅</span>Valider la réservation
</button>
</form>
</div>
<!-- REMPLACÉ : Modal de confirmation (sans QR code) -->
<!-- Modal de confirmation -->
<div id="confirmationModal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
@@ -226,43 +175,22 @@
<button class="modal-close" id="closeConfirmationModal">&times;</button>
</div>
<div class="modal-body">
<!-- Récapitulatif -->
<div class="payment-summary">
<h4>Récapitulatif</h4>
<div class="summary-row">
<span>Place :</span>
<span id="paySpot">-</span>
</div>
<div class="summary-row">
<span>Date :</span>
<span id="payDate">-</span>
</div>
<div class="summary-row">
<span>Heure :</span>
<span id="payTime">-</span>
</div>
<div class="summary-row">
<span>Durée :</span>
<span id="payDuration">-</span>
</div>
<div class="summary-row total">
<span>Total :</span>
<span id="payTotal">-</span>
</div>
<div class="summary-row"><span>Place :</span><span id="paySpot">-</span></div>
<div class="summary-row"><span>Date :</span><span id="payDate">-</span></div>
<div class="summary-row"><span>Heure :</span><span id="payTime">-</span></div>
<div class="summary-row"><span>Durée :</span><span id="payDuration">-</span></div>
<div class="summary-row total"><span>Total :</span><span id="payTotal">-</span></div>
</div>
<!-- Message de confirmation -->
<div class="confirmation-message">
<div class="confirmation-icon">🏷️</div>
<h4>Merci pour votre réservation !</h4>
<p>Votre place est bien réservée.<br>
Vous recevrez votre <strong>badge d'accès dans les 24 heures</strong>.</p>
</div>
<!-- Bouton fermer -->
<button id="closeConfirmationBtn" class="btn btn-primary btn-block">
<span class="btn-icon">✅</span>
Fermer
<span class="btn-icon">✅</span>Fermer
</button>
</div>
</div>
@@ -270,44 +198,30 @@
</div>
</section>
<!-- PAGE: MES RÉSERVATIONS -->
<!-- ═══ PAGE : MES RÉSERVATIONS ═══ -->
<section id="my-reservations" class="page hidden">
<div class="container">
<h2 class="page-title">
<span class="icon">🎫</span>
Mes réservations
</h2>
<div id="myReservationsList" class="reservations-list">
<!-- Généré par JS -->
</div>
<h2 class="page-title"><span class="icon">🎫</span>Mes réservations</h2>
<div id="myReservationsList" class="reservations-list"></div>
<div id="noReservations" class="empty-state">
<span class="empty-icon">📭</span>
<p>Vous n'avez aucune réservation active</p>
<p>Vous n'avez aucune réservation</p>
<a href="#reservation" class="btn btn-primary">Faire une réservation</a>
</div>
</div>
</section>
<!-- PAGE: PROFIL -->
<!-- ═══ PAGE : PROFIL ═══ -->
<section id="profile" class="page hidden">
<div class="container">
<h2 class="page-title">
<span class="icon">👤</span>
Mon profil
</h2>
<h2 class="page-title"><span class="icon">👤</span>Mon profil</h2>
<div class="profile-container">
<div class="profile-card">
<div class="profile-header">
<div class="profile-avatar">
<span id="profileAvatar">👤</span>
</div>
<div class="profile-avatar"><span id="profileAvatar">👤</span></div>
<h3 id="profileName">-</h3>
<span id="profileRole" class="role-badge">Client</span>
</div>
<form id="profileForm" class="profile-form">
<div class="form-group">
<label>Nom complet</label>
@@ -323,15 +237,14 @@
</div>
<div class="form-group">
<label>Nouveau mot de passe</label>
<input type="password" id="profileNewPassword" class="form-control" placeholder="Laisser vide pour ne pas changer">
<input type="password" id="profileNewPassword" class="form-control"
placeholder="Laisser vide pour ne pas changer">
</div>
<button type="submit" class="btn btn-primary">
<span class="btn-icon">💾</span>
Mettre à jour
<span class="btn-icon">💾</span>Mettre à jour
</button>
</form>
</div>
<div class="profile-stats">
<h3>Statistiques</h3>
<div class="stats-cards">
@@ -353,13 +266,10 @@
</div>
</section>
<!-- PAGE: ADMIN (visible uniquement pour admin) -->
<!-- ═══ PAGE : ADMIN ═══ -->
<section id="admin" class="page hidden admin-page">
<div class="container">
<h2 class="page-title">
<span class="icon">⚙️</span>
Administration
</h2>
<h2 class="page-title"><span class="icon">⚙️</span>Administration</h2>
<!-- Stats admin -->
<div class="admin-stats-grid">
@@ -388,87 +298,66 @@
<div class="form-group">
<label>Nombre total de places</label>
<div class="input-group">
<input type="number" id="adminTotalSpots" class="form-control" min="5" max="50" value="10">
<input type="number" id="adminTotalSpots" class="form-control"
min="5" max="50" value="10">
<button id="updateSpotsBtn" class="btn btn-primary">Mettre à jour</button>
</div>
</div>
</div>
<div class="admin-places-list" id="adminPlacesList">
<!-- Généré par JS -->
</div>
<div class="admin-places-list" id="adminPlacesList"></div>
</div>
<!-- Gestion des utilisateurs -->
<!-- Utilisateurs -->
<div class="admin-section">
<h3>👥 Utilisateurs</h3>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Email</th>
<th>Téléphone</th>
<th>Rôle</th>
<th>Actions</th>
<th>ID</th><th>Nom</th><th>Email</th>
<th>Téléphone</th><th>Rôle</th><th>Actions</th>
</tr>
</thead>
<tbody id="adminUsersTable">
<!-- Généré par JS -->
</tbody>
<tbody id="adminUsersTable"></tbody>
</table>
</div>
</div>
<!-- Toutes les réservations -->
<!-- Réservations -->
<div class="admin-section">
<h3>📅 Toutes les réservations</h3>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>Client</th>
<th>Place</th>
<th>Date</th>
<th>Horaire</th>
<th>Prix</th>
<th>Statut</th>
<th>Actions</th>
<th>ID</th><th>Client</th><th>Place</th><th>Date</th>
<th>Horaire</th><th>Prix</th><th>Statut</th><th>Actions</th>
</tr>
</thead>
<tbody id="adminReservationsTable">
<!-- Généré par JS -->
</tbody>
<tbody id="adminReservationsTable"></tbody>
</table>
</div>
</div>
<!-- Graphique d'occupation -->
<div class="admin-section">
<h3>📊 Statistiques d'occupation</h3>
<div class="chart-container">
<canvas id="adminOccupancyChart"></canvas>
</div>
</div>
<!-- ═══ GRAPHIQUE D'OCCUPATION SUPPRIMÉ ici ═══ -->
<!-- Historique -->
<div class="admin-section">
<h3>📜 Historique</h3>
<div class="log-container" id="adminLogContainer">
<!-- Généré par JS -->
</div>
<div class="log-container" id="adminLogContainer"></div>
</div>
</div>
</section>
</main>
<!-- Toast notifications -->
<div id="toastContainer" class="toast-container"></div>
<script src="../js/dashboard.js"></script>
<script src="../js/map.js"></script>
<script src="../js/reservation.js"></script>
<script src="../js/admin.js"></script>
<!-- Chart.js et admin.js n'utilisent plus le graphique -->
</body>
</html>