started with new design

Cargo.lock

@@ -11,6 +11,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "askama"
 version = "0.14.0"
@@ -59,6 +68,12 @@ version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
 
+[[package]]
+name = "autocfg"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+
 [[package]]
 name = "axum"
 version = "0.8.6"
@@ -154,6 +169,25 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
+[[package]]
+name = "chrono"
+version = "0.4.42"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "145052bdd345b87320e369255277e3fb5152762ad123a901ef5c262dd38fe8d2"
+dependencies = [
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "wasm-bindgen",
+ "windows-link",
+]
+
+[[package]]
+name = "core-foundation-sys"
+version = "0.8.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
+
 [[package]]
 name = "fallible-iterator"
 version = "0.3.0"
@@ -339,6 +373,30 @@ dependencies = [
  "tower-service",
 ]
 
+[[package]]
+name = "iana-time-zone"
+version = "0.1.64"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33e57f83510bb73707521ebaffa789ec8caf86f9657cad665b092b581d40e9fb"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "log",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "itoa"
 version = "1.0.15"
@@ -440,6 +498,15 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.21.3"
@@ -747,6 +814,7 @@ version = "0.1.0"
 dependencies = [
  "askama",
  "axum",
+ "chrono",
  "parking_lot",
  "rusqlite",
  "tokio",
@@ -1023,12 +1091,65 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "windows-core"
+version = "0.62.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8e83a14d34d0623b51dce9581199302a221863196a1dde71a7663a4c2be9deb"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link",
+ "windows-result",
+ "windows-strings",
+]
+
+[[package]]
+name = "windows-implement"
+version = "0.60.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "windows-interface"
+version = "0.59.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "windows-link"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
+[[package]]
+name = "windows-result"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7837d08f69c77cf6b07689544538e017c1bfcf57e34b4c0ff58e6c2cd3b37091"
+dependencies = [
+ "windows-link",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.60.2"

Cargo.toml

@@ -6,6 +6,7 @@ edition = "2024"
 [dependencies]
 askama = "0.14.0"
 axum = "0.8.6"
+chrono = "0.4.42"
 parking_lot = "0.12.5"
 rusqlite = { version = "0.37.0", features = ["bundled"] }
 tokio = { version = "1.48.0", features = ["full"] }

src/main.rs

@@ -15,18 +15,32 @@ use tower_request_id::{RequestId, RequestIdLayer};
 use tracing::{debug, error, info, info_span};
 use tracing_subscriber::{layer::SubscriberExt as _, util::SubscriberInitExt as _};
 
+#[derive(Debug)]
+struct Sum {
+    kc: i32,
+    bs: i32,
+    protein: i32,
+}
+
+impl std::fmt::Display for Sum {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{:?}", self)
+    }
+}
+
 #[derive(Template)]
 #[template(path = "index.html")]
 struct IndexTemplate {
     foods: Vec<Food>,
-    sum: i32,
+    sum: Sum,
+    date: String,
 }
 
 #[derive(Template)]
 #[template(path = "food-update.html")]
 struct FoodUpdateTemplate {
     food: Food,
-    sum: i32,
+    sum: Sum,
 }
 
 #[derive(Debug, Clone, PartialEq)]
@@ -179,18 +193,25 @@ fn get_foods(conn: &ConnState) -> rusqlite::Result<Vec<Food>> {
     Ok(foods)
 }
 
