278 lines
9.1 KiB
Rust
278 lines
9.1 KiB
Rust
use crate::components::error::error_provider::ErrorContext;
|
|
use crate::services::confirm::ConfirmService;
|
|
use crate::services::rest::RestService;
|
|
use common::DeleteAchievement;
|
|
use common::DeleteMilestone;
|
|
use common::UpdateAchievementTimeOfReveal;
|
|
use std::rc::Rc;
|
|
use wasm_bindgen::JsCast;
|
|
use wasm_bindgen_futures::spawn_local;
|
|
use yew::function_component;
|
|
use yew::functional::*;
|
|
use yew::html;
|
|
use yew::use_state;
|
|
use yew::Callback;
|
|
use yew::Html;
|
|
use yew::Properties;
|
|
use yew_router::prelude::use_navigator;
|
|
|
|
#[function_component]
|
|
pub fn Admin() -> Html {
|
|
let nav = use_navigator().expect("cannot get navigator");
|
|
let app_state = use_context::<crate::AppState>().expect("no app state ctx found");
|
|
|
|
let achievements = app_state
|
|
.state
|
|
.achievements
|
|
.iter()
|
|
.cloned()
|
|
.enumerate()
|
|
.map(|(idx, a)| (idx + 1, a))
|
|
.map(|(n, a)| {
|
|
let uuid = a.uuid.to_string();
|
|
html! {
|
|
<Achievement key={uuid} number={n} achievement={a} />
|
|
}
|
|
})
|
|
.collect::<Html>();
|
|
|
|
let onclick_create_achievement = {
|
|
let nav = nav.clone();
|
|
Callback::from(move |_: web_sys::MouseEvent| {
|
|
nav.push(&crate::Route::CreateAchievement);
|
|
})
|
|
};
|
|
|
|
let onclick_create_milestone = Callback::from(move |_: web_sys::MouseEvent| {
|
|
nav.push(&crate::Route::CreateMilestone);
|
|
});
|
|
|
|
let mut milestones = app_state.state.milestones.clone();
|
|
milestones.sort_by_key(|m| m.goal);
|
|
let milestones = milestones
|
|
.into_iter()
|
|
.map(|m| {
|
|
let uuid = m.uuid.to_string();
|
|
html! { <Milestone key={uuid} milestone={m}/> }
|
|
})
|
|
.collect::<Html>();
|
|
|
|
html! {
|
|
<>
|
|
<h1>{"Admin View"}</h1>
|
|
|
|
<hr />
|
|
|
|
<div class="row flex flex-wrap">
|
|
<div class="flex-grow">
|
|
<h3>{"Milestones"}</h3>
|
|
</div>
|
|
|
|
<div class="flex-intrinsic-size">
|
|
<button onclick={onclick_create_milestone} class="button-primary">{"New"}</button>
|
|
</div>
|
|
</div>
|
|
{milestones}
|
|
|
|
<hr />
|
|
|
|
<div class="row flex flex-wrap">
|
|
<div class="flex-grow">
|
|
<h3>{"Achievements"}</h3>
|
|
</div>
|
|
|
|
<div class="flex-intrinsic-size">
|
|
<button onclick={onclick_create_achievement} class="button-primary">{"New"}</button>
|
|
</div>
|
|
</div>
|
|
|
|
{achievements}
|
|
</>
|
|
}
|
|
}
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
struct AchievementProps {
|
|
achievement: common::Achievement,
|
|
number: usize,
|
|
}
|
|
|
|
#[function_component]
|
|
fn Achievement(props: &AchievementProps) -> Html {
|
|
let err_ctx = Rc::new(use_context::<ErrorContext>());
|
|
let achievement = &props.achievement;
|
|
let uuid = achievement.uuid;
|
|
|
|
let time_of_reveal: Option<String> = achievement
|
|
.time_of_reveal
|
|
.map(|naive_time| naive_time.format("%H:%M").to_string());
|
|
|
|
let timed_reveal_enabled = use_state(|| time_of_reveal.is_some());
|
|
let input_time = use_state(|| time_of_reveal.clone().unwrap_or("".to_string()));
|
|
let awaiting_response = use_state(|| false);
|
|
|
|
let onsubmit_timed_reveal = {
|
|
let awaiting_response = awaiting_response.clone();
|
|
let timed_reveal_enabled = timed_reveal_enabled.clone();
|
|
let input_time = input_time.clone();
|
|
let err_ctx = Rc::clone(&err_ctx);
|
|
Callback::from(move |e: web_sys::SubmitEvent| {
|
|
e.prevent_default();
|
|
|
|
let new_time_of_reveal = if *timed_reveal_enabled {
|
|
if let Ok(naive_time) = chrono::NaiveTime::parse_from_str(&input_time, "%H:%M") {
|
|
Some(naive_time)
|
|
} else {
|
|
// TODO: show UI error
|
|
log::debug!("Could not parse time: {}", *input_time);
|
|
return;
|
|
}
|
|
} else {
|
|
None
|
|
};
|
|
|
|
let payload = UpdateAchievementTimeOfReveal {
|
|
time_of_reveal: new_time_of_reveal,
|
|
uuid,
|
|
};
|
|
awaiting_response.set(true);
|
|
let awaiting_response = awaiting_response.clone();
|
|
let err_ctx = Rc::clone(&err_ctx);
|
|
spawn_local(async move {
|
|
match RestService::update_time_of_reveal(payload).await {
|
|
Ok(_response) => {}
|
|
Err(err) => {
|
|
if let Some(err_ctx) = &*err_ctx {
|
|
err_ctx.dispatch(err.to_string());
|
|
}
|
|
}
|
|
}
|
|
awaiting_response.set(false);
|
|
});
|
|
})
|
|
};
|
|
|
|
let oninput_time = {
|
|
let input_time = input_time.clone();
|
|
Callback::from(move |e: web_sys::InputEvent| {
|
|
let Some(input) = e
|
|
.target()
|
|
.and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok()) else { unreachable!() };
|
|
log::debug!("{:?}", input.value());
|
|
input_time.set(input.value());
|
|
})
|
|
};
|
|
|
|
let oninput_timed_reveal_checkbox = {
|
|
let timed_reveal_enabled = timed_reveal_enabled.clone();
|
|
Callback::from(move |e: web_sys::InputEvent| {
|
|
let Some(input) = e
|
|
.target()
|
|
.and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok()) else { unreachable!() };
|
|
timed_reveal_enabled.set(input.checked());
|
|
})
|
|
};
|
|
|
|
let onclick_delete = Callback::from(move |_| {
|
|
if !ConfirmService::confirm("Are you sure you want to delete?") {
|
|
return;
|
|
}
|
|
log::info!("Delete achievement confirmed.");
|
|
|
|
let err_ctx = Rc::clone(&err_ctx);
|
|
spawn_local(async move {
|
|
match RestService::delete_achievement(DeleteAchievement { uuid }).await {
|
|
Ok(_response) => {}
|
|
Err(err) => {
|
|
if let Some(err_ctx) = &*err_ctx {
|
|
err_ctx.dispatch(err.to_string());
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
let new_value: Option<&str> = timed_reveal_enabled.then_some(&**input_time);
|
|
let show_submit_button: bool = time_of_reveal.as_deref() != new_value;
|
|
|
|
html! {
|
|
<div>
|
|
<div class="row flex">
|
|
// Achievement number
|
|
<div class="flex-intrinsic-size">
|
|
<p>{format!("{}.", props.number)}</p>
|
|
</div>
|
|
|
|
// Achievement text
|
|
<div class="flex-grow">
|
|
<p>{&achievement.goal}</p>
|
|
</div>
|
|
|
|
// Delete button
|
|
<button onclick={onclick_delete} class="flex-intrinsic-size button narrow color-danger"><i class="fas fa-trash" style="padding-right: 0.5em"/>{"Delete"}</button>
|
|
</div>
|
|
|
|
// Timed reveal form
|
|
<form onsubmit={onsubmit_timed_reveal} style="margin-left: 30px">
|
|
// Timed reveal: Enable checkbox
|
|
<label>
|
|
<span class="label-body" style="margin-right: 0.5rem; font-weight: bold"><i class="fas fa-clock" style="padding-right: 0.5em"/>{"Enable Timed Reveal:"}</span>
|
|
<input oninput={oninput_timed_reveal_checkbox} checked={*timed_reveal_enabled} type="checkbox" />
|
|
</label>
|
|
|
|
<div class="row flex">
|
|
// Time input
|
|
{ if *timed_reveal_enabled { html! {
|
|
<div>
|
|
<label for="revealTimeInput">{"Reveal time"}</label>
|
|
<input oninput={oninput_time} value={(*input_time).clone()} type="time" id="revealTimeInput" />
|
|
</div>
|
|
}} else { html! {}}}
|
|
|
|
// Timed reveal form submit button
|
|
{ if show_submit_button { html! {
|
|
<input class="button-primary" type="submit" value="Update" disabled={ *awaiting_response } />
|
|
}} else { html! {}}}
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
}
|
|
}
|
|
|
|
#[function_component]
|
|
fn Milestone(props: &MilestoneProps) -> Html {
|
|
let err_ctx = Rc::new(use_context::<ErrorContext>());
|
|
let uuid = props.milestone.uuid;
|
|
let onclick_delete = Callback::from(move |_| {
|
|
if !ConfirmService::confirm("Are you sure you want to delete?") {
|
|
return;
|
|
}
|
|
let err_ctx = Rc::clone(&err_ctx);
|
|
spawn_local(async move {
|
|
match RestService::delete_milestone(DeleteMilestone { uuid }).await {
|
|
Ok(_response) => {}
|
|
Err(err) => {
|
|
if let Some(err_ctx) = &*err_ctx {
|
|
err_ctx.dispatch(err.to_string());
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
html! {
|
|
<div class="row flex">
|
|
<p class="flex-grow">{format!("Goal: {} achievements", props.milestone.goal)}</p>
|
|
|
|
<div class="flex-intrinsic-size">
|
|
<button onclick={onclick_delete} class="button narrow color-danger"><i style="margin-right: 0.5em" class="fas fa-trash"/>{"Delete"}</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
#[derive(Properties, Clone, PartialEq)]
|
|
struct MilestoneProps {
|
|
milestone: common::Milestone,
|
|
}
|