added spitup; day/hour edits; fixed diaper/meal stats;

src/lib/components/Action.svelte

@@ -97,15 +97,28 @@
 			<h3>
 				{action.type} @{new Date(action.timestamp).toLocaleString('en-NL', {
 					hour: '2-digit',
-					minute: '2-digit'
+					minute: '2-digit',
+					weekday: 'short',
+					day: 'numeric'
 				})}
 			</h3>
 		</div>
 		<div class="dialog__middle">
-			<button class="button--edit-time" on:click={() => adjustTime(-5)}>-5</button>
+			<div>
-			<button class="button--edit-time" on:click={() => adjustTime(-1)}>-1</button>
+				<button class="button--edit-time" on:click={() => adjustTime(-5)}>-5m</button>
-			<button class="button--edit-time" on:click={() => adjustTime(1)}>+1</button>
+				<button class="button--edit-time" on:click={() => adjustTime(-1)}>-1m</button>
-			<button class="button--edit-time" on:click={() => adjustTime(5)}>+5</button>
+				<button class="button--edit-time" on:click={() => adjustTime(1)}>+1m</button>
+				<button class="button--edit-time" on:click={() => adjustTime(5)}>+5m</button>
+			</div>
+			<div>
+				<button class="button--edit-time" on:click={() => adjustTime(-1*60*24)}>-1d</button>
+				<button class="button--edit-time" on:click={() => adjustTime(-1*60)}>-1h</button>
+				<button class="button--edit-time" on:click={() => adjustTime(1*60)}>+1h</button>
+				<button class="button--edit-time" on:click={() => adjustTime(1*60*24)}>+1d</button>
+			</div>
+			<div>
+				(you can move an event to a different day, but it will disappear from the page)
+			</div>
 			<button class="button button-outline button--edit-time" on:click={deleteAction}>Delete</button>
 		</div>
 		<div class=""><button class="button--close" on:click={closeDialog}>Done Editing</button></div>

src/routes/+page.svelte

@@ -107,6 +107,7 @@
 			{#if isLastActionDiaper}
 				<button class="button--poop" on:click={() => recordAction('poop')}>Poop</button>
 			{/if}
+			<button class="button--spitup" on:click={() => recordAction('spitup')}>Spit-Up</button>
 		{/if}
 	</aside>
 

src/routes/stats/+page.svelte

@@ -105,25 +105,35 @@
 		return Math.round(totalSleepDuration / sleepDurations.length);
 	}
 
-	function calculateAvgDiaperChanges(actions: Action[]): number {
+	function calculateAvgDiaperChanges(actions: any[]): number {
-		let diaperChangesPerDay = new Map<string, number>();
+		const today = new Date().toDateString(); // Get today's date as a string
 
-		for (const action of actions) {
+		// Filter actions by type "food" and exclude today's actions
-			if (action.type === 'diaper') {
+		const foodActions = actions.filter((action) => {
-				const actionDate = action.timestamp.split('T')[0]; // Extract the date part
+			const actionDate = new Date(action.timestamp).toDateString(); // Convert timestamp to date string
-				diaperChangesPerDay.set(actionDate, (diaperChangesPerDay.get(actionDate) || 0) + 1);
+			return action.type === 'diaper' && actionDate !== today;
-			}
+		});
-		}
 
-		if (diaperChangesPerDay.size === 0) {
+		// Group by date
-			return 0;
+		const actionsByDate: { [key: string]: number } = {};
+		foodActions.forEach((action) => {
+			const date = new Date(action.timestamp).toDateString(); // Convert timestamp to date string
+			if (!actionsByDate[date]) {
+				actionsByDate[date] = 1;
+			} else {
+				actionsByDate[date]++;
 			}
+		});
 
-		const totalDiaperChanges = Array.from(diaperChangesPerDay.values()).reduce(
+		// Calculate total actions and number of days
-			(total, count) => total + count,
+		const totalActions = foodActions.length;
-			0
+		const numberOfDays = Object.keys(actionsByDate).length;
-		);
+
-		return totalDiaperChanges / diaperChangesPerDay.size;
+		// Calculate average actions per day, excluding today
+		const average = numberOfDays > 0 ? totalActions / numberOfDays : 0;
+
+		// Return the average to one decimal place
+		return parseFloat(average.toFixed(1));
 	}
 
 	function calculateAvgDaysBetweenPoops(actions: Action[]): number {
@@ -154,28 +164,41 @@
 		return parseFloat((totalDays / (poopDates.length - 1)).toFixed(2));
 	}
 
-	function calculateAvgMealsPerDay(actions: Action[]): number {
+	function calculateAvgMealsPerDay(actions: any[]): number {
-		let mealsPerDay = new Map<string, number>();
+		const today = new Date().toDateString(); // Get today's date as a string
 
-		for (const action of actions) {
+		// Filter actions by type "food" and exclude today's actions
-			if (action.type === 'food') {
+		const foodActions = actions.filter((action) => {
-				const actionDate = action.timestamp.split('T')[0]; // Extract the date part
+			const actionDate = new Date(action.timestamp).toDateString(); // Convert timestamp to date string
-				mealsPerDay.set(actionDate, (mealsPerDay.get(actionDate) || 0) + 1);
+			return action.type === 'food' && actionDate !== today;
-			}
+		});
-		}
 
-		if (mealsPerDay.size === 0) {
+		// Group by date
-			return 0;
+		const actionsByDate: { [key: string]: number } = {};
+		foodActions.forEach((action) => {
+			const date = new Date(action.timestamp).toDateString(); // Convert timestamp to date string
+			if (!actionsByDate[date]) {
+				actionsByDate[date] = 1;
+			} else {
+				actionsByDate[date]++;
 			}
+		});
 
-		const totalMeals = Array.from(mealsPerDay.values()).reduce((total, count) => total + count, 0);
+		// Calculate total actions and number of days
-		return totalMeals / mealsPerDay.size;
+		const totalActions = foodActions.length;
+		const numberOfDays = Object.keys(actionsByDate).length;
+
+		// Calculate average actions per day, excluding today
+		const average = numberOfDays > 0 ? totalActions / numberOfDays : 0;
+
+		// Return the average to one decimal place
+		return parseFloat(average.toFixed(1));
 	}
 </script>
 
 <section>
 	<h2>Stats</h2>
-	<p>(let me know how broken these are)</p>
+	<p>(diapers and meals should be correct now)</p>
 	<ul>
 		<li>{stats.avgSleepPerNap} min / nap</li>
 		<li>{stats.avgNapsPerDay} naps / day</li>

src/styles/app.css

@@ -19,6 +19,9 @@
 [class*='--diaper'] {
 	--color: #3f88c5;
 }
+[class*='--spitup'] {
+	--color: #7f8b96;
+}
 /* d00000 ff7d00 */
 
 body {
@@ -55,7 +58,9 @@ input[type='submit'] {
 }
 
 button,
-input[type='submit'] {
+input[type='submit'],
+button:focus,
+input[type='submit']:focus {
 	background-color: var(--color);
 	border-color: var(--color);
   transition: all .2s ease-in-out;