...

2026-03-16 22:00:24 +01:00
parent d677582757
commit 3bf281c7a7
41 changed files with 1790 additions and 7 deletions
--- a/src/lib/components/ContactForm.svelte
+++ b/src/lib/components/ContactForm.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { MessageResponseBodyData } from '$lib/types/dtos/message/MessageResponseBodyData';
+	import type { MinibusserviceResponseBody } from '$lib/types/dtos/MinibusserviceResponseBody';
+	import Button from './button/Button.svelte';
+	import Link from './link/Link.svelte';
+	import MapPoint from './MapPoint.svelte';
+	import { toast } from './toast/toast';
+
+	let buttonDisabled = false;
+
+	let name = '';
+	let email = '';
+	let phone = '';
+	let message = '';
+	let posting = false;
+
+	async function sendMessage() {
+		if (!(name && email && message)) {
+			toast.warning('Alle påkrevde felt må fyllest inn');
+			return;
+		}
+
+		posting = true;
+		buttonDisabled = true;
+
+		try {
+			let res = await fetch('/api/v1/message', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					name,
+					email,
+					phone,
+					message
+				})
+			});
+
+			let data: MinibusserviceResponseBody<MessageResponseBodyData> = await res.json();
+			if (res.ok) {
+				toast.success(data.message);
+			} else {
+				console.error(data.message);
+				toast.error(data.message);
+			}
+		} catch (err) {
+			console.error(err);
+			buttonDisabled = false;
+			toast.error('En feil oppstod under sending av meldingen');
+		} finally {
+			posting = false;
+		}
+	}
+</script>
+
+<div class="mt-2 flex flex-col gap-8 md:flex-row md:text-lg">
+	<div class="flex flex-1 flex-col">
+		<p class="block pt-2 font-medium opacity-70 md:hidden">
+			Spørsmål?<br />Kontakt oss via tlf, e-post eller via skjemaet under
+		</p>
+		<p class="hidden pt-2 font-medium opacity-70 md:block">
+			Spørsmål?<br />Kontakt oss via tlf, e-post eller via skjemaet til høyre
+		</p>
+		<Link class="w-fit font-bold text-accent hover:underline" href="tel:45256161">
+			Tlf: +47 45 25 61 61
+		</Link>
+		<Link class="w-fit font-bold text-accent hover:underline" href="mailto:minibusstur@hotmail.com">
+			E-post: minibusstur@hotmail.com
+		</Link>
+
+		<MapPoint
+			class="card mt-5 min-h-96 grow overflow-hidden rounded-md border-2"
+			coordinates={[
+				{
+					latitude: 62.48303957042255,
+					longitude: 6.8108274964451745
+				}
+			]}
+		/>
+	</div>
+
+	<form
+		on:submit|preventDefault={sendMessage}
+		class="flex flex-1 flex-col gap-4 pt-4 text-xl md:pt-0"
+	>
+		<label>
+			<span class="text-xl font-semibold">
+				<span class="text-accent"> * </span>
+				Navn
+			</span>
+			<input required bind:value={name} placeholder="Navn" class="bg-primary-100" type="text" />
+		</label>
+		<label>
+			<span class="text-xl font-semibold">
+				<span class="text-accent"> * </span>
+				E-post
+			</span>
+			<input
+				required
+				bind:value={email}
+				placeholder="E-postadresse"
+				class="bg-primary-100"
+				type="email"
+			/>
+		</label>
+		<label>
+			<span class="text-xl font-semibold">Telefonnummer</span>
+			<input bind:value={phone} placeholder="Telefonnummer" class="bg-primary-100" type="tel" />
+		</label>
+		<label>
+			<span class="text-xl font-semibold">
+				<span class="text-accent"> * </span>
+				Melding
+			</span>
+			<textarea required bind:value={message} class="h-60 bg-primary-100" placeholder="Melding" />
+		</label>
+		<div>
+			<Button class="w-full" disabled={buttonDisabled} loading={posting} type="submit">Send</Button>
+		</div>
+	</form>
+</div>