update sum at bottom of page after each change

src/main.rs

@@ -12,9 +12,10 @@ struct IndexTemplate {
 }
 
 #[derive(Template)]
-#[template(path = "food.html")]
-struct FoodTemplate {
+#[template(path = "food-update.html")]
+struct FoodUpdateTemplate {
     food: Food,
+    sum: i32,
 }
 
 #[derive(Debug, Clone, PartialEq)]
@@ -83,7 +84,9 @@ async fn increase(
         target_servings: row.get(4).unwrap(),
         actual_servings: row.get(5).unwrap(),
     })).unwrap();
-    let food = FoodTemplate {food};
+    let mut stmt = conn.prepare("SELECT SUM(kc_per_serving * actual_servings) as kc FROM food").unwrap();
+    let sum = stmt.query_one((), |row| row.get(0)).unwrap();
+    let food = FoodUpdateTemplate{food, sum};
     Html(
         food.render().unwrap()
     )
@@ -104,7 +107,9 @@ async fn decrease(
         target_servings: row.get(4).unwrap(),
         actual_servings: row.get(5).unwrap(),
     })).unwrap();
-    let food = FoodTemplate {food};
+    let mut stmt = conn.prepare("SELECT SUM(kc_per_serving * actual_servings) as kc FROM food").unwrap();
+    let sum = stmt.query_one((), |row| row.get(0)).unwrap();
+    let food = FoodUpdateTemplate {food,sum};
     Html(
         food.render().unwrap()
     )

templates/food-update.html

@@ -0,0 +1,2 @@
+{% include "food.html" %}
+{% include "sum.html" %}

templates/index.html

@@ -15,9 +15,7 @@
       {% for food in foods %}
       {% include "food.html" %}
       {% endfor %}
-      <div style="background-color: lightblue; margin: 1em;">
-        <b style="font-size: 24px; padding: 1em;">Total: {{ sum }} kc.</b>
-      </div>
+      {% include "sum.html" %}
     </div>
   </main>
 </body>

templates/sum.html

@@ -0,0 +1,3 @@
+<div style="background-color: lightblue; margin: 1em;" id="sum" hx-swap-oob="true">
+  <b style="font-size: 24px; padding: 1em;">Total: {{ sum }} kc.</b>
+</div>