ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:creation delete-composant.html et delete-composant.js

Browse Source
This commit is contained in:
RoxanaElena09
2025-12-12 08:43:34 +01:00
parent c7aaa923af
commit 41d739df95
3 changed files with 288 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
delete-composant.html Normal file
View File

@@ -0,0 +1,25 @@
<!-- Modale de suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="deleteModalLabel">Confirmer la suppression</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Voulez-vous vraiment supprimer <strong id="itemName">cet élément</strong> ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
</div>
</div>
</div>
</div>

42
delete-composant.js Normal file
View File

@@ -0,0 +1,42 @@
// Injection du modal
fetch("../../delete-composant.html")
.then(res => {
if (!res.ok) throw new Error("Modal HTML introuvable");
return res.text();
})
.then(html => {
document.getElementById("modal-placeholder").innerHTML = html;
initDeleteModalLogic();
})
.catch(err => console.error(err));
// Logique du modal
function initDeleteModalLogic() {
let rowToDelete = null;
const modalElement = document.getElementById("deleteModal");
const itemNameSpan = document.getElementById("itemName");
const confirmBtn = document.getElementById("confirmDeleteBtn");
const deleteModal = new bootstrap.Modal(modalElement);
document.body.addEventListener("click", (event) => {
const button = event.target.closest(".delete-btn");
if (!button) return;
rowToDelete = button.closest("tr");
const firstCell = rowToDelete.querySelector("td");
const itemName = firstCell ? firstCell.textContent.trim() : "cet élément";
itemNameSpan.textContent = itemName;
deleteModal.show();
});
confirmBtn.addEventListener("click", () => {
if (rowToDelete) rowToDelete.remove();
rowToDelete = null;
deleteModal.hide();
});
}

318
prestations/html/prestation_accueil.html
View File

@@ -17,19 +17,23 @@
<main class="my-5 fs-6"> <main class="my-5 fs-6">
<div class="container"> <div class="container">
<header> <header>
<h1 class="title fs-2">Gérer la page prestations</h1> <h1 class="title fs-2 my-4">Gérer la page prestations</h1>
</header> </header>
<main>
<section class="prestations">
<h2 class="fs-3">Gérer les prestations</h2> <div class="section">
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<!-- ACCORDÉON 1 -->
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" <button class="accordion-button" type="button"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> data-bs-toggle="collapse"
Gèrer les prestations et leurs catégories data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
Gérer les prestations et leurs catégories
</button> </button>
</h2> </h2>
<div id="collapseOne" class="accordion-collapse collapse show" <div id="collapseOne" class="accordion-collapse collapse show"
@@ -42,19 +46,88 @@
</a> </a>
</div> </div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th>Type</th>
<th>Tarif</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<!-- Prestation 1 -->
<tr>
<td>Toilettage complet</td>
<td>Chien</td>
<td>35€ – 60€</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<!-- Prestation 2 -->
<tr>
<td>Toilettage express</td>
<td>Chat</td>
<td>20€ – 35€</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
<div class="mb-3"> <div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm"> <a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une catégorie Ajouter une catégorie
</a> </a>
</div> </div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th>Type</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coupe ciseaux</td>
<td>Chien</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</tr>
<tr>
<td>Coupe griffes</td>
<td>Chat</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
<!-- ACCORDÉON 2 -->
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Gérer le slider Gérer le slider
</button> </button>
</h2> </h2>
@@ -68,202 +141,123 @@
</a> </a>
</div> </div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Image</th>
<th>Texte ALT</th>
<th>Titre</th>
<th>Ordre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="slide1.webp" alt="Chien toiletté" class="img-thumbnail"></td>
<td>Chien toiletté</td>
<td>Promo du mois</td>
<td>1</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td><img src="slide2.webp" alt="Avant / Après" class="img-thumbnail"></td>
<td>Avant / Après</td>
<td class="text-muted fst-italic">(aucun titre)</td>
<td>2</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td><img src="slide3.webp" alt="Coupe ciseaux" class="img-thumbnail"></td>
<td>Coupe ciseaux</td>
<td>Nouveauté</td>
<td>3</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
<!-- ACCORDÉON 3 -->
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button"
data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne"> data-bs-toggle="collapse"
Gèrer la galérie avant/après data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Gérer la galerie avant/après
</button> </button>
</h2> </h2>
<div id="collapseThree" class="accordion-collapse collapse" <div id="collapseThree" class="accordion-collapse collapse"
data-bs-parent="#accordionExample"> data-bs-parent="#accordionExample">
<div class="accordion-body"> <div class="accordion-body">
<div class="mb-3"> <div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm"> <a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une résultat Ajouter un résultat
</a> </a>
</div> </div>
</div> <table class="table table-striped table-hover align-middle">
</div>
<!--
<section class="categories-prestations">
<h3 class="fs-4">Titres des cartes</h3>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une catégorie
</a>
</div>
<table class="table table-striped table-hover">
<section class="slider">
<details open>
<summary class="fs-5 fw-semibold">Gérer le slider</summary>
<h2 class="fs-3 mt-2">Gérer le slider</h2>
<div class="mb-3">
<a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
</div>
<table class="table table-striped table-hover">
<tr>
<td>Toilletage complet</td>
<td class="text-end">À partir de 60€</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Toilletage complet</td>
<td class="text-end">À partir de 60€</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="categories-prestations">
<h3 class="fs-4">Les prestations</h3>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-sm btn-primary">
Ajouter une prestation
</table>
</details>
</div>
<section class="galerie-avant-apres">
<details open>
<summary class="fs-5 fw-semibold">Gérer la galerie avant/après</summary>
<h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter un résultat avant/après
</a>
</div>
<table class="table table-striped table-hover">
<tr>
<td>Un nom de prestation</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>prestation spécifique</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
</section>
<section class="slider">
</tbody>
</table>
</details>
</section>
</details>
<h2 class="fs-3 mt-2">Gérer le slider</h2>
<div class="mb-3">
<a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark"> <thead class="table-dark">
<tr> <tr>
<th>Titre de la slide</th> <th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Slide 1 : coupe griffe</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Slide 2 : coupe ciseaux</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="galerie-avant-apres">
<details close>
<summary class="fs-5 fw-semibold">
<h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter un résultat avant/après
</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Titre du résultat</th>
<th class="text-end">Actions</th> <th class="text-end">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Petit chien poils longs</td> <td>Toilettage complet</td>
<td class="text-end"> <td class="text-end">
<a href="../html/modifier_avant_apres.html" <a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a> class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button> <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Coupe ciseaux</td> <td>Toilettage complet</td>
<td class="text-end"> <td class="text-end">
<a href="../html/modifier_avant_apres.html" <a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a> class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button> <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</summary>
</details>
</section>
-->
</main>
</div> </div>
</div>
</div>
</div> <!-- /#accordionExample -->
</div>
</div>
<div id="modal-placeholder"></div>
</main> </main>
</body>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../header-composant.js"></script> <script src="../../header-composant.js"></script>
<script src="../../delete-composant.js"></script>
</body>
</html> </html>