Skip to content

Commit

Permalink
major component and folder structure overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelHolley committed Jan 12, 2025
1 parent e739d2e commit 6109c06
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 86 deletions.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script lang="ts">
import { onMount } from 'svelte';
import ActivityBubble from './ActivityBubble.svelte';
import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek';
import { onMount } from 'svelte';
import ActivityBubble from './ActivityBubble.svelte';
dayjs.extend(isoWeek);
Expand Down
30 changes: 30 additions & 0 deletions src/lib/components/Habit/HabitOverviewItem.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { Prisma } from '@prisma/client';
import dayjs from 'dayjs';
import HabitActivityHistory from './HabitActivityHistory.svelte';
let { habit } = $props();
</script>

<div class="flex flex-col gap-1">
<div class="flex flex-row justify-between">
<a href="/{habit.id}">
<span class="link-hover link text-lg decoration-accent">
{habit.name} <span class="text-accent">&rsaquo;</span>
</span></a
>
<form method="post" action="?/addToday" use:enhance>
<input type="hidden" name="habitId" value={habit.id} />
<button
class="btn btn-outline btn-accent btn-xs"
title="Add Today"
disabled={(habit.dates as Prisma.JsonArray).includes(dayjs().format('YYYY-MM-DD'))}
>+</button
>
</form>
</div>
<a href="/{habit.id}" class="rounded-lg bg-base-200 p-4">
<HabitActivityHistory dates={habit.dates} showWeeks={12} />
</a>
</div>
50 changes: 50 additions & 0 deletions src/lib/components/Habit/HabitSummaryComponent.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<script lang="ts">
import dayjs from 'dayjs';
import ActivityBubble from './ActivityBubble.svelte';
let { summary }: { summary: { id: string; name: string; dates: string[] }[] } = $props();
const thirtyDaysAgo = dayjs().subtract(30, 'days');
</script>

