traxys/regalade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

app,server: Display rating in recipe

Browse source
This commit is contained in:
traxys 2023-06-26 12:06:08 +02:00
parent 1ea5c8aafa
commit 5ef000dec0
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/src/recipe.rs
View file

@ -50,7 +50,7 @@ fn RecipeListInner(props: &RecipeListProps) -> HtmlResult {
Ok(l) => html! {
<div class="container text-center">
<div class="row row-cols-2 row-cols-sm-2 row-cols-md-4 g-2 mb-2">
{for l.recipes.iter().sorted_by_key(|(_, name)| name).map(|(id, name)| html!{
{for l.recipes.iter().sorted_by_key(|(_, name, _)| name).map(|(id, name, _)| html!{
<div class="col" key={*id}>
<div class="p-3 border rounded border-light-subtle h-100">
<Link<Route>
@ -623,6 +623,21 @@ fn EditSteps(props: &EditStepsProps) -> Html {
</>}
}
#[derive(Debug, Clone, PartialEq, Properties)]
struct RecipeRatingProps {
rating: u8,
}
#[function_component]
fn RecipeRating(props: &RecipeRatingProps) -> Html {
let rating = (props.rating + 1).min(3);
html! {
<div aria-label={format!("Rating: {rating}")}>
{ for (0..rating).map(|_| html!{<i aria-hidden="true" class="bi-star-fill" />}) }
</div>
}
}
#[function_component]
fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
let recipe_render = use_state(|| 0u64);
@ -664,11 +679,6 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
Ok(match &*recipe {
Ok(r) => html! {<>
<h1>{&r.name}</h1>
if let Some(e) = &*error {
<div class={classes!("alert", "alert-danger")} role="alert">
{e}
</div>
}
<EditName
token={props.token.clone()}
id={props.id}
@ -676,6 +686,14 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
name={r.name.clone()}
update={update.clone()}
/>
<div class="mt-2">
<RecipeRating rating={r.rating}/>
</div>
if let Some(e) = &*error {
<div class={classes!("alert", "alert-danger")} role="alert">
{e}
</div>
}
<hr />
<div class="text-start">
<h2>{"Ingredients"}</h2>