From 9bddf82d223aa74d9aca53baed7fdc44c0f6dc99 Mon Sep 17 00:00:00 2001
From: Quashnock <awq@uw.edu>
Date: Fri, 15 Nov 2024 15:52:04 -0800
Subject: [PATCH 1/3] Changed circle indicators to icons, changed background
 color of indicator, and added hover effect on navbar items.

---
 src/components/Navbar.vue | 49 ++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5cdf99d..37a8cbd 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -10,6 +10,8 @@ import HomeIcon from 'vue-material-design-icons/Home.vue';
 import CameraIcon from 'vue-material-design-icons/Camera.vue';
 import TuneIcon from 'vue-material-design-icons/Tune.vue';
 import BugIcon from 'vue-material-design-icons/Bug.vue';
+import PowerPlugIcon from 'vue-material-design-icons/PowerPlug.vue';
+import ControllerIcon from 'vue-material-design-icons/ControllerClassic.vue';
 import { useRoslibStore } from '../store/useRoslib';
 import { useControllerStore } from '../store/useController';
 
@@ -91,26 +93,17 @@ const pageIconArr: PageIcon = [
       <h4>{{ pageIcon.label }}</h4>
       <component :is="pageIcon.icon" class="page-icon" :title="pageIcon.helperText" />
     </RouterLink>
-    <div class="container">
-      <h4 id="status">WebSocket</h4>
-      <div
-        class="circle"
-        :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
-      ></div>
+    <div class="container indicator-container">
+      <h4 id="status">WS</h4>
+      <component :is="PowerPlugIcon" class="page-icon" title="Indicates WebSocket connection" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
     </div>
-    <div class="container">
-      <h4 id="status">Camera Feed</h4>
-      <div
-        class="circle"
-        :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
-      ></div>
+    <div class="container indicator-container">
+      <h4 id="status">CAM</h4>
+      <component :is="CameraIcon" class="page-icon" title="Indicates camera connection" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
     </div>
-    <div class="container">
-      <h4 id="status">Controller Connected</h4>
-      <div
-        class="circle"
-        :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"
-      ></div>
+    <div class="container indicator-container">
+      <h4 id="status">CTRL</h4>
+      <component :is="ControllerIcon" class="page-icon" title="Indicates controller connection" :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"/>
     </div>
     <!-- TODO Implement Latency -->
     <!-- <div class="container">
@@ -125,7 +118,6 @@ nav {
   padding: 0rem 1rem;
   grid-area: nav;
   display: flex;
-  gap: 5px;
   align-items: center;
   height: var(--nav-bar-size);
   background-color: var(--black);
@@ -145,10 +137,12 @@ nav {
     background-color: var(--light-grey);
   }
   .navbar-tab {
-    margin: 0;
     padding: 0 0.3rem;
     min-width: 4rem;
   }
+  .navbar-tab:not(.current-page):hover {
+    background-color: hsl(0, 0%, 12%);
+  }
   #logo {
     max-width: 100%;
     max-height: 4rem;
@@ -163,19 +157,16 @@ nav {
     align-items: center;
     justify-content: center;
   }
-  .circle {
-    border-radius: 50%;
-    background-color: inherit;
-    height: 22px;
-    width: 22px;
-    border: 2px black solid;
-    border-radius: 50%;
+  .indicator-container {
+    min-width: max-content;
+    padding: 0 1.5rem;
+    background-color: hsl(240, 20%, 20%);
   }
   .red {
-    background-color: var(--error);
+    color: var(--error);
   }
   .green {
-    background-color: var(--correct);
+    color: var(--correct);
   }
 }
 </style>

From 49a4cc2aac217938cfaf71e7f8ed4ffdfe12c963 Mon Sep 17 00:00:00 2001
From: Quashnock <awq@uw.edu>
Date: Fri, 15 Nov 2024 18:05:42 -0800
Subject: [PATCH 2/3] Added placeholder latency indicator, adjusted hover
 color, implemented dynamic title on containers.

---
 src/components/Navbar.vue | 23 +++++++++++------------
 src/store/useRoslib.ts    |  2 ++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 37a8cbd..a246ff2 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -93,23 +93,22 @@ const pageIconArr: PageIcon = [
       <h4>{{ pageIcon.label }}</h4>
       <component :is="pageIcon.icon" class="page-icon" :title="pageIcon.helperText" />
     </RouterLink>
-    <div class="container indicator-container">
+    <div class="container indicator-container" :title = "(`Websocket: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`)">
       <h4 id="status">WS</h4>
-      <component :is="PowerPlugIcon" class="page-icon" title="Indicates WebSocket connection" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
+      <component :is="PowerPlugIcon" class="page-icon" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
     </div>
-    <div class="container indicator-container">
+    <div class="container indicator-container" :title = "(`Camera: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`)">
       <h4 id="status">CAM</h4>
-      <component :is="CameraIcon" class="page-icon" title="Indicates camera connection" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
+      <component :is="CameraIcon" class="page-icon"  :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
     </div>
-    <div class="container indicator-container">
+    <div class="container indicator-container" :title = "(`Controller: ${controller.isGamepadConnected ? `Connected` : `Disconnected`}`)">
       <h4 id="status">CTRL</h4>
-      <component :is="ControllerIcon" class="page-icon" title="Indicates controller connection" :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"/>
+      <component :is="ControllerIcon" class="page-icon" :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"/>
+    </div>
+    <div class="container indicator-container">
+      <h4 id="status">Ping</h4>
+      <h4>{{ roslib.latency + "ms" }}</h4>
     </div>
-    <!-- TODO Implement Latency -->
-    <!-- <div class="container">
-      <h4>Ping</h4>
-      <p>{{ `${latency}ms` }}</p>
-    </div> -->
   </nav>
 </template>
 
@@ -141,7 +140,7 @@ nav {
     min-width: 4rem;
   }
   .navbar-tab:not(.current-page):hover {
-    background-color: hsl(0, 0%, 12%);
+    background-color: hsl(0, 0%, 16%);
   }
   #logo {
     max-width: 100%;
diff --git a/src/store/useRoslib.ts b/src/store/useRoslib.ts
index 2e598e1..661a857 100644
--- a/src/store/useRoslib.ts
+++ b/src/store/useRoslib.ts
@@ -11,6 +11,7 @@ const SECONDS_TO_TIMESTAMP = 1000;
 export const useRoslibStore = defineStore('roslib', () => {
   const ros = new ROSLIB.Ros({ url: undefined });
   const isWebSocketConnected = ref<boolean>(false);
+  const latency = ref<Number>(0);
   const stop = ref<boolean>(false);
   /**
    * Initializes Ros, websocket with Rover and runs heartbeat subscribes. Should only be used in App.vue
@@ -221,6 +222,7 @@ export const useRoslibStore = defineStore('roslib', () => {
   return {
     ros,
     isWebSocketConnected,
+    latency,
     stop,
     init,
     createNonStandardTopic,

From 19c175b64d46f8c23f179a2d3276a9700a3a7ca9 Mon Sep 17 00:00:00 2001
From: Quashnock <awq@uw.edu>
Date: Fri, 15 Nov 2024 21:03:27 -0800
Subject: [PATCH 3/3] Ran git pull, git run format, changed number case.

---
 src/components/Navbar.vue | 35 ++++++++++++++++++++++++++++-------
 src/store/useRoslib.ts    |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index a246ff2..ce3be18 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -93,21 +93,42 @@ const pageIconArr: PageIcon = [
       <h4>{{ pageIcon.label }}</h4>
       <component :is="pageIcon.icon" class="page-icon" :title="pageIcon.helperText" />
     </RouterLink>
-    <div class="container indicator-container" :title = "(`Websocket: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`)">
+    <div
+      class="container indicator-container"
+      :title="`Websocket: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
+    >
       <h4 id="status">WS</h4>
-      <component :is="PowerPlugIcon" class="page-icon" :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
+      <component
+        :is="PowerPlugIcon"
+        class="page-icon"
+        :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
+      />
     </div>
-    <div class="container indicator-container" :title = "(`Camera: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`)">
+    <div
+      class="container indicator-container"
+      :title="`Camera: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
+    >
       <h4 id="status">CAM</h4>
-      <component :is="CameraIcon" class="page-icon"  :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"/>
+      <component
+        :is="CameraIcon"
+        class="page-icon"
+        :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
+      />
     </div>
-    <div class="container indicator-container" :title = "(`Controller: ${controller.isGamepadConnected ? `Connected` : `Disconnected`}`)">
+    <div
+      class="container indicator-container"
+      :title="`Controller: ${controller.isGamepadConnected ? `Connected` : `Disconnected`}`"
+    >
       <h4 id="status">CTRL</h4>
-      <component :is="ControllerIcon" class="page-icon" :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"/>
+      <component
+        :is="ControllerIcon"
+        class="page-icon"
+        :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"
+      />
     </div>
     <div class="container indicator-container">
       <h4 id="status">Ping</h4>
-      <h4>{{ roslib.latency + "ms" }}</h4>
+      <h4>{{ roslib.latency + 'ms' }}</h4>
     </div>
   </nav>
 </template>
diff --git a/src/store/useRoslib.ts b/src/store/useRoslib.ts
index 4280de2..6e61da9 100644
--- a/src/store/useRoslib.ts
+++ b/src/store/useRoslib.ts
@@ -10,7 +10,7 @@ const SECONDS_TO_TIMESTAMP = 1000;
 export const useRoslibStore = defineStore('roslib', () => {
   const ros = new ROSLIB.Ros({ url: undefined });
   const isWebSocketConnected = ref<boolean>(false);
-  const latency = ref<Number>(0);
+  const latency = ref<number>(0);
   const stop = { value: false };
 
   /**