Files
Mangarr/assets/vue/app/domain/system/presentation/components/ChaptersStatusCard.vue
ext.jeremy.guillot@maxicoffee.domains ca8791cc0d feat(system): page Status avec endpoint API Platform et composants Vue
- Nouveau domaine System/Domain/Model/SystemStatus (value object)
- QueryHandler agrégeant métriques mangas, chapitres, jobs (global/24h/7j), stockage et sources
- Endpoint GET /api/system/status via API Platform (singleton)
- Calcul de l'espace disque par RecursiveDirectoryIterator sur public/images
- Page Vue /system/status avec 6 cards (Mangas, Chapitres, Jobs, Stockage, Sources, Système)
- Nettoyage du router : suppression des PlaceholderComponent et routes placeholder
- Sidebar : suppression des entrées sans page réelle
2026-03-17 22:04:48 +01:00

37 lines
1.3 KiB
Vue

<template>
<StatusCard title="Chapitres" :icon="DocumentTextIcon">
<div class="flex items-baseline gap-2 mb-3">
<span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalChapters }}</span>
<span class="text-sm text-gray-500">total</span>
</div>
<div class="mb-1 flex justify-between text-xs text-gray-500">
<span>{{ status.downloadedChapters }} téléchargés</span>
<span>{{ downloadedPercent }}%</span>
</div>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
class="h-full bg-green-500 rounded-full transition-all"
:style="{ width: downloadedPercent + '%' }" />
</div>
<p class="mt-1 text-xs text-gray-400">{{ status.pendingChapters }} en attente</p>
</StatusCard>
</template>
<script setup>
import { computed } from 'vue';
import { DocumentTextIcon } from '@heroicons/vue/24/outline';
import StatusCard from './StatusCard.vue';
const props = defineProps({
status: {
type: Object,
required: true,
},
});
const downloadedPercent = computed(() => {
if (!props.status.totalChapters) return 0;
return Math.round((props.status.downloadedChapters / props.status.totalChapters) * 100);
});
</script>