{#snippet summaryDateLabel(date: dayjs.Dayjs, spanDays: number)}
<div class="col-span-{spanDays}">
<div>{date.format('DD')}</div>
<div>{date.format(' MMM')}</div>
</div>
{/snippet}

<div class="flex flex-shrink">
<div class="overflow-hidden rounded-lg bg-base-200 p-4">
<div class="relative grid items-center gap-1 overflow-x-scroll pb-4 text-[0.5rem]">
<div class="col-span-1"></div>
{@render summaryDateLabel(thirtyDaysAgo.add(1, 'day'), 5)}
{@render summaryDateLabel(thirtyDaysAgo.add(6, 'day'), 5)}
{@render summaryDateLabel(thirtyDaysAgo.add(11, 'day'), 5)}
{@render summaryDateLabel(thirtyDaysAgo.add(16, 'day'), 5)}
{@render summaryDateLabel(thirtyDaysAgo.add(21, 'day'), 5)}
{@render summaryDateLabel(thirtyDaysAgo.add(26, 'day'), 4)}
{@render summaryDateLabel(thirtyDaysAgo.add(30, 'day'), 1)}

{#each summary as summaryItem}
<a class="link-hover link link-primary sticky left-0 mr-2 text-sm" href="/{summaryItem.id}"
>{summaryItem.name}</a
>
{#each { length: 30 } as _, i}
<ActivityBubble
active={summaryItem.dates.includes(
thirtyDaysAgo.add(i + 1, 'day').format('YYYY-MM-DD')
)}
title={thirtyDaysAgo.add(i + 1, 'day').format('YYYY-MM-DD')}
/>
{/each}
{/each}
</div>
</div>
</div>

<style>
.grid {
grid-template-columns: repeat(31, auto);
}
</style>
5 changes: 5 additions & 0 deletions src/routes/(app)/+layout.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async (event) => {
return { user: event.locals.user };
};
19 changes: 17 additions & 2 deletions src/routes/(app)/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
<script>
<script lang="ts">
import { enhance } from '$app/forms';
import type { Snippet } from 'svelte';
import '../../app.css';
import type { LayoutData } from './$types';
let { children } = $props();
let { children, data }: { data: LayoutData; children: Snippet } = $props();
</script>

<div class="container mx-auto px-3 py-8">
<div class="mb-7 flex flex-row items-center justify-between">
<span class="text-4xl font-bold text-primary">Habit<span class="text-accent">Kit</span></span>
<div class="flex flex-col">
<span class="text-xs">
Logged in as <span class="text-accent">{data.user?.username ?? 'UNDEFINED'}</span>
</span>
<form method="post" action="?/logout" use:enhance>
<button class="text-md btn btn-link btn-accent btn-xs px-0">Sign out</button>
</form>
</div>
</div>

{@render children()}
</div>
4 changes: 2 additions & 2 deletions src/routes/(app)/+page.server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ export const load: PageServerLoad = async (event) => {
return {
id: habit.id,
name: habit.name,
dates: dates
dates: dates as string[]
};
});

return { user: event.locals.user, habits: habits, summary: summary };
return { habits: habits, summary: summary };
};

export const actions: Actions = {
Expand Down
89 changes: 10 additions & 79 deletions src/routes/(app)/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,25 +1,11 @@
<script lang="ts">
import { enhance } from '$app/forms';
import ActivityBubble from '$lib/components/ActivityBubble.svelte';
import HabitActivityHistory from '$lib/components/HabitActivityHistory.svelte';
import { Prisma } from '@prisma/client';
import dayjs from 'dayjs';
import HabitOverviewItem from '$lib/components/Habit/HabitOverviewItem.svelte';
import LastXDays from '$lib/components/Habit/HabitSummaryComponent.svelte';
import type { PageServerData } from './$types';
let { data }: { data: PageServerData } = $props();
const thirtyDaysAgo = dayjs().subtract(30, 'days');
</script>

<div class="mb-7 flex flex-row items-center justify-between">
<p class="text-xl">Welcome back, <span class="text-primary">{data.user.username}</span>!</p>
<div class="flex flex-row items-center gap-3">
<p>Not you?</p>
<form method="post" action="?/logout" use:enhance>
<button class="btn btn-link px-0">Sign out</button>
</form>
</div>
</div>

<section class="my-6">
<div class="flex flex-row items-center gap-4">
<h2 class="text-3xl">Habits</h2>
Expand All @@ -28,70 +14,15 @@

<div class="my-6">
<h3 class="mb-3 text-xl">Last 30 Days</h3>
<div class="flex flex-shrink">
<div class="overflow-hidden rounded-lg bg-base-200 p-4">
<div class="relative grid items-center gap-1 overflow-x-scroll pb-4 text-[0.5rem]">
<div class="col-span-1"></div>
<div class="col-span-5">{thirtyDaysAgo.add(1, 'day').format('DD-MMM')}</div>
<div class="col-span-5">{thirtyDaysAgo.add(6, 'day').format('DD-MMM')}</div>
<div class="col-span-5">{thirtyDaysAgo.add(11, 'day').format('DD-MMM')}</div>
<div class="col-span-5">{thirtyDaysAgo.add(16, 'day').format('DD-MMM')}</div>
<div class="col-span-5">{thirtyDaysAgo.add(21, 'day').format('DD-MMM')}</div>
<div class="col-span-4">{thirtyDaysAgo.add(26, 'day').format('DD-MMM')}</div>
<div class="col-span-1">{thirtyDaysAgo.add(30, 'day').format('DD-MMM')}</div>

{#each data.summary as summaryItem}
<a
class="link-hover link link-primary sticky left-0 mr-2 text-sm"
href="/{summaryItem.id}">{summaryItem.name}</a
>
{#each { length: 30 } as _, i}
<ActivityBubble
active={summaryItem.dates.includes(
thirtyDaysAgo.add(i + 1, 'day').format('YYYY-MM-DD')
)}
title={thirtyDaysAgo.add(i + 1, 'day').format('YYYY-MM-DD')}
/>
{/each}
{/each}
</div>
</div>
</div>
<LastXDays summary={data.summary} />
</div>

<div class="my-6">
<h2 class="mb-3 text-2xl">Overview</h2>
<div class="flex flex-row flex-wrap justify-start gap-6">
{#each data.habits as habit}
<div class="flex flex-col gap-1">
<div class="flex flex-row justify-between">
<a href="/{habit.id}">
<span class="link-hover link text-xl decoration-accent">
{habit.name} <span class="text-accent">&rsaquo;</span>
</span></a
>
<form method="post" action="?/addToday" use:enhance>
<input type="hidden" name="habitId" value={habit.id} />
<button
class="btn btn-outline btn-accent btn-xs"
title="Add Today"
disabled={(habit.dates as Prisma.JsonArray).includes(
dayjs().format('YYYY-MM-DD')
)}>+</button
>
</form>
</div>
<a href="/{habit.id}" class="rounded-lg bg-base-200 p-4">
<HabitActivityHistory dates={habit.dates} showWeeks={12} />
</a>
</div>
{/each}
</div>
<div class="my-6">
<h3 class="mb-3 text-xl">Overview</h3>
<div class="flex flex-row flex-wrap justify-start gap-6">
{#each data.habits as habit}
<HabitOverviewItem {habit} />
{/each}
</div>
</div>
</section>

<style>
.grid {
grid-template-columns: repeat(31, auto);
}
</style>
2 changes: 1 addition & 1 deletion src/routes/(app)/[id]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { enhance } from '$app/forms';
import HabitActivityHistory from '$lib/components/HabitActivityHistory.svelte';
import HabitActivityHistory from '$lib/components/Habit/HabitActivityHistory.svelte';
import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
import type { PageData } from './$types';
Expand Down

0 comments on commit 6109c06

Please sign in to comment.