123 lines
3.3 KiB
Svelte
123 lines
3.3 KiB
Svelte
<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>
|