Updated the dashboard page
This commit is contained in:
Connor Johnstone
@@ -1,3 +1,4 @@
|
||||
use gloo_timers::callback::Interval;
|
||||
use yew::prelude::*;
|
||||
|
||||
use crate::api;
|
||||
@@ -8,20 +9,139 @@ use crate::types::Status;
|
||||
pub fn dashboard() -> Html {
|
||||
let status = use_state(|| None::<Status>);
|
||||
let error = use_state(|| None::<String>);
|
||||
let message = use_state(|| None::<String>);
|
||||
|
||||
{
|
||||
// Fetch status function
|
||||
let fetch_status = {
|
||||
let status = status.clone();
|
||||
let error = error.clone();
|
||||
use_effect_with((), move |_| {
|
||||
Callback::from(move |_: ()| {
|
||||
let status = status.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::get_status().await {
|
||||
Ok(s) => status.set(Some(s)),
|
||||
Ok(s) => {
|
||||
error.set(None);
|
||||
status.set(Some(s));
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
// Initial fetch
|
||||
{
|
||||
let fetch = fetch_status.clone();
|
||||
use_effect_with((), move |_| {
|
||||
fetch.emit(());
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-refresh every 5 seconds
|
||||
{
|
||||
let fetch = fetch_status.clone();
|
||||
use_effect_with((), move |_| {
|
||||
let interval = Interval::new(1_000, move || {
|
||||
fetch.emit(());
|
||||
});
|
||||
// Keep the interval alive for the component's lifetime
|
||||
move || drop(interval)
|
||||
});
|
||||
}
|
||||
|
||||
// Action handlers
|
||||
let on_sync = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch_status.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::sync_downloads().await {
|
||||
Ok(s) => {
|
||||
message.set(Some(format!("Synced: {} enqueued, {} skipped", s.enqueued, s.skipped)));
|
||||
fetch.emit(());
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_process = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch_status.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::process_downloads().await {
|
||||
Ok(t) => {
|
||||
message.set(Some(format!("Downloads started (task: {})", &t.task_id[..8])));
|
||||
fetch.emit(());
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_index = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch_status.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::trigger_index().await {
|
||||
Ok(t) => { message.set(Some(format!("Indexing started ({})", &t.task_id[..8]))); fetch.emit(()); }
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_tag = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch_status.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::trigger_tag().await {
|
||||
Ok(t) => { message.set(Some(format!("Tagging started ({})", &t.task_id[..8]))); fetch.emit(()); }
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_organize = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch_status.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::trigger_organize().await {
|
||||
Ok(t) => { message.set(Some(format!("Organizing started ({})", &t.task_id[..8]))); fetch.emit(()); }
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
if let Some(ref err) = *error {
|
||||
return html! { <div class="error">{ format!("Error: {err}") }</div> };
|
||||
}
|
||||
@@ -36,6 +156,13 @@ pub fn dashboard() -> Html {
|
||||
<h2>{ "Dashboard" }</h2>
|
||||
</div>
|
||||
|
||||
if let Some(ref msg) = *message {
|
||||
<div class="card" style="border-color: var(--success);">
|
||||
<p>{ msg }</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
// Stats grid
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="value">{ s.library.total_items }</div>
|
||||
@@ -55,34 +182,117 @@ pub fn dashboard() -> Html {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Actions
|
||||
<div class="card">
|
||||
<h3>{ "Download Queue" }</h3>
|
||||
<p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
|
||||
<h3>{ "Actions" }</h3>
|
||||
<div class="actions mt-1">
|
||||
<button class="btn btn-primary" onclick={on_sync}>{ "Sync Watchlist" }</button>
|
||||
<button class="btn btn-success" onclick={on_process}>{ "Process Downloads" }</button>
|
||||
<button class="btn btn-secondary" onclick={on_index}>{ "Re-index" }</button>
|
||||
<button class="btn btn-secondary" onclick={on_tag}>{ "Auto-tag" }</button>
|
||||
<button class="btn btn-secondary" onclick={on_organize}>{ "Organize" }</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Background Tasks
|
||||
if !s.tasks.is_empty() {
|
||||
<div class="card">
|
||||
<h3>{ "Background Tasks" }</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{ "Type" }</th>
|
||||
<th>{ "Status" }</th>
|
||||
<th>{ "Result" }</th>
|
||||
</tr>
|
||||
<tr><th>{ "Type" }</th><th>{ "Status" }</th><th>{ "Progress" }</th><th>{ "Result" }</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for s.tasks.iter().map(|t| html! {
|
||||
<tr>
|
||||
<td>{ &t.task_type }</td>
|
||||
<td><StatusBadge status={t.status.clone()} /></td>
|
||||
<td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
|
||||
</tr>
|
||||
{ for s.tasks.iter().map(|t| {
|
||||
let progress_html = if let Some(ref p) = t.progress {
|
||||
if p.total > 0 {
|
||||
let pct = (p.current as f64 / p.total as f64 * 100.0) as u32;
|
||||
html! {
|
||||
<div>
|
||||
<div class="text-sm">{ &p.message }{ format!(" ({}/{})", p.current, p.total) }</div>
|
||||
<div style="background: var(--bg-card); border-radius: 4px; height: 8px; margin-top: 4px;">
|
||||
<div style={format!("background: var(--accent); border-radius: 4px; height: 100%; width: {pct}%;")}></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! { <span class="text-sm text-muted">{ &p.message }</span> }
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
};
|
||||
html! {
|
||||
<tr>
|
||||
<td>{ &t.task_type }</td>
|
||||
<td><StatusBadge status={t.status.clone()} /></td>
|
||||
<td>{ progress_html }</td>
|
||||
<td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
|
||||
</tr>
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
// Download Queue Items
|
||||
if !s.queue.items.is_empty() {
|
||||
<div class="card">
|
||||
<h3>{ format!("Download Queue ({} pending, {} downloading, {} failed)",
|
||||
s.queue.pending, s.queue.downloading, s.queue.failed) }</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Query" }</th><th>{ "Status" }</th><th>{ "Error" }</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for s.queue.items.iter().map(|item| html! {
|
||||
<tr>
|
||||
<td>{ &item.query }</td>
|
||||
<td><StatusBadge status={item.status.clone()} /></td>
|
||||
<td class="text-sm text-muted">{ item.error_message.as_deref().unwrap_or("") }</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
} else if s.queue.pending > 0 || s.queue.downloading > 0 {
|
||||
<div class="card">
|
||||
<h3>{ "Download Queue" }</h3>
|
||||
<p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
// Tagging Queue
|
||||
if let Some(ref tagging) = s.tagging {
|
||||
if tagging.needs_tagging > 0 {
|
||||
<div class="card">
|
||||
<h3>{ format!("Tagging Queue ({} tracks need metadata)", tagging.needs_tagging) }</h3>
|
||||
if !tagging.items.is_empty() {
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Album" }</th><th>{ "MBID" }</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for tagging.items.iter().map(|t| html! {
|
||||
<tr>
|
||||
<td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
|
||||
<td>{ t.artist.as_deref().unwrap_or("") }</td>
|
||||
<td class="text-muted">{ t.album.as_deref().unwrap_or("—") }</td>
|
||||
<td class="text-sm text-muted">
|
||||
if t.album.is_some() {
|
||||
{ "needs album link" }
|
||||
} else {
|
||||
{ "needs metadata" }
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ use crate::types::AppConfig;
|
||||
pub fn settings_page() -> Html {
|
||||
let config = use_state(|| None::<AppConfig>);
|
||||
let error = use_state(|| None::<String>);
|
||||
let message = use_state(|| None::<String>);
|
||||
|
||||
{
|
||||
let config = config.clone();
|
||||
@@ -22,53 +21,20 @@ pub fn settings_page() -> Html {
|
||||
});
|
||||
}
|
||||
|
||||
let trigger = |action: &'static str| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let result = match action {
|
||||
"index" => api::trigger_index().await,
|
||||
"tag" => api::trigger_tag().await,
|
||||
"organize" => api::trigger_organize().await,
|
||||
_ => return,
|
||||
};
|
||||
match result {
|
||||
Ok(t) => message.set(Some(format!("{action} started (task: {})", t.task_id))),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
html! {
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>{ "Settings" }</h2>
|
||||
</div>
|
||||
|
||||
if let Some(ref msg) = *message {
|
||||
<div class="card" style="border-color: var(--success);">{ msg }</div>
|
||||
}
|
||||
if let Some(ref err) = *error {
|
||||
<div class="card error">{ err }</div>
|
||||
}
|
||||
|
||||
<div class="card">
|
||||
<h3>{ "Actions" }</h3>
|
||||
<div class="actions mt-1">
|
||||
<button class="btn btn-primary" onclick={trigger("index")}>{ "Re-index Library" }</button>
|
||||
<button class="btn btn-primary" onclick={trigger("tag")}>{ "Auto-tag Tracks" }</button>
|
||||
<button class="btn btn-primary" onclick={trigger("organize")}>{ "Organize Files" }</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ match &*config {
|
||||
None => html! { <p class="loading">{ "Loading configuration..." }</p> },
|
||||
Some(c) => html! {
|
||||
<div class="card mt-2">
|
||||
<div class="card">
|
||||
<h3>{ "Configuration" }</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
@@ -102,11 +102,19 @@ pub struct DownloadItem {
|
||||
|
||||
// --- Tasks ---
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
pub struct TaskProgress {
|
||||
pub current: u64,
|
||||
pub total: u64,
|
||||
pub message: String,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
pub struct TaskInfo {
|
||||
pub id: String,
|
||||
pub task_type: String,
|
||||
pub status: String,
|
||||
pub progress: Option<TaskProgress>,
|
||||
pub result: Option<String>,
|
||||
}
|
||||
|
||||
@@ -117,10 +125,19 @@ pub struct TaskRef {
|
||||
|
||||
// --- Status ---
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
pub struct TaggingStatus {
|
||||
pub needs_tagging: usize,
|
||||
#[serde(default)]
|
||||
pub items: Vec<Track>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
pub struct Status {
|
||||
pub library: LibrarySummary,
|
||||
pub queue: QueueStatus,
|
||||
#[serde(default)]
|
||||
pub tagging: Option<TaggingStatus>,
|
||||
pub tasks: Vec<TaskInfo>,
|
||||
}
|
||||
|
||||
@@ -137,6 +154,10 @@ pub struct LibrarySummary {
|
||||
pub struct QueueStatus {
|
||||
pub pending: usize,
|
||||
pub downloading: usize,
|
||||
#[serde(default)]
|
||||
pub failed: usize,
|
||||
#[serde(default)]
|
||||
pub items: Vec<DownloadItem>,
|
||||
}
|
||||
|
||||
// --- API responses ---
|
||||
|
||||
Reference in New Issue
Block a user