From baf730af3eafbe30e9dc0a704fade4ccf79bc124 Mon Sep 17 00:00:00 2001 From: RoxanaElena09 Date: Tue, 9 Dec 2025 12:45:03 +0100 Subject: [PATCH] feat:galerie avant/apres backoffice --- .../ajouter_avant_apres.html | 90 ++++++++++++++ .../ajouter_avant_apres.js | 94 ++++++++++++++ .../ajouter_avant_apres.html | 0 .../ajouter_avant_apres.js | 0 .../liste_avant_apres/liste-avant_apres.html | 0 .../liste_avant_apres/liste_avant_apres.html | 60 +++++++++ .../liste_avant_apres/liste_avant_apres.js | 90 ++++++++++++++ .../modifier_avant_apres.html | 0 .../modifier_avant_apres.js | 0 .../modifier_avant_apres.html | 104 ++++++++++++++++ .../modifier_avant_apres.js | 115 ++++++++++++++++++ .../voir_avant_apres/voir_avant_apres.html | 70 +++++++++++ .../voir_avant_apres/voir_avant_apres.js | 58 +++++++++ 13 files changed, 681 insertions(+) create mode 100644 prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.html create mode 100644 prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.js delete mode 100644 prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.html delete mode 100644 prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.js delete mode 100644 prestations/avant_apres/liste_avant_apres/liste-avant_apres.html create mode 100644 prestations/avant_apres/liste_avant_apres/liste_avant_apres.html delete mode 100644 prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.html delete mode 100644 prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.js create mode 100644 prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.html create mode 100644 prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.js create mode 100644 prestations/avant_apres/voir_avant_apres/voir_avant_apres.html create mode 100644 prestations/avant_apres/voir_avant_apres/voir_avant_apres.js diff --git a/prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.html b/prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.html new file mode 100644 index 0000000..2b9f499 --- /dev/null +++ b/prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.html @@ -0,0 +1,90 @@ + + + + + + Ajouter une paire avant/après + + + + + + + +
+ +

Ajouter une paire avant/après

+ + +
+ Nouvelle paire ajoutée avec succès ! +
+ + +
+ Merci de remplir tous les champs obligatoires. +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ Annuler + +
+ +
+
+ + + + + + diff --git a/prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.js b/prestations/avant_apres/ajouter_avant_apres/ajouter_avant_apres.js new file mode 100644 index 0000000..440e9a7 --- /dev/null +++ b/prestations/avant_apres/ajouter_avant_apres/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); +}); diff --git a/prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.html b/prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.html deleted file mode 100644 index e69de29..0000000 diff --git a/prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.js b/prestations/avant_apres/liste_avant_apres/ajouter_avant_apres/ajouter_avant_apres.js deleted file mode 100644 index e69de29..0000000 diff --git a/prestations/avant_apres/liste_avant_apres/liste-avant_apres.html b/prestations/avant_apres/liste_avant_apres/liste-avant_apres.html deleted file mode 100644 index e69de29..0000000 diff --git a/prestations/avant_apres/liste_avant_apres/liste_avant_apres.html b/prestations/avant_apres/liste_avant_apres/liste_avant_apres.html new file mode 100644 index 0000000..15c898f --- /dev/null +++ b/prestations/avant_apres/liste_avant_apres/liste_avant_apres.html @@ -0,0 +1,60 @@ + + + + + + Liste des paires avant/apres + + + + + + + +
+

Liste des paires avant/apres

+ + +
Paire supprimée avec succès !
+ +
+ Ajouter une paire +
+ + + + + + + + + + + + + + + + +
Titre paireTypeAvantApresActions
+
+ + + + + + + + \ No newline at end of file diff --git a/prestations/avant_apres/liste_avant_apres/liste_avant_apres.js b/prestations/avant_apres/liste_avant_apres/liste_avant_apres.js index e69de29..64c5fc9 100644 --- a/prestations/avant_apres/liste_avant_apres/liste_avant_apres.js +++ b/prestations/avant_apres/liste_avant_apres/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 = ` + ${pair.titre} + ${pair.type} + + + + + + + + + + + + + Voir + + + Modifier + + + + + `; + + 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(); + diff --git a/prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.html b/prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.html deleted file mode 100644 index e69de29..0000000 diff --git a/prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.js b/prestations/avant_apres/liste_avant_apres/modifier_avant_apres/modifier_avant_apres.js deleted file mode 100644 index e69de29..0000000 diff --git a/prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.html b/prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.html new file mode 100644 index 0000000..37d5959 --- /dev/null +++ b/prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.html @@ -0,0 +1,104 @@ + + + + + + Modifier une paire avant/après + + + + + + +
+

Modifier une paire avant/après

+ + +
+ La paire avant/après a été modifiée avec succès. +
+
+ Une erreur est survenue. Merci de vérifier le formulaire. +
+ + +
+ + + + + +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+ Laisser vide pour conserver l'image actuelle. +
+
+
+

Aperçu actuel AVANT

+ Image avant +
+
+ + +
+
+ + +
+ Laisser vide pour conserver l'image actuelle. +
+
+
+

Aperçu actuel APRÈS

+ Image après +
+
+ + +
+ + Annuler + + +
+
+
+ + + + + diff --git a/prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.js b/prestations/avant_apres/modifier_avant_apres/modifier_avant_apres.js new file mode 100644 index 0000000..fae9bde --- /dev/null +++ b/prestations/avant_apres/modifier_avant_apres/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(); diff --git a/prestations/avant_apres/voir_avant_apres/voir_avant_apres.html b/prestations/avant_apres/voir_avant_apres/voir_avant_apres.html new file mode 100644 index 0000000..a1e6f86 --- /dev/null +++ b/prestations/avant_apres/voir_avant_apres/voir_avant_apres.html @@ -0,0 +1,70 @@ + + + + + + Voir la paire avant/après + + + + + + + +
+ +

Détails de la paire avant/après

+ + +
+ Impossible d'afficher cette paire. +
+ +
+ + +

+ +
+ +
+

AVANT

+ +
+ +
+

APRÈS

+ +
+ +
+ + +
+ + Retour à la liste + +
+ +
+ +
+ + + + + + diff --git a/prestations/avant_apres/voir_avant_apres/voir_avant_apres.js b/prestations/avant_apres/voir_avant_apres/voir_avant_apres.js new file mode 100644 index 0000000..c39d31d --- /dev/null +++ b/prestations/avant_apres/voir_avant_apres/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();