Fix affirmation list and add frequencies page

2026-02-23 08:47:58 -06:00
parent e390896f44
commit bec8f57a93
10 changed files with 458 additions and 14 deletions
@@ -5,8 +5,6 @@
 This layout also acts as a sort of 'gatekeeper' in that it is also the authorization layer.
 -->
 <script lang="ts">
-	import Window from '$lib/components/containers/Window.svelte';
-
 	const { children } = $props();

 	let adminExpanded = $state(true);
@@ -30,14 +28,15 @@
 			{#if adminExpanded}
 				<div class="ml-5 flex flex-col">
 					<a href="/affirmations" class="text-blue-600">Affirmations</a>
+					<a href="/frequencies"  class="text-blue-600">Solfeggio Frequencies</a>
 				</div>
 			{/if}
 		</div>
 		<!-- End Sidebar links -->
 	</div>
 	<!-- End Sidebar -->
-	 <!-- Page content within a "Window" -->
-	<Window>
+	<!-- Page content -->
+	<div class="min-h-0 flex-1 overflow-auto">
 		{@render children()}
-	</Window>
+	</div>
 </div>
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import AffirmationForm from '$lib/components/forms/affirmation/AffirmationForm.svelte';
 	import Center from '$lib/components/containers/Center.svelte';
-	import Window from '$lib/components/containers/Window.svelte';
 	import type { ActionData, PageData } from './$types';
 	import AffirmationList from '$lib/components/ui/AffirmationList/AffirmationList.svelte';

@@ -15,8 +14,8 @@
 	});
 </script>

-<div class="flex h-full flex-col gap-6 p-6 mb-4">
-	<div class="flex items-center justify-between">
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 mb-4">
+	<div class="flex shrink-0 items-center justify-between">
 		<h1 class="text-2xl font-semibold text-gray-900">Affirmations</h1>
 		<button
 			type="button"
