refactor: qol updates. typos, improved feedback, and clean up

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thatconference.com",
-	"version": "5.0.8",
+	"version": "5.0.9",
 	"description": "THATConference.com website",
 	"main": "index.js",
 	"type": "module",

src/routes/(admin)/admin/check-in/_components/_CheckinModal.svelte

@@ -4,6 +4,7 @@
 	export let title;
 	export let text;
 	export let returnPin;
+	export let isAllocated = true;
 
 	import { createEventDispatcher } from 'svelte';
 	import { Circle3 } from 'svelte-loading-spinners';
@@ -19,6 +20,7 @@
 	let waiting = false;
 	let checkInError = false;
 	let checkInErrorMessage;
+	let cursorNotAllowed = isAllocated ? '' : 'cursor-not-allowed';
 
 	async function handleCheckIn() {
 		waiting = true;
@@ -79,7 +81,13 @@
 					{title}
 				</h1>
 				<div class="mt-2">
-					<p class="text-md leading-5 text-gray-500">{text}</p>
+					{#if isAllocated === true}
+						<p class="text-md leading-5 text-gray-500">{text}</p>
+					{:else}
+						<p class="text-bold rounded-lg bg-thatOrange-400 p-2 text-white">
+							Ticket is UNASSIGNED
+						</p>
+					{/if}
 				</div>
 
 				{#if waiting}
@@ -142,7 +150,8 @@
 						<div class="flex">
 							<Shell>
 								<button
-									class="w-full py-4 text-sm font-medium leading-5"
+									disabled={!isAllocated}
+									class="w-full py-4 text-sm font-medium leading-5 {cursorNotAllowed}"
 									on:click={() => handleCheckIn()}>
 									<span class="text-lg">Complete Check-In</span>
 								</button>

src/routes/(admin)/admin/check-in/_components/_EditCheckInModal.svelte

@@ -20,7 +20,7 @@
 	let pinNumber = '';
 	let waiting = false;
 	let checkInError = false;
-	let checkInErroMessage;
+	let checkInErrorMessage;
 	let setPin = false;
 
 	async function handleResetPin() {
@@ -34,7 +34,7 @@
 			dispatch('checkinUpdated');
 		} else {
 			checkInError = true;
-			checkInErroMessage = message;
+			checkInErrorMessage = message;
 		}
 	}
 
@@ -50,13 +50,13 @@
 			dispatch('checkinUpdated');
 		} else {
 			checkInError = true;
-			checkInErroMessage = message;
+			checkInErrorMessage = message;
 		}
 	}
 
 	function tryAgain() {
 		checkInError = false;
-		checkInErroMessage = undefined;
+		checkInErrorMessage = undefined;
 	}
 
 	async function handleOweSwag() {
@@ -69,7 +69,7 @@
 			dispatch('checkinUpdated');
 		} else {
 			checkInError = false;
-			checkInErroMessage = message;
+			checkInErrorMessage = message;
 		}
 	}
 </script>
@@ -131,7 +131,7 @@
 					<div class="relative my-6 flex flex-col space-y-6">
 						<div class="mt-2 w-full">
 							<p class="text-md leading-5 text-gray-500">
-								{checkInErroMessage}
+								{checkInErrorMessage}
 							</p>
 						</div>
 
@@ -171,7 +171,7 @@
 						</div>
 
 						<div class="flex items-center space-x-4">
-							<div>
+							<div title="Checked when owed a shirt, and submit">
 								<Checkbox
 									name="isOwedShirt"
 									bind:checked={isOwedShirt}
@@ -183,7 +183,7 @@
 									type="button"
 									class="w-full py-4 text-sm font-medium leading-5"
 									on:click={() => handleOweSwag()}>
-									<span class="text-lg">Owe Shirt</span>
+									<span class="text-lg">Submit Owe Shirt</span>
 								</button>
 							</Shell>
 						</div>

src/routes/(admin)/admin/check-in/_components/_Ticket.svelte

@@ -25,6 +25,9 @@
 	let editCheckInClicked = false;
 	let displayPin = ticket.partnerPin ?? 'PIN not set';
 	let tempPin;
