WIP: Alpha version bugfixes

fe/src/assets/style/_content.css

@@ -41,3 +41,7 @@ ul {
 strong {
   @apply font-bold;
 }
+
+a {
+  @apply underline text-amber-400 hover:text-amber-300;
+}

fe/src/components/base/MainMenu.vue

@@ -107,6 +107,8 @@ nav {
         items-center
         gap-2
         px-4 py-2
+        text-white
+        no-underline
         border-transparent
         transition-colors;
 

fe/src/components/macros/parts/RecorderFooter.vue

@@ -51,6 +51,7 @@ onMounted(() => {
 
 const toggleSave = () => {
   if (!macroRecorder.save()) errorDialog.value.toggleDialog(true)
+  else window.location.reload()
 }
 </script>
 

fe/src/router/index.js

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import { useDeviceStore } from '@/stores/device'
+import DashboardView from '../views/DashboardView.vue'
 import { checkAuth, isLocal } from '@/services/ApiService'
 
 const router = createRouter({
@@ -8,8 +7,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView,
+      name: 'dashboard',
+      component: DashboardView,
     },
     {
       path: '/panels',

fe/src/views/DashboardView.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="dashboard" class="panel">
+    <h1 class="panel__title">Dashboard</h1>
+
+    <div class="panel__content">
+      <div class="grid gap-1 opacity-50 h-fit">
+        <em v-if="isLocal()">This is the server dashboard.</em>
+        <em v-else>This is the server dashboard.</em>
+      </div>
+      <div v-if="isLocal()">
+        <h4>Start: Authenticate a device</h4>
+        <ul>
+          <li>
+            Open <strong>{{ server.ip }}:{{ server.port }}</strong> in a browser on your phone.
+            <div class="p-4 qr-container">
+              <canvas ref="serverQr"></canvas>
+            </div>
+          </li>
+          <li>Navigate to the Server page. An authentication request will start automatically.</li>
+          <li>
+            Open the
+            <RouterLink to="/devices"> Devices</RouterLink>
+            page in this window.
+          </li>
+          <li>
+            <div class="inline-flex items-center gap-2">
+              The device will appear, if not click the
+              <span class="p-1 border rounded-sm"><IconReload class="size-4" /></span> button.
+            </div>
+          </li>
+        </ul>
+        <h4>Using a panel</h4>
+        <ul>
+          <li>Once authenticated you can access the Test Panel on your device.</li>
+          <li>Open the Panels page on your device and click the Test Panel.</li>
+        </ul>
+      </div>
+      <div v-else>
+        <h4>Start: Authenticate this device</h4>
+        <ul>
+          <li>
+            Open
+            <RouterLink to="/devices"> Server</RouterLink>
+            to start.
+          </li>
+          <li>An authentication request will start automatically.</li>
+        </ul>
+        <h4>Using a panel</h4>
+        <ul>
+          <li>
+            Once authenticated you can access the
+            <RouterLink to="/panel/view/test_panel"> Test Panel</RouterLink>
+            on your device.
+          </li>
+          <li>
+            Open the
+            <RouterLink to="/panels">Panels page</RouterLink>
+            you can edit the panel.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router'
+import { isLocal } from '@/services/ApiService'
+import { useDeviceStore } from '@/stores/device'
+import { onMounted, reactive, ref } from 'vue'
+import { IconReload } from '@tabler/icons-vue'
+
+import QRCode from 'qrcode'
+
+const device = useDeviceStore()
+
+const server = reactive({
+  ip: '',
+  port: '',
+  fullPath: '',
+})
+
+const serverQr = ref()
+
+onMounted(async () => {
+  const serverIP = await device.serverGetIP()
+  server.ip = serverIP
+  server.port = window.__CONFIG__.MCRM__PORT
+  server.fullPath = `http://${server.ip}:${server.port}`
+
+  QRCode.toCanvas(serverQr.value, server.fullPath, (error) => {
+    console.log(error)
+  })
+})
+</script>
+
+<style lang="scss" scoped></style>

fe/src/views/HomeView.vue

@@ -1,17 +0,0 @@
-<template>
-  <div id="dashboard" class="panel">
-    <h1 class="panel__title">Dashboard</h1>
-
-    <div class="panel__content">
-      <div class="grid gap-1 opacity-50 h-fit">
-        <em>Hello nothing to see here. Something will be added in the future.</em>
-        <em>Use the menu to navigate.</em>
-        <em>Have a nice day!</em>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>