ajout de la page modifier prestation

2025-12-08 14:21:30 +01:00
parent a822fb8122
commit 211e3ef9ba
2 changed files with 131 additions and 1 deletions
--- a/prestations/modifier_prestation/modifier_prestation.html
+++ b/prestations/modifier_prestation/modifier_prestation.html
@@ -1 +1,84 @@
-git 
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modifier une prestation</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+
+    <style>
+        body {
+            background: #f4f6f9;
+        }
+        .container {
+            max-width: 700px;
+            margin-top: 40px;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h2 class="mb-4 text-center">Modifier une prestation</h2>
+
+
+        <!--Erreur-->
+        <div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>
+        <div id="errorTechnical" class="alert alert-danger d-none">Une erreur est survenue. Veuillez réessayer plus tard.</div>
+
+        <!--Succès-->
+        <div id="successMsg" class="alert alert-success d-none">Prestation modifiée avec succès !</div>
+
+        <form id="editPrestationForm">
+
+            <!--Titre-->
+            <div class="mb-3">
+                <label class="form-label fw-bold">Titre de la prestation (obligatoire)</label>
+                <input type="text" id="prestationTitle" class="form-control" value="Toilettage complet pour chien">
+            </div>
+
+            <!--Type-->
+            <div class="mb-3">
+                <label class="form-label fw-bold">Type de prestation</label>
+                <select id="prestationType" class="form-select">
+                    <option value="chien" selected>Chien</option>
+                    <option value="chat">Chat</option>
+                </select>
+            </div>
+            
+            
+            <!--Description (liste à puces)-->
+            <div class="mb-3">
+                <label class="form-label fw-bold">Description de la prestation</label>
+                <textarea id="prestationDescription" class="form-control" rows="5">
+                • Bain complet
+                • Séchage
+                • Coupe aux ciseaux
+                • Nettoyage des oreilles</textarea>
+            </div>
+
+            <!--Tariffs-->
+            <div class="mb-3">
+            <label class="form-label fw-bold">Tarif (fourchette)</label>
+            <div class="d-flex gap-3">
+                <input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35">
+                <input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60">
+            </div>
+            </div>
+
+            <!-- Boutons -->
+        <div class="d-flex gap-3 mt-4">
+            <a href="liste_prestations.html" class="btn btn-secondary w-50">Annuler</a>
+            <button type="submit" class="btn btn-primary w-50">Enregistrer les modifications</button>
+        </div>
+
+        </form>
+
+    </div>
+
+<script src="modifier_prestation.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+</body>
+</html>
--- a/prestations/modifier_prestation/modifier_prestation.js
+++ b/prestations/modifier_prestation/modifier_prestation.js
@@ -0,0 +1,47 @@
+
+const form = document.getElementById('editPrestationForm');
+const titleField = document.getElementById('prestationTtile');
+const descriptionField = document.getElementById('prestationDescription');
+const typeField = document.getElementById('prestationType');
+const priceMinField = document.getElementById('priceMin');
+const priceMaxField = document.getElementById('priceMax');
+
+const errorEmpty = document.getElementById('errorEmpty');
+const errorTechnical = document.getElementById('errorTechnical');
+const successMsg = document.getElementById('successMsg');
+
+
+form.addEventListener('submit', function (e) { 
+    e.preventDefault();
+    
+    errorEmpty.classList.add('d-none');
+    errorTechnical.classList.add('d-none');
+    successMsg.classList.add('d-none');
+
+    const title = titleField.value.trim();
+
+
+    // champ obligatoire manquant
+    if (title === '') {
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
+     // 2️ Simulation d’erreur technique 
+    const erreurTechnique = false; //  mettre true pour tester
+    if (erreurTechnique) {
+        errorTechnical.classList.remove('d-none');
+        return;
+    }
+
+     //Succès 
+    successMsg.classList.remove('d-none');
+
+    console.log("Nouvelles données :", {
+        titre: title,
+        type: typeField.value,
+        description: descField.value,
+        prixMin: priceMinField.value,
+        prixMax: priceMaxField.value
+    });
+});