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
5 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
6
7 let isFetchingLocation = $state(false);
8
9 let errorMessage = $state('');
10
11 let search = $state('');
12
13 async function fetchLocation() {
14 errorMessage = '';
15 isFetchingLocation = true;
16
17 try {
18 const response = await fetch('/api/geocoding?q=' + encodeURIComponent(search));
19 if (response.ok) {
20 const data = await response.json();
21
22 if (!data.lat || !data.lon) throw new Error('lat or lon not found');
23
24 item.cardData.lat = data.lat;
25 item.cardData.lon = data.lon;
26 } else {
27 throw new Error('response not ok');
28 }
29 } catch (error) {
30 errorMessage = "Couldn't find that location!";
31 return false;
32 } finally {
33 isFetchingLocation = false;
34 }
35 return true;
36 }
37</script>
38
39<Modal open={true} closeButton={false}>
40 <Subheading>Enter a city and country</Subheading>
41 <Input bind:value={search} />
42
43 {#if errorMessage}
44 <Alert type="error" title="Failed to create map card"><span>{errorMessage}</span></Alert>
45 {/if}
46
47 <p class="text-xs">
48 Geocoding by <a
49 href="https://nominatim.openstreetmap.org/"
50 class="text-accent-800 dark:text-accent-300"
51 target="_blank">Nominatim</a
52 >
53 / ©
54 <a
55 href="https://www.openstreetmap.org/copyright"
56 class="text-accent-800 dark:text-accent-300"
57 target="_blank">OpenStreetMap contributors</a
58 >
59 </p>
60
61 <div class="mt-4 flex justify-end gap-2">
62 <Button onclick={oncancel} variant="ghost">Cancel</Button>
63 <Button
64 disabled={isFetchingLocation}
65 onclick={async () => {
66 if (await fetchLocation()) oncreate();
67 }}>{isFetchingLocation ? 'Creating...' : 'Create'}</Button
68 >
69 </div>
70</Modal>