79 lines
1.9 KiB
Svelte
79 lines
1.9 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import { pb } from '$lib/pocketbase';
|
||
|
|
|
||
|
|
type Action = {
|
||
|
|
type: string;
|
||
|
|
created: 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);
|
||
|
|
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'];
|
||
|
|
|
||
|
|
// Generate hours for the grid
|
||
|
|
const hours = Array.from({ length: 24 }, (_, i) => i);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.calendar {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(7, 1fr);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.day-header {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.hour {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
min-height: 60px;
|
||
|
|
}
|
||
|
|
.event {
|
||
|
|
background-color: lightblue;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 2px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="calendar">
|
||
|
|
<!-- Day Headers -->
|
||
|
|
{#each daysOfWeek as day}
|
||
|
|
<div class="day-header">{day}</div>
|
||
|
|
{/each}
|
||
|
|
|
||
|
|
<!-- Calendar Grid -->
|
||
|
|
{#each hours as hour}
|
||
|
|
{#each daysOfWeek as _, dayIndex}
|
||
|
|
<div class="hour">
|
||
|
|
{#each actions as action}
|
||
|
|
{#if getDayOfWeek(action.created) === dayIndex && getHourOfDay(action.created) === hour}
|
||
|
|
<div class="event">{action.type}</div>
|
||
|
|
{/if}
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|