nub31/minibusservice.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pages

Browse Source
This commit is contained in:
nub31
2026-03-16 23:14:51 +01:00
parent 3bf281c7a7
commit 7aea328d4f
17 changed files with 913 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/lib/components/ContactForm.svelte
View File

@@ -1,122 +1,38 @@
<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>
<script lang="ts">
import Link from "./link/Link.svelte";
import MapPoint from "./MapPoint.svelte";
</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>
</div>