From aecf0745c302d8dca7592a7bdc1086ea93a1ac2c Mon Sep 17 00:00:00 2001
From: Austen Adler <agadler@austenadler.com>
Date: Thu, 27 Apr 2023 00:10:39 -0400
Subject: [PATCH] Start work on qr codes

---
 web-frontend/package.json              |  3 ++-
 web-frontend/src/lib/CopyButton.svelte | 37 +++++++++++++++++++++++++-
 web-frontend/yarn.lock                 |  5 ++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/web-frontend/package.json b/web-frontend/package.json
index e50b53d..cefa908 100644
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -38,6 +38,7 @@
 	"type": "module",
 	"dependencies": {
 		"leaflet-control-geocoder": "^2.4.0",
-		"svelecte": "^4.0.0-alpha.7"
+		"svelecte": "^4.0.0-alpha.7",
+		"svelte-qr": "^1.0.0"
 	}
 }
diff --git a/web-frontend/src/lib/CopyButton.svelte b/web-frontend/src/lib/CopyButton.svelte
index 4def6d9..c25de6d 100644
--- a/web-frontend/src/lib/CopyButton.svelte
+++ b/web-frontend/src/lib/CopyButton.svelte
@@ -1,5 +1,7 @@
 <script>
+	import QR from 'svelte-qr/dist';
 	export let data;
+	let qrVisible = false;
 
 	const copyData = (format) => {
 		navigator.clipboard.writeText(data);
@@ -13,7 +15,7 @@
 	let state;
 </script>
 
-<button on:click={copyData}
+<button on:click={copyData} class="border p-1 m-1"
 	>{#if state}<svg
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
@@ -39,4 +41,37 @@
 				d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"
 			/></svg
 		>{/if}</button
+><button
+	class="border p-1 m-1"
+	on:mouseenter={() => (qrVisible = true)}
+	on:mouseleave={() => (qrVisible = false)}
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="w-6 h-6"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"
+		/>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"
+		/>
+	</svg></button
 >
+<div class="fixed inline w-48 border bg-white p-4 m-1" id="qr-code" class:invisible={!qrVisible}>
+	<QR text={data} />
+</div>
+
+<style>
+	#qr-code {
+		/* The z-index of the map is 400 */
+		z-index: 500;
+	}
+</style>
diff --git a/web-frontend/yarn.lock b/web-frontend/yarn.lock
index 20429e7..199d72c 100644
--- a/web-frontend/yarn.lock
+++ b/web-frontend/yarn.lock
@@ -4383,6 +4383,11 @@ svelte-preprocess@^5.0.0:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
+svelte-qr@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-qr/-/svelte-qr-1.0.0.tgz#e7a25c0fb952388a2ce8f1ea85f9c70473e2122e"
+  integrity sha512-7n/FPFhImPI68NCwChzYqzTbTpDhGCiFgGiCQY+IXS8sh0Xhzzd0wwQnN5n2BCJ0Uvti8s0RhKErwcw4Lp7RvQ==
+
 svelte-tiny-virtual-list@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-2.0.5.tgz#5a88b14f2041eedc060dc799a2f146ee0355073f"