added calendar prev/next

src/routes/calendar/+page.svelte

@@ -7,24 +7,58 @@
 	import ToiletPaper from '$lib/components/svgs/ToiletPaper.svelte';
 	import Poop from '$lib/components/svgs/Poop.svelte';
 
+	// State for current week
+	let currentWeekStart: Date = new Date();
+
+	// Adjust currentWeekStart to the beginning of the week
+	currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay());
+	const oldestDataDate: Date = new Date('2024-01-22');
+
+	// Reactive store to hold actions
+	$: actions = [];
+
 	type Action = {
+		id: any;
 		type: string;
 		timestamp: string;
 	};
 
 	onMount(async () => {
-		actions = await fetchAllActions();
+		actions = await fetchAllActions(currentWeekStart);
 	});
 
-	async function fetchAllActions() {
+	async function fetchAllActions(startOfWeek: Date) {
-		// Fetch all actions. Adjust as needed for date range or pagination
+		// Get current date and calculate start and end of the week
+
+		const endOfWeek = new Date(
+			startOfWeek.getFullYear(),
+			startOfWeek.getMonth(),
+			startOfWeek.getDate() + 7
+		);
+
 		const result = await pb.collection('actions').getList(1, 1000, {
 			sort: 'timestamp'
 		});
-		return result.items;
+
+		// Filter actions within the current week
+		const filteredActions = result.items.filter((action) => {
+			const actionDate = new Date(action.timestamp);
+			return actionDate >= startOfWeek && actionDate < endOfWeek;
+		});
+
+		return filteredActions;
 	}
 
-    let actions: Action[] = [];
+	// Handlers for next and previous week
+	const handleNextWeek = async () => {
+		currentWeekStart.setDate(currentWeekStart.getDate() + 7);
+		actions = await fetchAllActions(currentWeekStart);
+	};
+
+	const handlePreviousWeek = async () => {
+		currentWeekStart.setDate(currentWeekStart.getDate() - 7);
+		actions = await fetchAllActions(currentWeekStart);
+	};
 
 	// Function to get the day of the week from a date string
 	const getDayOfWeek = (dateString: string) => {
@@ -60,67 +94,35 @@
 		const minutes = date.getMinutes().toString().padStart(2, '0');
 		return `${hours}:${minutes}`;
 	}
+
+	// Function to check if it's the current week
+	function isCurrentWeek() {
+		const today = new Date();
+		const startOfTodayWeek = new Date(
+			today.getFullYear(),
+			today.getMonth(),
+			today.getDate() - today.getDay()
+		);
+
+		return (
+			currentWeekStart.getFullYear() === startOfTodayWeek.getFullYear() &&
+			currentWeekStart.getMonth() === startOfTodayWeek.getMonth() &&
+			currentWeekStart.getDate() === startOfTodayWeek.getDate()
+		);
+	}
+
+	// Function to check if it's the oldest data week
+	function isOldestWeek() {
+		return currentWeekStart <= oldestDataDate;
+	}
 </script>
 
-  <style>
+<!-- {#if !isOldestWeek()} -->
-    .calendar-wrapper {
+  <button on:click={handlePreviousWeek}>Previous Week</button>
-      max-width: 100%;
+<!-- {/if} -->
-      /* outline: 1px solid #ccc; */
+<!-- {#if !isCurrentWeek()} -->
-      overflow-x:auto;
+	<button on:click={handleNextWeek}>Next Week</button>
-      position: relative;
+<!-- {/if} -->
-    }
-    .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;
-      font-size: 1.2rem;
-      background: var(--c-border);
-    }
-    .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 var(--c-border);
-      min-height: 60px;
-    }
-    .event {
-      background-color: var(--color);
-      border-radius: 4px;
-      padding: 0.3em 0.8em;
-      line-height: 1;
-      margin: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      --c-event: rgba(255,255,255,.5);
-    }
-
-    .event__title {
-      font-weight: 900;
-      font-size: 1.2rem;
-      text-transform: uppercase;
-      letter-spacing: .2em;
-      color: rgba(255,255,255,.5);
-    }
-
-    .event__time {
-      line-height: 1;
-      font-size: 1.2rem;
-      font-weight: 300;
-      color: var(--c-event);
-    }
-  </style>
 
 <div class="calendar-wrapper">
 	<div class="calendar">
@@ -134,7 +136,8 @@
 
 		<!-- Hour Labels and Calendar Grid -->
 		{#each hours as hour (hour)}
-        <div class="hour-label">{formatHour(hour)}</div> <!-- Hour label -->
+			<div class="hour-label">{formatHour(hour)}</div>
+			<!-- Hour label -->
 			{#each daysOfWeek as _, dayIndex}
 				<div class="hour">
 					{#each actions as action (action.id)}
@@ -162,3 +165,63 @@
 	</div>
 </div>
 
+<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;
+		font-size: 1.2rem;
+		background: var(--c-border);
+	}
+	.day-header {
+		border-radius: 1em 1em 0 0;
+		margin-top: 1rem;
+		padding: 0.5rem;
+	}
+	.hour-label {
+		border-radius: 1em 0 0 1em;
+		padding: 0.5rem;
+		margin-left: 0.5rem;
+	}
+	.hour {
+		border: 1px solid var(--c-border);
+		min-height: 60px;
+	}
+	.event {
+		background-color: var(--color);
+		border-radius: 4px;
+		padding: 0.3em 0.8em;
+		line-height: 1;
+		margin: 2px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		--c-event: rgba(255, 255, 255, 0.5);
+	}
+
+	.event__title {
+		font-weight: 900;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		letter-spacing: 0.2em;
+		color: rgba(255, 255, 255, 0.5);
+	}
+
+	.event__time {
+		line-height: 1;
+		font-size: 1.2rem;
+		font-weight: 300;
+		color: var(--c-event);
+	}
+</style>