ajout fichier prestation, fusion des 3 pages
This commit is contained in:
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-3 mt-4">
|
||||
<a href="liste_prestations.html" class="btn btn-secondary w-50">Annuler</a>
|
||||
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a>
|
||||
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -48,5 +48,8 @@ form.addEventListener("submit", function (e) {
|
||||
existingPrestations.push(titre);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "../liste_prestation/liste_prestation.html";
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
|
||||
59
prestations/liste_prestation/liste_prestation.html
Normal file
59
prestations/liste_prestation/liste_prestation.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Liste des prestations</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f4f6f9;
|
||||
padding: 30px;
|
||||
}
|
||||
.container {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.action-btns button,
|
||||
.action-btns a {
|
||||
margin-right: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h2 class="mb-5 text-center">Liste des prestations</h2>
|
||||
|
||||
<!--Message succès-->
|
||||
<div id="succesDeleteMsg" class="alert alert-success d-none">Prestation supprimée avec succès !</div>
|
||||
|
||||
<div class="d-flex justify-content-end mb-4">
|
||||
<a href="../ajouter_prestation/ajouter_prestation.html" class="btn btn-primary">Ajouter une prestation</a>
|
||||
</div>
|
||||
|
||||
|
||||
<table class="table table-striped table-hover align-middle">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Titre</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Tarif</th>
|
||||
<th class="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="prestationTableBody">
|
||||
<!--Rempli en JS-->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../../prestations/liste_prestation/liste_prestation.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
prestations/liste_prestation/liste_prestation.js
Normal file
61
prestations/liste_prestation/liste_prestation.js
Normal file
@@ -0,0 +1,61 @@
|
||||
// Exemple BDD
|
||||
const prestations = [
|
||||
{
|
||||
id: 1,
|
||||
titre: "Toilettage complet",
|
||||
type: "Chien",
|
||||
description: "• Bain complet \n• Séchage \n• Coupe aux ciseaux\n• Nettoyage des oreilles",
|
||||
prixMin: 35,
|
||||
prixMax: 60
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titre: "Toilettage express",
|
||||
type: "Chat",
|
||||
description: "• Bain rapide\n• Séchage\n• Brossage",
|
||||
prixMin: 20,
|
||||
prixMax: 35
|
||||
}
|
||||
];
|
||||
|
||||
// Sélection des éléments
|
||||
const tableBody = document.getElementById('prestationTableBody');
|
||||
const successDeleteMsg = document.getElementById('successDeleteMsg');
|
||||
|
||||
// Fonction pour extrait description
|
||||
function extrait(desc, limite = 60) {
|
||||
return desc.length > limite ? desc.substring(0, limite) + '...' : desc;
|
||||
}
|
||||
|
||||
// Affichage du tableau
|
||||
function afficherPrestations() {
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
prestations.forEach((p, index) => {
|
||||
const row = `
|
||||
<tr>
|
||||
<td>${p.titre}</td>
|
||||
<td>${p.type}</td>
|
||||
<td>${extrait(p.description.replace(/\n/g, " "))}</td>
|
||||
<td>${p.prixMin}€ - ${p.prixMax}€</td>
|
||||
|
||||
<td class="text-center action-btns">
|
||||
<a href="consulter_prestation.html?id=${p.id}" class="btn btn-info btn-sm">Voir</a>
|
||||
<a href="../../prestations/modifier_prestation/modifier_prestation.html?id=${p.id}" class="btn btn-warning btn-sm">Modifier</a>
|
||||
<button class="btn btn-danger btn-sm" onclick="supprimerPrestation(${index})">Supprimer</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
tableBody.innerHTML += row;
|
||||
});
|
||||
}
|
||||
|
||||
afficherPrestations();
|
||||
|
||||
// Suppression
|
||||
function supprimerPrestation(index) {
|
||||
prestations.splice(index, 1);
|
||||
afficherPrestations();
|
||||
|
||||
successDeleteMsg.classList.remove("d-none");
|
||||
}
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="d-flex gap-3 mt-4">
|
||||
<a href="liste_prestations.html" class="btn btn-secondary w-50">Annuler</a>
|
||||
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a>
|
||||
<button type="submit" class="btn btn-primary w-50">Enregistrer les modifications</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
const form = document.getElementById('editPrestationForm');
|
||||
const titleField = document.getElementById('prestationTtile');
|
||||
const titleField = document.getElementById('prestationTitle');
|
||||
const descriptionField = document.getElementById('prestationDescription');
|
||||
const typeField = document.getElementById('prestationType');
|
||||
const priceMinField = document.getElementById('priceMin');
|
||||
@@ -40,8 +40,13 @@ form.addEventListener('submit', function (e) {
|
||||
console.log("Nouvelles données :", {
|
||||
titre: title,
|
||||
type: typeField.value,
|
||||
description: descField.value,
|
||||
description: descriptionField.value,
|
||||
prixMin: priceMinField.value,
|
||||
prixMax: priceMaxField.value
|
||||
});
|
||||
|
||||
// Redirection après un court délai
|
||||
setTimeout(() => {
|
||||
window.location.href = "../liste_prestation/liste_prestation.html";
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user