Merge pull request #19 from spektrumrf/dev

Changes

package.json

@@ -13,37 +13,37 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.2",
-    "@sveltejs/adapter-node": "^4.0.1",
-    "@sveltejs/kit": "^2.5.0",
+    "@playwright/test": "^1.42.1",
+    "@sveltejs/adapter-node": "^5.0.1",
+    "@sveltejs/kit": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@types/node": "^20.11.16",
-    "autoprefixer": "^10.4.11",
-    "postcss": "^8.4.16",
+    "@types/node": "^20.11.27",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.9",
-    "svelte-check": "^3.6.3",
+    "prettier-plugin-svelte": "^3.2.2",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.7",
     "svelte-preprocess": "^5.1.3",
-    "sveltekit-superforms": "^1.13.4",
-    "tailwindcss": "^3.1.8",
+    "sveltekit-superforms": "^2.9.0",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "zod": "^3.21.4"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "zod": "^3.22.4"
   },
   "type": "module",
   "dependencies": {
-    "@sentry/sveltekit": "^7.99.0",
-    "@tailwindcss/typography": "^0.5.8",
-    "chart.js": "^4.2.1",
+    "@sentry/sveltekit": "^7.106.1",
+    "@tailwindcss/typography": "^0.5.10",
+    "chart.js": "^4.4.2",
     "chartjs-adapter-dayjs-4": "^1.0.4",
-    "daisyui": "^2.28.0",
-    "date-fns": "^2.29.3",
-    "dayjs": "^1.11.7",
-    "dotenv": "^16.0.3",
-    "pocketbase": "^0.8.2",
-    "svelte-chartjs": "^3.1.4",
-    "svelte-table": "^0.6.2"
+    "daisyui": "^4.7.3",
+    "date-fns": "^3.4.0",
+    "dayjs": "^1.11.10",
+    "dotenv": "^16.4.5",
+    "pocketbase": "^0.21.1",
+    "svelte-chartjs": "^3.1.5",
+    "svelte-table": "^0.6.3"
   }
 }

scripts/resetEmailsAndUsernames.js

