From 365f20c4076a876be6520353d2289c00c0e0a457 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 22 Nov 2024 23:07:44 +1300
Subject: [PATCH] show device state in ui

---
 src/components/Header.vue | 42 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6d17669..6395297 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,7 +5,43 @@
         </div>
         <div class="my-auto mr-auto">
             <div class="font-bold">MeshTXT</div>
-            <div class="text-sm">Built by <a href="https://liamcottle.com" target="_blank" class="text-blue-600 hover:underline">Liam Cottle</a></div>
+            <div class="text-sm">
+
+                <!-- disconnected -->
+                <span v-if="GlobalState.deviceStatus == null || GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceDisconnected">
+                    Built by <a href="https://liamcottle.com" target="_blank" class="text-blue-600 hover:underline">Liam Cottle</a>
+                </span>
+
+                <!-- any other device state -->
+                <span v-else>
+
+                    <!-- restarting -->
+                    <span v-if="GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceRestarting" class="text-orange-500">
+                        Device Restarting...
+                    </span>
+
+                    <!-- connecting or reconnecting -->
+                    <span v-else-if="GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceConnecting || GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceReconnecting" class="text-orange-500">
+                        Device Connecting...
+                    </span>
+
+                    <!-- connected or configured -->
+                    <span v-else-if="GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceConnected || GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceConfigured">
+                        <span v-if="GlobalState.myNodeUser">[{{ GlobalState.myNodeUser.shortName }}] {{ GlobalState.myNodeUser.longName }}</span>
+                        <span v-else>Connected</span>
+                    </span>
+
+                    <!-- configuring -->
+                    <span v-else-if="GlobalState.deviceStatus === Types.DeviceStatusEnum.DeviceConfiguring" class="text-orange-500">
+                        Device Configuring...
+                    </span>
+
+                    <!-- unknown device state -->
+                    <span v-else class="text-orange-500">Device State: {{ GlobalState.deviceStatus }}</span>
+
+                </span>
+
+            </div>
         </div>
         <div class="my-auto flex font-semibold">
 
@@ -30,6 +66,7 @@
 <script>
 import GlobalState from "../js/GlobalState.js";
 import Connection from "../js/Connection.js";
+import { Types } from "@meshtastic/js";
 
 export default {
     name: 'Header',
@@ -42,6 +79,9 @@ export default {
         GlobalState() {
             return GlobalState;
         },
+        Types() {
+            return Types;
+        },
     },
 }
 </script>