WIP: Update to device components

fe/src/components/devices/RemoteView.vue

@@ -21,6 +21,17 @@
             Navigate to <em class="font-semibold">http://localhost:6970/devices</em> on your pc to
             authorize.
           </p>
+          <template v-if="server.link == 'checking'">
+            <div class="grid grid-cols-[2rem_1fr] gap-2">
+              <IconReload class="animate-spin" />
+              Checking server for link...
+            </div>
+          </template>
+          <template v-if="server.link === false">
+            <ButtonComp variant="subtle" @click="pingLink()" class="w-fit">
+              <IconReload />Check for server link
+            </ButtonComp>
+          </template>
         </div>
       </AlertComp>
 
@@ -37,22 +48,37 @@
         Disconnect
       </ButtonComp>
     </div>
+    <DialogComp ref="linkPinDialog">
+      <template #content>
+        <div class="grid gap-4">
+          <h3>Enter server link pin:</h3>
+          <input class="input" type="number" v-model="server.linkPin" />
+          <ButtonComp variant="primary" @click="getDeviceKey()">Enter</ButtonComp>
+        </div>
+      </template>
+    </DialogComp>
   </div>
 </template>
 
 <script setup>
-import { IconKey, IconPlugConnectedX, IconServer } from '@tabler/icons-vue'
+import { IconKey, IconPlugConnectedX, IconReload, IconServer } from '@tabler/icons-vue'
 import AlertComp from '../base/AlertComp.vue'
 import ButtonComp from '../base/ButtonComp.vue'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useDeviceStore } from '@/stores/device'
+import { deviceType, deviceModel, deviceVendor } from '@basitcodeenv/vue3-device-detect'
+import DialogComp from '../base/DialogComp.vue'
 
 const device = useDeviceStore()
 
+const linkPinDialog = ref()
+
 const server = reactive({
   host: '',
   status: false,
   access: false,
+  link: false,
+  linkPin: '',
 })
 
 onMounted(async () => {
@@ -62,20 +88,29 @@ onMounted(async () => {
     if (Object.keys(state.server).length) server.status = state.server.status
   })
 
-  const status = await device.checkServerAccess()
+  const status = await device.remoteCheckServerAccess()
   server.status = status
 })
 
 function requestAccess() {
-  const request = device.requestServerAccess()
+  let deviceName = `${deviceVendor() ? deviceVendor() : 'Unknown'} ${deviceVendor() ? deviceModel() : deviceType()}`
 
-  request
-    .then((data) => {
-      console.log('1', data)
-    })
-    .then((data) => {
-      console.log('2', data)
-    })
+  device.remoteRequestServerAccess(deviceName, deviceType()).then((data) => {
+    if (data.data) pingLink()
+  })
+}
+
+function pingLink() {
+  server.link = 'checking'
+  device.remotePingLink((link) => {
+    server.link = true
+    linkPinDialog.value.toggleDialog(true)
+    console.log(link, 'opendialog')
+  })
+}
+
+function getDeviceKey() {
+  device.remoteHandshake(server.linkPin)
 }
 </script>
 

fe/src/components/devices/ServerView.vue

@@ -8,60 +8,97 @@
     </AlertComp>
 
     <div class="mcrm-block block__light flex flex-wrap items-start">
-      <!-- {{ remote.devices }} -->
-      <div
-        class="mcrm-block block__dark block-size__sm w-64 grid !gap-4 content-start"
-        v-for="(device, id) in remote.devices"
-        :key="id"
-      >
-        <div class="grid gap-2">
-          <h5 class="grid grid-cols-[auto_1fr] gap-2">
-            <IconDeviceUnknown v-if="device.settings.type == 'unknown'" />
-            <IconDeviceMobile v-if="device.settings.type == 'phone'" />
-            <IconDeviceTablet v-if="device.settings.type == 'tablet'" />
-            <span class="w-full truncate">
-              {{ device.settings.name }}
-            </span>
-          </h5>
-          <em>{{ id }}</em>
+      <!-- {{ Object.keys(remote.devices).length }} -->
+      <template v-if="Object.keys(remote.devices).length > 0">
+        <div
+          class="mcrm-block block__dark block-size__sm w-64 grid !gap-4 content-start"
+          v-for="(remoteDevice, id) in remote.devices"
+          :key="id"
+        >
+          <div class="grid gap-2">
+            <h5 class="grid grid-cols-[auto_1fr] gap-2">
+              <IconDeviceUnknown v-if="remoteDevice.settings.type == 'unknown'" />
+              <IconDeviceMobile v-if="remoteDevice.settings.type == 'mobile'" />
+              <IconDeviceTablet v-if="remoteDevice.settings.type == 'tablet'" />
+              <IconDeviceDesktop v-if="remoteDevice.settings.type == 'desktop'" />
+              <span class="w-full truncate">
+                {{ remoteDevice.settings.name }}
+              </span>
+            </h5>
+            <em>{{ id }}</em>
+          </div>
+          <template v-if="remoteDevice.key">
+            <AlertComp type="success">Linked</AlertComp>
+            <ButtonComp variant="danger"> <IconLinkOff />Unlink device </ButtonComp>
+          </template>
+          <template v-else>
+            <AlertComp type="warning">Not linked</AlertComp>
+            <ButtonComp variant="primary" @click="startLink(id)">
+              <IconLink />Link device
+            </ButtonComp>
+          </template>
         </div>
-        <template v-if="device.key">
-          <AlertComp type="success">Registered</AlertComp>
-          <ButtonComp variant="danger"> <IconDevicesMinus />Unregister device </ButtonComp>
+      </template>
+      <template v-else>
+        <div class="grid w-full gap-4">
+          <em class="text-slate-300">No remote devices</em>
+          <div class="flex justify-end">
+            <ButtonComp variant="primary" @click="device.serverGetRemotes()">
+              <IconReload />Check for access requests
+            </ButtonComp>
+          </div>
+        </div>
+      </template>
+      <DialogComp ref="pinDialog">
+        <template #content>
+          <div class="grid gap-4">
+            <h3>Pin code</h3>
+            <span class="text-4xl font-mono tracking-wide">{{ remote.pinlink }}</span>
+          </div>
         </template>
-        <template v-else>
-          <AlertComp type="warning">Not registered</AlertComp>
-          <ButtonComp variant="primary"> <IconDevicesPlus />Register device </ButtonComp>
-        </template>
-      </div>
+      </DialogComp>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import AlertComp from '../base/AlertComp.vue'
 import { useDeviceStore } from '@/stores/device'
 import {
+  IconDeviceDesktop,
   IconDeviceMobile,
   IconDevicesMinus,
   IconDevicesPlus,
   IconDeviceTablet,
   IconDeviceUnknown,
+  IconLink,
+  IconLinkOff,
+  IconReload,
 } from '@tabler/icons-vue'
 import ButtonComp from '../base/ButtonComp.vue'
+import DialogComp from '../base/DialogComp.vue'
 
 const device = useDeviceStore()
 
-const remote = reactive({ devices: [] })
+const pinDialog = ref()
+
+const remote = reactive({ devices: [], pinlink: '' })
 
 onMounted(() => {
-  device.getRemoteDevices()
+  device.serverGetRemotes()
 
   device.$subscribe((mutation, state) => {
     if (Object.keys(state.remote).length) remote.devices = device.remote
   })
 })
+
+async function startLink(deviceUuid) {
+  const pin = await device.serverStartLink(deviceUuid)
+
+  remote.pinlink = pin
+  pinDialog.value.toggleDialog(true)
+}
 </script>
 
 <style scoped>