feat: initial project

src/views/DownloadsView.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="max-w-4xl mx-auto px-8 py-8">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-8">
+      <div class="flex items-center gap-4">
+        <button @click="$router.push('/')"
+                class="text-[#5a7a94] text-xs tracking-widest hover:text-[#e8513a] transition-colors cursor-pointer">
+          ← CATALOGUE
+        </button>
+        <h1 class="text-xl font-black text-white font-sans">Téléchargements</h1>
+      </div>
+      <div class="flex items-center gap-3">
+        <!-- Indicateur de polling -->
+        <div class="flex items-center gap-2 text-[10px] text-[#5a7a94] tracking-widest">
+          <div class="w-1.5 h-1.5 rounded-full" :class="polling ? 'bg-green-500 animate-pulse' : 'bg-[#1e2d3d]'"/>
+          {{ polling ? 'EN DIRECT' : 'PAUSE' }}
+        </div>
+        <button @click="togglePolling"
+                class="border border-[#1e2d3d] text-[#5a7a94] px-4 py-1.5 text-xs tracking-widest hover:border-[#e8513a] hover:text-[#e8513a] transition-colors cursor-pointer">
+          {{ polling ? 'PAUSE' : 'REPRENDRE' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Résumé -->
+    <div class="grid grid-cols-4 gap-3 mb-6">
+      <div v-for="stat in stats" :key="stat.label" class="bg-[#0d1219] border border-[#1e2d3d] p-4">
+        <div class="text-[10px] text-[#5a7a94] tracking-widest mb-1">{{ stat.label }}</div>
+        <div class="text-lg font-bold text-white">{{ stat.value }}</div>
+      </div>
+    </div>
+
+    <!-- Pas de clients -->
+    <div v-if="noClients" class="flex flex-col items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <p class="text-sm">Aucun client torrent configuré</p>
+      <router-link to="/settings"
+                   class="text-[10px] tracking-widest text-[#e8513a] hover:opacity-75 transition-opacity">
+        CONFIGURER →
+      </router-link>
+    </div>
+
+    <!-- Loading -->
+    <div v-else-if="loading && torrents.length === 0" class="flex items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <div class="w-5 h-5 border-2 border-white/10 border-t-[#e8513a] rounded-full animate-spin"/>
+      <span class="text-sm">Chargement...</span>
+    </div>
+
+    <!-- Vide -->
+    <div v-else-if="!loading && torrents.length === 0" class="flex flex-col items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <p class="text-sm">Aucun téléchargement en cours</p>
+      <p class="text-[11px]">Les torrents lancés depuis Fankarr apparaîtront ici</p>
+    </div>
+
+    <!-- Liste torrents -->
+    <div v-else class="flex flex-col gap-2">
+      <div v-for="t in torrents" :key="t.hash"
+           class="bg-[#0d1219] border border-[#1e2d3d] p-4">
+
+        <!-- Ligne principale -->
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-white font-medium truncate">{{ t.name }}</p>
+            <div class="flex items-center gap-3 mt-1">
+              <!-- Badge état -->
+              <span class="text-[10px] tracking-widest px-2 py-0.5 border"
+                    :class="stateBadge(t.state).class">
+                {{ stateBadge(t.state).label }}
+              </span>
+              <!-- Client -->
+              <span class="text-[10px] text-[#5a7a94]">{{ t.client_name }}</span>
+            </div>
+          </div>
+
+          <!-- Infos droite -->
+          <div class="text-right shrink-0">
+            <p class="text-sm font-bold text-white">{{ t.progress }}%</p>
+            <p class="text-[10px] text-[#5a7a94] mt-0.5">
+              {{ formatSize(t.downloaded) }} / {{ formatSize(t.size) }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Barre de progression -->
+        <div class="h-1 bg-[#1e2d3d] rounded-full overflow-hidden mb-2">
+          <div class="h-full rounded-full transition-all duration-500"
+               :class="t.state === 'seeding' ? 'bg-green-500' :
+                      t.state === 'error'   ? 'bg-red-500'   :
+                      t.state === 'paused'  ? 'bg-[#5a7a94]' : 'bg-[#e8513a]'"
+               :style="{ width: `${t.progress}%` }"/>
+        </div>
+
+        <!-- Infos bas -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4 text-[10px] text-[#5a7a94]">
+            <span v-if="t.state === 'downloading'">
+              ↓ {{ formatSpeed(t.speed) }}
+            </span>
+            <span v-if="t.state === 'downloading' && t.eta > 0">
+              ETA {{ formatEta(t.eta) }}
+            </span>
+            <span v-if="t.state === 'seeding'" class="text-green-500">
+              ✓ Complété
+            </span>
+          </div>
+
+          <!-- Bouton organiser si complété -->
+          <button v-if="t.state === 'seeding'"
+                  @click="organize(t)"
+                  :disabled="organizing[t.hash]"
+                  class="text-[10px] tracking-widest px-3 py-1 border transition-colors cursor-pointer"
+                  :class="organized[t.hash]
+                ? 'border-green-500/40 text-green-500'
+                : 'border-[#1e2d3d] text-[#5a7a94] hover:border-[#e8513a] hover:text-[#e8513a]'">
+            {{ organized[t.hash] ? 'ORGANISÉ ✓' : organizing[t.hash] ? '...' : 'ORGANISER' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useToast } from '@/composables/useToast'
+
+const { add: toast } = useToast()
+
+const torrents   = ref<any[]>([])
+const loading    = ref(true)
+const polling    = ref(true)
+const noClients  = ref(false)
+const organizing = ref<Record<string, boolean>>({})
+const organized  = ref<Record<string, boolean>>({})
+
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+// ── Stats ──────────────────────────────────────────────────────
+const stats = computed(() => [
+  { label: 'EN COURS',  value: torrents.value.filter(t => t.state === 'downloading').length },
+  { label: 'COMPLÉTÉS', value: torrents.value.filter(t => t.state === 'seeding').length },
+  { label: 'EN PAUSE',  value: torrents.value.filter(t => t.state === 'paused').length },
+  { label: 'ERREURS',   value: torrents.value.filter(t => t.state === 'error').length },
+])
+
+// ── Fetch ──────────────────────────────────────────────────────
+async function fetchTorrents() {
+  try {
+    const res = await fetch('/api/downloads', { credentials: 'include' })
+    if (res.status === 503) { noClients.value = true; return }
+    if (!res.ok) return
+    torrents.value  = await res.json()
+    noClients.value = false
+  } catch {
+    // silencieux en polling
+  } finally {
+    loading.value = false
+  }
+}
+
+function startPolling() {
+  fetchTorrents()
+  pollInterval = setInterval(fetchTorrents, 3000)
+}
+
+function stopPolling() {
+  if (pollInterval) { clearInterval(pollInterval); pollInterval = null }
+}
+
+function togglePolling() {
+  polling.value = !polling.value
+  if (polling.value) startPolling()
+  else stopPolling()
+}
+
+onMounted(startPolling)
+onUnmounted(stopPolling)
+
+// ── Organiser ──────────────────────────────────────────────────
+async function organize(torrent: any) {
+  organizing.value[torrent.hash] = true
+  try {
+    const res = await fetch('/api/organize', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ hash: torrent.hash, save_path: torrent.save_path, name: torrent.name })
+    })
+    if (res.ok) {
+      organized.value[torrent.hash] = true
+      toast(`${torrent.name} organisé ✓`, 'success')
+    } else {
+      const { error } = await res.json()
+      toast(error ?? 'Erreur lors de l\'organisation', 'error')
+    }
+  } catch {
+    toast('Impossible de contacter le serveur', 'error')
+  } finally {
+    organizing.value[torrent.hash] = false
+  }
+}
+
+// ── Helpers affichage ──────────────────────────────────────────
+function stateBadge(state: string) {
+  const map: Record<string, { label: string; class: string }> = {
+    downloading: { label: 'TÉLÉCHARGEMENT', class: 'border-[#e8513a]/40 text-[#e8513a]' },
+    seeding    : { label: 'COMPLÉTÉ',       class: 'border-green-500/40 text-green-500' },
+    paused     : { label: 'EN PAUSE',       class: 'border-[#5a7a94]/40 text-[#5a7a94]' },
+    checking   : { label: 'VÉRIFICATION',   class: 'border-yellow-500/40 text-yellow-500' },
+    error      : { label: 'ERREUR',         class: 'border-red-500/40 text-red-500' },
+    unknown    : { label: 'INCONNU',        class: 'border-[#1e2d3d] text-[#5a7a94]' },
+  }
+  return map[state] ?? map.unknown
+}
+
+function formatSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`
+}
+
+function formatSpeed(bps: number): string {
+  return `${formatSize(bps)}/s`
+}
+
+function formatEta(seconds: number): string {
+  if (seconds < 0 || seconds > 86400 * 7) return '∞'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  if (h > 0) return `${h}h${m.toString().padStart(2, '0')}m`
+  if (m > 0) return `${m}m${s.toString().padStart(2, '0')}s`
+  return `${s}s`
+}
+</script>