From 50b3904af6989942e3a1c5375ad7ba8dc2390fa5 Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Wed, 10 Dec 2025 19:24:00 +0100
Subject: [PATCH] mise a jour categorie (liste deroulante et remplissage
 obligatoire) + mise a jour checkbox + insertion de TinyMCE (pas finis)

---
 blog/html/ajouter_article.html | 62 +++++++++++++++++++++-------------
 blog/js/ajouter_article.js     | 29 ++++++++++++++--
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html
index 3540f42..0da4488 100644
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -100,18 +100,19 @@
     <div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
 
         <!-- Catégorie -->
-<div class="mb-3">
-    <label class="form-label fw-bold">Catégorie de l'article</label>
-    <input list="categories" id="articleCategory" class="form-control" placeholder="Entrez une catégorie">
-
-    <datalist id="categories">
-        <option value="actualités">
-        <option value="chien">
-        <option value="chat">
-        <option value="boutique">
-    </datalist>
+    <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>
+        <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>
@@ -137,7 +138,7 @@
         <!--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 blog)</label>
+        <label class="form-check-label" for="articlePublished">Publié (sera publié sur le facebook)</label>
         </div>
 
 
@@ -152,25 +153,40 @@
 
 <script src="../js/ajouter_article.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script>
-  
-ClassicEditor
+<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+
+  <script>
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
+});
+</script>
+
+
+
+
+
+
+
+    
+</body>
+</html>
+
+
+
+<!--ClassicEditor
   .create(document.querySelector('#articleContent'), {
     language: 'fr',
     toolbar: [
       'heading',
-      'bold', 'italic', 'underline',
+      'bold', 'italic', 
       'bulletedList', 'numberedList',
       'undo', 'redo'
     ]
   })
   .catch(error => {
     console.error(error);
-  });
-
-
-
-</script>
-    
-</body>
-</html>
\ No newline at end of file
+  });
\ No newline at end of file
diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 70c5f93..633d300 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -1,7 +1,6 @@
 const form = document.getElementById('ajouterArticleForm');
 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');
 
@@ -18,6 +17,8 @@ form.addEventListener('submit', function(e) {
 
     const titre = titleField.value.trim().toLowerCase();
     const fichierImage = imgField.files[0];
+    const contenu = tinymce.get("articleContent").getContent();  // ← CORRECTION IMPORTANTE
+    const categorie = categoryField.value;
 
     // Reset messages
     errorEmpty.classList.add('d-none');
@@ -25,8 +26,16 @@ form.addEventListener('submit', function(e) {
     errorExists.classList.add('d-none');
     successMsg.classList.add('d-none');
 
+    // Catégorie obligatoire
+    if (categorie === "") {
+        errorEmpty.textContent = "Veuillez choisir une catégorie.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Titre obligatoire
     if (titre === "") {
+        errorEmpty.textContent = "Le titre de l'article est obligatoire.";
         errorEmpty.classList.remove('d-none');
         return;
     }
@@ -37,6 +46,13 @@ form.addEventListener('submit', function(e) {
         return;
     }
 
+    // Contenu obligatoire
+    if (contenu.trim() === "") {
+        errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Image invalide
     if (fichierImage) {
         const validFormats = ['image/jpeg', 'image/png'];
@@ -52,8 +68,17 @@ form.addEventListener('submit', function(e) {
     // Succès
     successMsg.classList.remove('d-none');
 
-    // Redirection après 1 seconde
+    // Redirection
     setTimeout(() => {
         window.location.href = "../html/liste_categorie_article.html";
     }, 1000);
 });
+
+// TinyMCE
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen',
+});