refonte arborescence + correction des chemins

prestations/js/ajouter_avant_apres.js

@@ -0,0 +1,94 @@
+// ===============================
+// Données simulées (sera remplacée par BDD )
+// ===============================
+let galleryPairs = [
+    {
+        id: 1,
+        titre: "Petit chien poils longs",
+        type: "Chien",
+        avant: "../../img/avant1.jpg",
+        apres: "../../img/apres1.jpg"
+    },
+    {
+        id: 2,
+        titre: "Coupe ciseaux",
+        type: "Chat",
+        avant: "../../img/avant2.jpg",
+        apres: "../../img/apres2.jpg"
+    }
+];
+
+// Sélecteurs
+const form = document.getElementById("addPairForm");
+const titleInput = document.getElementById("pairTitle");
+const typeInput = document.getElementById("pairType");
+const beforeInput = document.getElementById("beforeImage");
+const afterInput = document.getElementById("afterImage");
+
+const beforePreview = document.getElementById("beforePreview");
+const afterPreview = document.getElementById("afterPreview");
+
+const successMsg = document.getElementById("successMsg");
+const errorMsg = document.getElementById("errorMsg");
+
+// ===============================
+// Prévisualisation images
+// ===============================
+beforeInput.addEventListener("change", function () {
+    const file = this.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = e => {
+        beforePreview.src = e.target.result;
+        beforePreview.style.display = "block";
+    };
+    reader.readAsDataURL(file);
+});
+
+afterInput.addEventListener("change", function () {
+    const file = this.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = e => {
+        afterPreview.src = e.target.result;
+        afterPreview.style.display = "block";
+    };
+    reader.readAsDataURL(file);
+});
+
+// ===============================
+// Soumission formulaire
+// ===============================
+form.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    // Reset messages
+    errorMsg.classList.add("d-none");
+    successMsg.classList.add("d-none");
+
+    // Validation simple
+    if (!titleInput.value.trim() || !typeInput.value.trim() || !beforeInput.files[0] || !afterInput.files[0]) {
+        errorMsg.classList.remove("d-none");
+        return;
+    }
+
+    // Nouvelle entrée (simulation)
+    const newPair = {
+        id: galleryPairs.length + 1,
+        titre: titleInput.value.trim(),
+        type: typeInput.value.trim(),
+        avant: URL.createObjectURL(beforeInput.files[0]),
+        apres: URL.createObjectURL(afterInput.files[0])
+    };
+
+    galleryPairs.push(newPair);
+
+    successMsg.classList.remove("d-none");
+
+    // Redirige après 1 seconde
+    setTimeout(() => {
+        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
+    }, 1000);
+});

prestations/js/ajouter_prestation.js

@@ -0,0 +1,55 @@
+// Récupération des éléments
+const form = document.getElementById("addCategoryForm");
+const titleField = document.getElementById("categoryName");
+const typeField = document.getElementById("prestationType");
+const descField = document.getElementById("prestationDescription");
+const priceMinField = document.getElementById("priceMin");
+const priceMaxField = document.getElementById("priceMax");
+
+const errorEmpty = document.getElementById("errorEmpty");
+const errorExists = document.getElementById("errorExists");
+const successMessage = document.getElementById("successMessage");
+
+// Prestations existantes (simulation)
+const existingPrestations = [
+    "Toilettage complet",
+    "Coupe ciseaux",
+    "Toilettage chiot",
+    "Démêlage poil long"
+];
+
+form.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    // Récupérer le titre
+    const titre = titleField.value.trim();
+
+    // Réinitialiser les alertes
+    errorEmpty.classList.add("d-none");
+    errorExists.classList.add("d-none");
+    successMessage.classList.add("d-none");
+
+    // 1. Vérif : titre obligatoire
+    if (titre === "") {
+        errorEmpty.classList.remove("d-none");
+        return;
+    }
+
+    // 2. Vérif : prestation déjà existante (exemple simple)
+    if (existingPrestations.includes(titre)) {
+        errorExists.classList.remove("d-none");
+        return;
+    }
+
+    // 3. Tout est ok → succès
+    successMessage.classList.remove("d-none");
+
+    // Simuler ajout en base
+    existingPrestations.push(titre);
+
+   
+    setTimeout(() => {
+    window.location.href = "../liste_prestation/liste_prestation.html";
+}, 1500);
+});
+

