your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
3 import type { CreationModalComponentProps } from '../types';
4 import { getZoomLevel } from '.';
5
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let isFetchingLocation = $state(false);
9
10 let errorMessage = $state('');
11
12 let search = $state('');
13
14 async function fetchLocation() {
15 errorMessage = '';
16 isFetchingLocation = true;
17
18 try {
19 const response = await fetch('/api/geocoding?q=' + encodeURIComponent(search));
20 if (response.ok) {
21 const data = await response.json();
22
23 console.log(data);
24
25 if (!data.lat || !data.lon) throw new Error('lat or lon not found');
26
27 item.cardData.lat = data.lat;
28 item.cardData.lon = data.lon;
29 item.cardData.name = data.display_name?.split(',')[0] || search;
30 item.cardData.type = data.class || 'city';
31 item.cardData.zoom = Math.max(getZoomLevel(data.class), getZoomLevel(data.type));
32 } else {
33 throw new Error('response not ok');
34 }
35 } catch {
36 errorMessage = "Couldn't find that location!";
37 return false;
38 } finally {
39 isFetchingLocation = false;
40 }
41 return true;
42 }
43</script>
44
45<Modal open={true} closeButton={false}>
46 <form
47 onsubmit={async () => {
48 if (await fetchLocation()) oncreate();
49 }}
50 class="flex flex-col gap-2"
51 >
52 <Subheading>Enter a address or city</Subheading>
53 <Input bind:value={search} class="mt-4" />
54
55 {#if errorMessage}
56 <Alert type="error" title="Failed to create map card"><span>{errorMessage}</span></Alert>
57 {/if}
58
59 <p class="mt-2 text-xs">
60 Geocoding by <a
61 href="https://nominatim.openstreetmap.org/"
62 class="text-accent-800 dark:text-accent-300"
63 target="_blank">Nominatim</a
64 >
65 / ©
66 <a
67 href="https://www.openstreetmap.org/copyright"
68 class="text-accent-800 dark:text-accent-300"
69 target="_blank">OpenStreetMap contributors</a
70 >
71 </p>
72
73 <div class="mt-4 flex justify-end gap-2">
74 <Button onclick={oncancel} variant="ghost">Cancel</Button>
75 <Button type="submit" disabled={isFetchingLocation}
76 >{isFetchingLocation ? 'Creating...' : 'Create'}</Button
77 >
78 </div>
79 </form>
80</Modal>