refonte arborescence + correction des chemins

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();