admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 17 Wiki Activity

feat: Implement functional torrent tables and sidebar filters with real-time SSE updates

Browse Source
This commit is contained in:
spinline
2026-01-31 16:47:13 +03:00
parent 27fd02b9c9
commit 97c5378a71
6 changed files with 277 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/layout/sidebar.rs
View File

@@ -2,52 +2,70 @@ use leptos::*;
#[component]
pub fn Sidebar() -> impl IntoView {
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
let total_count = move || store.torrents.get().len();
let downloading_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Downloading).count();
let seeding_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding).count();
let completed_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused).count();
let inactive_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error).count();
let set_filter = move |f: crate::store::FilterStatus| {
store.filter.set(f);
};
let filter_class = move |f: crate::store::FilterStatus| {
if store.filter.get() == f { "active" } else { "" }
};
view! {
<aside class="w-64 bg-base-200 h-full flex flex-col border-r border-base-300">
<div class="p-4">
<h2 class="text-xl font-bold px-4 mb-2 text-primary">"Filters"</h2>
<ul class="menu w-full rounded-box gap-1">
<li>
<a class="active">
<a class={move || filter_class(crate::store::FilterStatus::All)} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
"All"
<span class="badge badge-sm badge-ghost ml-auto">"12"</span>
<span class="badge badge-sm badge-ghost ml-auto">{total_count}</span>
</a>
</li>
<li>
<a>
<a class={move || filter_class(crate::store::FilterStatus::Downloading)} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
"Downloading"
<span class="badge badge-sm badge-ghost ml-auto">"4"</span>
<span class="badge badge-sm badge-ghost ml-auto">{downloading_count}</span>
</a>
</li>
<li>
<a>
<a class={move || filter_class(crate::store::FilterStatus::Seeding)} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
"Seeding"
<span class="badge badge-sm badge-ghost ml-auto">"8"</span>
<span class="badge badge-sm badge-ghost ml-auto">{seeding_count}</span>
</a>
</li>
<li>
<a>
<a class={move || filter_class(crate::store::FilterStatus::Completed)} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
"Completed"
<span class="badge badge-sm badge-ghost ml-auto">{completed_count}</span>
</a>
</li>
<li>
<a>
<a class={move || filter_class(crate::store::FilterStatus::Inactive)} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
"Inactive"
<span class="badge badge-sm badge-ghost ml-auto">{inactive_count}</span>
</a>
</li>
</ul>

125
frontend/src/components/torrent/table.rs
View File

@@ -1,66 +1,41 @@
use leptos::*;
#[derive(Clone)]
struct Torrent {
id: u32,
name: String,
size: String,
progress: f32,
status: String,
seeds: u32,
peers: u32,
down_speed: String,
up_speed: String,
fn format_bytes(bytes: i64) -> String {
const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
if bytes < 1024 {
return format!("{} B", bytes);
}
let i = (bytes as f64).log2().div_euclid(10.0) as usize;
format!("{:.1} {}", (bytes as f64) / 1024_f64.powi(i as i32), UNITS[i])
}
fn format_speed(bytes_per_sec: i64) -> String {
if bytes_per_sec == 0 {
return "0 B/s".to_string();
}
format!("{}/s", format_bytes(bytes_per_sec))
}
#[component]
pub fn TorrentTable() -> impl IntoView {
let torrents = vec![
Torrent {
id: 1,
name: "Ubuntu 22.04.3 LTS".to_string(),
size: "4.7 GB".to_string(),
progress: 100.0,
status: "Seeding".to_string(),
seeds: 452,
peers: 12,
down_speed: "0 KB/s".to_string(),
up_speed: "1.2 MB/s".to_string(),
},
Torrent {
id: 2,
name: "Debian 12.1.0 DVD".to_string(),
size: "3.9 GB".to_string(),
progress: 45.5,
status: "Downloading".to_string(),
seeds: 120,
peers: 45,
down_speed: "4.5 MB/s".to_string(),
up_speed: "50 KB/s".to_string(),
},
Torrent {
id: 3,
name: "Arch Linux 2023.09.01".to_string(),
size: "800 MB".to_string(),
progress: 12.0,
status: "Downloading".to_string(),
seeds: 85,
peers: 20,
down_speed: "2.1 MB/s".to_string(),
up_speed: "10 KB/s".to_string(),
},
Torrent {
id: 4,
name: "Fedora Workstation 39".to_string(),
size: "2.1 GB".to_string(),
progress: 0.0,
status: "Paused".to_string(),
seeds: 0,
peers: 0,
down_speed: "0 KB/s".to_string(),
up_speed: "0 KB/s".to_string(),
},
];
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
let filtered_torrents = move || {
store.torrents.get().into_iter().filter(|t| {
let filter = store.filter.get();
match filter {
crate::store::FilterStatus::All => true,
crate::store::FilterStatus::Downloading => t.status == shared::TorrentStatus::Downloading,
crate::store::FilterStatus::Seeding => t.status == shared::TorrentStatus::Seeding,
crate::store::FilterStatus::Completed => t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused, // Approximate
crate::store::FilterStatus::Inactive => t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error,
_ => true
}
}).collect::<Vec<_>>()
};
view! {
<div class="overflow-x-auto h-full bg-base-100">
@@ -76,19 +51,22 @@ pub fn TorrentTable() -> impl IntoView {
<th class="w-24">"Size"</th>
<th class="w-48">"Progress"</th>
<th class="w-24">"Status"</th>
<th class="w-20">"Seeds"</th>
<th class="w-20">"Peers"</th>
// <th class="w-20">"Seeds"</th> // Not available in shared::Torrent
// <th class="w-20">"Peers"</th> // Not available in shared::Torrent
<th class="w-24">"Down Speed"</th>
<th class="w-24">"Up Speed"</th>
<th class="w-24">"ETA"</th>
</tr>
</thead>
<tbody>
{torrents.into_iter().map(|t| {
let progress_class = if t.progress == 100.0 { "progress-success" } else { "progress-primary" };
let status_class = match t.status.as_str() {
"Seeding" => "text-success",
"Downloading" => "text-primary",
"Paused" => "text-warning",
{move || filtered_torrents().into_iter().map(|t| {
let progress_class = if t.percent_complete >= 100.0 { "progress-success" } else { "progress-primary" };
let status_str = format!("{:?}", t.status);
let status_class = match t.status {
shared::TorrentStatus::Seeding => "text-success",
shared::TorrentStatus::Downloading => "text-primary",
shared::TorrentStatus::Paused => "text-warning",
shared::TorrentStatus::Error => "text-error",
_ => "text-base-content/50"
};
@@ -102,18 +80,19 @@ pub fn TorrentTable() -> impl IntoView {
<td class="font-medium truncate max-w-xs" title={t.name.clone()}>
{t.name}
</td>
<td class="opacity-80 font-mono text-[11px]">{t.size}</td>
<td class="opacity-80 font-mono text-[11px]">{format_bytes(t.size)}</td>
<td>
<div class="flex items-center gap-2">
<progress class={format!("progress w-24 {}", progress_class)} value={t.progress} max="100"></progress>
<span class="text-[10px] opacity-70">{format!("{:.1}%", t.progress)}</span>
<progress class={format!("progress w-24 {}", progress_class)} value={t.percent_complete} max="100"></progress>
<span class="text-[10px] opacity-70">{format!("{:.1}%", t.percent_complete)}</span>
</div>
</td>
<td class={format!("text-[11px] font-medium {}", status_class)}>{t.status}</td>
<td class="text-right font-mono text-[11px] opacity-80">{t.seeds}</td>
<td class="text-right font-mono text-[11px] opacity-80">{t.peers}</td>
<td class="text-right font-mono text-[11px] opacity-80 text-success">{t.down_speed}</td>
<td class="text-right font-mono text-[11px] opacity-80 text-primary">{t.up_speed}</td>
<td class={format!("text-[11px] font-medium {}", status_class)}>{status_str}</td>
// <td class="text-right font-mono text-[11px] opacity-80">-</td>
// <td class="text-right font-mono text-[11px] opacity-80">-</td>
<td class="text-right font-mono text-[11px] opacity-80 text-success">{format_speed(t.down_rate)}</td>
<td class="text-right font-mono text-[11px] opacity-80 text-primary">{format_speed(t.up_rate)}</td>
<td class="text-right font-mono text-[11px] opacity-80">{if t.eta > 0 { format!("{}s", t.eta) } else { "∞".to_string() }}</td> // Temporary ETA format
</tr>
}
}).collect::<Vec<_>>()}