prestations/js/ajouter_slider.js

@@ -0,0 +1,63 @@
+const form = document.getElementById('addSlideForm');
+const imgField = document.getElementById('slideImage');
+const altField = document.getElementById('slideAlt');
+const titleField = document.getElementById('slideTitle');
+
+const errorEmpty = document.getElementById('errorEmpty');
+const errorFormat = document.getElementById('errorFormat');
+const successMsg = document.getElementById('successMsg');
+
+// Création du tableau simulant la BDD
+let slides = [];
+
+form.addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    // Reset messages
+    errorEmpty.classList.add('d-none');
+    errorFormat.classList.add('d-none');
+    successMsg.classList.add('d-none');
+
+    const image = imgField.files[0];
+    const alt = altField.value.trim();
+
+    // Image obligatoire
+    if (!image) {
+        errorEmpty.textContent = "Merci de sélectionner une image.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
+    // ALT obligatoire
+    if (alt === "") {
+        errorEmpty.textContent = "Le texte ALT est obligatoire.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
+    // Vérification format
+    const validFormats = ["image/jpeg", "image/png", "image/webp"];
+    if (!validFormats.includes(image.type)) {
+        errorFormat.classList.remove('d-none');
+        return;
+    }
+
+    // Enregistrement simulé
+    slides.push({
+        id: Date.now(),
+        image: image.name,
+        alt: alt,
+        title: titleField.value.trim(),
+        order: slides.length + 1
+    });
+
+    console.log("Nouveau slide ajouté :", slides);
+
+    // Succès
+    successMsg.classList.remove('d-none');
+
+    // Redirection
+    setTimeout(() => {
+        window.location.href = "../../../slider/liste_slider/liste_slider.html";
+    }, 1500);
+});

prestations/js/liste_avant_apres.js

@@ -0,0 +1,90 @@
+// ===============================
+// Données simulées (à remplacer plus tard par une BDD)
+// ===============================
+let galleryPairs = [
+    {
+        id: 1,
+        titre: "Petit chien poils longs",
+        type: "Chien",
+        avant: "../../img/avant1.jpg",
+        apres: "../../img/apres1.jpg"
+    },
+    {
+        id: 2,
+        titre: "Coupe ciseaux",
+        type: "Chat",
+        avant: "../../img/avant2.jpg",
+        apres: "../../img/apres2.jpg"
+    }
+];
+
+// Sélecteurs
+const tableBody = document.getElementById("prestationTableBody");
+const succesDeleteMsg = document.getElementById("succesDeleteMsg");
+
+// ===============================
+// Fonction d'affichage
+// ===============================
+function displayPairs() {
+    tableBody.innerHTML = ""; // reset tableau
+
+    galleryPairs.forEach(pair => {
+        const row = document.createElement("tr");
+
+        row.innerHTML = `
+            <td>${pair.titre}</td>
+            <td>${pair.type}</td>
+
+            <td>
+                <img src="${pair.avant}" width="80" class="rounded">
+            </td>
+
+            <td>
+                <img src="${pair.apres}" width="80" class="rounded">
+            </td>
+
+            <td class="text-center action-btns">
+
+                <!-- Bouton Voir -->
+                <a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}" 
+                   class="btn btn-info btn-sm">Voir</a>
+
+                <!-- Bouton Modifier -->
+                <a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}" 
+                   class="btn btn-warning btn-sm">Modifier</a>
+
+                <!-- Bouton Supprimer -->
+                <button class="btn btn-danger btn-sm" onclick="deletePair(${pair.id})">
+                    Supprimer
+                </button>
+            </td>
+        `;
+
+        tableBody.appendChild(row);
+    });
+}
+
+// ===============================
+// Fonction de suppression
+// ===============================
+function deletePair(id) {
+    if (!confirm("Voulez-vous vraiment supprimer cette paire ?")) {
+        return;
+    }
+
+    galleryPairs = galleryPairs.filter(pair => pair.id !== id);
+    displayPairs();
+
+    succesDeleteMsg.classList.remove("d-none");
+
+    // Disparaît après 2 secondes
+    setTimeout(() => {
+        succesDeleteMsg.classList.add("d-none");
+    }, 2000);
+}
+
+// ===============================
+// Chargement initial
+// ===============================
+displayPairs();
+

