From deea258220374565bf996317bdb2ec7a25f29d0e Mon Sep 17 00:00:00 2001
From: Austen Adler <agadler@austenadler.com>
Date: Wed, 22 Mar 2023 23:47:49 -0400
Subject: [PATCH] Start work on share tab

---
 web-frontend/src/lib/AddressInput.svelte      |  2 +-
 web-frontend/src/lib/CoordinateInput.svelte   |  2 +-
 web-frontend/src/routes/app/+page.svelte      | 28 ++++++++++++++++---
 .../src/routes/app/CoordinateInfo.svelte      |  5 ++++
 .../src/routes/app/TabSelector.svelte         | 14 ++++++++++
 5 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 web-frontend/src/routes/app/CoordinateInfo.svelte
 create mode 100644 web-frontend/src/routes/app/TabSelector.svelte

diff --git a/web-frontend/src/lib/AddressInput.svelte b/web-frontend/src/lib/AddressInput.svelte
index f92d5c0..4a4adbc 100644
--- a/web-frontend/src/lib/AddressInput.svelte
+++ b/web-frontend/src/lib/AddressInput.svelte
@@ -24,7 +24,7 @@ placeholder="Enter address"></Svelecte>
 </script>
 
 <div class="mb-4">
-	<label class="text-gray-700 text-sm font-bold mb-2" for="username">Address</label>
+	<label class="text-gray-700 text-sm font-bold mb-2" for="username">xpin Address</label>
 	<input
 		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-96"
 		type="text"
diff --git a/web-frontend/src/lib/CoordinateInput.svelte b/web-frontend/src/lib/CoordinateInput.svelte
index 3bc0167..c81f5d7 100644
--- a/web-frontend/src/lib/CoordinateInput.svelte
+++ b/web-frontend/src/lib/CoordinateInput.svelte
@@ -26,7 +26,7 @@
 		</select>
 	</label>
 	<input
-		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
+		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-96"
 		type="text"
 		bind:value
 		placeholder="0.00"
diff --git a/web-frontend/src/routes/app/+page.svelte b/web-frontend/src/routes/app/+page.svelte
index 05a9ebe..0fb7fee 100644
--- a/web-frontend/src/routes/app/+page.svelte
+++ b/web-frontend/src/routes/app/+page.svelte
@@ -6,8 +6,24 @@
 	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';
 	import { emptyxpin } from '$lib/common.js';
 
+let tabInfo = {
+    selected: 0,
+    tabs: [
+        {
+            label: "Map",
+            idx: 0,
+        },
+        {
+            label: "Share",
+            idx: 1,
+        }
+    ]
+};
+
 	let initSuccess = false;
 	let coordinateTypes = [];
 	let selectedCoordinateType;
@@ -158,9 +174,6 @@
 {#await init()}
 	<p class="text-lg js-only">Loading WebAssembly module...</p>
 {:then}
-	<p>Address: <span class="font-bold">{addr.address}</span></p>
-	<p class="text-sm">({addr.latLon}) => ({addr.latLon})</p>
-
 	<AddressInput bind:value={addrInputValue} on:change={addressInput} />
 
 	<CoordinateInput
@@ -170,10 +183,17 @@
 		bind:coordinateTypes
 		bind:selectedCoordinateType
 	/>
+
+    <TabSelector bind:tabInfo />
+
+    {#if tabInfo.selected === 1}
+    <CoordinateInfo bind:xpin={addr} />
+    {/if}
+
 {:catch message}
 	<Error {message}>Could not start core module</Error>
 {/await}
 
-<span class:invisible={!initSuccess}>
+<span class:invisible={!initSuccess || tabInfo.selected !== 0}>
 	<Map bind:map {onMapClick} on:locationfound={locationfound} />
 </span>
diff --git a/web-frontend/src/routes/app/CoordinateInfo.svelte b/web-frontend/src/routes/app/CoordinateInfo.svelte
new file mode 100644
index 0000000..ad69387
--- /dev/null
+++ b/web-frontend/src/routes/app/CoordinateInfo.svelte
@@ -0,0 +1,5 @@
+<script>
+    export let xpin;
+</script>
+
+Hi there
diff --git a/web-frontend/src/routes/app/TabSelector.svelte b/web-frontend/src/routes/app/TabSelector.svelte
new file mode 100644
index 0000000..c1f6e06
--- /dev/null
+++ b/web-frontend/src/routes/app/TabSelector.svelte
@@ -0,0 +1,14 @@
+<script>
+    export let tabInfo;
+
+    const updateSelectedTab = (tab) => {
+        tabInfo.selected = tab.idx;
+    }
+</script>
+
+<ul class="flex">
+    {#each tabInfo.tabs as tab}
+        <li class:bg-blue-200="{tab.idx === tabInfo.selected}" on:click={() => updateSelectedTab(tab)} class="p-2 block">{tab.label}</li>
+    {/each}
+</ul>
+