@@ -28,9 +27,7 @@
 	</div>

 	{#if data.affirmations.length > 0}
-		<Window>
-			<AffirmationList affirmations={data.affirmations} />
-		</Window>
+		<AffirmationList affirmations={data.affirmations} />
 	{:else}
 		<Center>
 			<div class="text-center">
@@ -0,0 +1,47 @@
+import type { PageServerLoad } from './$types';
+import { prisma } from '$lib/db';
+import { fail, type Actions, type RequestEvent } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async () => {
+	const frequencies = await prisma.solfeggioFrequency.findMany({
+		include: {
+			_count: {
+				select: { affirmations: true }
+			}
+		}
+	});
+	return { frequencies };
+};
+
+export const actions: Actions = {
+	create: async ({ request }: RequestEvent) => {
+		const form = await request.formData();
+		const name = form.get('name') as string;
+		const value = Number(form.get('value'));
+
+		if (!name) {
+			return fail(400, { error: 'Name is required!', ...Object.fromEntries(form) });
+		}
+
+		if (!value || value <= 0) {
+			return fail(400, {
+				error: 'A valid frequency value is required!',
+				...Object.fromEntries(form)
+			});
+		}
+
+		try {
+			const newFrequency = await prisma.solfeggioFrequency.create({
+				data: { name, value }
+			});
+
+			return { success: true, newFrequency };
+		} catch (err) {
+			console.log(err);
+			return fail(500, {
+				error: 'An unknown error has occurred. Please try again later.',
+				...Object.fromEntries(form)
+			});
+		}
+	}
+};
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import FrequencyForm from '$lib/components/forms/frequency/FrequencyForm.svelte';
+	import Center from '$lib/components/containers/Center.svelte';
+	import type { ActionData, PageData } from './$types';
+	import FrequencyList from '$lib/components/ui/FrequencyList/FrequencyList.svelte';
+
+	let { data, form } = $props<{ data: PageData; form: ActionData }>();
+	let showModal = $state(false);
+
+	$effect(() => {
+		if (form?.success) {
+			showModal = false;
+		}
+	});
+</script>
+
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 mb-4">
+	<div class="flex shrink-0 items-center justify-between">
+		<h1 class="text-2xl font-semibold text-gray-900">Frequencies</h1>
+		<button
+			type="button"
+			class="rounded-lg bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700"
+			onclick={() => (showModal = true)}
+		>
+			Create +
+		</button>
+	</div>
+
+	{#if data.frequencies.length > 0}
+		<FrequencyList frequencies={data.frequencies} />
+	{:else}
+		<Center>
+			<div class="text-center">
+				<p class="text-lg text-gray-500">No frequencies yet</p>
+				<p class="mt-1 text-sm text-gray-400">Click "Create +" to add your first one</p>
+			</div>
+		</Center>
+	{/if}
+</div>
+
+{#if showModal}
+	<div class="fixed inset-0 z-50 overflow-y-auto bg-black/50">
+		<div class="flex min-h-full items-center justify-center p-4">
+			<div class="w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
+				<div class="mb-6 flex items-center justify-between">
+					<h2 class="text-xl font-semibold text-gray-900">Create New Frequency</h2>
+					<button
+						type="button"
+						class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+						onclick={() => (showModal = false)}
+					>
+						✕
+					</button>
+				</div>
+
+				{#if form?.error}
+					<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+						{form.error}
+					</div>
+				{/if}
+
+				<FrequencyForm {form} action="?/create" submitLabel="Create Frequency" />
+			</div>
+		</div>
+	</div>
+{/if}
@@ -0,0 +1,50 @@
+import type { PageServerLoad } from './$types';
+import { prisma } from '$lib/db';
+import { error, fail, type Actions, type RequestEvent, type ServerLoadEvent } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ params }: ServerLoadEvent) => {
+	const frequency = await prisma.solfeggioFrequency.findUnique({
+		where: { id: Number(params.id) }
+	});
+
+	if (!frequency) {
+		throw error(404, 'not found');
+	}
+
+	return { frequency };
+};
+
+export const actions: Actions = {
+	update: async ({ request }: RequestEvent) => {
+		const form = await request.formData();
+		const id = Number(form.get('id'));
+		const name = form.get('name') as string;
+		const value = Number(form.get('value'));
+
+		if (!name) {
+			return fail(400, { error: 'Name is required!', ...Object.fromEntries(form) });
+		}
+
+		if (!value || value <= 0) {
+			return fail(400, {
+				error: 'A valid frequency value is required!',
+				...Object.fromEntries(form)
+			});
+		}
+
+		try {
+			const updatedFrequency = await prisma.solfeggioFrequency.update({
+				where: { id },
+				data: { name, value }
+			});
+
+			return { success: true, updatedFrequency };
+		} catch (err) {
+			console.log(err);
+			return fail(500, {
+				error: 'An unknown error has occurred. Please try again later. Your changes have not been saved.',
+				...Object.fromEntries(form)
+			});
+		}
+	}
+};
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import FrequencyForm from '$lib/components/forms/frequency/FrequencyForm.svelte';
+	import type { ActionData, PageData } from './$types';
+	import { onMount } from 'svelte';
+
+	let { data, form } = $props<{ data: PageData; form: ActionData }>();
+	let seconds = $state(0);
+	let remainder = $derived(5 - seconds);
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			if (form?.success) {
+				seconds += 1;
+				if (seconds === 6) {
+					window.location.href = '/frequencies';
+				}
+			}
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="mx-auto mb-auto mt-24 max-w-2xl px-4">
+	<a href="/frequencies" class="text-blue-600">Back to Frequencies</a>
+
+	{#if form?.error}
+		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+			{form.error}
+		</div>
+	{/if}
+
+	{#if form?.success}
+		<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700">
+			Frequency updated successfully! You will be redirected in {remainder} seconds.
+		</div>
+	{/if}
+
+	<div class="mt-6">
+		<FrequencyForm
+			frequency={data.frequency}
+			{form}
+			action="?/update"
+			submitLabel="Save Frequency"
+		/>
+	</div>
+</div>