mise a jour du Dom de ajouter article et modifier article

This commit is contained in:
ben
2025-12-12 14:38:43 +01:00
parent b77f82f216
commit 4fe4facd32
5 changed files with 217 additions and 270 deletions

View File

@@ -4,22 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script>
<link rel="stylesheet" href="../../css/blog.css">
<style>
</style>
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<!-- HEADER -->
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
@@ -72,82 +64,62 @@
</nav>
</header>
<div class="container">
<div class="container mt-5">
<h2 class="mb-5 text-center">Ajouter un article</h2>
<form id="ajouterArticleForm">
<!--Erreur titre vide-->
<div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div>
<!--Erreur image invalide-->
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG
</div>
<!--Erreur titre existant-->
<div id="errorExists" class="alert alert-danger d-none">Ce titre existe déjà. Choisissez un autre titre.</div>
<!--Succès ajout article-->
<div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
<!-- Conteneur messages DOM -->
<div id="messages" class="mb-3"></div>
<!-- Catégorie -->
<div class="mb-3">
<label class="form-label fw-bold">Catégorie de l'article (obligatoire)</label>
<select id="articleCategory" class="form-select" required>
<option value="" disabled selected>Choisissez une catégorie</option>
<label class="form-label fw-bold">Catégorie *</label>
<select id="articleCategory" class="form-select">
<option value="">Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
</div>
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article">
</div>
<!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label>
<textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea>
</div>
<!-- Image -->
<div class="mb-4">
<label class="form-label fw-bold">Image de l'article</label>
<input type="file" id="articleImage" class="form-control" accept="image/*">
</div>
<!--Publié-->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label" for="articlePublished">Publié (sera publié sur le facebook)</label>
</div>
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
</div>
<!--Boutons-->
<!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent"></textarea>
</div>
<!-- Image -->
<div class="mb-4">
<label class="form-label fw-bold">Image</label>
<input type="file" id="articleImage" class="form-control">
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié</label>
</div>
<!-- Boutons -->
<div class="d-flex gap-3 mt-4">
<a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
<script src="../js/ajouter_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
<script>
tinymce.init({
selector: '#articleContent',
height: 400,
@@ -157,10 +129,5 @@ tinymce.init({
});
</script>
</body>
</html>

View File

@@ -4,32 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script>
<link rel="stylesheet" href="../../css/blog.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
}
.container {
margin-top: 40px;
}
.preview-img {
max-width: 15px;
border-radius: 8px
}
.ck-editor__editable {
min-height: 350px;
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
@@ -82,107 +66,79 @@
</nav>
</header>
<div class="container">
<h2 class="mb-4 text-center">Modifier un article</h2>
<!--Erreur titre vide-->
<div id="errorEmpty" class="alert alert-danger d-none">
g Le titre de l'article est obligatoire.
</div>
<!-- Messages DOM -->
<div id="messages" class="mb-3"></div>
<!--Erreur image invalide-->
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, GIF.
</div>
<!--Erreur titre existant-->
<div id="errorExists" class="alert alert-danger d-none">
Ce titre existe déjà. Veuillez en choisir un autre.
</div>
<!--Succès-->
<div id="successMsg" class="alert alert-success d-none">
L'article a été modifié avec succès !
</div>
<!-- Formulaire -->
<form id="editArticleForm">
<!--Titre-->
<!-- Titre -->
<div class="mb-3">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" value="Titre de l'article actuel" placeholder="Modifier le titre">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
</div>
<!--Contenu-->
<!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label>
<textarea id="articleContent" class="form-control" rows="5">Contenu de l'article actuel...</textarea>
<label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent"></textarea>
</div>
<!--Catégorie-->
<!-- Catégorie -->
<div class="mb-4">
<label class="form-label fw-bold">Catégorie de l'article</label>
<input
type="text"
id="articleCategory"
class="form-control"
list="categories"
placeholder="Entrez une catégorie">
<label class="form-label fw-bold">Catégorie</label>
<input type="text" id="articleCategory" class="form-control" list="categories">
<datalist id="categories">
<option value="actualités">
<option value="chien">
<option value="chat">
<option value="boutique">
</datalist>
</div>
<!-- Image actuelle -->
<label class="fw-bold">Image actuelle</label>
<!-- Image -->
<div class="mb-4">
<img src="/blog/categories/images/article1.jpg" alt="Image actuelle" class="preview-img mb-2">
<input type="file" id="articleImage" class="form-control" accept="image/*">
<label class="fw-bold">Image actuelle</label>
<div>
<img id="imagePreview" class="preview-img mb-2 d-none" alt="apercu image">
<input type="file" id="articleImage" class="form-control">
</div>
</div>
<!--Publié-->
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished" checked>
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié (sera publié sur facebook)</label>
</div>
<!--Boutons-->
<!-- Boutons -->
<div class="d-flex gap-3 mt-4">
<a href="../../blog/html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button>
</div>
</form>
</div>
<script>
ClassicEditor
.create(document.querySelector('#articleContent'), {
language: 'fr',
toolbar: [
'heading',
'bold', 'italic', 'underline',
'bulletedList', 'numberedList',
'undo', 'redo'
]
})
</script>
<script src="../js/modifier_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
tinymce.init({
selector: "#articleContent",
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen",
branding: false,
promotion: false,
menubar: false
});
</script>
</body>
</html>

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une catégorie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css">

View File

@@ -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');
// Image valide
if (!imageValide(image)) {
showMessage("danger", "Format d'image invalide. JPG ou PNG uniquement.");
return;
}
}
// Simuler enregistrement
titreExistants.push(titre);
// CRÉATION DE L'ARTICLE
// Enregistrement titre simulé
titresExistants.push(titreLower);
// 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"
});

View File

@@ -1,59 +1,73 @@
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");
// 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";
}, 1500);