strand/src/lib/GymProgress.svelte

<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>

<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>