added calendar prev/next
This commit is contained in:
Spencer Flagg
parent
c6ebb13d30
commit
4b5d438ee7
1 changed files with 210 additions and 147 deletions
|
|
@ -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() {
|
||||
// Fetch all actions. Adjust as needed for date range or pagination
|
||||
const result = await pb.collection('actions').getList(1, 1000,{
|
||||
async function fetchAllActions(startOfWeek: Date) {
|
||||
// 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,69 +94,37 @@
|
|||
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;
|
||||
--c-event: rgba(255,255,255,.5);
|
||||
// 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()
|
||||
);
|
||||
}
|
||||
|
||||
.event__title {
|
||||
font-weight: 900;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .2em;
|
||||
color: rgba(255,255,255,.5);
|
||||
// Function to check if it's the oldest data week
|
||||
function isOldestWeek() {
|
||||
return currentWeekStart <= oldestDataDate;
|
||||
}
|
||||
</script>
|
||||
|
||||
.event__time {
|
||||
line-height: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
color: var(--c-event);
|
||||
}
|
||||
</style>
|
||||
<!-- {#if !isOldestWeek()} -->
|
||||
<button on:click={handlePreviousWeek}>Previous Week</button>
|
||||
<!-- {/if} -->
|
||||
<!-- {#if !isCurrentWeek()} -->
|
||||
<button on:click={handleNextWeek}>Next Week</button>
|
||||
<!-- {/if} -->
|
||||
|
||||
<div class="calendar-wrapper">
|
||||
<div class="calendar-wrapper">
|
||||
<div class="calendar">
|
||||
<!-- Empty cell for top-left corner -->
|
||||
<div></div>
|
||||
|
|
@ -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)}
|
||||
|
|
@ -160,5 +163,65 @@
|
|||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue