Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
Svelte
at handle-input
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<script lang="ts"> import { Alert, Button, Input, Subheading } from '@foxui/core'; import Modal from '$lib/components/modal/Modal.svelte'; import type { CreationModalComponentProps } from '../../types'; import { getZoomLevel } from '.';
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
let isFetchingLocation = $state(false);
let errorMessage = $state('');
let search = $state('');
async function fetchLocation() { errorMessage = ''; isFetchingLocation = true;
try { const response = await fetch('/api/geocoding?q=' + encodeURIComponent(search)); if (response.ok) { const data = await response.json();
if (!data.lat || !data.lon) throw new Error('lat or lon not found');
item.cardData.lat = data.lat; item.cardData.lon = data.lon; item.cardData.name = data.display_name?.split(',')[0] || search; item.cardData.type = data.class || 'city'; item.cardData.zoom = Math.max(getZoomLevel(data.class), getZoomLevel(data.type)); } else { throw new Error('response not ok'); } } catch { errorMessage = "Couldn't find that location!"; return false; } finally { isFetchingLocation = false; } return true; }</script>
<Modal open={true} closeButton={false}> <form onsubmit={async () => { if (await fetchLocation()) oncreate(); }} class="flex flex-col gap-2" > <Subheading>Enter a address or city</Subheading> <Input bind:value={search} class="mt-4" />
{#if errorMessage} <Alert type="error" title="Failed to create map card"><span>{errorMessage}</span></Alert> {/if}
<p class="mt-2 text-xs"> Geocoding by <a href="https://nominatim.openstreetmap.org/" class="text-accent-800 dark:text-accent-300" target="_blank">Nominatim</a > / © <a href="https://www.openstreetmap.org/copyright" class="text-accent-800 dark:text-accent-300" target="_blank">OpenStreetMap contributors</a > </p>
<div class="mt-4 flex justify-end gap-2"> <Button onclick={oncancel} variant="ghost">Cancel</Button> <Button type="submit" disabled={isFetchingLocation} >{isFetchingLocation ? 'Creating...' : 'Create'}</Button > </div> </form></Modal>