Files
achievements/crates/frontend/src/components/milestone.rs

62 lines
1.9 KiB
Rust

use crate::services::confirm::ConfirmService;
use crate::services::rest::RestService;
use common::DeleteMilestone;
use common::Milestone;
use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;
#[derive(Properties, Clone, PartialEq)]
pub struct Props {
pub milestone: Milestone,
pub completed_achievements: usize,
}
#[function_component(MilestoneComponent)]
pub fn milestone_component(props: &Props) -> Html {
let confirm_service = use_memo(|_| ConfirmService, ());
let unfilled = props.milestone.goal - props.completed_achievements.min(props.milestone.goal);
let filled = props.completed_achievements.min(props.milestone.goal);
let unfilled_stars = std::iter::repeat(html! {
<i class={classes!("fas", "fa-fw", "fa-star-half-stroke")} />
})
.take(unfilled)
.collect::<Html>();
let filled_stars = std::iter::repeat(html! {
<i style="color: var(--secondary-color)" class={classes!("fas", "fa-fw", "fa-star")} />
})
.take(filled)
.collect::<Html>();
let uuid = props.milestone.uuid;
let onclick_delete = Callback::from(move |_| {
if !confirm_service.confirm("Are you sure you want to delete?") {
return;
}
log::info!("Delete achievement confirmed.");
spawn_local(async move {
match RestService::delete_milestone(DeleteMilestone { uuid }).await {
Ok(_response) => {}
Err(_err) => {}
}
});
});
html! {
<div class="row flex">
<p style="text-align: center" class="flex-grow">
{format!("{} / {}", props.completed_achievements, props.milestone.goal)}
<br />
{filled_stars}
{unfilled_stars}
</p>
<div class="flex-intrinsic-size">
<button onclick={onclick_delete} class="button color-danger"><i class="fas fa-trash"/></button>
</div>
</div>
}
}