stonewareslord/this_algorithm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update frontend to handle errors

Browse Source
This commit is contained in:
Austen Adler 2023-03-01 07:51:30 -05:00
parent 6853b2c7bc
commit 8b38b2f423
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web-frontend/src/lib/common.js Normal file
View File

@ -0,0 +1,5 @@
export const WasmStatus = {
NotLoaded: 0,
Loaded: 1,
Errored: 2
};

45
web-frontend/src/routes/+page.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { WasmStatus } from '$lib/common.js';
import init, { address_from_lat_lon } from 'this_algorithm-wasm'; import init, { address_from_lat_lon } from 'this_algorithm-wasm';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
@ -7,14 +8,21 @@
let mapElement; let mapElement;
let map; let map;
// let wasm;
let latlng = { lat: '', lng: '' }; let latlng = { lat: '', lng: '' };
let addr = ''; let addr = '';
let wasmStatus = WasmStatus.NotLoaded;
let wasmError = undefined;
onMount(async () => { onMount(async () => {
await init().then(() => { await init()
console.log('Loaded. Example:', address_from_lat_lon(51.505, -0.09)); .then(() => {
}); wasmStatus = WasmStatus.Loaded;
})
.catch((e) => {
console.error('Error loading wasm module', e);
wasmError = e;
wasmStatus = WasmStatus.Errored;
});
if (browser) { if (browser) {
const leaflet = await import('leaflet'); const leaflet = await import('leaflet');
@ -53,13 +61,32 @@
}); });
</script> </script>
<h1>Welcome to SvelteKit</h1> <h2>Encoding</h2>
<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p> {#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
<main> <main>
<div bind:this={mapElement} /> <div bind:this={mapElement} />
</main> </main>
{:else if wasmStatus == WasmStatus.Errored}
<div class="flex">
<div class="py-1">
<svg
class="fill-current h-6 w-6 text-teal-500 mr-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
><path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
/></svg
>
</div>
<div>
<p class="font-bold">Error</p>
<p class="text-sm">Error: {wasmError}.</p>
</div>
</div>
{/if}
<style> <style>
@import 'leaflet/dist/leaflet.css'; @import 'leaflet/dist/leaflet.css';