+	let titleText = ticket.isAllocated
+		? `Assigned to ${ticketHolder.firstName ?? ''} ${ticketHolder.lastName ?? ''}`
+		: 'Unassigned to anyone';
 
 	// keeps ticket object up-to-date with pin changes.
 	$: {
@@ -38,7 +41,8 @@
 <div
 	class="transform overflow-hidden bg-gray-50 bg-opacity-75 px-4 py-4 shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-gray-100 sm:rounded-md sm:px-6"
 	class:bg-yellow-100={!ticket.isAllocated}
-	class:hover:bg-yellow-200={!ticket.isAllocated}>
+	class:hover:bg-yellow-200={!ticket.isAllocated}
+	title={titleText}>
 	<div class="flex flex-col space-y-6 sm:flex-row sm:space-y-0 md:items-center">
 		<div class="flex min-w-0 flex-1 md:items-center">
 			<div class="flex-shrink-0">
@@ -147,6 +151,7 @@
 		text="Please enter the user's pin."
 		eventId={ticket.event.id}
 		ticketId={ticket.id}
+		isAllocated={ticket.isAllocated}
 		bind:returnPin={tempPin}
 		on:checkinCompleted={() => {
 			checkInClicked = false;

src/routes/(admin)/admin/check-in/_components/_TicketView.svelte

@@ -38,21 +38,6 @@
 	let searchterm = '';
 	let viewAll = false;
 
-	let statsCounselorTotal = 0;
-	let statsCounselorCheckedIn = 0;
-
-	let statsCamperTotal = 0;
-	let statsCamperCheckedIn = 0;
-
-	let statsVirtualCamperTotal = 0;
-	let statsVirtualCamperCheckedIn = 0;
-
-	let statsCampSwagTotal = 0;
-	let statsCampSwagCheckedIn = 0;
-
-	let statsPigRoastTotal = 0;
-	let statsPigRoastCheckedIn = 0;
-
 	$: if (searchterm?.length < searchOptions.minMatchCharLength || searchterm === '') {
 		registrationsSearched = registrationsFiltered;
 	} else {
@@ -65,51 +50,6 @@
 		registrationsFiltered = registrations.filter((x) => !x.hasCheckedIn);
 	}
 
-	$: {
-		registrations.forEach((r) => {
-			switch (r.product.name.toUpperCase()) {
-				//In-Person Counselors
-				case 'COUNSELOR IN-PERSON':
-					statsCounselorTotal = statsCounselorTotal + 1;
-					statsCounselorCheckedIn = r.hasCheckedIn
-						? statsCounselorCheckedIn + 1
-						: statsCounselorCheckedIn;
-					break;
-
-				case 'EVERYTHING CAMPER':
-				case 'CAMPER':
-				case 'CAMPER NO FOOD':
-					statsCamperTotal = statsCamperTotal + 1;
-					statsCamperCheckedIn = r.hasCheckedIn ? statsCamperCheckedIn + 1 : statsCamperCheckedIn;
-					break;
-
-				case 'VIRTUAL CAMPER':
-					statsVirtualCamperTotal = statsVirtualCamperTotal + 1;
-					statsVirtualCamperCheckedIn = r.hasCheckedIn
-						? statsVirtualCamperCheckedIn + 1
-						: statsVirtualCamperCheckedIn;
-					break;
-
-				case 'CAMP SWAG':
-					statsCampSwagTotal = statsCampSwagTotal + 1;
-					statsCampSwagCheckedIn = r.hasCheckedIn
-						? statsCampSwagCheckedIn + 1
-						: statsCampSwagCheckedIn;
-					break;
-
-				case 'PIG ROAST':
-					statsPigRoastTotal = statsPigRoastTotal + 1;
-					statsPigRoastCheckedIn = r.hasCheckedIn
-						? statsPigRoastCheckedIn + 1
-						: statsPigRoastCheckedIn;
-					break;
-
-				default:
-					break;
-			}
-		});
-	}
-
 	$: fuse = new Fuse(registrations, searchOptions);
 </script>
 
@@ -127,31 +67,6 @@
 		<Toggle title="All" subTitle="Regardless of status" bind:checked={viewAll} />
 	</div>
 
-	<div class="mt-12 flex flex-col justify-center">
-		<!-- <div class="flex justify-evenly">
-			<SemiCircle
-				title="Counselors"
-				series={((statsCounselorCheckedIn / statsCounselorTotal) * 100).toFixed()}
-			/>
-			<SemiCircle
-				title="Campers"
-				series={((statsCamperCheckedIn / statsCamperTotal) * 100).toFixed()}
-			/>
-			<SemiCircle
-				title="Virtual Campers"
-				series={((statsVirtualCamperCheckedIn / statsVirtualCamperTotal) * 100).toFixed()}
-			/>
-			<SemiCircle
-				title="Camp Swag"
-				series={((statsCampSwagCheckedIn / statsCampSwagTotal) * 100).toFixed()}
-			/>
-			<SemiCircle
-				title="Pig Roast"
-				series={((statsPigRoastCheckedIn / statsPigRoastTotal) * 100).toFixed()}
-			/>
-		</div> -->
-	</div>
-
 	<div class="mt-12">
 		<ul class="space-y-4">
 			{#each registrationsSearched as ticket (ticket.id)}