Merge pull request #99 from pvdthings/shifts-fixes

Shifts - Some fixes
pvdthings · Nov 27, 2024 · deb0479 · deb0479
2 parents b0c1bf2 + d3ae8f4
commit deb0479
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 48 deletions.
diff --git a/apps/web/src/lib/shifts/ShiftCard.svelte b/apps/web/src/lib/shifts/ShiftCard.svelte
@@ -1,58 +1,81 @@
 <script>
-	import { getContext } from "svelte";
+	import { getContext } from 'svelte';
 
-  let { id, date, enrolled, removed, time, title, selected, volunteers, onAdd, onRemove } = $props();
+	let {
+		id,
+		date,
+		description,
+		enrolled,
+		removed,
+		time,
+		title,
+		selected,
+		volunteers,
+		onAdd,
+		onRemove
+	} = $props();
 </script>
 
 <div class="card bg-white border border-base-300 p-4 lg:p-8 shadow-sm">
 	<div class="flex mb-4 lg:mb-6">
 		<div class="flex-grow">
 			<div class="font-display font-semibold lg:text-lg">{date}</div>
-      <div class="mb-2 text-sm lg:text-base">{time}</div>
+			<div class="mb-2 text-sm lg:text-base">{time}</div>
 			<div class="font-display text-xl lg:text-2xl">{title}</div>
+      {#if description?.length}
+        <div class="mt-1 text-sm max-w-prose">{description}</div>
+      {/if}
 		</div>
 		<div class="flex justify-end">
-      {#if (selected || enrolled) && !removed}
-        <button onclick={() => onRemove(id)} class="font-display btn btn-sm lg:btn-md btn-success border border-success shadow-sm" class:btn-disabled={!onRemove}>
-          <span class="ph-bold ph-check text-xl"></span>
-          <span>Added</span>
-        </button>
-      {:else}
-        <button onclick={() => onAdd(id)} class="font-display btn btn-sm lg:btn-md btn-secondary border border-base-300 shadow-sm" class:btn-disabled={!onAdd}>
-          <span class="ph-bold ph-user-plus text-xl"></span>
-          <span>Add me</span>
-        </button>
-      {/if}
+			{#if (selected || enrolled) && !removed}
+				<button
+					onclick={() => onRemove(id)}
+					class="font-display btn btn-sm lg:btn-md btn-success border border-success shadow-sm"
+					class:btn-disabled={!onRemove}
+				>
+					<span class="ph-bold ph-check text-xl"></span>
+					<span>Added</span>
+				</button>
+			{:else}
+				<button
+					onclick={() => onAdd(id)}
+					class="font-display btn btn-sm lg:btn-md btn-secondary border border-base-300 shadow-sm"
+					class:btn-disabled={!onAdd}
+				>
+					<span class="ph-bold ph-user-plus text-xl"></span>
+					<span>Add me</span>
+				</button>
+			{/if}
 		</div>
 	</div>
 
 	<div>
 		<div class="mb-1 font-display font-semibold text-sm lg:text-base">Volunteers</div>
 		<div class="flex flex-wrap items-center gap-2">
-      {#if !volunteers.some((v) => v.keyholder) && !enrolled}
-        <div class="flex items-center gap-1">
-          <span class="ph-bold ph-warning text-warning lg:text-lg"></span>
-          <span class="text-sm lg:text-lg">No Keyholder</span>
-        </div>
-      {/if}
+			{#if !volunteers.some((v) => v.keyholder) && !enrolled}
+				<div class="flex items-center gap-1">
+					<span class="ph-bold ph-warning text-warning lg:text-lg"></span>
+					<span class="text-sm lg:text-lg">No Keyholder</span>
+				</div>
+			{/if}
 
-      {#if enrolled}
-        <div class="badge badge-success flex items-center gap-1 lg:p-4 lg:text-lg select-none">
-          {#if getContext('user')?.keyholder}
-            <span class="ph-fill ph-key text-base-content"></span>
-          {/if}
-          Me
-        </div>
-      {/if}
+			{#if enrolled}
+				<div class="badge badge-success flex items-center gap-1 lg:p-4 lg:text-lg select-none">
+					{#if getContext('user')?.keyholder}
+						<span class="ph-fill ph-key text-base-content"></span>
+					{/if}
+					Me
+				</div>
+			{/if}
 
-      {#each volunteers as volunteer}
-			  <div class="badge flex items-center gap-1 lg:p-4 lg:text-lg select-none">
-          {#if volunteer.keyholder}
-            <span class="ph-fill ph-key text-amber-500"></span>
-          {/if}
-          {volunteer.firstName}
-        </div>
-      {/each}
+			{#each volunteers as volunteer}
+				<div class="badge flex items-center gap-1 lg:p-4 lg:text-lg select-none">
+					{#if volunteer.keyholder}
+						<span class="ph-fill ph-key text-amber-500"></span>
+					{/if}
+					{volunteer.firstName}
+				</div>
+			{/each}
 		</div>
 	</div>
-</div>
+</div>
diff --git a/apps/web/src/lib/shifts/ShiftsView.svelte b/apps/web/src/lib/shifts/ShiftsView.svelte
@@ -40,7 +40,7 @@
 			<form class="flex flex-grow gap-2" method="POST" action="?/authenticate">
 				<label class="input input-bordered flex flex-grow items-center gap-3 shadow">
 					<span class="ph ph-envelope text-xl"></span>
-					<input bind:value={localEmail} class="grow" type="text" name="email" placeholder="Enter your email to sign in">
+					<input bind:value={localEmail} class="grow" type="email" name="email" placeholder="Enter your email to sign in">
 				</label>
 				<button class="btn btn-accent lg:self-center shadow font-display" type="submit" class:btn-disabled={!localEmail}>
 					Sign in
@@ -72,7 +72,7 @@
 		<div class="alert alert-error">
 			<span>
 				<span class="font-semibold">{email}</span> could not be matched to any existing member.
-				Please come in during the shift you want to join and we'll get you set up.
+				Please show up for the shift you wanted to join and we'll get you set up.
 			</span>
 		</div>
 	{/if}
@@ -82,6 +82,7 @@
 			id={shift.id}
 			selected={isSelected(shift.id)}
 			date={shift.date}
+			description={shift.description}
 			enrolled={shift.enrolled}
 			removed={isRemoved(shift.id)}
 			time={shift.timespan}

diff --git a/apps/web/src/routes/(app)/shifts/+page.server.ts b/apps/web/src/routes/(app)/shifts/+page.server.ts
@@ -24,7 +24,7 @@ export const load = async ({ cookies, fetch }): Promise<any> => {
 export const actions = {
   authenticate: async ({ cookies, fetch, request }) => {
     const data = await request.formData();
-    const email = data.get('email').toString();
+    const email = data.get('email').toString().toLowerCase();
 
     if (!email) {
       return fail(400, { invalid: true });

diff --git a/apps/web/src/routes/(app)/shifts/+page.svelte b/apps/web/src/routes/(app)/shifts/+page.svelte
@@ -7,11 +7,6 @@
 	const { email, unauthorized } = form ?? {};
 </script>
 
-<ShiftsView
-	{shifts}
-	{keyholder}
-	loggedIn={authenticated}
-	{email}
-	{firstName}
-	{unauthorized}
-/>
+<div class="pb-20 lg:pb-0">
+	<ShiftsView {shifts} {keyholder} loggedIn={authenticated} {email} {firstName} {unauthorized} />
+</div>