baby-tracker/src/routes/calendar/+page.svelte

<script lang="ts">
import { onMount } from 'svelte';
	import { pb } from '$lib/pocketbase';

    type Action = {
		type: string;
		timestamp: string;
	};

	onMount(async () => {
		actions = await fetchAllActions();
	});

	async function fetchAllActions() {
		// Fetch all actions. Adjust as needed for date range or pagination
		const result = await pb.collection('actions').getList(1, 1000,{
      sort: 'timestamp'
    });
		return result.items;
	}

    let actions: Action[] = [];
  
    // Function to get the day of the week from a date string
    const getDayOfWeek = (dateString: string) => {
      return new Date(dateString).getDay();
    };
  
    // Function to get the hour of the day from a date string
    const getHourOfDay = (dateString: string) => {
      return new Date(dateString).getHours();
    };
  
    // Days of the week for headers
    //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);

    // Function to format hour in HH:mm format
    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;
      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;
      color: rgba(255,255,255,.5);
    }

    .event__title {
      font-weight: 900;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .2em;
    }

    .event__time {
      line-height: 1;
      font-size: 1.2rem;
      font-weight: 300;
      color: rgba(255,255,255,.75);
    }
  </style>
  
  <div class="calendar-wrapper">
    <div class="calendar">
      <!-- Empty cell for top-left corner -->
      <div></div>
    
      <!-- Day Headers -->
      {#each daysOfWeek as day (day)}
        <div class="day-header">{day}</div>
      {/each}
    
      <!-- Hour Labels and Calendar Grid -->
      {#each hours as hour (hour)}
        <div class="hour-label">{formatHour(hour)}</div> <!-- Hour label -->
        {#each daysOfWeek as _, dayIndex}
          <div class="hour">
            {#each actions as action (action.id)}
              {#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
                <div class="event event--{action.type}"><span class="event__title">{action.type}</span><span class="event__time">{formatTime(action.timestamp)}</span></div>
              {/if}
            {/each}
          </div>
        {/each}
      {/each}
    </div>
  </div>