Ship first version

src/App.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     // import svelteLogo from "./assets/svelte.svg";
     // import viteLogo from "/vite.svg";
-    import { currentView } from "./lib/store.ts";
+    import { currentView } from "./lib/store";
     import Nav from "./lib/Nav.svelte";
     import Summary from "./lib/Summary.svelte";
     import GymProgress from "./lib/GymProgress.svelte";
     import CardioProgress from "./lib/CardioProgress.svelte";
+    import DietProgress from "./lib/DietProgress.svelte";
 </script>
 
 <div class="chrome">
-    <Nav />
     <main>
         {#if $currentView === 0}
             <Summary />
@@ -20,26 +20,13 @@
         {#if $currentView === 2}
             <CardioProgress />
         {/if}
+        {#if $currentView === 3}
+            <DietProgress />
+        {/if}
     </main>
 </div>
 
 <style>
-    .logo {
-        height: 6em;
-        pacardg: 1.5em;
-        will-change: filter;
-        transition: filter 300ms;
-    }
-    .logo:hover {
-        filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.svelte:hover {
-        filter: drop-shadow(0 0 2em #ff3e00aa);
-    }
-    .read-the-docs {
-        color: #888;
-    }
-
     .chrome {
         height: 100vh;
         display: flex;
@@ -49,6 +36,7 @@
             flex: 1;
             overflow: auto;
             text-align: center;
+            padding: 0.5em;
         }
     }
 </style>

src/assets/svelte.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/CardioProgress.svelte

@@ -1,7 +1,72 @@
 <script lang="ts">
+    import { cardio, currentView } from "./store";
+    const remaining = $cardio.length;
+    const days = ["ons", "fre", "mån"];
+    let done = $derived($cardio.filter((c) => c.completed).length);
+
+    const back = () => {
+        currentView.update((_) => 0);
+    };
 </script>
 
-<h1>Cardio</h1>
+<div>
+    <button onclick={() => back()}>&lt;-</button>
+    <h1>
+        Cardio {done}/{remaining}
+    </h1>
+    <progress max={remaining} value={done}></progress>
+    <div class="calendar">
+        {#each $cardio as col, i}
+            <article>
+                <label>
+                    <input type="checkbox" bind:checked={col.completed} />
+                    <strong
+                        >{(col.run_for as number[])
+                            .map((m) => `${m} min`)
+                            .join(" + ")}, {col.pause_for} vila</strong
+                    >
+                    <small>{days[i % 3]} {col.planned_at}</small>
+                </label>
+            </article>
+        {/each}
+    </div>
+</div>
 
 <style>
+    .calendar {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 0.5em 0.25em;
+    }
+
+    article {
+        border: 2px solid #aaa;
+        border-radius: 7px;
+
+        label {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-areas: "input name" "input date";
+            padding: 1.5em;
+
+            input {
+                grid-area: input;
+            }
+            strong {
+                grid-area: name;
+            }
+            small {
+                grid-area: date;
+            }
+        }
+    }
+
+    article:has(:checked) {
+        border-color: #080;
+        background-color: #afa;
+    }
+
+    article:nth-child(1) {
+        grid-column: 2;
+    }
 </style>

src/lib/DietProgress.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { diet, currentView } from "./store";
+    const dayscount = $diet.days.length;
+    let done = $derived($diet.days.filter((c) => c.completed).length);
+
+    const back = () => {
+        currentView.update((_) => 0);
+    };
+</script>
+
+<div>
+    <button onclick={() => back()}>&lt;-</button>
+    <h1>
+        Diet {done}/{dayscount}
+    </h1>
+    <progress max={dayscount} value={done}></progress>
+
+    <div class="calendar">
+        {#each $diet.days as day, i}
+            <article>
+                {#if day.date in $diet.reds}
+                    <div class="red">
+                        {$diet.reds[day.date]}
+                    </div>
+                {:else}
+                    <label>
+                        <input type="checkbox" bind:checked={day.completed} />
+                        {day.date}
+                    </label>
+                {/if}
+            </article>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .calendar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em 0.25em;
+    }
+
+    .red {
+        background: #ddd;
+        color: #888;
+        padding: 1.5em;
+    }
+
+    article {
+        border: 2px solid #aaa;
+        border-radius: 7px;
+
+        label {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-areas: "input name" "input date";
+            padding: 1.5em;
+
+            input {
+                grid-area: input;
+            }
+            strong {
+                grid-area: name;
+            }
+            small {
+                grid-area: date;
+            }
+        }
+    }
+
+    article:has(:checked) {
+        border-color: #080;
+        background-color: #afa;
+    }
+
+    article:nth-child(1) {
+        grid-column: 3;
+    }
+</style>

src/lib/GymProgress.svelte

@@ -1,7 +1,67 @@
 <script lang="ts">
+    import { gym, currentView } from "./store";
+    const remaining = $gym.length;
+    let done = $derived($gym.filter((c) => c.completed).length);
+
+    const back = () => {
+        currentView.update((_) => 0);
+    };
 </script>
 
-<h1>Gym</h1>
+<div>
+    <button onclick={() => back()}>&lt;-</button>
+    <h1>
+        Gym {done}/{remaining}
+    </h1>
+    <progress max={remaining} value={done}></progress>
+    <div class="calendar">
+        {#each $gym as col}
+            <article>
+                <label>
+                    <input type="checkbox" bind:checked={col.completed} />
+                    <strong>{col.name}</strong>
+                    <small>{col.planned_at}</small>
+                </label>
+            </article>
+        {/each}
+    </div>
+</div>
 
 <style>
+    .calendar {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 0.5em 0.25em;
+    }
+
+    article {
+        border: 2px solid #aaa;
+        border-radius: 7px;
+
+        label {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-areas: "input name" "input date";
+            padding: 1.5em;
+
+            input {
+                grid-area: input;
+            }
+            strong {
+                grid-area: name;
+            }
+            small {
+                grid-area: date;
+            }
+        }
+    }
+
+    article:has(:checked) {
+        border-color: #080;
+        background-color: #afa;
+    }
+
+    article:nth-child(1) {
+        grid-column: 3;
+    }
 </style>

src/lib/Nav.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { currentView } from "./store.js";
-    const navigate = (v: 0 | 1 | 2) => {
-        currentView.update((_) => v);
-    };
-</script>
-
-<nav>
-    <button onclick={() => navigate(0)}>Summary</button>
-    <button onclick={() => navigate(1)}>Weights</button>
-    <button onclick={() => navigate(2)}>Cardio</button>
-</nav>
-
-<style>
-    nav {
-        text-align: center;
-    }
-</style>

src/lib/Summary.svelte

@@ -1,14 +1,62 @@
 <script lang="ts">
-    import { gym, cardio } from "./store";
+    import { gym, cardio, diet, currentView } from "./store";
+    let gymProgress = $derived($gym.filter((c) => c.completed).length);
+    let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
+    let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
+
+    const navigate = (v: 0 | 1 | 2 | 3) => {
+        currentView.update((_) => v);
+    };
 </script>
 
 <div>
     <h1>Summary</h1>
-    <ul>
+    <ul class="cards">
-        <li>{$gym.length} gym</li>
+        <li>
-        <li>{$cardio.length} cardio</li>
+            <button onclick={() => navigate(1)}>
+                <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
+            </button>
+        </li>
+        <li>
+            <button onclick={() => navigate(2)}>
+                <i>{cardioProgress}</i> / {$cardio.length}
+                <span>löppass lufsade</span>
+            </button>
+        </li>
+        <li>
+            <button onclick={() => navigate(3)}>
+                <i>{dietProgress}</i> / {$diet.days.length}
+                <span>dagar på diet</span>
+            </button>
+        </li>
     </ul>
 </div>
 
 <style>
+    .cards {
+        list-style: none;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1em;
+
+        > li {
+            flex: 1;
+            border: 2px solid #aaa;
+            border-radius: 5px;
+            padding: 0;
+
+            button {
+                padding: 1em;
+            }
+
+            i {
+                font-size: 2em;
+                font-style: normal;
+            }
+
+            span {
+                display: block;
+            }
+        }
+    }
 </style>