mise a jour du Dom de ajouter article et modifier article
This commit is contained in:
@@ -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"
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user