64 lines
No EOL
2.2 KiB
Svelte
64 lines
No EOL
2.2 KiB
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;
|
|
timestamp: string;
|
|
};
|
|
|
|
let actions: Action[] = [];
|
|
|
|
onMount(async () => {
|
|
await fetchActions();
|
|
});
|
|
|
|
async function recordAction(actionType: string) {
|
|
const action = { // No longer specifying a timestamp here
|
|
type: actionType,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
// 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: `timestamp >= '${today}'`
|
|
});
|
|
|
|
// Assuming the items are in the 'items' property of the result
|
|
actions = result.items;
|
|
}
|
|
</script>
|
|
|
|
{#if $currentUser}
|
|
<aside>
|
|
<button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
|
|
<button class="button--asleep" on:click={() => recordAction('asleep')}>Asleep</button>
|
|
<button class="button--food" on:click={() => recordAction('food')}>Food</button>
|
|
<button class="button--diaper" on:click={() => recordAction('diaper')}>Diaper</button>
|
|
<button class="button--poop" 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><span class="badge badge--{action.type}">{action.type}</span> at {new Date(action.timestamp).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}</li>
|
|
{/each}
|
|
</ul>
|
|
<Counters {actions} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/if} |