prestations/js/liste_prestation.js

@@ -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");
+}

prestations/js/liste_slider.js

@@ -0,0 +1,87 @@
+// Simulation BDD slider
+let slides = [
+    { id: 1, image: "slide1.webp", alt: "Chien toiletté", title: "Promo du mois", order: 1 },
+    { id: 2, image: "slide2.webp", alt: "Avant / Après", title: "", order: 2 },
+    { id: 3, image: "slide3.webp", alt: "Coupe ciseaux", title: "Nouveauté", order: 3 }
+];
+
+const tableBody = document.getElementById("sliderTableBody");
+const successMsg = document.getElementById("successMsg");
+
+function afficherSlides() {
+
+    // trier par ordre
+    slides.sort((a, b) => a.order - b.order);
+
+    tableBody.innerHTML = "";
+
+    slides.forEach((slide, index) => {
+        const row = `
+        <tr>
+            <td><img src="#" alt="${slide.alt}" class="miniature"></td>
+
+            <td>${slide.alt}</td>
+            <td>${slide.title || "-"}</td>
+            <td>${slide.order}</td>
+
+            <td class="text-center action-buttons">
+                <button class="btn btn-secondary btn-sm" onclick="monter(${index})">↑</button>
+                <button class="btn btn-secondary btn-sm" onclick="descendre(${index})">↓</button>
+
+                <a href="../../slider/modifier_slider/modifier_slider.html?id=${slide.id}" 
+   class="btn btn-warning btn-sm">Modifier</a>
+
+
+                <button class="btn btn-danger btn-sm" onclick="supprimerSlide(${index})">Supprimer</button>
+            </td>
+        </tr>
+        `;
+        tableBody.innerHTML += row;
+    });
+}
+
+afficherSlides();
+ 
+// Suppression
+function supprimerSlide(index) {
+    if (confirm("Voulez-vous vraiment supprimer cette image du slider ?")) {
+        slides.splice(index, 1);
+
+        // Réordonner après suppression
+        slides.forEach((s, i) => s.order = i + 1);
+
+        afficherSlides();
+
+        successMsg.textContent = "Image du slider supprimée avec succès.";
+        successMsg.classList.remove("d-none");
+    }
+}
+
+// Monter 
+function monter(index) {
+    if (index === 0) return; // déjà en haut
+
+    [slides[index - 1], slides[index]] = [slides[index], slides[index - 1]];
+
+    // recalcul ordre
+    slides.forEach((s, i) => s.order = i + 1);
+
+    afficherSlides();
+
+    successMsg.textContent = "Ordre mis à jour.";
+    successMsg.classList.remove("d-none");
+}
+
+// Descendre 
+function descendre(index) {
+    if (index === slides.length - 1) return; // déjà en bas
+
+    [slides[index], slides[index + 1]] = [slides[index + 1], slides[index]];
+
+    slides.forEach((s, i) => s.order = i + 1);
+
+    afficherSlides();
+
+    successMsg.textContent = "Ordre mis à jour.";
+    successMsg.classList.remove("d-none");
+}