@@ -10,7 +10,7 @@ async function resetEmails() {
 	await client.admins.authWithPassword(process.env.ADMIN_EMAIL, process.env.ADMIN_PASSWORD);
 	const accounts = await client.collection('account').getFullList();
 	const promises = accounts
-		.filter((a) => a.export().role === 'team')
+		.filter((a) => a.role === 'team')
 		.map((a) =>
 			client
 				.collection('account')

src/app.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+	font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro',
+		Georgia, serif;
+	font-weight: normal;
+}

src/hooks.server.ts

@@ -14,12 +14,11 @@ const myHandle: Handle = async function ({ event, resolve }) {
 			await client.collection('account').authRefresh();
 			const account = await client
 				.collection('account')
-				.getOne(authStore.model?.id as string, { expand: 'event' })
-				.then((a: any) => a.export());
+				.getOne(authStore.model?.id as string, { expand: 'event' });
 			if (
 				account.role === 'admin' ||
 				!event.params.year ||
-				account.expand.event?.year.toString() === event.params.year
+				account?.expand?.event?.year.toString() === event.params.year
 			) {
 				event.cookies.set('pocketbase_auth', authStore.exportToCookie(), { path: '/' });
 			} else {

src/lib/components/AddFeat.svelte

@@ -1,20 +1,32 @@
 <script lang="ts">
 	import Input from '$lib/components/Input.svelte';
+	import Loading from '$lib/components/Loading.svelte';
 	import { event, locations } from '$lib/stores';
 	export let formActionPath = '?/add';
 	let locationId = '';
+	let loading: boolean = false;
 	$: locationName = $locations.find((l) => l.id === locationId)?.name;
 </script>
 
 <div class="flex">
-	<label for="addFeat" class="btn btn-primary mb-8 w-full max-w-sm mx-auto">Ny prestation</label>
+	<label
+		for="addFeat"
+		class="btn btn-primary border border-black text-xl mb-8 w-full max-w-sm mx-auto"
+		>Ny prestation</label
+	>
 </div>
 <input type="checkbox" id="addFeat" class="modal-toggle" />
 <div class="modal modal-bottom sm:modal-middle">
 	<div class="modal-box flex">
 		<div class="mx-auto">
 			<h3 class="font-bold text-xl">Ny prestation</h3>
-			<form method="POST" id="add-form" enctype="multipart/form-data" action={formActionPath}>
+			<form
+				on:submit={() => (loading = true)}
+				method="POST"
+				id="add-form"
+				enctype="multipart/form-data"
+				action={formActionPath}
+			>
 				<Input
 					name="points"
 					type="number"
@@ -31,12 +43,7 @@
 						<span class="label-text">Plats</span>
 						<span class="label-text-alt">Specialkrogar märkta med *</span>
 					</label>
-					<select
-						name="location"
-						required
-						on:change={(e) => (locationId = e.target.value)}
-						class="select select-bordered"
-					>
+					<select name="location" required bind:value={locationId} class="select select-bordered">
 						<option disabled selected value="">Välj plats</option>
 						{#each $locations as location}
 							<option value={location.id}>{location.name}</option>
@@ -52,6 +59,7 @@
 						type="file"
 						name="proofs"
 						required
+						multiple
 						class="file-input file-input-secondary file-input-sm file-input-bordered w-full max-w-xs"
 					/>
 				</div>
@@ -60,7 +68,9 @@
 				<input hidden value={$event?.id} name="event" />
 				<input hidden value={locationName} name="locationName" />
 				<div class="flex gap-3 mt-3">
-					<button class="btn btn-primary">Spara</button>
+					<button class="btn btn-primary">
+						<Loading {loading}>Spara</Loading>
+					</button>
 					<label for="addFeat" class="btn">Stäng</label>
 				</div>
 			</form>

src/lib/components/AddLocation.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Input from '$lib/components/Input.svelte';
+	import Loading from '$lib/components/Loading.svelte';
 	import { event } from '$lib/stores';
+	let loading = false;
 </script>
 
 <div class="">
@@ -11,11 +13,18 @@
 	<div class="modal-box flex">
 		<div class="mx-auto">
 			<h3 class="font-bold text-2xl">Ny plats</h3>
-			<form method="POST" enctype="multipart/form-data" action="?/addLocation">
+			<form
+				method="POST"
+				enctype="multipart/form-data"
+				action="?/addLocation"
+				on:submit={() => (loading = true)}
+			>
 				<Input name="name" type="text" label="Platsens namn" />
 				<input hidden name="event" value={$event?.id} />
 				<div class="flex gap-3 my-3">
-					<button class="btn btn-primary">Spara</button>
+					<button class="btn btn-primary">
+						<Loading {loading}>Spara</Loading>
+					</button>
 					<label for="addLocation" class="btn">Stäng</label>
 				</div>
 			</form>

src/lib/components/AddLocationToYear.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+	import Loading from '$lib/components/Loading.svelte';
 	import { event } from '$lib/stores';
 	import type { Location } from '$lib/stores';
 	export let selectedLocationToAddToYear: Location | null = null;
+	let loading = false;
 </script>
 
-<form method="POST" enctype="multipart/form-data" action="?/addLocationToYear">
+<form
+	method="POST"
+	enctype="multipart/form-data"
+	action="?/addLocationToYear"
+	on:submit={() => (loading = true)}
+>
 	<input hidden name="locationId" value={selectedLocationToAddToYear?.id} />
 	<input hidden name="eventId" value={$event?.id} />
-	<button class="btn btn-primary my-5">Koppla plats till år {$event?.year}</button>
+	<button class="btn btn-primary my-5">
+		<Loading {loading}>
+			Koppla plats till år {$event?.year}
+		</Loading>
+	</button>
 </form>

src/lib/components/Countdown.svelte

@@ -22,41 +22,43 @@
 	}
 </script>
 
-<div class="text-center text-lg alert flex flex-col">
-	{#if distance >= 0}
+<div class="text-center text-lg alert bg-zinc-200 flex flex-col">
+	{#if distance >= 0 && !$event?.finished}
 		<div class="font-bold text-2xl">Tid till Approbatur i Vasagatan</div>
 		<div class="grid grid-flow-col text-center auto-cols-max justify-center">
-			<div class="flex flex-col p-2 rounded-box text-primary-focus">
+			<div class="flex flex-col p-2 rounded-box text-primary">
 				<span class="countdown font-mono text-3xl">
 					<span style={`--value:${days};`} />
 				</span>
 				d
 			</div>
-			<div class="flex flex-col p-2 rounded-box text-primary-focus">
+			<div class="flex flex-col p-2 rounded-box text-primary">
 				<span class="countdown font-mono text-3xl">
 					<span style={`--value:${hours};`} />
 				</span>
 				h
 			</div>
-			<div class="flex flex-col p-2 rounded-box text-primary-focus">
+			<div class="flex flex-col p-2 rounded-box text-primary">
 				<span class="countdown font-mono text-3xl">
 					<span style={`--value:${minutes};`} />
 				</span>
 				min
 			</div>
-			<div class="flex flex-col p-2 rounded-box text-primary-focus">
+			<div class="flex flex-col p-2 rounded-box text-primary">
 				<span class="countdown font-mono text-3xl">
 					<span style={`--value:${seconds};`} />
 				</span>
 				sec
 			</div>
 		</div>
-	{:else if distance < 0}
-		<div class="font-bold text-2xl">Vasagatan har börjat!</div>
+	{:else if distance < 0 && !$event?.finished}
+		<div class="font-bold text-2xl">Vasagatan {$event?.year} har börjat!</div>
 		{#if $account?.role === Role.TEAM}
-			<div>
+			<div class="w-full">
 				<AddFeat formActionPath={`${$event?.year}/feats?/add`} />
 			</div>
 		{/if}
+	{:else}
+		<div class="font-bold text-2xl">Vasagatan {$event?.year} är avslutad!</div>
 	{/if}
 </div>

src/lib/components/DrinkTable.svelte

@@ -18,12 +18,12 @@
 	];
 </script>
 
-<div class="overfull-x-auto">
+<div class="overfull-x-auto rounded-lg border-2 border-primary">
 	<SvelteTable
 		rows={drinks}
 		{columns}
-		classNameThead="text-center"
+		classNameThead="bg-primary text-center"
 		classNameCell="text-center text-base"
-		classNameTable="table table-compact"
+		classNameTable="table table-sm"
 	/>
 </div>

src/lib/components/EditEvent.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import Input from '$lib/components/Input.svelte';
+	import Loading from '$lib/components/Loading.svelte';
 	import { event } from '$lib/stores';
 	let finished = $event?.finished;
+	let loading = false;
 </script>
 
 <label for="editEvent" class="btn btn-primary max-w-xs mb-5">Editera</label>
@@ -10,7 +12,13 @@
 	<div class="modal-box flex">
 		<div class="mx-auto">
 			<h3 class="font-bold text-2xl mb-2">Editera evenemang</h3>
-			<form method="POST" class="mb-10" enctype="multipart/form-data" action="?/edit">
+			<form
+				method="POST"
+				class="mb-10"
+				enctype="multipart/form-data"
+				action="?/edit"
+				on:submit={() => (loading = true)}
+			>
 				<Input name="what" value={$event?.info.what} type="text" label="Vad?" />
 				<Input name="why" value={$event?.info.why} type="text" label="Varför?" />
 				<Input name="when" value={$event?.info.when} type="text" label="När?" />
@@ -47,7 +55,9 @@
 				</div>
 				<Input name="id" value={$event?.id} type="hidden" />
 				<div class="flex gap-3 pb-10">
-					<button class="btn btn-primary">Spara</button>
+					<button class="btn btn-primary">
+						<Loading {loading}>Spara</Loading>
+					</button>
 					<label for="editEvent" class="btn">Stäng</label>
 				</div>
 			</form>

src/lib/components/EditFeat.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Input from '$lib/components/Input.svelte';
+	import Loading from '$lib/components/Loading.svelte';
 	import { locations, FeatContent } from '$lib/stores';
 	export let modalOpen = false;
 	export let feat: any = {};
 	let content: {};
 	let approved: boolean;
+	let loading = false;
 	$: {
 		content = feat.content || {};
 		approved = !!feat.approved;
@@ -15,7 +17,15 @@
 	<div class="modal-box flex">
 		<div class="mx-auto">
 			<h3 class="font-bold text-2xl mb-2">Editera prestation</h3>
-			<form method="POST" name="editFeat" enctype="multipart/form-data" action="?/edit">
+			<form
+				method="POST"
+				name="editFeat"
+				enctype="multipart/form-data"
+				action="?/edit"
+				on:submit={() => {
+					loading = true;
+				}}
+			>
 				<Input name="points" value={feat.points} type="number" label="Poäng" step="0.01" />
 
 				<div class="form-control w-full max-w-xs">
@@ -61,8 +71,11 @@
 						<span class="label-text"> Bevis</span>
 					</label>
 					{#each feat.proofUrls as url, i}
-						<a target="_blank" class="btn btn-secondary btn-sm ml-2" rel="noreferrer" href={url}
-							>Bild {i + 1}</a
+						<a
+							target="_blank"
+							class="btn btn-secondary btn-sm ml-2 my-2"
+							rel="noreferrer"
+							href={url}>Bild {i + 1}</a
 						>
 					{/each}
 				</div>
@@ -96,7 +109,9 @@
 				</div>
 				<input hidden value={feat?.id} type="text" name="id" />
 				<div class="flex gap-3 py-5">
-					<button class="btn btn-primary">Spara</button>
+					<button class="btn btn-primary">
+						<Loading {loading}>Spara</Loading>
+					</button>
 					<button
 						class="btn"
 						type="button"