39 lines
1 KiB
Svelte
39 lines
1 KiB
Svelte
<script lang="ts">
|
|
import { gym } from "./store";
|
|
import {dm, back } from "./common";
|
|
const remaining = $gym.length;
|
|
const days = ["sön", "tis", "tor"];
|
|
let done = $derived($gym.filter((c) => c.completed).length);
|
|
</script>
|
|
|
|
<header>
|
|
<button class="clickable back" onclick={() => back()}>←</button>
|
|
<h1>
|
|
Styrketräning: {done} av {remaining}
|
|
</h1>
|
|
</header>
|
|
<main>
|
|
<progress hidden max={remaining} value={done}></progress>
|
|
<div class="calendar">
|
|
{#each $gym as col, i}
|
|
<article class="clickable">
|
|
<label>
|
|
<input type="checkbox" bind:checked={col.completed} />
|
|
<strong>{col.name}</strong>
|
|
<small>{days[i % 3]} {dm(col.planned_at)}</small>
|
|
</label>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
background-color: #f62b5a;
|
|
border-top: 4px solid rgba(0, 0, 0, 0.2)
|
|
}
|
|
|
|
article:nth-child(1) {
|
|
grid-column: 3;
|
|
}
|
|
</style>
|