217 lines
10 KiB
Rust
217 lines
10 KiB
Rust
use yew::prelude::*;
|
|
use yew_router::prelude::*;
|
|
|
|
use crate::api;
|
|
use crate::pages::Route;
|
|
use crate::types::ArtistListItem;
|
|
|
|
#[function_component(LibraryPage)]
|
|
pub fn library_page() -> Html {
|
|
let artists = use_state(|| None::<Vec<ArtistListItem>>);
|
|
let error = use_state(|| None::<String>);
|
|
|
|
let fetch_artists = {
|
|
let artists = artists.clone();
|
|
let error = error.clone();
|
|
Callback::from(move |_: ()| {
|
|
let artists = artists.clone();
|
|
let error = error.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::list_artists(200, 0).await {
|
|
Ok(a) => artists.set(Some(a)),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
{
|
|
let fetch = fetch_artists.clone();
|
|
use_effect_with((), move |_| {
|
|
fetch.emit(());
|
|
});
|
|
}
|
|
|
|
if let Some(ref err) = *error {
|
|
return html! { <div class="error">{ format!("Error: {err}") }</div> };
|
|
}
|
|
|
|
let Some(ref artists) = *artists else {
|
|
return html! { <p class="loading">{ "Loading..." }</p> };
|
|
};
|
|
|
|
html! {
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>{ "Library" }</h2>
|
|
<p>{ format!("{} artists", artists.len()) }</p>
|
|
</div>
|
|
|
|
if artists.is_empty() {
|
|
<p class="text-muted">{ "No artists in library. Use Search to add some!" }</p>
|
|
} else {
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{ "Name" }</th>
|
|
<th>{ "Monitored" }</th>
|
|
<th>{ "Owned" }</th>
|
|
<th>{ "Watched" }</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for artists.iter().map(|a| {
|
|
let artist_id = a.id;
|
|
let artist_name = a.name.clone();
|
|
let artist_mbid = a.musicbrainz_id.clone();
|
|
let is_watched = a.total_watched > 0;
|
|
let is_fully_watched = a.enriched && a.total_watched >= a.total_items && a.total_items > 0;
|
|
let is_monitored = a.monitored;
|
|
|
|
let on_remove = {
|
|
let error = error.clone();
|
|
let fetch = fetch_artists.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::delete_artist(artist_id).await {
|
|
Ok(_) => fetch.emit(()),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_watch = {
|
|
let error = error.clone();
|
|
let fetch = fetch_artists.clone();
|
|
let name = artist_name.clone();
|
|
let mbid = artist_mbid.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
let name = name.clone();
|
|
let mbid = mbid.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::add_artist(&name, mbid.as_deref()).await {
|
|
Ok(_) => fetch.emit(()),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_unwatch = {
|
|
let error = error.clone();
|
|
let fetch = fetch_artists.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::unwatch_artist(artist_id).await {
|
|
Ok(_) => fetch.emit(()),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_monitor_toggle = {
|
|
let error = error.clone();
|
|
let fetch = fetch_artists.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::set_artist_monitored(artist_id, !is_monitored).await {
|
|
Ok(_) => fetch.emit(()),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
// Pre-compute progress bar styles
|
|
let owned_pct = if a.total_watched > 0 {
|
|
(a.total_owned as f64 / a.total_watched as f64 * 100.0) as u32
|
|
} else {
|
|
0
|
|
};
|
|
let owned_color = if a.total_owned >= a.total_watched && a.total_watched > 0 {
|
|
"var(--success)"
|
|
} else if a.total_owned > 0 {
|
|
"var(--warning)"
|
|
} else {
|
|
"var(--text-muted)"
|
|
};
|
|
let owned_bar_style = format!("width:{owned_pct}%;background:{owned_color};");
|
|
|
|
let watched_pct = if a.total_items > 0 {
|
|
(a.total_watched as f64 / a.total_items as f64 * 100.0) as u32
|
|
} else {
|
|
0
|
|
};
|
|
let watched_color = if a.total_watched > 0 { "var(--accent)" } else { "var(--text-muted)" };
|
|
let watched_bar_style = format!("width:{watched_pct}%;background:{watched_color};");
|
|
|
|
html! {
|
|
<tr>
|
|
<td>
|
|
<Link<Route> to={Route::Artist { id: a.id.to_string() }}>
|
|
{ &a.name }
|
|
</Link<Route>>
|
|
</td>
|
|
<td style="text-align: center;">
|
|
if a.monitored {
|
|
<span style="color: var(--success);" title="Monitored">{ "\u{2713}" }</span>
|
|
}
|
|
</td>
|
|
if a.enriched {
|
|
<td>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill" style={owned_bar_style.clone()}></div>
|
|
<span class="progress-bar-text">{ format!("{}/{}", a.total_owned, a.total_watched) }</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill" style={watched_bar_style.clone()}></div>
|
|
<span class="progress-bar-text">{ format!("{}/{}", a.total_watched, a.total_items) }</span>
|
|
</div>
|
|
</td>
|
|
} else {
|
|
<td colspan="2" class="text-sm text-muted loading">
|
|
{ "Awaiting artist enrichment..." }
|
|
</td>
|
|
}
|
|
<td class="actions">
|
|
<button class="btn btn-sm btn-lib"
|
|
onclick={on_watch}
|
|
style={if is_fully_watched { "visibility:hidden;" } else { "" }}>
|
|
{ "Watch" }
|
|
</button>
|
|
<button class="btn btn-sm btn-secondary btn-lib"
|
|
onclick={on_unwatch}
|
|
style={if !is_watched { "visibility:hidden;" } else { "" }}>
|
|
{ "Unwatch" }
|
|
</button>
|
|
<button class={if is_monitored { "btn btn-sm btn-success btn-lib" } else { "btn btn-sm btn-secondary btn-lib" }}
|
|
onclick={on_monitor_toggle}>
|
|
{ if is_monitored { "Monitored" } else { "Monitor" } }
|
|
</button>
|
|
<button class="btn btn-sm btn-danger btn-lib" onclick={on_remove}>
|
|
{ "Remove" }
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
}
|
|
}
|