445 lines
20 KiB
HTML
445 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<!-- Importation des styles Bootstrap et perso -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="custom.css">
|
|
|
|
<!-- Titre de la page actuelle (Onglet) -->
|
|
<title>Tableau de bord</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- En-tête du site -->
|
|
<header class="container">
|
|
<div class="row justify-content-between align-items-center" id='header-nav'>
|
|
<div class="col-lg-4 col-md-6" id="logo">
|
|
<i class="fa-solid fa-charging-station"></i>
|
|
<i class="fa-solid fa-car-side"></i>
|
|
<p>Electricity Business</p>
|
|
</div>
|
|
<h1 class="col-lg-4 col-md-6">Tableau de bord</h1>
|
|
<p class="col-lg-4 col-md-6">Utilisateur connecté : Julia RIGHI<a href="#" id="btn-logout" class="link-primary">Déconnexion</a>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Contenu principal -->
|
|
<main class="container d-flex flex-column">
|
|
|
|
<!-- Lieux de recharge -->
|
|
<section id="section-locations">
|
|
<h2 class="text-primary">Lieux de recharge</h2>
|
|
<div class="row">
|
|
|
|
<!-- Lieu de recharge 1 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="location-card">
|
|
<h6 class="location-card-title">8 Rue Mozart</h6>
|
|
|
|
<!-- Borne 1 (Sur le lieu de recharge 1) -->
|
|
<div class="station d-flex justify-content-center align-items-center">
|
|
<div class="station-info d-flex flex-column justify-content-center align-items-center">
|
|
<span class="station-name">Borne 1</span>
|
|
<div class="station-media d-flex justify-content-center align-items-center">
|
|
<i class="fa-solid fa-camera icon-blue"></i>
|
|
<i class="fa-solid fa-video icon-blue"></i>
|
|
</div>
|
|
</div>
|
|
<div class="station-card d-flex flex-column">
|
|
<a href="#" class="link-primary">Modifier</a>
|
|
<a href="#" class="link-primary">Définir un tarifs horaires</a>
|
|
<a href="#" class="link-primary">Téléverser 1 photo</a>
|
|
<a href="#" class="link-primary">Téléverser 1 vidéo</a>
|
|
<a href="#" class="link-primary">Supprimer</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Borne 2 (Sur le lieu de recharge 1) -->
|
|
<div class="station d-flex justify-content-center align-items-center">
|
|
<div class="station-info d-flex flex-column justify-content-center align-items-center">
|
|
<span class="station-name">Borne 2</span>
|
|
<div class="station-media d-flex justify-content-center align-items-center">
|
|
<i class="fa-solid fa-camera icon-blue"></i>
|
|
</div>
|
|
</div>
|
|
<div class="station-card d-flex flex-column">
|
|
<a href="#" class="link-primary">Modifier</a>
|
|
<a href="#" class="link-primary">Définir un tarifs horaires</a>
|
|
<a href="#" class="link-primary">Téléverser 1 photo</a>
|
|
<a href="#" class="link-primary">Téléverser 1 vidéo</a>
|
|
<a href="#" class="link-primary">Supprimer</a>
|
|
</div>
|
|
</div>
|
|
<div class="location-card-actions d-flex flex-column">
|
|
<a href="#" class="link-primary">Ajouter une borne</a>
|
|
<a href="#" class="link-primary">Modifier ce lieu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lieu de recharge 2 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="location-card">
|
|
<h6 class="location-card-title">4 Avenue de la République</h6>
|
|
|
|
<!-- Borne 1 (Sur le lieu de recharge 2) -->
|
|
<div class="station d-flex justify-content-center align-items-center">
|
|
<div class="station-info d-flex flex-column justify-content-center align-items-center">
|
|
<span class="station-name">Borne 1</span>
|
|
<div class="station-media d-flex justify-content-center align-items-center">
|
|
<i class="fa-solid fa-camera icon-blue"></i>
|
|
<i class="fa-solid fa-video icon-blue"></i>
|
|
</div>
|
|
</div>
|
|
<div class="station-card d-flex flex-column">
|
|
<a href="#" class="link-primary">Modifier</a>
|
|
<a href="#" class="link-primary">Définir un tarifs horaires</a>
|
|
<a href="#" class="link-primary">Téléverser 1 photo</a>
|
|
<a href="#" class="link-primary">Téléverser 1 vidéo</a>
|
|
<a href="#" class="link-primary">Supprimer</a>
|
|
</div>
|
|
</div>
|
|
<div class="location-card-actions d-flex flex-column">
|
|
<a href="#" class="link-primary">Ajouter une borne</a>
|
|
<a href="#" class="link-primary">Modifier ce lieu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton pour ajouter un lieu -->
|
|
<div class="row">
|
|
<div id="btn-add-location" class="col-lg-4 col-md-6">
|
|
<a href="#" class="link-primary">Ajouter un lieu</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section réservations en cours -->
|
|
<section id="section-current-bookings">
|
|
<h2 class="text-primary">Mes réservations en cours</h2>
|
|
<div class="table-responsive">
|
|
|
|
<!-- Tableau réservations en cours -->
|
|
<table class="table table-bordered table-striped table-hover">
|
|
|
|
<!-- En-tête -->
|
|
<thead class="table-secondary">
|
|
<tr>
|
|
<th scope="col">Date et heure début<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Date et heure fin<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Borne ; Lieu ; Ville; Utilisateur<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Montant réglé<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Statut<i class="fa-solid fa-sort"></i></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<!-- Réservation en cours 1 -->
|
|
<tr>
|
|
<td>06/10/2023 09:00</td>
|
|
<td>06/10/2023 17:00</td>
|
|
<td>Borne 1 ; au clos Fleuris ; LYON; Max DURAND</td>
|
|
<td>24.00 €</td>
|
|
<td>En Attente</td>
|
|
</tr>
|
|
|
|
<!-- Réservation en cours 2 -->
|
|
<tr>
|
|
<td>12/10/2023 10:00</td>
|
|
<td>12/10/2023 15:00</td>
|
|
<td>Borne 2 ; au val de Coise ; THURINS; Lucien ROUX</td>
|
|
<td>10.00 €</td>
|
|
<td>Accepté</td>
|
|
</tr>
|
|
|
|
<!-- Réservation en cours 3 -->
|
|
<tr>
|
|
<td>20/10/2023 21:00</td>
|
|
<td>21/10/2023 06:00</td>
|
|
<td>Borne 3 ; rue Longvie ; AUBIERE; Lili MAGNIN</td>
|
|
<td>28.00 €</td>
|
|
<td>En Attente</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<a href="#" class="link-primary">Effectuer une réservation</a>
|
|
</section>
|
|
|
|
<!-- Section réservations passées -->
|
|
<section id="section-passed-bookings">
|
|
<h2 class="text-primary">Mes réservations passées</h2>
|
|
|
|
<!-- Tableau réservations passées -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<!-- Cellule en-tête pleine largeur -->
|
|
<th colspan="6">
|
|
<div class="d-flex justify-content-around align-items-center booking-action-bar">
|
|
<span class="text-primary"><i class="fa-solid fa-filter icon-blue"></i>Filtrer</span>
|
|
<span class="date-selector">
|
|
<label for="date-start">Date début :</label><input type="date" name="date-start"
|
|
id="date-start">
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
</span>
|
|
<span class="date-selector">
|
|
<label for="date-end">Date fin :</label><input type="date" name="date-end" id="date-end">
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
</span>
|
|
<button id="btn-filter">Filtrer</button>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- En-tête -->
|
|
<thead class="table-secondary">
|
|
<tr>
|
|
<th scope="col">Date et heure début<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Date et heure fin<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Borne ; Lieu ; Ville; Utilisateur</th>
|
|
<th scope="col">Montant réglé<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Statut<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Reçu</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<!-- Réservation passée 1 -->
|
|
<tr>
|
|
<td>06/02/2023 09:00</td>
|
|
<td>06/02/2023 17:00</td>
|
|
<td>Borne 1 ; au Clos du lac ; LE BOURGET; Lola SOT</td>
|
|
<td>18.00 €</td>
|
|
<td>Accepté</td>
|
|
<td><i class="fa-solid fa-file-pdf icon-blue"></i></td>
|
|
</tr>
|
|
|
|
<!-- Réservation passée 2 -->
|
|
<tr>
|
|
<td>10/05/2023 11:30</td>
|
|
<td>10/05/2023 19:30</td>
|
|
<td>Borne 2 ; rue des Fleurs ; ST CHAMOND; Dante RAOUX</td>
|
|
<td>36.00 €</td>
|
|
<td>Accepté</td>
|
|
<td><i class="fa-solid fa-file-pdf icon-blue"></i></td>
|
|
</tr>
|
|
|
|
<!-- Réservation passée 3 -->
|
|
<tr>
|
|
<td>02/08/2023 08:00</td>
|
|
<td>03/08/2023 14:00</td>
|
|
<td>Borne 3 ; rue des Source ; PARIS; Gugus PRINCE</td>
|
|
<td>24.00 €</td>
|
|
<td>Refusé</td>
|
|
<td><i class="fa-solid fa-file-pdf icon-blue"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<i class="fa-solid fa-file-excel icon-blue"></i>
|
|
<a href="#" class="link-primary">Exporter toutes les réservations au format Excel</a>
|
|
|
|
<!-- Pagination desktop -->
|
|
<div class="d-flex flex-direction-row justify-content-center align-items-center table-nav">
|
|
<div class="chevron-double-left">
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-left chevron-single-left"></i>
|
|
<p>Page 1 sur 12</p>
|
|
<i class="fa-solid fa-chevron-right chevron-single-right"></i>
|
|
<div class="chevron-double-right">
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination mobile -->
|
|
<nav class="table-nav-mobile d-flex justify-content-center align-items-center" aria-label="Page navigation example">
|
|
<ul class="pagination">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">...</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">12</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
|
|
<!-- Section demandes de réservations à traiter -->
|
|
<section id="section-requested-undone-bookings">
|
|
<h2 class="text-primary">Demandes de réservations à traiter</h2>
|
|
|
|
<!-- Tableau demandes de réservation à traiter -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-hover">
|
|
|
|
<!-- En-tête -->
|
|
<thead class="table-secondary">
|
|
<tr>
|
|
<th scope="col">Date et heure début<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Date et heure fin<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Utilisateur<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Borne ; Lieu<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Montant réglé<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<!-- Demande de réservation à traiter 1 -->
|
|
<tr>
|
|
<td>06/10/2023 06:00</td>
|
|
<td>06/10/2023 13:00</td>
|
|
<td>Pierre MARTIN</td>
|
|
<td>Borne 1 ; 8 rue Mozart</td>
|
|
<td>28.00 €</td>
|
|
<td class="table-actions">
|
|
<a href="#" class="link-primary">Accepter</a>
|
|
<a href="#" class="link-primary">Refuser</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Demande de réservation à traiter 2 -->
|
|
<tr>
|
|
<td>12/10/2023 10:00</td>
|
|
<td>12/10/2023 14:00</td>
|
|
<td>Capucine DUPONT</td>
|
|
<td>Borne 1 ; 4 Avenue de la République</td>
|
|
<td>16.00 €</td>
|
|
<td class="table-actions">
|
|
<a href="#" class="link-primary">Accepter</a>
|
|
<a href="#" class="link-primary">Refuser</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Demande de réservation à traiter 3 -->
|
|
<tr>
|
|
<td>20/10/2023 13:00</td>
|
|
<td>21/10/2023 18:00</td>
|
|
<td>Louise SANTI</td>
|
|
<td>Borne 2 ; 8 rue Mozart</td>
|
|
<td>20.00 €</td>
|
|
<td class="table-actions">
|
|
<a href="#" class="link-primary">Accepter</a>
|
|
<a href="#" class="link-primary">Refuser</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section demandes de réservations traitées -->
|
|
<section id="section-requested-done-bookings">
|
|
<h2 class="text-primary">Demandes de réservations traitées</h2>
|
|
|
|
<!-- Tableau demandes de réservations traitées -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-hover">
|
|
|
|
<!-- En-tête -->
|
|
<thead class="table-secondary">
|
|
<tr>
|
|
<th scope="col">Date et heure début<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Date et heure fin<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Utilisateur<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Borne ; Lieu<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Montant réglé<i class="fa-solid fa-sort"></i></th>
|
|
<th scope="col">Statut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<!-- Demande de réservation traitée 1 -->
|
|
<tr>
|
|
<td>26/09/2023 06:00</td>
|
|
<td>26/09/2023 13:00</td>
|
|
<td>Stéphane HENRI</td>
|
|
<td>Borne 1 ; 8 rue Mozart</td>
|
|
<td>18.00 €</td>
|
|
<td>Accepté</td>
|
|
</tr>
|
|
|
|
<!-- Demande de réservation traitée 2 -->
|
|
<tr>
|
|
<td>27/09/2023 20:00</td>
|
|
<td>28/09/2023 04:00</td>
|
|
<td>Rachel DOS SANTOS</td>
|
|
<td>Borne 1 ; 4 Avenue de la République</td>
|
|
<td>32.00 €</td>
|
|
<td>Refusé</td>
|
|
</tr>
|
|
|
|
<!-- Demande de réservation traitée 3 -->
|
|
<tr>
|
|
<td>28/09/2023 13:00</td>
|
|
<td>28/09/2023 18:00</td>
|
|
<td>Margaux CELLARIER</td>
|
|
<td>Borne 2 ; 8 rue Mozart</td>
|
|
<td>20.00 €</td>
|
|
<td>Accepté</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination desktop -->
|
|
<div class="d-flex flex-direction-row justify-content-center align-items-center table-nav">
|
|
<div class="chevron-double-left">
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-left chevron-single-left"></i>
|
|
<p>Page 1 sur 5</p>
|
|
<i class="fa-solid fa-chevron-right chevron-single-right"></i>
|
|
<div class="chevron-double-right">
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination mobile -->
|
|
<nav class="table-nav-mobile d-flex justify-content-center align-items-center" aria-label="Page navigation example">
|
|
<ul class="pagination">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">...</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Importation des scripts Fontawesome et Bootstrap -->
|
|
<script src="https://kit.fontawesome.com/b62beca04b.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"></script>
|
|
</body>
|
|
</html> |