Devices view: Remote devices and servers

fe/src/components/devices/DeviceOverview.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="device-overview">
+    <AlertComp type="info"> This is the server. </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>
+        </div>
+        <template v-if="device.key">
+          <AlertComp type="success">Registered</AlertComp>
+          <ButtonComp variant="danger"> <IconDevicesMinus />Unregister device </ButtonComp>
+        </template>
+        <template v-else>
+          <AlertComp type="warning">Not registered</AlertComp>
+          <ButtonComp variant="primary"> <IconDevicesPlus />Register device </ButtonComp>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive } from 'vue'
+import AlertComp from '../base/AlertComp.vue'
+import { useDeviceStore } from '@/stores/device'
+import {
+  IconDeviceMobile,
+  IconDevicesMinus,
+  IconDevicesPlus,
+  IconDeviceTablet,
+  IconDeviceUnknown,
+} from '@tabler/icons-vue'
+import ButtonComp from '../base/ButtonComp.vue'
+
+const device = useDeviceStore()
+
+const remote = reactive({ devices: [] })
+
+onMounted(() => {
+  device.getRemoteDevices()
+
+  device.$subscribe((mutation) => {
+    if (mutation.events.key == 'remote') remote.devices = device.remote
+  })
+})
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.device-overview {
+  @apply grid
+  gap-4
+  content-start;
+}
+</style>

fe/src/components/devices/ServerOverview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="server-overview">
+    <AlertComp type="info"> This is a remote device. </AlertComp>
+
+    <div class="mcrm-block block__light grid gap-4">
+      <h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
+      <p>
+        Connected to: <strong>{{ server.host }}</strong>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { IconServer } from '@tabler/icons-vue'
+import AlertComp from '../base/AlertComp.vue'
+import { onMounted, reactive } from 'vue'
+import { useDeviceStore } from '@/stores/device'
+
+const device = useDeviceStore()
+
+const server = reactive({
+  host: '',
+  access: false,
+})
+
+onMounted(() => {
+  server.host = window.location.host
+
+  device.checkServerAccess()
+})
+
+// console.log(window.location.host)
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.server-overview {
+  @apply grid
+  gap-4
+  content-start;
+}
+</style>

fe/src/views/DevicesView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="devices-view" class="panel">
+    <h1 class="panel__title">
+      Devices <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
+    </h1>
+    <div class="panel__content">
+      <DeviceOverview v-if="!isLocal()" />
+      <ServerOverview v-else />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import DeviceOverview from '@/components/devices/DeviceOverview.vue'
+import ServerOverview from '@/components/devices/ServerOverview.vue'
+import { isLocal } from '@/services/ApiService'
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+</style>