-fn get_sum(conn: &Arc<Mutex<Connection>>) -> rusqlite::Result<i32> {
+fn get_sum(conn: &Arc<Mutex<Connection>>) -> rusqlite::Result<Sum> {
     let conn = conn.lock();
     let mut stmt = PreparedStatements::get_sum(&conn);
-    let sum = stmt.query_one((), |row| row.get(0))?;
+    let kc = stmt.query_one((), |row| row.get(0))?;
-    debug!(sum);
+    let sum = Sum {
+        kc,
+        bs: 99,
+        protein: 99,
+    };
+    debug!(?sum);
     Ok(sum)
 }
 
 async fn root(State(conn): State<ConnState>) -> Result<Html<String>, StatusCode> {
     let foods = get_foods(&conn).map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
     let sum = get_sum(&conn).map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
-    let index = IndexTemplate { foods, sum };
+    let now = chrono::Local::now();
+    let date = format!("{}", now.format("%Y-%M-%d"));
+    let index = IndexTemplate { foods, sum, date };
     Ok(Html(
         index
             .render()

templates/food.html

@@ -1,28 +1,51 @@
-<div style="border: 1px solid black; margin: 1em; padding: 1em; background: {{ food.color }};" id="food-{{ food.id }}">
+<div class="card">
-  <div style="text-align: center;">
+  <p class="food-name">
-    <p>
+    {{ food.name }}
-      <b>{{ food.name }}</b>
+  </p>
+  <div class="card-inner">
+    <div class="amounts">
+      <p class="unit">
+        <sup>1</sup>&frasl;<sub>4</sub> Cup
+      </p>
+      <p class="kc">
+        {{ food.kc_per_serving }} kc
       </p>
-    {{ food.portion }} ({{ food.kc_per_serving }} kc.)
-    <br>
-    <progress max="{{food.target_servings}}" value="{{food.actual_servings}}" {% if food.actual_servings>
-      food.target_servings %}
-      style="accent-color: red;"
-      {% endif %}>
-    </progress>
-    {{ food.actual_servings }}/{{ food.target_servings }}
     </div>
-  <br>
+    <div class="buttons">
-  <form method="post">
+      <button class="increase">+</button>
-    <div style="text-align: center;">
+      <button class="decrease">-</button>
-      <button hx-post="/decrease/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
+    </div>
-        style="width: 40%; height: 3em;" {% if food.actual_servings <=0 %} disabled {% endif %}>
+    <div class="checkboxes">
-        -
+      <label class="ok">
-      </button>
+        <input type="checkbox" checked>
-      <button hx-post="/increase/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
+      </label>
-        style="width: 40%; height: 3em;">
+      <label class="ok">
-        +
+        <input type="checkbox">
-      </button>
+      </label>
+      <label class="ok">
+        <input type="checkbox" checked>
+      </label>
+      <label class="bad">
+        <input type="checkbox" checked>
+      </label>
+      <label class="bad">
+        <input type="checkbox" checked>
+      </label>
+      <label class="bad">
+        <input type="checkbox">
+      </label>
+      <label class="bad">
+        <input type="checkbox">
+      </label>
+      <label class="bad">
+        <input type="checkbox">
+      </label>
+      <label class="bad">
+        <input type="checkbox">
+      </label>
+      <label class="bad">
+        <input type="checkbox">
+      </label>
+    </div>
   </div>
-  </form>
 </div>

templates/index-new.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Food Tracker</title>
+</head>
+
+
+<body>
+  <header>
+    <span>
+      Datum: {{ date }}
+    </span>
+    <div>
+      <span>
+        kc: {{ sum.kc }}
+      </span>
+      <span>
+        Protein: {{ sum.protein }}
+      </span>
+      <span>
+        Balaststoffe: {{ sum.bs }}
+      </span>
+    </div>
+  </header>
+  <main>
+    <hr>
+    <div class="card">
+      <p class="food-name">
+        {{ food.name }}
+      </p>
+      <div class="card-inner">
+        <div class="amounts">
+          <p class="unit">
+            <sup>1</sup>&frasl;<sub>4</sub> Cup
+          </p>
+          <p class="kc">
+            {{ food.kc_per_serving }} kc
+          </p>
+        </div>
+        <div class="buttons">
+          <button class="increase">+</button>
+          <button class="decrease">-</button>
+        </div>
+        <div class="checkboxes">
+          <div class="ok">
+            <input type="checkbox" checked>
+          </div>
+          <div class="ok">
+            <input type="checkbox">
+          </div>
+          <div class="ok">
+            <input type="checkbox" checked>
+          </div>
+          <div class="bad">
+            <input type="checkbox" checked>
+          </div>
+          <div class="bad">
+            <input type="checkbox" checked>
+          </div>
+          <div class="bad">
+            <input type="checkbox">
+          </div>
+          <div class="bad">
+            <input type="checkbox">
+          </div>
+          <div class="bad">
+            <input type="checkbox">
+          </div>
+          <div class="bad">
+            <input type="checkbox">
+          </div>
+          <div class="bad">
+            <input type="checkbox">
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr>
+  </main>
+</body>
+
+<style>
+  html {
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  header {
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    background-color: hsl(from #a8c8a6 h 40% l);
+    padding: 2px;
+    #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6
+  }
+
+  header div {
+    width: 100%;
+  }
+
+  header div span {
+    width: 30%;
+    display: inline-block;
+    text-align: left;
+  }
+
+  .card {
+    background-color: hsl(from #a8c8a6 h 30% l);
+    #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6 #a8c8a6
+  }
+
+  hr {
+    margin: 0;
+    border: 1px solid #655057;
+  }
+
+  .card p {
+    margin: 0;
+    padding: 2px;
+  }
+
+  .food-name {
+    font-size: 1.2em;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .card-inner {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .card-inner div button {
+    display: block;
+  }
+
+  button {
+    border: 0;
+    border-radius: 5px;
+    width: 2em;
+    height: 2em;
+  }
+
+  .increase {
+    background-color: #cb8175;
+  }
+
+  .decrease {
+    background-color: #6d8d8a;
+  }
+
+  .increase:hover {
+    background-color: hsl(from #cb8175 h 80% l);
+  }
+
+  .decrease:hover {
+    background-color: hsl(from #6d8d8a h 40% l);
+  }
+
+  input[type="checkbox"] {
+    width: 2em;
+    height: 2em;
+  }
+
+  .checkboxes {
+    display: flex;
+  }
+
+  .ok {
+    accent-color: hsl(from #a8c8a6 h 90% l);
+    background-color: hsl(from #a8c8a6 h 60% l);
+  }
+
+  .bad {
+    accent-color: hsl(from #cb8175 h 90% l);
+    background-color: hsl(from #cb8175 h 60% l);
+  }
+</style>
+
+</html>

templates/index.html

@@ -10,14 +10,142 @@
 </head>
 
 <body>
+  <header>
+    <span>
+      Datum: {{ date }}
+    </span>
+    <div>
+      <span>
+        kc: {{ sum.kc }}
+      </span>
+      <span>
+        Protein: {{ sum.protein }}
+      </span>
+      <span>
+        Balaststoffe: {{ sum.bs }}
+      </span>
+    </div>
+  </header>
   <main>
-    <div style="display: flex-root; margin: auto; width: fit-content;">
+    <hr>
     {% for food in foods %}
     {% include "food.html" %}
+    {% if !loop.last %}
+    <hr>
+    {% endif %}
     {% endfor %}
-      {% include "sum.html" %}
-    </div>
   </main>
 </body>
 
+<style>
+  html {
+    font-family: sans-serif;
+    border: 2px solid hsl(from #a8c8a6 h 40% l);
+  }
+
+  body {
+    margin: 0;
+  }
+
+  header {
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    background-color: hsl(from #a8c8a6 h 40% l);
+  }
+
+  header div {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+  }
+
+  header div span {
+    text-align: left;
+    width: inherit;
+  }
+
+  .card {
+    background-color: hsl(from #a8c8a6 h 30% l);
+  }
+
+  hr {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px dashed #655057;
+    background: #655057;
+  }
+
+  .card p {
+    margin: 0;
+    padding: 2px;
+  }
+
+  .food-name {
+    font-size: 1.2em;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .card-inner {
+    display: flex;
+    align-items: stretch;
+    gap: 5px;
+  }
+
+  .card-inner div button {
+    display: block;
+  }
+
+  button {
+    border: 0;
+    border-radius: 5px;
+    width: 2em;
+    height: 2em;
+  }
+
+  .increase {
+    background-color: #cb8175;
+  }
+
+  .decrease {
+    background-color: #6d8d8a;
+  }
+
+  .increase:hover {
+    background-color: hsl(from #cb8175 h 80% l);
+  }
+
+  .decrease:hover {
+    background-color: hsl(from #6d8d8a h 40% l);
+  }
+
+  .checkboxes {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-grow: 1;
+  }
+
+  .checkboxes label {
+    flex-grow: 1;
+    align-content: center;
+  }
+
+  .ok {
+    accent-color: hsl(from #a8c8a6 h 90% l);
+    background-color: hsl(from #a8c8a6 h 60% l);
+  }
+
+  .bad {
+    accent-color: hsl(from #cb8175 h 90% l);
+    background-color: hsl(from #cb8175 h 60% l);
+  }
+</style>
+
 </html>