baby-tracker/src/routes/+page.svelte

<script lang="ts">
    import { onMount } from 'svelte';
    import { pb, currentUser } from '$lib/pocketbase';
    import Counters from '$lib/components/counters.svelte';

    type Action = {
        type: string;
        created: string;
    };

    let actions: Action[] = [];

    onMount(async () => {
        await fetchActions();
    });

    async function recordAction(actionType: string) {
        const action = { // No longer specifying a timestamp here
            type: actionType,
        };

        // Send action to PocketBase
        await pb.collection('actions').create(action);

        // Refresh actions list
        await fetchActions();
    }

    async function fetchActions() {
        // Fetch actions for the current day from PocketBase
        const today = new Date().toISOString().split('T')[0];
        const result = await pb.collection('actions').getList<Action>(1, 50, {
            filter: `created >= '${today}'`
        });

        // Assuming the items are in the 'items' property of the result
        actions = result.items;
    }
</script>

{#if $currentUser}
        <aside>
            <button on:click={() => recordAction('awake')}>Awake</button>
            <button on:click={() => recordAction('asleep')}>Asleep</button>
            <button on:click={() => recordAction('food')}>Food</button>
            <button on:click={() => recordAction('diaper')}>Diaper</button>
            <button on:click={() => recordAction('poop')}>Poop</button>
        </aside>

        <section>
            <h2>Today</h2>
            <div class="container">
                <div class="row">
                    <ul class="column">
                        {#each actions as action}
                        <li>{action.type} at {new Date(action.created).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}</li>
                        {/each}
                    </ul>
                    <Counters {actions} />
                </div>
            </div>
        </section>
{/if}