|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Centre de Gestion - Admin</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#eff6ff', |
|
|
500: '#3b82f6', |
|
|
600: '#2563eb', |
|
|
700: '#1d4ed8', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div x-data="adminApp()" class="min-h-screen"> |
|
|
|
|
|
<header class="bg-white shadow-sm border-b border-gray-200"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-cogs text-primary-600 text-2xl mr-3"></i> |
|
|
<h1 class="text-xl font-semibold text-gray-900">Centre de Gestion</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button @click="refreshData()" |
|
|
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> |
|
|
<i class="fas fa-sync-alt mr-2" :class="{'animate-spin': loading}"></i> |
|
|
Actualiser |
|
|
</button> |
|
|
<a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> |
|
|
<i class="fas fa-home mr-2"></i> |
|
|
Retour à l'accueil |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-tasks text-primary-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Total des tâches</dt> |
|
|
<dd class="text-lg font-medium text-gray-900" x-text="stats.total_tasks"></dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-check-circle text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Tâches terminées</dt> |
|
|
<dd class="text-lg font-medium text-gray-900" x-text="stats.completed_tasks"></dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Tâches en erreur</dt> |
|
|
<dd class="text-lg font-medium text-gray-900" x-text="stats.error_tasks"></dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-file-pdf text-red-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Fichiers PDF</dt> |
|
|
<dd class="text-lg font-medium text-gray-900" x-text="stats.pdf_files"></dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg mb-8"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
<i class="fas fa-server mr-2"></i> |
|
|
État du système |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="w-3 h-3 rounded-full" :class="stats.latex_installed ? 'bg-green-400' : 'bg-red-400'"></div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">LaTeX</p> |
|
|
<p class="text-sm text-gray-500" x-text="stats.latex_installed ? 'Installé' : 'Non installé'"></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-images text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Images utilisateur</p> |
|
|
<p class="text-sm text-gray-500" x-text="stats.user_images + ' fichiers'"></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-clock text-yellow-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Tâches en cours</p> |
|
|
<p class="text-sm text-gray-500" x-text="stats.pending_tasks + ' actives'"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900"> |
|
|
<i class="fas fa-list mr-2"></i> |
|
|
Gestion des tâches |
|
|
</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<select x-model="statusFilter" class="block w-40 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"> |
|
|
<option value="">Tous les statuts</option> |
|
|
<option value="completed">Terminées</option> |
|
|
<option value="error">En erreur</option> |
|
|
<option value="processing">En cours</option> |
|
|
<option value="pending">En attente</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div x-show="loading" class="flex justify-center items-center py-8"> |
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div> |
|
|
<span class="ml-2 text-gray-600">Chargement...</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div x-show="!loading" class="overflow-hidden"> |
|
|
<template x-if="filteredTasks.length === 0"> |
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-inbox text-gray-400 text-4xl mb-4"></i> |
|
|
<p class="text-gray-500">Aucune tâche trouvée</p> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<div x-show="filteredTasks.length > 0" class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Tâche |
|
|
</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Statut |
|
|
</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Style |
|
|
</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Fichiers |
|
|
</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Date |
|
|
</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
|
Actions |
|
|
</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<template x-for="task in filteredTasks" :key="task.id"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-file-alt text-gray-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900" x-text="task.id.substring(0, 8) + '...'"></div> |
|
|
<div class="text-sm text-gray-500" x-text="task.first_filename"></div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" |
|
|
:class="{ |
|
|
'bg-green-100 text-green-800': task.status === 'completed', |
|
|
'bg-red-100 text-red-800': task.status === 'error', |
|
|
'bg-yellow-100 text-yellow-800': task.status === 'processing', |
|
|
'bg-gray-100 text-gray-800': task.status === 'pending' |
|
|
}"> |
|
|
<template x-if="task.status === 'completed'"> |
|
|
<span><i class="fas fa-check mr-1"></i>Terminée</span> |
|
|
</template> |
|
|
<template x-if="task.status === 'error'"> |
|
|
<span><i class="fas fa-exclamation-triangle mr-1"></i>Erreur</span> |
|
|
</template> |
|
|
<template x-if="task.status === 'processing'"> |
|
|
<span><i class="fas fa-spinner fa-spin mr-1"></i>En cours</span> |
|
|
</template> |
|
|
<template x-if="task.status === 'pending'"> |
|
|
<span><i class="fas fa-clock mr-1"></i>En attente</span> |
|
|
</template> |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex px-2 py-1 text-xs font-medium rounded-md" |
|
|
:class="{ |
|
|
'bg-purple-100 text-purple-800': task.style === 'colorful', |
|
|
'bg-blue-100 text-blue-800': task.style === 'light' |
|
|
}" |
|
|
x-text="task.style === 'colorful' ? 'Coloré' : 'Léger'"> |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span x-show="task.file_count.images > 0" class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"> |
|
|
<i class="fas fa-image mr-1"></i> |
|
|
<span x-text="task.file_count.images"></span> |
|
|
</span> |
|
|
<span x-show="task.file_count.pdfs > 0" class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-red-100 text-red-800"> |
|
|
<i class="fas fa-file-pdf mr-1"></i> |
|
|
<span x-text="task.file_count.pdfs"></span> |
|
|
</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<span x-text="task.time_started_formatted"></span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<template x-if="task.status === 'completed' && task.pdf_filename"> |
|
|
<a :href="'/download/' + task.id" |
|
|
class="text-primary-600 hover:text-primary-900 flex items-center"> |
|
|
<i class="fas fa-download mr-1"></i> |
|
|
PDF |
|
|
</a> |
|
|
</template> |
|
|
<button @click="showTaskDetails(task)" |
|
|
class="text-indigo-600 hover:text-indigo-900 flex items-center"> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
Détails |
|
|
</button> |
|
|
<button @click="deleteTask(task.id)" |
|
|
class="text-red-600 hover:text-red-900 flex items-center"> |
|
|
<i class="fas fa-trash mr-1"></i> |
|
|
Supprimer |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</template> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div x-show="showModal" |
|
|
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" |
|
|
x-transition:enter="ease-out duration-300" |
|
|
x-transition:enter-start="opacity-0" |
|
|
x-transition:enter-end="opacity-100" |
|
|
x-transition:leave="ease-in duration-200" |
|
|
x-transition:leave-start="opacity-100" |
|
|
x-transition:leave-end="opacity-0"> |
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white"> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Détails de la tâche</h3> |
|
|
<button @click="showModal = false" |
|
|
class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<template x-if="selectedTask"> |
|
|
<div class="space-y-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">ID de la tâche</label> |
|
|
<p class="text-sm text-gray-900 font-mono bg-gray-100 p-2 rounded" x-text="selectedTask.id"></p> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Statut</label> |
|
|
<span class="inline-flex px-2 py-1 text-sm font-semibold rounded-full" |
|
|
:class="{ |
|
|
'bg-green-100 text-green-800': selectedTask.status === 'completed', |
|
|
'bg-red-100 text-red-800': selectedTask.status === 'error', |
|
|
'bg-yellow-100 text-yellow-800': selectedTask.status === 'processing', |
|
|
'bg-gray-100 text-gray-800': selectedTask.status === 'pending' |
|
|
}" |
|
|
x-text="selectedTask.status"> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div x-show="selectedTask.error" class="p-4 bg-red-50 border border-red-200 rounded-md"> |
|
|
<label class="block text-sm font-medium text-red-700 mb-1">Message d'erreur</label> |
|
|
<p class="text-sm text-red-600" x-text="selectedTask.error"></p> |
|
|
</div> |
|
|
|
|
|
<div x-show="selectedTask.response" class="p-4 bg-gray-50 border border-gray-200 rounded-md"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Réponse</label> |
|
|
<p class="text-sm text-gray-600" x-text="selectedTask.response"></p> |
|
|
</div> |
|
|
|
|
|
<div x-show="selectedTask.user_images && selectedTask.user_images.length > 0"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Images utilisateur</label> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2"> |
|
|
<template x-for="image in selectedTask.user_images" :key="image"> |
|
|
<div class="relative group"> |
|
|
<img :src="'/user_images/' + image" |
|
|
:alt="image" |
|
|
class="w-full h-24 object-cover rounded-md border border-gray-300"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity rounded-md"></div> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div x-show="showDeleteModal" |
|
|
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" |
|
|
x-transition:enter="ease-out duration-300" |
|
|
x-transition:enter-start="opacity-0" |
|
|
x-transition:enter-end="opacity-100" |
|
|
x-transition:leave="ease-in duration-200" |
|
|
x-transition:leave-start="opacity-100" |
|
|
x-transition:leave-end="opacity-0"> |
|
|
<div class="relative top-32 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"> |
|
|
<div class="mt-3 text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100"> |
|
|
<i class="fas fa-exclamation-triangle text-red-600"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-2">Supprimer la tâche</h3> |
|
|
<div class="mt-2 px-7 py-3"> |
|
|
<p class="text-sm text-gray-500"> |
|
|
Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action supprimera tous les fichiers associés et ne peut pas être annulée. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-3 mt-4"> |
|
|
<button @click="showDeleteModal = false" |
|
|
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors"> |
|
|
Annuler |
|
|
</button> |
|
|
<button @click="confirmDeleteTask()" |
|
|
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"> |
|
|
Supprimer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function adminApp() { |
|
|
return { |
|
|
tasks: [], |
|
|
stats: { |
|
|
total_tasks: 0, |
|
|
completed_tasks: 0, |
|
|
error_tasks: 0, |
|
|
pending_tasks: 0, |
|
|
pdf_files: 0, |
|
|
user_images: 0, |
|
|
latex_installed: false |
|
|
}, |
|
|
loading: true, |
|
|
showModal: false, |
|
|
showDeleteModal: false, |
|
|
selectedTask: null, |
|
|
taskToDelete: null, |
|
|
statusFilter: '', |
|
|
|
|
|
async init() { |
|
|
await this.refreshData(); |
|
|
|
|
|
setInterval(() => { |
|
|
this.refreshData(false); |
|
|
}, 30000); |
|
|
}, |
|
|
|
|
|
async refreshData(showLoading = true) { |
|
|
if (showLoading) this.loading = true; |
|
|
|
|
|
try { |
|
|
const [tasksResponse, statsResponse] = await Promise.all([ |
|
|
fetch('/admin/api/tasks'), |
|
|
fetch('/admin/api/stats') |
|
|
]); |
|
|
|
|
|
this.tasks = await tasksResponse.json(); |
|
|
this.stats = await statsResponse.json(); |
|
|
} catch (error) { |
|
|
console.error('Erreur lors du rafraîchissement des données:', error); |
|
|
} finally { |
|
|
if (showLoading) this.loading = false; |
|
|
} |
|
|
}, |
|
|
|
|
|
showTaskDetails(task) { |
|
|
this.selectedTask = task; |
|
|
this.showModal = true; |
|
|
}, |
|
|
|
|
|
deleteTask(taskId) { |
|
|
this.taskToDelete = taskId; |
|
|
this.showDeleteModal = true; |
|
|
}, |
|
|
|
|
|
async confirmDeleteTask() { |
|
|
if (!this.taskToDelete) return; |
|
|
|
|
|
try { |
|
|
const response = await fetch(`/admin/delete_task/${this.taskToDelete}`, { |
|
|
method: 'POST' |
|
|
}); |
|
|
|
|
|
if (response.ok) { |
|
|
await this.refreshData(); |
|
|
this.showDeleteModal = false; |
|
|
this.taskToDelete = null; |
|
|
} else { |
|
|
const error = await response.json(); |
|
|
alert('Erreur lors de la suppression: ' + error.error); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la suppression:', error); |
|
|
alert('Erreur lors de la suppression de la tâche'); |
|
|
} |
|
|
}, |
|
|
|
|
|
get filteredTasks() { |
|
|
if (!this.statusFilter) return this.tasks; |
|
|
return this.tasks.filter(task => task.status === this.statusFilter); |
|
|
} |
|
|
}; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
