From 8c98f462f4b07c94a425e150d9a0fdecd2db767a Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 31 May 2023 14:16:01 -0700
Subject: [PATCH] refactor: WIP progress on UPC

---
 components/UserProfile.ce.vue | 80 +++++++++++++++++++++++++++++++----
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/components/UserProfile.ce.vue b/components/UserProfile.ce.vue
index 1e487ba48..ff880d986 100644
--- a/components/UserProfile.ce.vue
+++ b/components/UserProfile.ce.vue
@@ -1,20 +1,32 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { useCallbackStore } from '~/store/callback';
+import { useClipboard, useToggle, onClickOutside } from '@vueuse/core';
+// import { vOnClickOutside } from '@vueuse/components';
+// import { useCallbackStore } from '~/store/callback';
 import { useServerStore } from '~/store/server';
 import type { Server } from '~/types/server';
+import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
 export interface Props {
   server?: Server;
+  showDescription?: boolean;
 }
+const props = withDefaults(defineProps<Props>(), {
+  showDescription: true,
+});
 
-const props = defineProps<Props>();
+/**
+ * Dropdown handling
+ */
+const dropdown = ref(null);
+const dropdownOpen = ref(false);
+const toggleDropdown = useToggle(dropdownOpen);
+onClickOutside(dropdown, (_event) => dropdownOpen.value = false);
 
-const callbackStore = useCallbackStore();
+// const callbackStore = useCallbackStore();
 const serverStore = useServerStore();
-
-const { name, description, guid, uptime, expireTime, state } = storeToRefs(serverStore);
+const { name, description, guid, lanIp, uptime, expireTime, state } = storeToRefs(serverStore);
 
 const uptimeOrExpiredTime = computed(() => {
   return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value && expireTime.value > 0
@@ -22,6 +34,28 @@ const uptimeOrExpiredTime = computed(() => {
     : uptime.value;
 });
 
+/**
+ * Copy LAN IP on server name click
+ */
+let copyIpInterval: string | number | NodeJS.Timeout | undefined = undefined;
+const { text, copy, copied, isSupported } = useClipboard({ source: lanIp.value ?? '' });
+const showCopyNotSupported = ref<boolean>(false);
+const copyLanIp = () => {
+  if (!isSupported) showCopyNotSupported.value = true;
+  copy(lanIp.value ?? '');
+};
+watch(showCopyNotSupported, async (newVal, oldVal) => {
+  if (newVal && oldVal === false) {
+    clearTimeout(copyIpInterval);
+    copyIpInterval = setTimeout(() => {
+      showCopyNotSupported.value = false;
+    }, 2000);
+  }
+});
+
+/**
+ *
+ */
 onBeforeMount(() => {
   console.debug('[onBeforeMount]', { props }, typeof props.server);
   if (!props.server) return console.error('Server data not present');
@@ -40,11 +74,39 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div>
-    <div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end pr-16px pt-4px">
-      <UptimeExpire :time="uptimeOrExpiredTime" :state="state" />
+  <div id="UserProfile" class="UserProfile text-alpha relative z-20 flex flex-col h-full pl-80px rounded">
+    <div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end">
+      <upc-uptime-expire :time="uptimeOrExpiredTime" :state="state" />
       <span class="px-12px">&bull;</span>
-      <ServerState />
+      <upc-server-state />
+    </div>
+
+    <div class="relative z-0 flex flex-row items-center justify-end gap-x-16px h-full">
+      <h1 class="relative text-18px border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
+        <template v-if="showDescription">
+          <span>{{ description }}</span>
+          <span class="text-grey-mid px-8px">&bull;</span>
+        </template>
+        <!-- @todo click to copy ip -->
+        <button @click="copyLanIp()" :title="`LAN IP ${lanIp}`">{{ name }}</button>
+        <span v-if="copied" class="text-12px absolute right-0 bg-gradient-to-r from-red to-orange text-center block w-100px rounded">{{ 'LAN IP Copied' }}</span>
+        <span v-if="showCopyNotSupported" class="text-12px font-semibold px-4px absolute right-0 bg-gradient-to-r from-red to-orange text-center block rounded">
+          LAN IP: <span class="select-all">{{ lanIp }}</span>
+        </span>
+      </h1>
+
+      <div class="block w-2px h-24px bg-grey-mid"></div>
+
+      <div ref="dropdown" class="relative flex items-center justify-end h-full">
+        <upc-dropdown-button @click="toggleDropdown" />
+        <upc-dropdown :show="dropdownOpen" />
+      </div>
     </div>
   </div>
 </template>
+
+<style lang="postcss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>