Flasksite1

Sleeping

App Files Files Community

Docfile commited on Sep 18

Commit

0e2aa9c

verified ·

1 Parent(s): 77e12b5

Create gestion.html

Browse files

Files changed (1) hide show

templates/gestion.html +622 -0

templates/gestion.html ADDED Viewed

	@@ -0,0 +1,622 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gestion des Dissertations - Mariam AI</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .table-row:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .loading-spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid white;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-white mb-4">🎓 Gestion des Dissertations</h1>
+            <p class="text-white/80 text-lg">Tableau de bord administrateur - Mariam AI</p>
+        </div>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="glass rounded-xl p-6 text-center card-hover">
+                <div class="text-3xl font-bold text-white" id="totalDissertations">-</div>
+                <div class="text-white/80">Total Dissertations</div>
+            </div>
+            <div class="glass rounded-xl p-6 text-center card-hover">
+                <div class="text-3xl font-bold text-white" id="todayCount">-</div>
+                <div class="text-white/80">Aujourd'hui</div>
+            </div>
+            <div class="glass rounded-xl p-6 text-center card-hover">
+                <div class="text-3xl font-bold text-white" id="type1Count">-</div>
+                <div class="text-white/80">Type 1</div>
+            </div>
+            <div class="glass rounded-xl p-6 text-center card-hover">
+                <div class="text-3xl font-bold text-white" id="type2Count">-</div>
+                <div class="text-white/80">Type 2</div>
+            </div>
+        </div>
+        <!-- Search and Filters -->
+        <div class="glass rounded-xl p-6 mb-6">
+            <div class="flex flex-col md:flex-row gap-4 mb-4">
+                <div class="flex-1">
+                    <input type="text"
+                           id="searchInput"
+                           placeholder="Rechercher par question ou cours..."
+                           class="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:border-white/60">
+                </div>
+                <div>
+                    <select id="typeFilter" class="px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none">
+                        <option value="">Tous les types</option>
+                        <option value="type1">Type 1</option>
+                        <option value="type2">Type 2</option>
+                    </select>
+                </div>
+                <div>
+                    <button id="searchBtn" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
+                        🔍 Rechercher
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Dissertations Table -->
+        <div class="glass rounded-xl overflow-hidden">
+            <div class="p-6 border-b border-white/20">
+                <h2 class="text-xl font-semibold text-white">📚 Liste des Dissertations</h2>
+            </div>
+            <div id="loadingIndicator" class="p-8 text-center">
+                <div class="loading-spinner mx-auto mb-4"></div>
+                <p class="text-white/80">Chargement des données...</p>
+            </div>
+            <div id="dissertationsContainer" class="hidden">
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead class="bg-white/10">
+                            <tr class="text-white/90 text-left">
+                                <th class="p-4 font-medium">Date</th>
+                                <th class="p-4 font-medium">Question</th>
+                                <th class="p-4 font-medium">Type</th>
+                                <th class="p-4 font-medium">Cours</th>
+                                <th class="p-4 font-medium">IP Utilisateur</th>
+                                <th class="p-4 font-medium">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="dissertationsTable" class="text-white/80">
+                            <!-- Les lignes seront ajoutées dynamiquement -->
+                        </tbody>
+                    </table>
+                </div>
+                <!-- Pagination -->
+                <div id="paginationContainer" class="p-4 border-t border-white/20 flex justify-between items-center">
+                    <div class="text-white/80">
+                        <span id="paginationInfo">Affichage de 0 à 0 sur 0 résultats</span>
+                    </div>
+                    <div class="flex gap-2">
+                        <button id="prevBtn" class="px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-colors disabled:opacity-50">
+                            ← Précédent
+                        </button>
+                        <span id="pageNumbers" class="flex gap-1"></span>
+                        <button id="nextBtn" class="px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-colors disabled:opacity-50">
+                            Suivant →
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal de détail -->
+    <div id="detailModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+        <div class="glass rounded-xl max-w-4xl max-h-full overflow-y-auto">
+            <div class="p-6 border-b border-white/20 flex justify-between items-center">
+                <h3 class="text-xl font-semibold text-white">📄 Détail de la Dissertation</h3>
+                <button id="closeModal" class="text-white/60 hover:text-white text-2xl">×</button>
+            </div>
+            <div id="modalContent" class="p-6 text-white">
+                <!-- Contenu du modal ajouté dynamiquement -->
+            </div>
+        </div>
+    </div>
+    <!-- Modal de confirmation de suppression -->
+    <div id="deleteModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+        <div class="glass rounded-xl p-6 max-w-md">
+            <h3 class="text-lg font-semibold text-white mb-4">⚠️ Confirmer la suppression</h3>
+            <p class="text-white/80 mb-6">Êtes-vous sûr de vouloir supprimer cette dissertation ? Cette action est irréversible.</p>
+            <div class="flex gap-4 justify-end">
+                <button id="cancelDelete" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors">
+                    Annuler
+                </button>
+                <button id="confirmDelete" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors">
+                    Supprimer
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentPage = 1;
+        let currentSearch = '';
+        let currentType = '';
+        let deleteId = null;
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            loadDissertations();
+            setupEventListeners();
+        });
+        function setupEventListeners() {
+            // Recherche
+            document.getElementById('searchBtn').addEventListener('click', performSearch);
+            document.getElementById('searchInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') performSearch();
+            });
+            // Modal handlers
+            document.getElementById('closeModal').addEventListener('click', closeModal);
+            document.getElementById('cancelDelete').addEventListener('click', closeDeleteModal);
+            document.getElementById('confirmDelete').addEventListener('click', confirmDelete);
+            // Click outside modal to close
+            document.getElementById('detailModal').addEventListener('click', function(e) {
+                if (e.target === this) closeModal();
+            });
+            document.getElementById('deleteModal').addEventListener('click', function(e) {
+                if (e.target === this) closeDeleteModal();
+            });
+        }
+        function performSearch() {
+            currentSearch = document.getElementById('searchInput').value.trim();
+            currentType = document.getElementById('typeFilter').value;
+            currentPage = 1;
+            loadDissertations();
+        }
+        async function loadDissertations() {
+            try {
+                showLoading();
+                const params = new URLSearchParams({
+                    page: currentPage,
+                    per_page: 10,
+                    search: currentSearch,
+                    type: currentType
+                });
+                const response = await fetch(`/api/dissertations?${params}`);
+                const data = await response.json();
+                if (response.ok) {
+                    displayDissertations(data);
+                    updateStats(data);
+                } else {
+                    throw new Error(data.error || 'Erreur lors du chargement');
+                }
+            } catch (error) {
+                console.error('Erreur:', error);
+                showError('Erreur lors du chargement des données');
+            } finally {
+                hideLoading();
+            }
+        }
+        function showLoading() {
+            document.getElementById('loadingIndicator').classList.remove('hidden');
+            document.getElementById('dissertationsContainer').classList.add('hidden');
+        }
+        function hideLoading() {
+            document.getElementById('loadingIndicator').classList.add('hidden');
+            document.getElementById('dissertationsContainer').classList.remove('hidden');
+        }
+        function displayDissertations(data) {
+            const tbody = document.getElementById('dissertationsTable');
+            tbody.innerHTML = '';
+            data.dissertations.forEach(dissertation => {
+                const row = createDissertationRow(dissertation);
+                tbody.appendChild(row);
+            });
+            updatePagination(data);
+        }
+        function createDissertationRow(dissertation) {
+            const row = document.createElement('tr');
+            row.className = 'table-row border-b border-white/10';
+            const date = new Date(dissertation.created_at).toLocaleDateString('fr-FR', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            row.innerHTML = `
+                <td class="p-4">${date}</td>
+                <td class="p-4">
+                    <div class="max-w-xs truncate" title="${dissertation.question}">
+                        ${dissertation.question}
+                    </div>
+                </td>
+                <td class="p-4">
+                    <span class="px-2 py-1 rounded text-xs ${dissertation.dissertation_type === 'type1' ? 'bg-blue-500/20 text-blue-300' : 'bg-green-500/20 text-green-300'}">
+                        ${dissertation.dissertation_type.toUpperCase()}
+                    </span>
+                </td>
+                <td class="p-4">
+                    <div class="max-w-xs truncate" title="${dissertation.course_title || 'Aucun'}">
+                        ${dissertation.course_title || '-'}
+                    </div>
+                </td>
+                <td class="p-4">${dissertation.user_ip}</td>
+                <td class="p-4">
+                    <div class="flex gap-2">
+                        <button onclick="viewDissertation(${dissertation.id})"
+                                class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm transition-colors">
+                            👁️ Voir
+                        </button>
+                        <button onclick="deleteDissertation(${dissertation.id})"
+                                class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm transition-colors">
+                            🗑️ Suppr.
+                        </button>
+                    </div>
+                </td>
+            `;
+            return row;
+        }
+        function updatePagination(data) {
+            const { page, total_pages, total, per_page } = data;
+            const start = (page - 1) * per_page + 1;
+            const end = Math.min(page * per_page, total);
+            document.getElementById('paginationInfo').textContent =
+                `Affichage de ${start} à ${end} sur ${total} résultats`;
+            // Boutons précédent/suivant
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            prevBtn.disabled = page <= 1;
+            nextBtn.disabled = page >= total_pages;
+            prevBtn.onclick = () => { if (page > 1) { currentPage = page - 1; loadDissertations(); } };
+            nextBtn.onclick = () => { if (page < total_pages) { currentPage = page + 1; loadDissertations(); } };
+            // Numéros de page
+            const pageNumbers = document.getElementById('pageNumbers');
+            pageNumbers.innerHTML = '';
+            const maxVisible = 5;
+            let startPage = Math.max(1, page - Math.floor(maxVisible / 2));
+            let endPage = Math.min(total_pages, startPage + maxVisible - 1);
+            if (endPage - startPage + 1 < maxVisible) {
+                startPage = Math.max(1, endPage - maxVisible + 1);
+            }
+            for (let i = startPage; i <= endPage; i++) {
+                const pageBtn = document.createElement('button');
+                pageBtn.className = `px-3 py-2 rounded-lg transition-colors ${
+                    i === page
+                        ? 'bg-white/30 text-white'
+                        : 'bg-white/10 hover:bg-white/20 text-white/80'
+                }`;
+                pageBtn.textContent = i;
+                pageBtn.onclick = () => { currentPage = i; loadDissertations(); };
+                pageNumbers.appendChild(pageBtn);
+            }
+        }
+        function updateStats(data) {
+            // Simuler des stats basiques (vous pouvez créer une API dédiée pour des stats plus précises)
+            document.getElementById('totalDissertations').textContent = data.total;
+            // Compter les types dans la page actuelle (approximation)
+            const type1Count = data.dissertations.filter(d => d.dissertation_type === 'type1').length;
+            const type2Count = data.dissertations.filter(d => d.dissertation_type === 'type2').length;
+            document.getElementById('type1Count').textContent = type1Count;
+            document.getElementById('type2Count').textContent = type2Count;
+            // Compter aujourd'hui (approximation basée sur la page actuelle)
+            const today = new Date().toDateString();
+            const todayCount = data.dissertations.filter(d =>
+                new Date(d.created_at).toDateString() === today
+            ).length;
+            document.getElementById('todayCount').textContent = todayCount;
+        }
+        async function viewDissertation(id) {
+            try {
+                const response = await fetch(`/api/dissertations/${id}`);
+                const data = await response.json();
+                if (response.ok) {
+                    showDissertationModal(data);
+                } else {
+                    throw new Error(data.error || 'Erreur lors du chargement');
+                }
+            } catch (error) {
+                console.error('Erreur:', error);
+                showError('Erreur lors du chargement du détail');
+            }
+        }
+        function showDissertationModal(dissertation) {
+            const content = dissertation.generated_content;
+            const modalContent = document.getElementById('modalContent');
+            modalContent.innerHTML = `
+                <div class="space-y-6">
+                    <!-- Info générales -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-white/10 rounded-lg">
+                        <div>
+                            <strong class="text-white/90">Question:</strong>
+                            <p class="text-white/80 mt-1">${dissertation.question}</p>
+                        </div>
+                        <div>
+                            <strong class="text-white/90">Type:</strong>
+                            <span class="ml-2 px-2 py-1 rounded text-xs ${
+                                dissertation.dissertation_type === 'type1'
+                                    ? 'bg-blue-500/20 text-blue-300'
+                                    : 'bg-green-500/20 text-green-300'
+                            }">
+                                ${dissertation.dissertation_type.toUpperCase()}
+                            </span>
+                        </div>
+                        <div>
+                            <strong class="text-white/90">Cours:</strong>
+                            <p class="text-white/80 mt-1">${dissertation.course_title || 'Aucun cours spécifique'}</p>
+                        </div>
+                        <div>
+                            <strong class="text-white/90">Date:</strong>
+                            <p class="text-white/80 mt-1">${new Date(dissertation.created_at).toLocaleString('fr-FR')}</p>
+                        </div>
+                        <div>
+                            <strong class="text-white/90">IP Utilisateur:</strong>
+                            <p class="text-white/80 mt-1">${dissertation.user_ip}</p>
+                        </div>
+                        <div>
+                            <strong class="text-white/90">User Agent:</strong>
+                            <p class="text-white/80 mt-1 text-xs truncate" title="${dissertation.user_agent}">${dissertation.user_agent}</p>
+                        </div>
+                    </div>
+                    <!-- Contenu de la dissertation -->
+                    <div class="bg-white/5 rounded-lg p-4">
+                        <h4 class="text-lg font-semibold text-white mb-4">📝 Contenu de la Dissertation</h4>
+                        <!-- Introduction -->
+                        <div class="mb-6">
+                            <h5 class="font-medium text-white/90 mb-2">Introduction</h5>
+                            <div class="bg-white/10 rounded p-3 text-white/80 text-sm leading-relaxed">
+                                ${content.introduction}
+                            </div>
+                        </div>
+                        <!-- Parties -->
+                        <div class="space-y-6">
+                            ${content.parties.map((partie, index) => `
+                                <div class="mb-6">
+                                    <h5 class="font-medium text-white/90 mb-2">Partie ${index + 1}</h5>
+                                    <!-- Chapeau -->
+                                    <div class="bg-blue-500/20 rounded p-3 mb-3">
+                                        <p class="text-blue-200 text-sm font-medium mb-1">Chapeau:</p>
+                                        <p class="text-white/80 text-sm">${partie.chapeau}</p>
+                                    </div>
+                                    <!-- Arguments -->
+                                    <div class="space-y-2">
+                                        ${partie.arguments.map((arg, argIndex) => `
+                                            <div class="bg-white/10 rounded p-3">
+                                                <p class="text-green-300 text-xs mb-1">Argument ${argIndex + 1}:</p>
+                                                <p class="text-white/80 text-sm leading-relaxed">${arg.paragraphe_argumentatif}</p>
+                                            </div>
+                                        `).join('')}
+                                    </div>
+                                    <!-- Transition -->
+                                    ${partie.transition ? `
+                                        <div class="bg-purple-500/20 rounded p-3 mt-3">
+                                            <p class="text-purple-200 text-sm font-medium mb-1">Transition:</p>
+                                            <p class="text-white/80 text-sm">${partie.transition}</p>
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            `).join('')}
+                        </div>
+                        <!-- Conclusion -->
+                        <div class="mt-6">
+                            <h5 class="font-medium text-white/90 mb-2">Conclusion</h5>
+                            <div class="bg-white/10 rounded p-3 text-white/80 text-sm leading-relaxed">
+                                ${content.conclusion}
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Actions -->
+                    <div class="flex gap-4 pt-4">
+                        <button onclick="generatePDF(${dissertation.id})"
+                                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors">
+                            📄 Générer PDF
+                        </button>
+                        <button onclick="copyToClipboard(${JSON.stringify(content).replace(/"/g, '&quot;')})"
+                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
+                            📋 Copier le texte
+                        </button>
+                    </div>
+                </div>
+            `;
+            document.getElementById('detailModal').classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        function closeModal() {
+            document.getElementById('detailModal').classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+        function deleteDissertation(id) {
+            deleteId = id;
+            document.getElementById('deleteModal').classList.remove('hidden');
+        }
+        function closeDeleteModal() {
+            document.getElementById('deleteModal').classList.add('hidden');
+            deleteId = null;
+        }
+        async function confirmDelete() {
+            if (!deleteId) return;
+            try {
+                const response = await fetch(`/api/dissertations/${deleteId}`, {
+                    method: 'DELETE'
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    showSuccess('Dissertation supprimée avec succès');
+                    closeDeleteModal();
+                    loadDissertations(); // Recharger la liste
+                } else {
+                    throw new Error(data.error || 'Erreur lors de la suppression');
+                }
+            } catch (error) {
+                console.error('Erreur:', error);
+                showError('Erreur lors de la suppression');
+            }
+        }
+        function generatePDF(dissertationId) {
+            // Placeholder pour la génération PDF
+            showInfo('Fonctionnalité PDF en développement');
+        }
+        function copyToClipboard(content) {
+            const textContent = formatDissertationText(content);
+            navigator.clipboard.writeText(textContent).then(() => {
+                showSuccess('Texte copié dans le presse-papiers');
+            }).catch(() => {
+                showError('Erreur lors de la copie');
+            });
+        }
+        function formatDissertationText(content) {
+            let text = `DISSERTATION DE PHILOSOPHIE\n`;
+            text += `Sujet: ${content.sujet}\n`;
+            text += `Professeur: ${content.prof}\n\n`;
+            text += `INTRODUCTION\n`;
+            text += `${content.introduction}\n\n`;
+            content.parties.forEach((partie, index) => {
+                text += `PARTIE ${index + 1}\n`;
+                text += `${partie.chapeau}\n\n`;
+                partie.arguments.forEach((arg, argIndex) => {
+                    text += `${arg.paragraphe_argumentatif}\n\n`;
+                });
+                if (partie.transition) {
+                    text += `${partie.transition}\n\n`;
+                }
+            });
+            text += `CONCLUSION\n`;
+            text += `${content.conclusion}\n`;
+            return text;
+        }
+        function showSuccess(message) {
+            showNotification(message, 'bg-green-500');
+        }
+        function showError(message) {
+            showNotification(message, 'bg-red-500');
+        }
+        function showInfo(message) {
+            showNotification(message, 'bg-blue-500');
+        }
+        function showNotification(message, bgColor) {
+            const notification = document.createElement('div');
+            notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 fade-in`;
+            notification.textContent = message;
+            document.body.appendChild(notification);
+            setTimeout(() => {
+                notification.remove();
+            }, 3000);
+        }
+    </script>
+</body>
+</html>