diff --git a/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.html b/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.html index e69de29..10d870e 100644 --- a/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.html +++ b/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.html @@ -0,0 +1,74 @@ + + + + + + Ajouter un slide + + + + + + + + +
+

Ajouter une image au slider

+ + +
+ Merci de sélectionner une image. +
+ + +
+ Format d'image invalide. Formats acceptés : JPG, PNG, WEBP. +
+ + +
+ Slide ajouté avec succès ! +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ Annuler + +
+ +
+
+ + + + + + diff --git a/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.js b/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.js index e69de29..ccf12c2 100644 --- a/prestations/slider/liste_slider/ajouter_slider/ajouter_slider.js +++ b/prestations/slider/liste_slider/ajouter_slider/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); +}); diff --git a/prestations/slider/liste_slider/liste_slider.html b/prestations/slider/liste_slider/liste_slider.html index e69de29..7223fb9 100644 --- a/prestations/slider/liste_slider/liste_slider.html +++ b/prestations/slider/liste_slider/liste_slider.html @@ -0,0 +1,65 @@ + + + + + + Liste des slides + + + + + + + +
+ +

Slider – Liste des images

+ + +
+ + +
+ Ajouter une image au slider +
+ + + + + + + + + + + + + + + +
ImageTexte ALTTitreOrdreActions
+
+ + + + + + diff --git a/prestations/slider/liste_slider/liste_slider.js b/prestations/slider/liste_slider/liste_slider.js index e69de29..c91c7df 100644 --- a/prestations/slider/liste_slider/liste_slider.js +++ b/prestations/slider/liste_slider/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 = ` + + ${slide.alt} + + ${slide.alt} + ${slide.title || "-"} + ${slide.order} + + + + + + Modifier + + + + + + `; + 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"); +} diff --git a/prestations/slider/liste_slider/modifier_slider/modifier_slider.html b/prestations/slider/liste_slider/modifier_slider/modifier_slider.html index e69de29..9da99f9 100644 --- a/prestations/slider/liste_slider/modifier_slider/modifier_slider.html +++ b/prestations/slider/liste_slider/modifier_slider/modifier_slider.html @@ -0,0 +1,76 @@ + + + + + + Modifier un slide + + + + + + + + +
+

Modifier une image du slider

+ + +
+
Slide modifié avec succès !
+ +
+ + +
+
+ Image actuelle +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ Annuler + +
+ +
+
+ + + + + + diff --git a/prestations/slider/liste_slider/modifier_slider/modifier_slider.js b/prestations/slider/liste_slider/modifier_slider/modifier_slider.js index e69de29..8eaa9c2 100644 --- a/prestations/slider/liste_slider/modifier_slider/modifier_slider.js +++ b/prestations/slider/liste_slider/modifier_slider/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 } +]; + +// --- Sélections elements HTML --- +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"); + +// --- Récupérer 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); +});