prestations/js/modifier_avant_apres.js

@@ -0,0 +1,115 @@
+// ===============================
+// Données simulées
+// (mêmes IDs que dans la liste !)
+// ===============================
+const galleryPairs = [
+    {
+        id: 1,
+        titre: "Petit chien poils longs",
+        type: "Chien",
+        avant: "../../img/avant1.jpg",
+        apres: "../../img/apres1.jpg"
+    },
+    {
+        id: 2,
+        titre: "Coupe ciseaux",
+        type: "Chat",
+        avant: "../../img/avant2.jpg",
+        apres: "../../img/apres2.jpg"
+    }
+];
+
+// Sélecteurs
+const editForm = document.getElementById("editPairForm");
+const pairIdInput = document.getElementById("pairId");
+const titleInput = document.getElementById("pairTitle");
+const typeSelect = document.getElementById("pairType");
+const beforeInput = document.getElementById("beforeImage");
+const afterInput = document.getElementById("afterImage");
+const beforePreview = document.getElementById("beforePreview");
+const afterPreview = document.getElementById("afterPreview");
+
+const successMsg = document.getElementById("successMsg");
+const errorMsg = document.getElementById("errorMsg");
+
+// ===============================
+// Récup ID dans l'URL
+// ===============================
+function getPairIdFromUrl() {
+    const params = new URLSearchParams(window.location.search);
+    const idParam = params.get("id");
+
+    if (!idParam) {
+        // pas d'id → retour à la liste
+        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
+        return null;
+    }
+
+    return parseInt(idParam, 10);
+}
+
+// ===============================
+// Charger la paire
+// ===============================
+function loadPairData() {
+    const id = getPairIdFromUrl();
+    if (!id) return;
+
+    const pair = galleryPairs.find(p => p.id === id);
+
+    if (!pair) {
+        errorMsg.textContent = "Paire introuvable.";
+        errorMsg.classList.remove("d-none");
+        editForm.classList.add("d-none");
+        return;
+    }
+
+    pairIdInput.value = pair.id;
+    titleInput.value = pair.titre;
+    typeSelect.value = pair.type;
+    beforePreview.src = pair.avant;
+    afterPreview.src = pair.apres;
+}
+
+// Prévisu des nouvelles images
+beforeInput.addEventListener("change", function () {
+    const file = this.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = e => beforePreview.src = e.target.result;
+    reader.readAsDataURL(file);
+});
+
+afterInput.addEventListener("change", function () {
+    const file = this.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = e => afterPreview.src = e.target.result;
+    reader.readAsDataURL(file);
+});
+
+// Soumission
+editForm.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    errorMsg.classList.add("d-none");
+    successMsg.classList.add("d-none");
+
+    if (!titleInput.value.trim()) {
+        errorMsg.textContent = "Le titre est obligatoire.";
+        errorMsg.classList.remove("d-none");
+        return;
+    }
+
+    // Ici ce serait un fetch vers l'API en vrai.
+    successMsg.classList.remove("d-none");
+
+    setTimeout(() => {
+        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
+    }, 1500);
+});
+
+// Init
+loadPairData();

prestations/js/modifier_prestation.js

@@ -0,0 +1,52 @@
+
+const form = document.getElementById('editPrestationForm');
+const titleField = document.getElementById('prestationTitle');
+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: 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);
+});

prestations/js/modifier_slider.js

