Update templates/philosophie.html

templates/philosophie.html

@@ -7,6 +7,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
@@ -19,6 +21,9 @@
             outline: none;
             font-size: 15px;
             background-color: #f1f1f1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
         .active, .collapsible:hover {
@@ -117,7 +122,7 @@
                             </select>
                             <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
                                 <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-11.414z" clip-rule="evenodd" />
                                 </svg>
                             </div>
                         </div>
@@ -196,9 +201,9 @@
         </div>
     </div>
 
-  <script>
+<script>
     $(document).ready(function() {
-        // Configuration de marked avec support de la syntaxe GFM
+        // Configuration de marked
         marked.setOptions({
             breaks: true,
             gfm: true,
@@ -208,6 +213,8 @@
             smartypants: true
         });
 
+        moment.locale('fr'); // Configuration de moment.js en français
+
         // Configuration des notifications
         const Toast = Swal.mixin({
             toast: true,
@@ -220,6 +227,8 @@
             }
         });
 
+
+
         // Animation des boutons
         function addButtonAnimation(buttonId) {
             $(`#${buttonId}`).on('mousedown', function() {
@@ -319,10 +328,28 @@
                 return;
             }
 
-            // Animation de chargement (inchangée)
+            // Animation de chargement sophistiquée
                 Swal.fire({
                     title: 'Génération en cours',
-                    // ... (reste du code inchangé)
+                    html: `
+                        <div class="space-y-4">
+                            <div class="flex justify-center">
+                                <div class="w-16 h-16 relative">
+                                    <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
+                                    <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
+                                </div>
+                            </div>
+                            <div class="text-gray-600">
+                                <p class="animate-pulse">Analyse philosophique en cours...</p>
+                                <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
+                            </div>
+                        </div>
+                    `,
+                    allowOutsideClick: false,
+                    showConfirmButton: false,
+                    customClass: {
+                        popup: 'rounded-2xl'
+                    }
                 });
 
             const data = {
@@ -377,7 +404,22 @@
 
         }
 
-        // Fonction pour afficher les dissertations sauvegardées (avec sections repliables)
+
+
+          // Fonction pour supprimer une dissertation sauvegardée
+        function deleteDissertation(index) {
+             let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+            savedDissertations.splice(index, 1);
+            localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
+            updateSavedDissertationsList();
+            Toast.fire({
+                icon: 'success',
+                title: 'Dissertation supprimée avec succès'
+            });
+
+        }
+
+        // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression)
         function updateSavedDissertationsList() {
             const dissertationsList = $('#dissertations-list');
             dissertationsList.empty(); // Vider la liste actuelle
@@ -391,17 +433,32 @@
 
 
 
-            savedDissertations.forEach(diss => {
+            savedDissertations.forEach((diss, index) => {
+                 const date = moment(diss.timestamp).format('LLL');
 
-                const collapsible = $('<button class="collapsible rounded-xl border border-gray-100"></button>').text(diss.title);
+                const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`);
+                const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
                 const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML
+
+                collapsible.append(deleteButton); // Ajouter le bouton supprimer
                 dissertationsList.append(collapsible, content);
 
                  // Gestionnaire d'événement pour chaque section repliable
-                collapsible.click(function() {
+                collapsible.click(function(event) {
+                    // Empêcher la propagation de l'événement click sur le bouton "Supprimer"
+                   if (event.target === deleteButton[0]) {
+                       return;
+                    }
+
                     content.slideToggle("fast");
                     collapsible.toggleClass("active");
                 });
+
+                deleteButton.click(function() {
+                    // Supprimer la dissertation correspondante
+                    deleteDissertation(index);
+
+                });
             });
         }
 
@@ -476,6 +533,5 @@
     });
                       </script>
 
-      
 </body>
 </html>