279 lines
10 KiB
Vue
279 lines
10 KiB
Vue
<template>
|
|
<!-- États de chargement et d'erreur -->
|
|
<div v-if="loading" class="flex justify-center items-center h-64">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div v-else-if="currentManga" class="relative">
|
|
<!-- Bannière avec image de fond -->
|
|
<div class="shadow-lg text-white">
|
|
<div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${currentManga.imageUrl}')` }">
|
|
<div class="absolute inset-0 bg-black opacity-50"></div>
|
|
<div class="absolute inset-0 flex flex-row justify-center p-4">
|
|
<!-- Image de couverture -->
|
|
<div class="hidden mr-12 xl:block 2xl:block">
|
|
<img :src="currentManga.thumbnailUrl" :alt="currentManga.title" class="max-w-72 max-h-72 ml-4">
|
|
</div>
|
|
|
|
<!-- Informations du manga -->
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center mb-4">
|
|
<BookmarkIcon class="h-8 w-8 text-white" />
|
|
<h1 class="text-3xl font-bold ml-4">{{ currentManga.title }}</h1>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<span class="mr-4">{{ currentManga.year }}</span>
|
|
<span>Chapitres: {{ currentManga.totalChapters }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<FolderIcon class="h-6 w-6 text-gray-400 mr-2" />
|
|
<span class="truncate">/media/mangas/{{ currentManga.title }} ({{ currentManga.year }})</span>
|
|
<span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ currentManga.status || 'Terminé' }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<template v-if="currentManga.tags?.length">
|
|
<template v-for="(tag, index) in currentManga.tags.slice(0, 5)" :key="index">
|
|
<span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ tag }}</span>
|
|
</template>
|
|
<span v-if="currentManga.tags.length > 5" class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="flex items-center mb-2">
|
|
<HeartIcon class="h-6 w-6 text-red-500 mr-2" />
|
|
<span>{{ currentManga.rating }}</span>
|
|
</div>
|
|
<p>{{ currentManga.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liste des volumes et chapitres -->
|
|
<div class="p-4">
|
|
<div v-for="volume in volumes" :key="volume.number" class="mb-4">
|
|
<div class="bg-white rounded-sm shadow">
|
|
<!-- En-tête du volume -->
|
|
<div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
|
|
<!-- Partie gauche -->
|
|
<div class="flex items-center space-x-4">
|
|
<BookmarkIcon class="h-8 w-8 text-gray-500" />
|
|
<h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
|
|
<div class="flex items-center w-16">
|
|
<span :class="[
|
|
'px-2 py-1 text-sm rounded w-full text-center text-white',
|
|
{
|
|
'bg-red-500': volume.progress === '0/0',
|
|
'bg-yellow-500': volume.progress !== volume.chapters.length + '/0',
|
|
'bg-green-500': volume.progress === volume.chapters.length + '/0'
|
|
}
|
|
]">
|
|
{{ volume.progress }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton toggle -->
|
|
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<component
|
|
:is="isVolumeOpen(volume.number) ? ChevronUpIcon : ChevronDownIcon"
|
|
class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
|
@click="toggleVolume(volume)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Actions du volume -->
|
|
<div class="flex space-x-2 text-xl text-bold">
|
|
<button class="w-8 text-center" @click="searchVolume(volume)">
|
|
<MagnifyingGlassIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
|
|
</button>
|
|
<button class="w-8 text-center" @click="downloadVolume(volume)">
|
|
<ArrowDownTrayIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liste des chapitres -->
|
|
<div v-show="isVolumeOpen(volume.number)" class="p-4 border-t">
|
|
<table class="min-w-full table-auto">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 text-left">#</th>
|
|
<th class="px-4 py-2 text-left">Titre</th>
|
|
<th class="px-4 py-2 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="chapter in volume.chapters"
|
|
:key="chapter.id"
|
|
class="border-t hover:bg-green-100">
|
|
<td class="px-4 py-2" :class="{ 'text-green-500': chapter.isDownloaded }">
|
|
{{ String(chapter.number).padStart(2, '0') }}
|
|
</td>
|
|
<td class="px-4 py-2 w-full text-left">
|
|
<router-link
|
|
v-if="chapter.isDownloaded"
|
|
:to="{ name: 'reader', params: { mangaSlug: currentManga.slug, chapterNumber: chapter.number, pageNumber: 1 }}"
|
|
class="hover:text-green-500">
|
|
{{ chapter.title || 'Sans titre' }}
|
|
</router-link>
|
|
<span v-else>{{ chapter.title || 'Sans titre' }}</span>
|
|
</td>
|
|
<td class="px-4 py-2 flex justify-end gap-2">
|
|
<button v-if="!chapter.isDownloaded"
|
|
@click="searchChapter(chapter)"
|
|
class="text-gray-500 hover:text-green-500">
|
|
<MagnifyingGlassIcon class="h-5 w-5" />
|
|
</button>
|
|
<button v-else
|
|
@click="deleteChapter(chapter)"
|
|
class="text-gray-500 hover:text-green-500">
|
|
<XMarkIcon class="h-5 w-5" />
|
|
</button>
|
|
<button @click="downloadChapter(chapter)"
|
|
class="text-gray-500 hover:text-green-500">
|
|
<ArrowDownTrayIcon class="h-5 w-5" />
|
|
</button>
|
|
<button @click="hideChapter(chapter)"
|
|
class="text-gray-500 hover:text-green-500">
|
|
<TrashIcon class="h-5 w-5" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMangaStore } from '../../application/store/mangaStore';
|
|
import { storeToRefs } from 'pinia';
|
|
import {
|
|
BookmarkIcon,
|
|
FolderIcon,
|
|
HeartIcon,
|
|
ChevronUpIcon,
|
|
ChevronDownIcon,
|
|
MagnifyingGlassIcon,
|
|
ArrowDownTrayIcon,
|
|
XMarkIcon,
|
|
TrashIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useMangaStore();
|
|
const { currentManga, chapters, loading, error } = storeToRefs(store);
|
|
|
|
// Map réactif pour stocker l'état d'ouverture des volumes
|
|
const openVolumes = ref(new Map());
|
|
|
|
// Organise les chapitres par volumes
|
|
const volumes = computed(() => {
|
|
if (!chapters.value) return [];
|
|
|
|
const chaptersArray = Array.isArray(chapters.value) ? chapters.value :
|
|
(chapters.value.items ? chapters.value.items : []);
|
|
|
|
const volumeMap = new Map();
|
|
|
|
chaptersArray.forEach(chapter => {
|
|
const volumeNumber = chapter.volume || 'Unknown';
|
|
if (!volumeMap.has(volumeNumber)) {
|
|
// Initialiser l'état d'ouverture si ce n'est pas déjà fait
|
|
if (!openVolumes.value.has(volumeNumber)) {
|
|
openVolumes.value.set(volumeNumber, volumeNumber === chaptersArray[0]?.volume);
|
|
}
|
|
|
|
volumeMap.set(volumeNumber, {
|
|
number: volumeNumber,
|
|
progress: '0/0',
|
|
chapters: []
|
|
});
|
|
}
|
|
volumeMap.get(volumeNumber).chapters.push({
|
|
...chapter,
|
|
isDownloaded: Boolean(chapter.cbzPath)
|
|
});
|
|
});
|
|
|
|
// Calcul du progrès pour chaque volume
|
|
for (const volume of volumeMap.values()) {
|
|
const downloaded = volume.chapters.filter(c => c.isDownloaded).length;
|
|
const total = volume.chapters.length;
|
|
volume.progress = `${downloaded}/${total}`;
|
|
}
|
|
|
|
return Array.from(volumeMap.values()).sort((a, b) => b.number - a.number);
|
|
});
|
|
|
|
const isVolumeOpen = (volumeNumber) => {
|
|
return openVolumes.value.get(volumeNumber) || false;
|
|
};
|
|
|
|
const toggleVolume = (volume) => {
|
|
openVolumes.value.set(volume.number, !openVolumes.value.get(volume.number));
|
|
};
|
|
|
|
const loadData = async () => {
|
|
const mangaId = route.params.id;
|
|
await Promise.all([
|
|
store.fetchMangaDetails(mangaId),
|
|
store.fetchMangaChapters(mangaId)
|
|
]);
|
|
};
|
|
|
|
// Actions sur les chapitres et volumes
|
|
const searchChapter = async (chapter) => {
|
|
// TODO: Implémenter la recherche de chapitre
|
|
console.log('Recherche du chapitre:', chapter.id);
|
|
};
|
|
|
|
const downloadChapter = async (chapter) => {
|
|
// TODO: Implémenter le téléchargement du chapitre
|
|
console.log('Téléchargement du chapitre:', chapter.id);
|
|
};
|
|
|
|
const deleteChapter = async (chapter) => {
|
|
// TODO: Implémenter la suppression du chapitre
|
|
console.log('Suppression du chapitre:', chapter.id);
|
|
};
|
|
|
|
const hideChapter = async (chapter) => {
|
|
// TODO: Implémenter le masquage du chapitre
|
|
console.log('Masquage du chapitre:', chapter.id);
|
|
};
|
|
|
|
const searchVolume = async (volume) => {
|
|
// TODO: Implémenter la recherche du volume
|
|
console.log('Recherche du volume:', volume.number);
|
|
};
|
|
|
|
const downloadVolume = async (volume) => {
|
|
// TODO: Implémenter le téléchargement du volume
|
|
console.log('Téléchargement du volume:', volume.number);
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
store.clearCurrentManga();
|
|
});
|
|
</script> |