@@ -0,0 +1,77 @@
+// Simuler la BDD slider
+let slides = [
+    { id: 1, image: "slide1.webp", alt: "Chien toiletté", title: "Promo du mois", order: 1 },
+    { id: 2, image: "slide2.webp", alt: "Avant / Après", title: "", order: 2 },
+    { id: 3, image: "slide3.webp", alt: "Coupe ciseaux", title: "Nouveauté", order: 3 }
+];
+
+
+const form = document.getElementById("editSlideForm");
+const currentImage = document.getElementById("currentImage");
+const newImage = document.getElementById("newImage");
+const altField = document.getElementById("slideAlt");
+const titleField = document.getElementById("slideTitle");
+
+const errorMsg = document.getElementById("errorMsg");
+const successMsg = document.getElementById("successMsg");
+
+// Recuperation de l'id dans l'url
+const urlParams = new URLSearchParams(window.location.search);
+const slideId = parseInt(urlParams.get("id"));
+
+// Trouver le slide correspondant
+let slide = slides.find(s => s.id === slideId);
+
+if (!slide) {
+    errorMsg.classList.remove("d-none");
+    errorMsg.textContent = "Slide introuvable.";
+}
+
+// Pré-remplir les champs
+currentImage.src = "#"; 
+altField.value = slide.alt;
+titleField.value = slide.title;
+
+
+//  Validation + modification 
+form.addEventListener("submit", function(e) {
+    e.preventDefault();
+
+    errorMsg.classList.add("d-none");
+    successMsg.classList.add("d-none");
+
+    // Vérifier ALT obligatoire
+    if (altField.value.trim() === "") {
+        errorMsg.textContent = "Le texte ALT est obligatoire.";
+        errorMsg.classList.remove("d-none");
+        return;
+    }
+
+    // Vérifier la nouvelle image si elle existe
+    if (newImage.files.length > 0) {
+        const file = newImage.files[0];
+        const validFormats = ["image/jpeg", "image/png", "image/webp"];
+
+        if (!validFormats.includes(file.type)) {
+            errorMsg.textContent = "Format d'image invalide. JPG, PNG et WEBP acceptés.";
+            errorMsg.classList.remove("d-none");
+            return;
+        }
+
+        // Simuler remplacement de l’image
+        slide.image = file.name;
+    }
+
+    // Mettre à jour les données
+    slide.alt = altField.value.trim();
+    slide.title = titleField.value.trim();
+
+    successMsg.classList.remove("d-none");
+
+    console.log("Slide modifié :", slide);
+
+    // Redirection après succès
+    setTimeout(() => {
+        window.location.href = "../liste_slider/liste_slider.html";
+    }, 1500);
+});

prestations/js/voir_avant_apres.js

@@ -0,0 +1,58 @@
+// ===============================
+// Données simulées (à remplacer plus tard par BDD / API)
+// ===============================
+let galleryPairs = [
+    {
+        id: 1,
+        titre: "Petit chien poils longs",
+        type: "Chien",
+        avant: "../../img/avant1.jpg",
+        apres: "../../img/apres1.jpg"
+    },
+    {
+        id: 2,
+        titre: "Coupe ciseaux",
+        type: "Chat",
+        avant: "../../img/avant2.jpg",
+        apres: "../../img/apres2.jpg"
+    }
+];
+
+// Sélecteurs
+const titleEl = document.getElementById("pairTitle");
+const beforePreview = document.getElementById("beforePreview");
+const afterPreview = document.getElementById("afterPreview");
+const errorMsg = document.getElementById("errorMsg");
+const detailsSection = document.getElementById("detailsSection");
+
+// ===============================
+// Récup ID dans l'URL
+// ===============================
+function getIdFromUrl() {
+    const params = new URLSearchParams(window.location.search);
+    return parseInt(params.get("id"));
+}
+
+// ===============================
+// Charger les infos de la paire
+// ===============================
+function loadPairDetails() {
+    const id = getIdFromUrl();
+    const pair = galleryPairs.find(p => p.id === id);
+
+    if (!pair) {
+        errorMsg.classList.remove("d-none");
+        detailsSection.classList.add("d-none");
+        return;
+    }
+
+    // Affichage du titre
+    titleEl.textContent = pair.titre;
+
+    // Affichage des images
+    beforePreview.src = pair.avant;
+    afterPreview.src = pair.apres;
+}
+
+// Initialisation
+loadPairDetails();