diff --git a/prestations/html/ajouter_slider.html b/prestations/html/ajouter_slider.html index 2c42a50..c11afc3 100644 --- a/prestations/html/ajouter_slider.html +++ b/prestations/html/ajouter_slider.html @@ -5,53 +5,90 @@ 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 ! -
+ +
- +
- - + +
@@ -62,17 +99,21 @@
- Annuler + Annuler
- - - - + + + + + + + diff --git a/prestations/js/ajouter_slider.js b/prestations/js/ajouter_slider.js index ccf12c2..cdda2aa 100644 --- a/prestations/js/ajouter_slider.js +++ b/prestations/js/ajouter_slider.js @@ -1,44 +1,52 @@ -const form = document.getElementById('addSlideForm'); -const imgField = document.getElementById('slideImage'); -const altField = document.getElementById('slideAlt'); -const titleField = document.getElementById('slideTitle'); +const form = document.getElementById("addSlideForm"); +const messages = document.getElementById("messages"); -const errorEmpty = document.getElementById('errorEmpty'); -const errorFormat = document.getElementById('errorFormat'); -const successMsg = document.getElementById('successMsg'); +const imgField = document.getElementById("slideImage"); +const altField = document.getElementById("slideAlt"); +const titleField = document.getElementById("slideTitle"); -// Création du tableau simulant la BDD +// Simulation 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'); +function showMessage(type, text) { + messages.innerHTML = ""; + + const div = document.createElement("div"); + div.className = `alert alert-${type}`; + div.textContent = text; + + messages.appendChild(div); +} + + +form.addEventListener("submit", function (e) { + e.preventDefault(); + messages.innerHTML = ""; const image = imgField.files[0]; const alt = altField.value.trim(); + const title = titleField.value.trim(); // Image obligatoire if (!image) { - errorEmpty.textContent = "Merci de sélectionner une image."; - errorEmpty.classList.remove('d-none'); + showMessage("danger", "Merci de sélectionner une image."); return; } // ALT obligatoire - if (alt === "") { - errorEmpty.textContent = "Le texte ALT est obligatoire."; - errorEmpty.classList.remove('d-none'); + if (!alt) { + showMessage("danger", "Le texte ALT est obligatoire."); return; } // Vérification format const validFormats = ["image/jpeg", "image/png", "image/webp"]; if (!validFormats.includes(image.type)) { - errorFormat.classList.remove('d-none'); + showMessage( + "danger", + "Format d'image invalide. Formats acceptés : JPG, PNG, WEBP." + ); return; } @@ -46,18 +54,18 @@ form.addEventListener('submit', function (e) { slides.push({ id: Date.now(), image: image.name, - alt: alt, - title: titleField.value.trim(), + alt, + title, order: slides.length + 1 }); console.log("Nouveau slide ajouté :", slides); // Succès - successMsg.classList.remove('d-none'); + showMessage("success", "Slide ajouté avec succès !"); // Redirection setTimeout(() => { - window.location.href = "../../../slider/liste_slider/liste_slider.html"; + window.location.href = "/prestations/html/prestation_accueil.html"; }, 1500); });