Added UI to scale recipe by a number of servings.

webClient/src/main/scala/com/weEat/views/RecipeView.scala

@@ -35,9 +35,9 @@ object RecipeView extends View[String] {
 
   val ENTER_KEY_CODE = 13
 
-  def presentFoodNode(ingredient: Ingredient): Node =
+  def presentFoodNode(ratio: Float)(ingredient: Ingredient): Node =
     li(child <-- Signal.fromFuture(ingredient.food).optionMap({ (food) =>
-        span(f"${ingredient.amount}%.02f${ingredient.unit.abr} ${food.name}")
+        span(f"${ingredient.amount*ratio}%.02f${ingredient.unit.abr} ${food.name}")
       }).withDefault(span())
     )
 
@@ -45,8 +45,16 @@ object RecipeView extends View[String] {
     val food: Signal[Option[RecipeNodeId]] = page.flatMap((s) => Signal.fromFuture(
       FoodController.get(s.id)().map(_.asInstanceOf[RecipeNodeId])
     ))
-
+    val targetServings = Var(0.0f)
+    val ingredientRatio = food.combineWithFn(targetServings.signal) {
+      case (Some(food), targetServ) => targetServ / food.numServings
+      case (None, _) => 0
+    }
+      // onMountCallback({ (ctx) =>
+      // })
+    
     div(
+      food.signal.optionMap(_.numServings).withDefault(0) --> targetServings,
       h2("Recipe"),
       div(cls := "form-group",
         div(cls := "container",
@@ -58,7 +66,16 @@ object RecipeView extends View[String] {
           div(cls := "row",
             div(cls := "col-md-3",
               "Servings: ",
-              child.text <-- food.optionMap(_.numServings.toString).withDefault("loading...")
+              input(
+                cls := "form-control",
+                typ := "number",
+                stepAttr := "any",
+                minAttr := "0",
+                value <-- food
+                  .optionMap((f) => f"${f.numServings}%.1f")
+                  .withDefault("0"),
+                onChange.mapToValue.map(_.toFloat) --> targetServings
+              )
             ),
             child <-- food.optionFlatMap((f) =>
               f.massPerUnit
@@ -82,9 +99,11 @@ object RecipeView extends View[String] {
               ul(
                 listStyleType := "none",
                 paddingLeft := "0",
-                children <-- food
-                  .optionMap(_.ingredients.map(presentFoodNode(_)))
-                  .withDefault(Seq(span("loading...")))
+                children <-- food.combineWithFn(ingredientRatio) {
+                  case (Some(food), ratio) =>
+                    food.ingredients.map(presentFoodNode(ratio)(_))
+                  case (None, _) => Seq(span("loading..."))
+                }
               )
             ),
             div(cls := "col-md-5",