diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html index eb8cd59..7db0417 100644 --- a/blog/html/ajouter_article.html +++ b/blog/html/ajouter_article.html @@ -4,22 +4,14 @@ Ajouter un article + - - - - - - - + -
-
+

Ajouter un article

+
- - -
Le titre de l'article est obligatoire
- - -
- Format d'image invalide. Formats acceptés : JPG, PNG -
- - -
Ce titre existe déjà. Choisissez un autre titre.
- - -
Article ajouté avec succès !
+ +
-
- - -
+
+ + +
+ +
+ + +
+ +
+ + +
- -
- - -
+ +
+ + +
- -
- - -
- - -
- - -
- - - - - - +
- - + +
- - +
- Annuler - + Annuler +
-
- - - - - - - diff --git a/blog/html/modifier_article.html b/blog/html/modifier_article.html index caa594d..d15f6ad 100644 --- a/blog/html/modifier_article.html +++ b/blog/html/modifier_article.html @@ -4,32 +4,16 @@ Modifier un article - - - + + + - + -
-
-

Modifier un article

+

Modifier un article

- -
- g Le titre de l'article est obligatoire. -
+ +
- -
- Format d'image invalide. Formats acceptés : JPG, PNG, GIF. -
+
- -
- Ce titre existe déjà. Veuillez en choisir un autre. -
+ +
+ + +
- -
- L'article a été modifié avec succès ! -
+ +
+ + +
- - + +
+ + + + +
- + +
+ +
+ apercu image + +
+
- -
- - -
+ +
+ + +
- -
- - -
- - -
- - - - - - -
- - - -
- Image actuelle - -
- - -
- - -
- - -
- Annuler - -
- -
+ +
+ Annuler + +
+
- - - + + + - - - diff --git a/blog/html/modifier_categorie.html b/blog/html/modifier_categorie.html index b1ced3a..368db98 100644 --- a/blog/html/modifier_categorie.html +++ b/blog/html/modifier_categorie.html @@ -4,7 +4,7 @@ Modifier une catégorie - + diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js index 298d7d1..db85da1 100644 --- a/blog/js/ajouter_article.js +++ b/blog/js/ajouter_article.js @@ -1,94 +1,102 @@ -const form = document.getElementById('ajouterArticleForm'); -const imgField = document.getElementById('articleImage'); -const titleField = document.getElementById('articleTitle'); -const categoryField = document.getElementById('articleCategory'); -const publishedField = document.getElementById('articlePublished'); +const form = document.getElementById("ajouterArticleForm"); +const messages = document.getElementById("messages"); -const errorEmpty = document.getElementById('errorEmpty'); -const errorImage = document.getElementById('errorImage'); -const errorExists = document.getElementById('errorExists'); -const successMsg = document.getElementById('successMsg'); +const imgField = document.getElementById("articleImage"); +const titleField = document.getElementById("articleTitle"); +const categoryField = document.getElementById("articleCategory"); +const publishedField = document.getElementById("articlePublished"); // Simulation BDD -const titreExistants = ['décoration noel', 'coupe de chien']; +const titresExistants = ["décoration noel", "coupe de chien"]; -form.addEventListener('submit', function(e) { +/* ========================= + DOM : messages +========================= */ +function showMessage(type, text) { + messages.innerHTML = ""; + + const div = document.createElement("div"); + div.className = `alert alert-${type}`; + div.textContent = text; + + messages.appendChild(div); +} + +/* ========================= + Validation image +========================= */ +function imageValide(file) { + if (!file) return true; + return ["image/jpeg", "image/png"].includes(file.type); +} + +/* ========================= + Submit formulaire +========================= */ +form.addEventListener("submit", function (e) { e.preventDefault(); + messages.innerHTML = ""; - const titre = titleField.value.trim().toLowerCase(); - const fichierImage = imgField.files[0]; - const contenu = tinymce.get("articleContent").getContent(); + const titre = titleField.value.trim(); + const titreLower = titre.toLowerCase(); + const contenu = tinymce.get("articleContent").getContent().trim(); const categorie = categoryField.value; - const published = publishedField.checked; // récupère la case cochée - - // Reset messages - errorEmpty.classList.add('d-none'); - errorImage.classList.add('d-none'); - errorExists.classList.add('d-none'); - successMsg.classList.add('d-none'); + const image = imgField.files[0]; + const published = publishedField.checked; // Catégorie obligatoire - if (categorie === "") { - errorEmpty.textContent = "Veuillez choisir une catégorie."; - errorEmpty.classList.remove('d-none'); + if (!categorie) { + showMessage("danger", "Veuillez choisir une catégorie."); return; } // Titre obligatoire - if (titre === "") { - errorEmpty.textContent = "Le titre de l'article est obligatoire."; - errorEmpty.classList.remove('d-none'); + if (!titre) { + showMessage("danger", "Le titre de l'article est obligatoire."); return; } - // Titre déjà existant - if (titreExistants.includes(titre)) { - errorExists.classList.remove('d-none'); + // Titre existant + if (titresExistants.includes(titreLower)) { + showMessage("danger", "Ce titre existe déjà. Choisissez-en un autre."); return; } // Contenu obligatoire - if (contenu.trim() === "") { - errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide."; - errorEmpty.classList.remove('d-none'); + if (!contenu) { + showMessage("danger", "Le contenu de l'article ne peut pas être vide."); return; } - // Image invalide - if (fichierImage) { - const validFormats = ['image/jpeg', 'image/png']; - if (!validFormats.includes(fichierImage.type)) { - errorImage.classList.remove('d-none'); - return; - } + // Image valide + if (!imageValide(image)) { + showMessage("danger", "Format d'image invalide. JPG ou PNG uniquement."); + return; } - // Simuler enregistrement - titreExistants.push(titre); + // Enregistrement titre simulé + titresExistants.push(titreLower); - - // CRÉATION DE L'ARTICLE - + // Création article const nouvelArticle = { id: Date.now(), - titre: titleField.value.trim(), - contenu: contenu, - categorie: categorie, - published: published, // valeur TRUE/FALSE pour afficher le badge Facebook + titre, + contenu, + categorie, + published, date: new Date().toISOString() }; - - // SAUVEGARDE DANS LOCALSTORAGE - - let articles = JSON.parse(localStorage.getItem("articles")) || []; + // LocalStorage + const articles = JSON.parse(localStorage.getItem("articles")) || []; articles.push(nouvelArticle); localStorage.setItem("articles", JSON.stringify(articles)); - console.log("Article enregistré :", nouvelArticle); + showMessage("success", "Article ajouté avec succès !"); - // Succès - successMsg.classList.remove('d-none'); + // Reset + form.reset(); + tinymce.get("articleContent").setContent(""); // Redirection setTimeout(() => { @@ -96,11 +104,13 @@ form.addEventListener('submit', function(e) { }, 1000); }); -// TinyMCE INIT +/* ========================= + TinyMCE +========================= */ tinymce.init({ - selector: '#articleContent', + selector: "#articleContent", height: 400, - language: 'fr', - plugins: 'lists fullscreen', - toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen' + language: "fr", + plugins: "lists fullscreen", + toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen" }); diff --git a/blog/js/modifier_article.js b/blog/js/modifier_article.js index fc53268..57d54c7 100644 --- a/blog/js/modifier_article.js +++ b/blog/js/modifier_article.js @@ -1,60 +1,74 @@ const form = document.getElementById("editArticleForm"); +const messages = document.getElementById("messages"); + const imgField = document.getElementById("articleImage"); const titleField = document.getElementById("articleTitle"); const contentField = document.getElementById("articleContent"); const categoryField = document.getElementById("articleCategory"); const publishedField = document.getElementById("articlePublished"); -const errorEmpty = document.getElementById("errorEmpty"); -const errorImage = document.getElementById("errorImage"); -const errorExists = document.getElementById("errorExists"); -const successMsg = document.getElementById("successMsg"); - -// Simulation BDD pour vérifier doublons +// Simulation BDD pour doublons const titresExistants = [ "article de test", "nouveautés chiens", - "actualité du mois", + "actualité du mois" ]; + +function showMessage(type, text) { + messages.innerHTML = ""; + + const div = document.createElement("div"); + div.className = `alert alert-${type}`; + div.textContent = text; + + messages.appendChild(div); +} + + +function imageValide(file) { + if (!file) return true; + return ["image/jpeg", "image/png", "image/gif"].includes(file.type); +} + + form.addEventListener("submit", function (e) { e.preventDefault(); + messages.innerHTML = ""; const titre = titleField.value.trim().toLowerCase(); - const fichierImage = imgField.files[0]; + const contenu = tinymce.get("articleContent").getContent().trim(); + const image = imgField.files[0]; - // Reset messages - errorEmpty.classList.add("d-none"); - errorImage.classList.add("d-none"); - errorExists.classList.add("d-none"); - successMsg.classList.add("d-none"); - - //Titre obligatoire - if (titre === "") { - errorEmpty.classList.remove("d-none"); + // Titre obligatoire + if (!titre) { + showMessage("danger", "Le titre de l'article est obligatoire."); return; } - // Titre déjà existant ? + // Titre existant if (titresExistants.includes(titre)) { - errorExists.classList.remove("d-none"); + showMessage("danger", "Ce titre existe déjà. Veuillez en choisir un autre."); return; } - //Vérification image - if (fichierImage) { - const validFormats = ["image/jpeg", "image/png", "image/gif"]; - if (!validFormats.includes(fichierImage.type)) { - errorImage.classList.remove("d-none"); - return; - } + // Contenu obligatoire + if (!contenu) { + showMessage("danger", "Le contenu de l'article ne peut pas être vide."); + return; + } + + // Image valide + if (!imageValide(image)) { + showMessage("danger", "Format d'image invalide. JPG, PNG ou GIF uniquement."); + return; } // Succès - successMsg.classList.remove("d-none"); + showMessage("success", "L'article a été modifié avec succès !"); - // Redirection après succès + // Redirection setTimeout(() => { - window.location.href = "../../blog/html/accueil_blog.html"; + window.location.href = "../../blog/html/accueil_blog.html"; }, 1500); });