added counters; calendar styling; timestamp replaced created; various tweaks;

src/lib/components/counters.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
   
@@ -13,7 +13,7 @@
   
     const getLastActionTime = (type) => {
       const lastAction = actions.filter(action => action.type === type).pop();
-      return lastAction ? new Date(lastAction.created) : null;
+      return lastAction ? new Date(lastAction.timestamp) : null;
     };
   
     const calculateDiffMinutes = (date) => {
@@ -37,6 +37,16 @@
     // Update immediately when the component has access to actions
     updateTimes();
 
+    function convertMinutes(minutes: number): string {
+        if (minutes < 60) {
+            return `${minutes}m`;
+        } else {
+            const hours = Math.floor(minutes / 60);
+            const remainingMinutes = minutes % 60;
+            return `${hours}h${remainingMinutes}m`;
+        }
+    }
+  
     onMount(() => {
       const interval = setInterval(updateTimes, 1000); // Update every minute
   
@@ -46,11 +56,11 @@
     });
   </script>
   
-  <div class="column">
+  <div class="counters">
-    {#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}<p>Awake for {$awakeMinutes} minutes</p>{/if}
+    {#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}<div>Awake for <strong>{convertMinutes($awakeMinutes)}</strong></div>{/if}
-    {#if $asleepMinutes !== null && $asleepMinutes < $awakeMinutes}<p>Sleeping for {$asleepMinutes} minutes</p>{/if}
+    {#if $asleepMinutes !== null && $asleepMinutes < $awakeMinutes}<div>Sleeping for <strong>{convertMinutes($asleepMinutes)}</strong></div>{/if}
-    {#if $foodMinutes !== null}<p>Ate {$foodMinutes} minutes ago</p>{/if}
+    {#if $foodMinutes !== null}<div>Ate <strong>{convertMinutes($foodMinutes)}</strong> ago</div>{/if}
-    {#if $diaperMinutes !== null}<p>Diaper changed {$diaperMinutes} minutes ago</p>{/if}
+    {#if $diaperMinutes !== null}<div>Changed <strong>{convertMinutes($diaperMinutes)}</strong> ago</div>{/if}
-    {#if $poopDays === 0}<p>Pooped today</p>{:else if $poopDays !== null}<p>Pooped {$poopDays} days ago</p>{/if}
+    {#if $poopDays === 0}<div>Pooped today!</div>{:else if $poopDays !== null}<div>Pooped <strong>{$poopDays} days</strong> ago</div>{/if}
   </div>
   

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <svelte:head>
     <!-- Google Fonts -->
-    <link rel="stylesheet" href="https://api.fonts.coollabs.io/css?family=Roboto:300,300italic,700,700italic">
+    <link href="https://api.fonts.coollabs.io/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-
     <title>Coover Tracker</title>
 
 </svelte:head>

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<Action>(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}
         <aside>
-            <button on:click={() => recordAction('awake')}>Awake</button>
+            <button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
-            <button on:click={() => recordAction('asleep')}>Asleep</button>
+            <button class="button--asleep" on:click={() => recordAction('asleep')}>Asleep</button>
-            <button on:click={() => recordAction('food')}>Food</button>
+            <button class="button--food" on:click={() => recordAction('food')}>Food</button>
-            <button on:click={() => recordAction('diaper')}>Diaper</button>
+            <button class="button--diaper" on:click={() => recordAction('diaper')}>Diaper</button>
-            <button on:click={() => recordAction('poop')}>Poop</button>
+            <button class="button--poop" on:click={() => recordAction('poop')}>Poop</button>
         </aside>
 
         <section>
@@ -53,7 +54,7 @@
                 <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>
+                        <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} />

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,46 +40,75 @@ 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}`;
+  }
   </script>
   
   <style>
+    .calendar-wrapper {
+      max-width: 100%;
+      /* outline: 1px solid #ccc; */
+      overflow-x:auto;
+      position: relative;
+    }
     .calendar {
       display: grid;
       grid-template-columns: 60px repeat(7, 1fr); /* Adjusted for hour column */
       text-align: center;
+      min-width: 700px;
     }
     .day-header, .hour-label {
       font-weight: bold;
-      border: 1px solid #ccc;
+      font-size: 1.2rem;
+      background: #e9e9e9;
+    }
+    .day-header {
+      border-radius: 1em 1em 0 0;
+      margin-top: 1rem;
+      padding: .5rem;
+    }
+    .hour-label{
+      border-radius: 1em 0 0 1em;
+      padding: .5rem;
+      margin-left: .5rem;
     }
     .hour {
-      border: 1px solid #ccc;
+      border: 1px solid #e9e9e9;
-      height: 60px;
+      min-height: 60px;
     }
     .event {
-      background-color: lightblue;
+      background-color: var(--color);
       border-radius: 4px;
-      padding: 2px;
+      padding: .5em 1em;
-      text-align: left;
+      line-height: 1;
+      margin: 2px;
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      color: rgba(255,255,255,.5);
     }
 
-    .event--food {
+    .event__title {
-      background-color: lightgreen;
+      font-weight: 900;
-    }
+      font-size: 1.2rem;
-    .event--poop {
+      text-transform: uppercase;
-      background-color: burlywood;
+      letter-spacing: .2em;
-    }
-    .event--asleep {
-      background-color: lightblue;
-    }
-   .event--awake {
-      background-color: gold;
-    }
-    .event--diaper {
-      background-color: lightpink;
     }
+    
   </style>
   
+  <div class="calendar-wrapper">
     <div class="calendar">
       <!-- Empty cell for top-left corner -->
       <div></div>
@@ -94,12 +124,13 @@ import { onMount } from 'svelte';
         {#each daysOfWeek as _, dayIndex}
           <div class="hour">
             {#each actions as action}
-            {#if getDayOfWeek(action.created) === dayIndex && getHourOfDay(action.created) === hour}
+              {#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
-              <div class="event event--{action.type}">{action.type}</div>
+                <div class="event event--{action.type}"><span class="event__title">{action.type}</span><span>{formatTime(action.timestamp)}</span></div>
               {/if}
             {/each}
           </div>
         {/each}
       {/each}
     </div>
+  </div>
   

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

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 + 1].timestamp).getTime() -
-					new Date(sleepActions[i].created).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<string, 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 asleepDate = new Date(sortedActions[i].timestamp);
-				const awakeDate = new Date(sortedActions[i + 1].created);
+				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 asleepDate = new Date(sortedActions[i].timestamp);
-				const awakeDate = new Date(sortedActions[i + 1].created);
+				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);
 			}
 		}

src/styles/app.css

@@ -2,19 +2,23 @@
 	--c-primary: darkorange; /* Replace #yourColor with your desired color */
 }
 
+body {
+	background-color: #f2f0ef;
+}
+
 a,
-input[type="text"]:focus,
+input[type='text']:focus,
-input[type="email"]:focus,
+input[type='email']:focus,
-input[type="password"]:focus,
+input[type='password']:focus,
 select:focus,
 textarea:focus {
 	color: var(--c-primary);
 }
 
 button,
-input[type="submit"] {
+input[type='submit'] {
-    background-color: var(--c-primary);
+	background-color: var(--color);
-    border-color: var(--c-primary);
+	border-color: var(--color);
 }
 
 nav ul {
@@ -25,10 +29,77 @@ nav ul {
 	justify-content: end;
 }
 
+nav ul li {
+	font-size: 2rem;
+}
+
 header {
 	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;
 }
+
+[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;
+}