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="/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>
|
||||
</nav>
|
||||
|
||||
@ -1,4 +1,232 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
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} />
|
||||
<h1>This page was moved <a class="text-indigo-600" href="/">here</a></h1>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user