From d61646f5c1e7d992c6b9c3888a2809149a18ab3e Mon Sep 17 00:00:00 2001 From: Spencer Flagg Date: Wed, 24 Jan 2024 23:13:00 +0100 Subject: [PATCH] added counters; calendar styling; timestamp replaced created; various tweaks; --- src/lib/components/counters.svelte | 26 +++++-- src/routes/+layout.svelte | 3 +- src/routes/+page.svelte | 17 +++-- src/routes/calendar/+page.svelte | 115 ++++++++++++++++++----------- src/routes/signin/+page.svelte | 2 +- src/routes/stats/+page.svelte | 29 ++++---- src/styles/app.css | 103 ++++++++++++++++++++++---- 7 files changed, 202 insertions(+), 93 deletions(-) diff --git a/src/lib/components/counters.svelte b/src/lib/components/counters.svelte index ff39076..cecb318 100644 --- a/src/lib/components/counters.svelte +++ b/src/lib/components/counters.svelte @@ -1,4 +1,4 @@ - -
- {#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}

Awake for {$awakeMinutes} minutes

{/if} - {#if $asleepMinutes !== null && $asleepMinutes < $awakeMinutes}

Sleeping for {$asleepMinutes} minutes

{/if} - {#if $foodMinutes !== null}

Ate {$foodMinutes} minutes ago

{/if} - {#if $diaperMinutes !== null}

Diaper changed {$diaperMinutes} minutes ago

{/if} - {#if $poopDays === 0}

Pooped today

{:else if $poopDays !== null}

Pooped {$poopDays} days ago

{/if} +
+ {#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}
Awake for {convertMinutes($awakeMinutes)}
{/if} + {#if $asleepMinutes !== null && $asleepMinutes < $awakeMinutes}
Sleeping for {convertMinutes($asleepMinutes)}
{/if} + {#if $foodMinutes !== null}
Ate {convertMinutes($foodMinutes)} ago
{/if} + {#if $diaperMinutes !== null}
Changed {convertMinutes($diaperMinutes)} ago
{/if} + {#if $poopDays === 0}
Pooped today!
{:else if $poopDays !== null}
Pooped {$poopDays} days ago
{/if}
\ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ea15697..24d8052 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,6 @@ - - + Coover Tracker diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 79f125c..4394e58 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,7 +5,7 @@ type Action = { type: string; - created: string; + timestamp: string; }; let actions: Action[] = []; @@ -17,6 +17,7 @@ async function recordAction(actionType: string) { const action = { // No longer specifying a timestamp here type: actionType, + timestamp: new Date().toISOString() }; // Send action to PocketBase @@ -30,7 +31,7 @@ // Fetch actions for the current day from PocketBase const today = new Date().toISOString().split('T')[0]; const result = await pb.collection('actions').getList(1, 50, { - filter: `created >= '${today}'` + filter: `timestamp >= '${today}'` }); // Assuming the items are in the 'items' property of the result @@ -40,11 +41,11 @@ {#if $currentUser}
@@ -53,7 +54,7 @@
    {#each actions as action} -
  • {action.type} at {new Date(action.created).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}
    • +
  • {action.type} at {new Date(action.timestamp).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}
    • {/each}
diff --git a/src/routes/calendar/+page.svelte b/src/routes/calendar/+page.svelte index 113c929..d103f2c 100644 --- a/src/routes/calendar/+page.svelte +++ b/src/routes/calendar/+page.svelte @@ -4,7 +4,7 @@ import { onMount } from 'svelte'; type Action = { type: string; - created: string; + timestamp: string; }; onMount(async () => { @@ -30,7 +30,8 @@ import { onMount } from 'svelte'; }; // Days of the week for headers - const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + //const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; // Generate hours for the grid const hours = Array.from({ length: 24 }, (_, i) => i); @@ -39,67 +40,97 @@ import { onMount } from 'svelte'; const formatHour = (hour: number) => { return `${hour.toString().padStart(2, '0')}:00`; }; + + // function formatTime(date: Date): string { + // const hours = date.getHours().toString().padStart(2, '0'); + // const minutes = date.getMinutes().toString().padStart(2, '0'); + // return `${hours}:${minutes}`; + // } + + function formatTime(dateString: string): string { + const date = new Date(dateString); + const hours = date.getHours().toString().padStart(2, '0'); + const minutes = date.getMinutes().toString().padStart(2, '0'); + return `${hours}:${minutes}`; + } -
- -
+
+
+ +
- - {#each daysOfWeek as day} -
{day}
- {/each} - - - {#each hours as hour} -
{formatHour(hour)}
- {#each daysOfWeek as _, dayIndex} -
- {#each actions as action} - {#if getDayOfWeek(action.created) === dayIndex && getHourOfDay(action.created) === hour} -
{action.type}
- {/if} - {/each} -
+ + {#each daysOfWeek as day} +
{day}
{/each} - {/each} + + + {#each hours as hour} +
{formatHour(hour)}
+ {#each daysOfWeek as _, dayIndex} +
+ {#each actions as action} + {#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour} +
{action.type}{formatTime(action.timestamp)}
+ {/if} + {/each} +
+ {/each} + {/each} +
\ No newline at end of file diff --git a/src/routes/signin/+page.svelte b/src/routes/signin/+page.svelte index bf14b3a..fafa9f1 100644 --- a/src/routes/signin/+page.svelte +++ b/src/routes/signin/+page.svelte @@ -8,7 +8,7 @@ avatar: ImageData collectionId: string collectionName: string - created: string + timestamp: string email: string emailVisibility: boolean id: string diff --git a/src/routes/stats/+page.svelte b/src/routes/stats/+page.svelte index a2b1fff..d61654e 100644 --- a/src/routes/stats/+page.svelte +++ b/src/routes/stats/+page.svelte @@ -4,7 +4,7 @@ type Action = { type: string; - created: string; + timestamp: string; }; let stats = { @@ -40,7 +40,7 @@ function calculateAvgSleepPerNap(actions: Action[]): number { const sleepActions = actions.filter((a) => a.type === 'asleep' || a.type === 'awake'); - sleepActions.sort((a, b) => new Date(a.created).getTime() - new Date(b.created).getTime()); + sleepActions.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()); let totalSleepTime = 0; let napCount = 0; @@ -48,28 +48,25 @@ for (let i = 0; i < sleepActions.length - 1; i++) { if (sleepActions[i].type === 'asleep' && sleepActions[i + 1].type === 'awake') { totalSleepTime += - new Date(sleepActions[i + 1].created).getTime() - - new Date(sleepActions[i].created).getTime(); + new Date(sleepActions[i + 1].timestamp).getTime() - + new Date(sleepActions[i].timestamp).getTime(); napCount++; } } - console.log('Total Sleep Time:', totalSleepTime); - console.log('Nap Count:', napCount); - return Math.round(napCount > 0 ? totalSleepTime / napCount / 1000 / 60 : 0); // returns average time in minutes } function calculateAvgNapsPerDay(actions: Action[]): number { const sortedActions = actions.sort( - (a, b) => new Date(a.created).getTime() - new Date(b.created).getTime() + (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime() ); const daysMap = new Map(); for (let i = 0; i < sortedActions.length - 1; i++) { if (sortedActions[i].type === 'asleep' && sortedActions[i + 1].type === 'awake') { - const asleepDate = new Date(sortedActions[i].created); - const awakeDate = new Date(sortedActions[i + 1].created); + const asleepDate = new Date(sortedActions[i].timestamp); + const awakeDate = new Date(sortedActions[i + 1].timestamp); if (asleepDate.toDateString() === awakeDate.toDateString()) { const dayKey = asleepDate.toDateString(); @@ -84,14 +81,14 @@ function calculateAvgSleepPerDay(actions: Action[]): number { const sortedActions = actions.sort( - (a, b) => new Date(a.created).getTime() - new Date(b.created).getTime() + (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime() ); const sleepDurations: number[] = []; for (let i = 0; i < sortedActions.length - 1; i++) { if (sortedActions[i].type === 'asleep' && sortedActions[i + 1].type === 'awake') { - const asleepDate = new Date(sortedActions[i].created); - const awakeDate = new Date(sortedActions[i + 1].created); + const asleepDate = new Date(sortedActions[i].timestamp); + const awakeDate = new Date(sortedActions[i + 1].timestamp); if (asleepDate.toDateString() === awakeDate.toDateString()) { const sleepDuration = (awakeDate.getTime() - asleepDate.getTime()) / 1000 / 60; // Sleep duration in minutes @@ -111,7 +108,7 @@ for (const action of actions) { if (action.type === 'diaper') { - const actionDate = action.created.split('T')[0]; // Extract the date part + const actionDate = action.timestamp.split('T')[0]; // Extract the date part diaperChangesPerDay.set(actionDate, (diaperChangesPerDay.get(actionDate) || 0) + 1); } } @@ -133,7 +130,7 @@ // Extract dates of 'poop' actions for (const action of actions) { if (action.type === 'poop') { - const actionDate = new Date(action.created.split('T')[0]); // Extract the date part + const actionDate = new Date(action.timestamp.split('T')[0]); // Extract the date part poopDates.push(actionDate); } } @@ -160,7 +157,7 @@ for (const action of actions) { if (action.type === 'food') { - const actionDate = action.created.split('T')[0]; // Extract the date part + const actionDate = action.timestamp.split('T')[0]; // Extract the date part mealsPerDay.set(actionDate, (mealsPerDay.get(actionDate) || 0) + 1); } } diff --git a/src/styles/app.css b/src/styles/app.css index d110b7f..7b3c52b 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -1,34 +1,105 @@ :root { - --c-primary: darkorange; /* Replace #yourColor with your desired color */ + --c-primary: darkorange; /* Replace #yourColor with your desired color */ +} + +body { + background-color: #f2f0ef; } a, -input[type="text"]:focus, -input[type="email"]:focus, -input[type="password"]:focus, +input[type='text']:focus, +input[type='email']:focus, +input[type='password']:focus, select:focus, textarea:focus { - color: var(--c-primary); + color: var(--c-primary); } button, -input[type="submit"] { - background-color: var(--c-primary); - border-color: var(--c-primary); +input[type='submit'] { + background-color: var(--color); + border-color: var(--color); } nav ul { - list-style: circle inside; - display: flex; - list-style: none; - gap: 1em; - justify-content: end; + list-style: circle inside; + display: flex; + list-style: none; + gap: 1em; + justify-content: end; +} + +nav ul li { + font-size: 2rem; } header { - padding-top: 2rem; + padding-top: 2rem; +} + +/* aside { + position: relative; + padding-top: 1rem; + display: block; +} */ + +/* aside::after { + content: ""; + width: 100vw; + height: 50px; + position: fixed; + left: 0; + outline: 1px solid #ccc; + background-color: #eee; + z-index: -1; +} */ + +aside button { + margin-top: 1rem; + border-radius: 999px; } section { - margin-top: 4rem; -} \ No newline at end of file + margin-top: 4rem; +} + +[class*='--food'] { + --color: #136f63; +} +[class*='--poop'] { + --color: #78290f; +} +[class*='--asleep'] { + --color: #032b43; +} +[class*='--awake'] { + --color: #ffba08; +} +[class*='--diaper'] { + --color: #3f88c5; +} +/* d00000 ff7d00 */ + +.badge { + background-color: var(--color); + display: inline-block; + padding: 0.35em .75em .25em .75em; + color: rgba(255, 255, 255, 0.75); + font-weight: 700; + text-transform: uppercase; + border-radius: 0.25rem; + font-size: 1rem; + line-height: 1; + min-width: 10ch; + text-align: center; +} + +.counters { + position: fixed; + right: 0; + width: max-content; + outline: 1px solid #ccc; + background-color: #eee; + padding: 2rem; + border-radius: 2rem 0 0 2rem; +}