Use homepage as xpin app
This commit is contained in:
Austen Adler
parent
5844413ce1
commit
0a44b8363d
@ -60,7 +60,6 @@
|
|||||||
<a href="/" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Home</a>
|
<a href="/" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Home</a>
|
||||||
<a href="/docs" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Docs</a
|
<a href="/docs" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Docs</a
|
||||||
>
|
>
|
||||||
<a href="/app" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">App</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,4 +1,232 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import url from '$lib/url.js';
|
||||||
|
import CopyButton from '$lib/CopyButton.svelte';
|
||||||
|
import { getWasm, rustEnumToArray } from '$lib/common.js';
|
||||||
|
import { WasmStatus } from '$lib/common.js';
|
||||||
|
import { tick, onMount, onDestroy } from 'svelte';
|
||||||
|
import AddressInput from '$lib/AddressInput.svelte';
|
||||||
|
import CoordinateInput from '$lib/CoordinateInput.svelte';
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
import Error from './Error.svelte';
|
||||||
|
import TabSelector from './TabSelector.svelte';
|
||||||
|
import CoordinateInfo from './CoordinateInfo.svelte';
|
||||||
|
|
||||||
|
let tabInfo = {
|
||||||
|
selected: 0,
|
||||||
|
tabs: [
|
||||||
|
{
|
||||||
|
label: 'Map',
|
||||||
|
idx: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Share',
|
||||||
|
idx: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
let initSuccess = false;
|
||||||
|
let coordinateTypes = [];
|
||||||
|
let urlFormats = [
|
||||||
|
'google_maps',
|
||||||
|
'google_maps_satellite',
|
||||||
|
'geo',
|
||||||
|
'openstreetmap',
|
||||||
|
'waze',
|
||||||
|
'apple_maps',
|
||||||
|
'osmand',
|
||||||
|
'bing_maps',
|
||||||
|
'osmand_direct'
|
||||||
|
];
|
||||||
|
let selectedCoordinateType;
|
||||||
|
let leaflet;
|
||||||
|
import Map from '$lib/Map.svelte';
|
||||||
|
|
||||||
|
let map;
|
||||||
|
let coordinateInputValue = '69.79268710495744, -108.23886036872865';
|
||||||
|
|
||||||
|
let addr;
|
||||||
|
let addrInputValue = '';
|
||||||
|
|
||||||
|
let wasm = {
|
||||||
|
status: WasmStatus.NotLoaded,
|
||||||
|
error: undefined,
|
||||||
|
call: undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
const locationfound = (e) => {
|
||||||
|
console.log('Updating current location event', e.detail);
|
||||||
|
updateAddr(wasm.call.EncodedAddress.from_coordinate(`${e.detail.lat}, ${e.detail.lng}`), false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMapClick = (e) => {
|
||||||
|
// If they found this from a search, we should zoom there
|
||||||
|
let fromTextInput = e.event == 'markgeocode';
|
||||||
|
|
||||||
|
updateAddr(
|
||||||
|
wasm.call.EncodedAddress.from_coordinate(`${e.latlng.lat}, ${e.latlng.lng}`),
|
||||||
|
fromTextInput
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
let init = async () => {
|
||||||
|
await getWasm()
|
||||||
|
.then((w) => {
|
||||||
|
wasm = w;
|
||||||
|
|
||||||
|
coordinateTypes = rustEnumToArray(wasm.call.CoordinateType);
|
||||||
|
selectedCoordinateType = coordinateTypes[0];
|
||||||
|
|
||||||
|
console.log('My url formats: ', urlFormats, wasm.call.CoordinateUrls);
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
leaflet = await import('leaflet');
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
initSuccess = true;
|
||||||
|
})
|
||||||
|
// Wait for the map to be created
|
||||||
|
.then(tick)
|
||||||
|
.then(async () => {
|
||||||
|
// Initialize the actual app
|
||||||
|
updateAddr(wasm.call.EncodedAddress.from_coordinate(coordinateInputValue), true);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('Erroring');
|
||||||
|
console.error(err);
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onDestroy(async () => {
|
||||||
|
if (map) {
|
||||||
|
console.log('Unloading Leaflet map.');
|
||||||
|
map.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let outputValue = ' ';
|
||||||
|
const selectedCoordinateTypeChange = () => {
|
||||||
|
// TODO: Does not work well when the address field is invalid
|
||||||
|
|
||||||
|
// updateAddr(wasm.call.EncodedAddress.from_coordinate(coordinateInputValue), true);
|
||||||
|
coordinateInputValue = addr.allCoordinates[selectedCoordinateType];
|
||||||
|
};
|
||||||
|
|
||||||
|
const coordinateInput = () => {
|
||||||
|
try {
|
||||||
|
let xpin = wasm.call.EncodedAddress.from_coordinate(coordinateInputValue);
|
||||||
|
|
||||||
|
updateAddr(xpin, true);
|
||||||
|
|
||||||
|
console.log('xpin:', xpin);
|
||||||
|
console.log('setting selectedCoordinateType to');
|
||||||
|
selectedCoordinateType = coordinateTypes[xpin.getCoordsType()] || selectedCoordinateType;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Could not parse coordinate input:', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateAddr = (newAddr, fromTextInput) => {
|
||||||
|
try {
|
||||||
|
addr = newAddr;
|
||||||
|
if (browser) {
|
||||||
|
console.log('New addr', addr);
|
||||||
|
let latlng = new leaflet.LatLng(addr.latLon[0], addr.latLon[1]);
|
||||||
|
|
||||||
|
outputValue = ' ';
|
||||||
|
addrInputValue = addr.address;
|
||||||
|
|
||||||
|
// Update coordinate display
|
||||||
|
if (fromTextInput) {
|
||||||
|
selectedCoordinateType = coordinateTypes[addr.getCoordsType()] || selectedCoordinateType;
|
||||||
|
coordinateInputValue = addr.getCoordsRepr() || coordinateInputValue;
|
||||||
|
} else {
|
||||||
|
coordinateInputValue = addr.allCoordinates[selectedCoordinateType];
|
||||||
|
}
|
||||||
|
|
||||||
|
history.replaceState(undefined, undefined, `#${addr.address.replaceAll(' ', '-')}`);
|
||||||
|
|
||||||
|
map.panTo(latlng, 20);
|
||||||
|
leaflet.popup().setLatLng(latlng).setContent(`${addr.address}`).openOn(map);
|
||||||
|
if (fromTextInput) {
|
||||||
|
map.setView(latlng);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
outputValue = `${e}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addressInput = () => {
|
||||||
|
try {
|
||||||
|
updateAddr(wasm.call.EncodedAddress.from_address(addrInputValue), false);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
outputValue = `${e}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let mapIsVisible = false;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
mapIsVisible = initSuccess && tabInfo.selected == 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastHash;
|
||||||
|
$: {
|
||||||
|
if ($url && $url.hash) {
|
||||||
|
let hash = decodeURI($url.hash.substr(1))
|
||||||
|
.replaceAll(/-|\+|\s+/g, ' ')
|
||||||
|
.trim();
|
||||||
|
|
||||||
|
if (hash !== lastHash) {
|
||||||
|
addrInputValue = hash;
|
||||||
|
addressInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
lastHash = hash;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1 class="font-bold text-2xl pb-4">Home</h1>
|
<noscript>
|
||||||
|
<style>
|
||||||
|
.js-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<Error>Your javascript is disabled</Error>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<p>{outputValue}</p>
|
||||||
|
|
||||||
|
{#await init()}
|
||||||
|
<p class="text-lg js-only">Loading WebAssembly module...</p>
|
||||||
|
{:then}
|
||||||
|
<AddressInput bind:value={addrInputValue} on:change={addressInput} />
|
||||||
|
|
||||||
|
{#if $url && $url.hash}
|
||||||
|
<a class="text-indigo-600" href={$url}>Permalink</a>
|
||||||
|
<CopyButton data={$url} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<CoordinateInput
|
||||||
|
bind:value={coordinateInputValue}
|
||||||
|
on:type-change={selectedCoordinateTypeChange}
|
||||||
|
on:change={coordinateInput}
|
||||||
|
bind:coordinateTypes
|
||||||
|
bind:selectedCoordinateType
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TabSelector bind:tabInfo />
|
||||||
|
|
||||||
|
{#if tabInfo.selected === 1}
|
||||||
|
<CoordinateInfo bind:coordinateTypes bind:urlFormats bind:xpin={addr} />
|
||||||
|
{/if}
|
||||||
|
{:catch message}
|
||||||
|
<Error {message}>Could not start core module</Error>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<Map bind:map {onMapClick} on:locationfound={locationfound} bind:isVisible={mapIsVisible} />
|
||||||
|
|||||||
@ -1,232 +1 @@
|
|||||||
<script>
|
<h1>This page was moved <a class="text-indigo-600" href="/">here</a></h1>
|
||||||
import url from '$lib/url.js';
|
|
||||||
import CopyButton from '$lib/CopyButton.svelte';
|
|
||||||
import { getWasm, rustEnumToArray } from '$lib/common.js';
|
|
||||||
import { WasmStatus } from '$lib/common.js';
|
|
||||||
import { tick, onMount, onDestroy } from 'svelte';
|
|
||||||
import AddressInput from '$lib/AddressInput.svelte';
|
|
||||||
import CoordinateInput from '$lib/CoordinateInput.svelte';
|
|
||||||
import { browser } from '$app/environment';
|
|
||||||
import Error from './Error.svelte';
|
|
||||||
import TabSelector from './TabSelector.svelte';
|
|
||||||
import CoordinateInfo from './CoordinateInfo.svelte';
|
|
||||||
|
|
||||||
let tabInfo = {
|
|
||||||
selected: 0,
|
|
||||||
tabs: [
|
|
||||||
{
|
|
||||||
label: 'Map',
|
|
||||||
idx: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Share',
|
|
||||||
idx: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
let initSuccess = false;
|
|
||||||
let coordinateTypes = [];
|
|
||||||
let urlFormats = [
|
|
||||||
'google_maps',
|
|
||||||
'google_maps_satellite',
|
|
||||||
'geo',
|
|
||||||
'openstreetmap',
|
|
||||||
'waze',
|
|
||||||
'apple_maps',
|
|
||||||
'osmand',
|
|
||||||
'bing_maps',
|
|
||||||
'osmand_direct'
|
|
||||||
];
|
|
||||||
let selectedCoordinateType;
|
|
||||||
let leaflet;
|
|
||||||
import Map from '$lib/Map.svelte';
|
|
||||||
|
|
||||||
let map;
|
|
||||||
let coordinateInputValue = '69.79268710495744, -108.23886036872865';
|
|
||||||
|
|
||||||
let addr;
|
|
||||||
let addrInputValue = '';
|
|
||||||
|
|
||||||
let wasm = {
|
|
||||||
status: WasmStatus.NotLoaded,
|
|
||||||
error: undefined,
|
|
||||||
call: undefined
|
|
||||||
};
|
|
||||||
|
|
||||||
const locationfound = (e) => {
|
|
||||||
console.log('Updating current location event', e.detail);
|
|
||||||
updateAddr(wasm.call.EncodedAddress.from_coordinate(`${e.detail.lat}, ${e.detail.lng}`), false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMapClick = (e) => {
|
|
||||||
// If they found this from a search, we should zoom there
|
|
||||||
let fromTextInput = e.event == 'markgeocode';
|
|
||||||
|
|
||||||
updateAddr(
|
|
||||||
wasm.call.EncodedAddress.from_coordinate(`${e.latlng.lat}, ${e.latlng.lng}`),
|
|
||||||
fromTextInput
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
let init = async () => {
|
|
||||||
await getWasm()
|
|
||||||
.then((w) => {
|
|
||||||
wasm = w;
|
|
||||||
|
|
||||||
coordinateTypes = rustEnumToArray(wasm.call.CoordinateType);
|
|
||||||
selectedCoordinateType = coordinateTypes[0];
|
|
||||||
|
|
||||||
console.log('My url formats: ', urlFormats, wasm.call.CoordinateUrls);
|
|
||||||
})
|
|
||||||
.then(async () => {
|
|
||||||
leaflet = await import('leaflet');
|
|
||||||
})
|
|
||||||
.then(async () => {
|
|
||||||
initSuccess = true;
|
|
||||||
})
|
|
||||||
// Wait for the map to be created
|
|
||||||
.then(tick)
|
|
||||||
.then(async () => {
|
|
||||||
// Initialize the actual app
|
|
||||||
updateAddr(wasm.call.EncodedAddress.from_coordinate(coordinateInputValue), true);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('Erroring');
|
|
||||||
console.error(err);
|
|
||||||
throw err;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onDestroy(async () => {
|
|
||||||
if (map) {
|
|
||||||
console.log('Unloading Leaflet map.');
|
|
||||||
map.remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let outputValue = ' ';
|
|
||||||
const selectedCoordinateTypeChange = () => {
|
|
||||||
// TODO: Does not work well when the address field is invalid
|
|
||||||
|
|
||||||
// updateAddr(wasm.call.EncodedAddress.from_coordinate(coordinateInputValue), true);
|
|
||||||
coordinateInputValue = addr.allCoordinates[selectedCoordinateType];
|
|
||||||
};
|
|
||||||
|
|
||||||
const coordinateInput = () => {
|
|
||||||
try {
|
|
||||||
let xpin = wasm.call.EncodedAddress.from_coordinate(coordinateInputValue);
|
|
||||||
|
|
||||||
updateAddr(xpin, true);
|
|
||||||
|
|
||||||
console.log('xpin:', xpin);
|
|
||||||
console.log('setting selectedCoordinateType to');
|
|
||||||
selectedCoordinateType = coordinateTypes[xpin.getCoordsType()] || selectedCoordinateType;
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Could not parse coordinate input:', e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateAddr = (newAddr, fromTextInput) => {
|
|
||||||
try {
|
|
||||||
addr = newAddr;
|
|
||||||
if (browser) {
|
|
||||||
console.log('New addr', addr);
|
|
||||||
let latlng = new leaflet.LatLng(addr.latLon[0], addr.latLon[1]);
|
|
||||||
|
|
||||||
outputValue = ' ';
|
|
||||||
addrInputValue = addr.address;
|
|
||||||
|
|
||||||
// Update coordinate display
|
|
||||||
if (fromTextInput) {
|
|
||||||
selectedCoordinateType = coordinateTypes[addr.getCoordsType()] || selectedCoordinateType;
|
|
||||||
coordinateInputValue = addr.getCoordsRepr() || coordinateInputValue;
|
|
||||||
} else {
|
|
||||||
coordinateInputValue = addr.allCoordinates[selectedCoordinateType];
|
|
||||||
}
|
|
||||||
|
|
||||||
history.replaceState(undefined, undefined, `#${addr.address.replaceAll(' ', '-')}`);
|
|
||||||
|
|
||||||
map.panTo(latlng, 20);
|
|
||||||
leaflet.popup().setLatLng(latlng).setContent(`${addr.address}`).openOn(map);
|
|
||||||
if (fromTextInput) {
|
|
||||||
map.setView(latlng);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
outputValue = `${e}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const addressInput = () => {
|
|
||||||
try {
|
|
||||||
updateAddr(wasm.call.EncodedAddress.from_address(addrInputValue), false);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
outputValue = `${e}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let mapIsVisible = false;
|
|
||||||
|
|
||||||
$: {
|
|
||||||
mapIsVisible = initSuccess && tabInfo.selected == 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastHash;
|
|
||||||
$: {
|
|
||||||
if ($url && $url.hash) {
|
|
||||||
let hash = decodeURI($url.hash.substr(1))
|
|
||||||
.replaceAll(/-|\+|\s+/g, ' ')
|
|
||||||
.trim();
|
|
||||||
|
|
||||||
if (hash !== lastHash) {
|
|
||||||
addrInputValue = hash;
|
|
||||||
addressInput();
|
|
||||||
}
|
|
||||||
|
|
||||||
lastHash = hash;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<noscript>
|
|
||||||
<style>
|
|
||||||
.js-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<Error>Your javascript is disabled</Error>
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
<p>{outputValue}</p>
|
|
||||||
|
|
||||||
{#await init()}
|
|
||||||
<p class="text-lg js-only">Loading WebAssembly module...</p>
|
|
||||||
{:then}
|
|
||||||
<AddressInput bind:value={addrInputValue} on:change={addressInput} />
|
|
||||||
|
|
||||||
{#if $url && $url.hash}
|
|
||||||
<a class="text-indigo-600" href={$url}>Permalink</a>
|
|
||||||
<CopyButton data={$url} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<CoordinateInput
|
|
||||||
bind:value={coordinateInputValue}
|
|
||||||
on:type-change={selectedCoordinateTypeChange}
|
|
||||||
on:change={coordinateInput}
|
|
||||||
bind:coordinateTypes
|
|
||||||
bind:selectedCoordinateType
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TabSelector bind:tabInfo />
|
|
||||||
|
|
||||||
{#if tabInfo.selected === 1}
|
|
||||||
<CoordinateInfo bind:coordinateTypes bind:urlFormats bind:xpin={addr} />
|
|
||||||
{/if}
|
|
||||||
{:catch message}
|
|
||||||
<Error {message}>Could not start core module</Error>
|
|
||||||
{/await}
|
|
||||||
|
|
||||||
<Map bind:map {onMapClick} on:locationfound={locationfound} bind:isVisible={mapIsVisible} />
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user