Initial commit with existing project files
This commit is contained in:
@@ -1,2 +1,4 @@
|
|||||||
# business-case-dashboard
|
# Dashboard Business Case
|
||||||
|
|
||||||
|
Support pour l'oral du cours web statique dans le cadre de ma formation CDA chez Human Booster
|
||||||
|
|
||||||
|
|||||||
281
custom.css
Normal file
281
custom.css
Normal file
@@ -0,0 +1,281 @@
|
|||||||
|
/* Custom CSS for the application */
|
||||||
|
|
||||||
|
/* Variables */
|
||||||
|
:root {
|
||||||
|
/* Bleu principal */
|
||||||
|
--primary: rgb(13, 110, 253);
|
||||||
|
|
||||||
|
/* Bleu survol */
|
||||||
|
--primary-hover: rgb(10, 88, 202);
|
||||||
|
|
||||||
|
/* Fond principal, gris très léger */
|
||||||
|
--body-bg: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Couleur de fond principale */
|
||||||
|
body {
|
||||||
|
background-color: var(--body-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titres des sections */
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 3rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mettre en bleu toutes les icônes */
|
||||||
|
.icon-blue {
|
||||||
|
color: var(--primary);
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
/* Gestion au survol */
|
||||||
|
&:hover:not(.fa-filter, .fa-file-excel) {
|
||||||
|
color: var(--primary-hover);
|
||||||
|
font-weight: 700;
|
||||||
|
transform: scale(110%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colonnes d'en-tête */
|
||||||
|
th {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.fa-sort {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
right: 3%;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* En-tête du site */
|
||||||
|
#header-nav {
|
||||||
|
/*background-color: rgba(13, 110, 253, .1);*/
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
p {
|
||||||
|
font-size: .8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-logout {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bouton d'ajout d'un lieu de recharge */
|
||||||
|
#btn-add-location {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "Carte" lieu de recharge */
|
||||||
|
.location-card {
|
||||||
|
border: 2px solid black;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-card-title {
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-card-actions {
|
||||||
|
margin-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-card-title, .station-card {
|
||||||
|
border: 2px solid rgba(0, 0, 0, .2);
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Borne */
|
||||||
|
.station {
|
||||||
|
|
||||||
|
.station-info, .station-card {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-media {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin: .2rem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sur-en-tête tableau réservations passées */
|
||||||
|
.booking-action-bar {
|
||||||
|
|
||||||
|
span:first-of-type {
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-selector input {
|
||||||
|
margin: .5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-filter {
|
||||||
|
background-color: #FFF;
|
||||||
|
border: 2px solid rgba(0, 0, 0, .2);
|
||||||
|
padding: .2rem 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
|
background-color: rgba(0, 0, 0, .2);
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-actions {
|
||||||
|
a:last-child {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination desktop des tableaux */
|
||||||
|
.table-nav {
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-single-left,
|
||||||
|
.chevron-double-left {
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-single-right,
|
||||||
|
.chevron-double-right {
|
||||||
|
margin-left: 2rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination mobile */
|
||||||
|
.table-nav-mobile {
|
||||||
|
a {
|
||||||
|
color: rgba(0, 0, 0, .7);
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.table-nav {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "<<";
|
||||||
|
left: 37%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ">>";
|
||||||
|
right: 37%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "<";
|
||||||
|
left: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ">";
|
||||||
|
right: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Comportement exclusif desktop */
|
||||||
|
@media all and (min-width: 768px) {
|
||||||
|
|
||||||
|
#section-locations {order: 1}
|
||||||
|
|
||||||
|
#section-current-bookings {}
|
||||||
|
|
||||||
|
#section-passed-bookings {}
|
||||||
|
|
||||||
|
#section-requested-undone-bookings {order: 2}
|
||||||
|
|
||||||
|
#section-requested-done-bookings {order: 2}
|
||||||
|
|
||||||
|
/* Désactivation pagination mobile en mode desktop */
|
||||||
|
.table-nav-mobile {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comportement exclusif mobile */
|
||||||
|
@media all and (max-width: 767px) {
|
||||||
|
|
||||||
|
/* Désactivation pagination desktop en mode mobile */
|
||||||
|
.table-nav {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
445
index.html
Normal file
445
index.html
Normal file
@@ -0,0 +1,445 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user