spencer/baby-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

conditional buttons

Browse source
This commit is contained in:
Spencer Flagg 2024-01-24 23:54:13 +01:00
parent d61646f5c1
commit 43038cc576
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/routes/+page.svelte
View file

@ -37,15 +37,27 @@
// Assuming the items are in the 'items' property of the result
actions = result.items;
}
$: isLastActionAsleep = actions.length > 0 && actions[actions.length - 1].type === 'asleep';
$: isLastActionAwake = actions.length > 0 && actions[actions.length - 1].type === 'awake';
$: isLastActionDiaper = actions.length > 0 && actions[actions.length - 1].type === 'diaper';
</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>
{#if isLastActionAsleep}
<button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
{:else}
{#if !isLastActionAwake}
<button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
{/if}
<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>
{#if isLastActionDiaper}
<button class="button--poop" on:click={() => recordAction('poop')}>Poop</button>
{/if}
{/if}
</aside>
<section>

2
src/styles/app.css
View file

@ -63,6 +63,8 @@ section {
margin-top: 4rem;
}
/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
[class*='--food'] {
--color: #136f63;
}