app: Allow to change the amount of people for a recipe

app/src/recipe.rs

@@ -794,6 +794,26 @@ fn RecipeInfoView(props: &RecipeInfoProps) -> Html {
         })
     };
 
+    let person_count = use_state(|| props.info.person_count);
+    let onchange = {
+        let person_count = person_count.clone();
+        Callback::from(move |e: Event| {
+            let Some(target) = e.target() else {
+                return;
+            };
+
+            let Ok(target) = target.dyn_into::<HtmlInputElement>() else {
+                return;
+            };
+
+            let Ok(pc) = target.value().parse() else {
+                return;
+            };
+
+            person_count.set(pc);
+        })
+    };
+
     html! {<>
         <h1>{&props.info.name} <RecipeRating rating={props.info.rating} /> </h1>
         <div class="mt-2">
@@ -812,6 +832,19 @@ fn RecipeInfoView(props: &RecipeInfoProps) -> Html {
                 update={props.update.clone()}
             />
         </div>
+        <div class="mt-2">
+            <div class="w-50 text-start input-group">
+                <input
+                    class="form-control"
+                    type="number"
+                    id="rcpPeopleCount"
+                    min="1"
+                    value={person_count.to_string()}
+                    {onchange}
+                />
+                <span class="input-group-text">{"people"}</span>
+            </div>
+        </div>
         if let Some(e) = &*error {
             <div class={classes!("alert", "alert-danger")} role="alert">
                 {e}
@@ -823,7 +856,7 @@ fn RecipeInfoView(props: &RecipeInfoProps) -> Html {
             <ul class="list-group mb-2">
                 {for props.info.ingredients.iter().map(|(id, info, amount)| {
                     let delete_modal_id = format!("rcpRmIg{id}");
-                    let amount_rounded = amount.round();
+                    let amount_rounded = (amount * (*person_count) as f64).round();
                     html!{
                     <li
                         key={*id}