From 0a44b8363dce9a5f50c1d6d78d6f76d6d73b1dda Mon Sep 17 00:00:00 2001
From: Austen Adler <agadler@austenadler.com>
Date: Sun, 30 Apr 2023 15:37:54 -0400
Subject: [PATCH] Use homepage as xpin app

---
 web-frontend/src/routes/+layout.svelte        |   1 -
 web-frontend/src/routes/+page.svelte          | 230 ++++++++++++++++-
 .../routes/{app => }/CoordinateInfo.svelte    |   0
 .../src/routes/{app => }/Error.svelte         |   0
 .../src/routes/{app => }/TabSelector.svelte   |   0
 web-frontend/src/routes/app/+page.svelte      | 233 +-----------------
 6 files changed, 230 insertions(+), 234 deletions(-)
 rename web-frontend/src/routes/{app => }/CoordinateInfo.svelte (100%)
 rename web-frontend/src/routes/{app => }/Error.svelte (100%)
 rename web-frontend/src/routes/{app => }/TabSelector.svelte (100%)

diff --git a/web-frontend/src/routes/+layout.svelte b/web-frontend/src/routes/+layout.svelte
index 9874417..9a2cb39 100644
--- a/web-frontend/src/routes/+layout.svelte
+++ b/web-frontend/src/routes/+layout.svelte
@@ -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>
diff --git a/web-frontend/src/routes/+page.svelte b/web-frontend/src/routes/+page.svelte
index ebd11c4..c932909 100644
--- a/web-frontend/src/routes/+page.svelte
+++ b/web-frontend/src/routes/+page.svelte
@@ -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} />
diff --git a/web-frontend/src/routes/app/CoordinateInfo.svelte b/web-frontend/src/routes/CoordinateInfo.svelte
similarity index 100%
rename from web-frontend/src/routes/app/CoordinateInfo.svelte
rename to web-frontend/src/routes/CoordinateInfo.svelte
diff --git a/web-frontend/src/routes/app/Error.svelte b/web-frontend/src/routes/Error.svelte
similarity index 100%
rename from web-frontend/src/routes/app/Error.svelte
rename to web-frontend/src/routes/Error.svelte
diff --git a/web-frontend/src/routes/app/TabSelector.svelte b/web-frontend/src/routes/TabSelector.svelte
similarity index 100%
rename from web-frontend/src/routes/app/TabSelector.svelte
rename to web-frontend/src/routes/TabSelector.svelte
diff --git a/web-frontend/src/routes/app/+page.svelte b/web-frontend/src/routes/app/+page.svelte
index c932909..5fce808 100644
--- a/web-frontend/src/routes/app/+page.svelte
+++ b/web-frontend/src/routes/app/+page.svelte
@@ -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>