From 7dd471e50b869b58bade16a2b63bdf0340f93368 Mon Sep 17 00:00:00 2001
From: Niccolo Borgioli <hi@nicco.io>
Date: Sat, 7 Jan 2023 11:36:38 +0100
Subject: [PATCH] icons

---
 android/build.gradle                          |  2 +-
 src/app.css                                   |  6 ----
 .../{Needle.svelte => Compass.svelte}         |  5 +--
 src/lib/icons/Icon.svelte                     | 25 +++++++++++++
 .../copy-outline.svelte}                      |  0
 .../navigate-outline.svelte}                  |  0
 src/lib/views/Home.svelte                     | 36 ++++++++++++-------
 7 files changed, 52 insertions(+), 22 deletions(-)
 rename src/lib/components/{Needle.svelte => Compass.svelte} (73%)
 create mode 100644 src/lib/icons/Icon.svelte
 rename src/lib/{components/IconCopy.svelte => icons/copy-outline.svelte} (100%)
 rename src/lib/{components/IconNavigate.svelte => icons/navigate-outline.svelte} (100%)

diff --git a/android/build.gradle b/android/build.gradle
index fe3625e..7dea109 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.2.1'
+        classpath 'com.android.tools.build:gradle:7.3.1'
         classpath 'com.google.gms:google-services:4.3.13'
 
         // NOTE: Do not place your application dependencies here; they belong
diff --git a/src/app.css b/src/app.css
index acd8fe6..ca9a0c6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -31,9 +31,3 @@ body {
   scroll-behavior: smooth;
   box-sizing: border-box;
 }
-
-svg {
-  height: 1em;
-  display: inline-block;
-  aspect-ratio: 1/1;
-}
diff --git a/src/lib/components/Needle.svelte b/src/lib/components/Compass.svelte
similarity index 73%
rename from src/lib/components/Needle.svelte
rename to src/lib/components/Compass.svelte
index 7937f50..43e72ef 100644
--- a/src/lib/components/Needle.svelte
+++ b/src/lib/components/Compass.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+  import Icon from '$lib/icons/Icon.svelte'
   import { location } from '$lib/stores/location'
-  import IconNavigate from './IconNavigate.svelte'
 
   $: degree = ($location?.heading?.heading || 0) - 45
 </script>
 
 <div class="text-xl" style="transform: rotate({degree % 360}deg);">
-  <IconNavigate />
+  <Icon icon="Navigate" />
+  <!-- <IconNavigate /> -->
 </div>
 
 <style>
diff --git a/src/lib/icons/Icon.svelte b/src/lib/icons/Icon.svelte
new file mode 100644
index 0000000..695c7d8
--- /dev/null
+++ b/src/lib/icons/Icon.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Copy from './copy-outline.svelte'
+  import Navigate from './navigate-outline.svelte'
+
+  const Icons = {
+    Copy,
+    Navigate,
+  }
+
+  export let icon: keyof typeof Icons
+</script>
+
+<div on:click on:keypress><svelte:component this={Icons[icon]} /></div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+
+  div > :global(svg) {
+    height: 1em;
+    display: inline-block;
+    aspect-ratio: 1/1;
+  }
+</style>
diff --git a/src/lib/components/IconCopy.svelte b/src/lib/icons/copy-outline.svelte
similarity index 100%
rename from src/lib/components/IconCopy.svelte
rename to src/lib/icons/copy-outline.svelte
diff --git a/src/lib/components/IconNavigate.svelte b/src/lib/icons/navigate-outline.svelte
similarity index 100%
rename from src/lib/components/IconNavigate.svelte
rename to src/lib/icons/navigate-outline.svelte
diff --git a/src/lib/views/Home.svelte b/src/lib/views/Home.svelte
index d9d220e..327ad18 100644
--- a/src/lib/views/Home.svelte
+++ b/src/lib/views/Home.svelte
@@ -1,25 +1,32 @@
 <script lang="ts">
+  import { Clipboard } from '@capacitor/clipboard'
+
   import Button from '$lib/components/Button.svelte'
   import Card from '$lib/components/Card.svelte'
+  import Compass from '$lib/components/Compass.svelte'
   import H1 from '$lib/components/H1.svelte'
   import Measurement from '$lib/components/Measurement.svelte'
-  import Needle from '$lib/components/Needle.svelte'
   import VerticalGrid from '$lib/components/VerticalGrid.svelte'
   import { CoordinateLink } from '$lib/geo'
+  import Icon from '$lib/icons/Icon.svelte'
   import { app } from '$lib/stores/app'
   import { location } from '$lib/stores/location'
   import { bearings, type } from '$lib/stores/settings'
   import Settings from './Settings.svelte'
 
-  function pad(value: number): string {
-    return value.toString().padStart(2, '0')
-  }
-
   $: stamp = $location?.time.stamp
-  $: date = stamp && `${pad(stamp.getHours())}:${pad(stamp.getMinutes())}:${pad(stamp.getSeconds())}`
+  $: date =
+    stamp &&
+    [stamp.getHours(), stamp.getMinutes(), stamp.getSeconds()].map((t) => t.toFixed(0).padStart(2, '0')).join(':')
 
   $: coords = $location?.coords.format($type, $bearings)
   $: fix = $location?.time.fix.toFixed(0)
+
+  $: copy = () => {
+    if (!coords) return
+    const content = `${coords.lat}, ${coords.lon}`
+    Clipboard.write({ string: content })
+  }
 </script>
 
 <H1 text="GPS Info" />
@@ -27,14 +34,17 @@
 <VerticalGrid>
   <Card>
     <VerticalGrid>
-      <div class="flex items-center">
-        <div class="flex-grow">
-          <Measurement label="Heading" value={$location?.heading?.format()} />
-        </div>
-        <Needle />
+      <div class="flex items-center justify-between">
+        <Measurement label="Heading" value={$location?.heading?.format()} />
+        <Compass />
       </div>
       <Measurement label="Latitude" value={coords?.lat} />
-      <Measurement label="Longitude" value={coords?.lon} />
+      <div class="flex items-end justify-between">
+        <Measurement label="Longitude" value={coords?.lon} />
+        <button on:click={copy}>
+          <Icon icon="Copy" />
+        </button>
+      </div>
 
       <div>
         <span class="text-sm italic">Open in:</span>
@@ -66,7 +76,7 @@
       <div>
         <span class="text-sm italic">Fixing</span>
         <div class="grid gap-4 grid-cols-2">
-          <Measurement label="Time" value={fix} unit="mnarrows" />
+          <Measurement label="Time" value={fix} unit="ms" />
           <Measurement label="Last" value={date || undefined} />
         </div>
       </div>