From 386d7bd437821129811c97a099ba915352268d7c Mon Sep 17 00:00:00 2001
From: Bren <94324138+Acumane@users.noreply.github.com>
Date: Sun, 14 Apr 2024 00:01:00 -0700
Subject: [PATCH] URL copy (router prep)

---
 src/assets/icons/copy.svg         |  1 +
 src/components/home/PopUpItem.vue | 35 +++++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/icons/copy.svg

diff --git a/src/assets/icons/copy.svg b/src/assets/icons/copy.svg
new file mode 100644
index 0000000..17bdc4d
--- /dev/null
+++ b/src/assets/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/src/components/home/PopUpItem.vue b/src/components/home/PopUpItem.vue
index 130a02a..3392e26 100644
--- a/src/components/home/PopUpItem.vue
+++ b/src/components/home/PopUpItem.vue
@@ -2,17 +2,18 @@
 import moment from 'moment-timezone'
 import { average } from 'color.js'
 import InfoIcon from '@/assets/icons/info.svg?component'
+import CopyIcon from '@/assets/icons/copy.svg?component'
 import tinycolor from "tinycolor2"
-
 </script>
 
 <template>
     <!-- HTML for the popup -->
     <div id="popup">
+        <CopyIcon id="copy" @click="copyURL"/>
         <div id="breadcrumbs">
             {{ global.bldg.replace(/_/g, ' ') }}
-            <span v-if="global.bldg"> > Floor {{ global.floor }}</span>
-            <span v-if="!noneSelected()"> > Room {{ global.room }}</span>
+            <span v-if="global.bldg"> <span id="slash">/</span> Floor {{ global.floor }}</span>
+            <span v-if="!noneSelected()"> <span id="slash"> /</span> Room {{ global.room }}</span>
         </div>
         <div id="fadeout"></div>
         <div v-if="global.bldg && getBldg()" class="body">
@@ -247,6 +248,10 @@ export default {
             let hist = this.getBldg().meta.hist
             if (hist === "") hist = this.getBldg().meta.name.toLowerCase().replace(/ /g, "-")
             return hist // for case: false
+        },
+        copyURL() {
+          navigator.clipboard.writeText(window.location.href)
+          this.$showToast({type: 'info', title: 'Link to location copied', lasts: 1000})
         }
     }
 }
@@ -277,14 +282,18 @@ export default {
 
 #breadcrumbs {
     padding: 10px 0px 0px 20px;
-    color: rgb(0, 0, 0);
     font-size: x-large;
     font-weight: 600;
-    height: 50px;
+    height: 45px;
     border-radius: 12px 12px 0 0;
     background-color: white;
 }
 
+#slash {
+    font-weight: 500;
+    color: #000000a0;
+}
+
 #fadeout {
     background-image: linear-gradient(white, transparent);
     position:relative;
@@ -305,7 +314,7 @@ export default {
 
 .body {
     position: absolute;
-    top: 50px;
+    top: 45px;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -409,6 +418,20 @@ tr:nth-child(even) {
     height: 25px;
 }
 
+#copy {
+    fill: black;
+    width: 28px;
+    z-index: 2;
+    position: absolute;
+    top: 12px;
+    right: 22px;
+    transition: all 0.2s;
+}
+
+#copy:hover {
+    fill: #000000b0;
+}
+
 li {
     line-height: 1.5;
 }