From 950c19781b63009728b40eebe564916c72ced406 Mon Sep 17 00:00:00 2001
From: Jacob McSwain <jacob@mcswain.dev>
Date: Thu, 17 Aug 2023 12:57:05 -0500
Subject: [PATCH] =?UTF-8?q?frontend:=20Use=20=E2=9C=94=EF=B8=8F/=E2=9C=96?=
 =?UTF-8?q?=EF=B8=8F=20to=20show=20connection=20and=20running=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TunnelsTable.vue | 25 +++++++++++++-----------
 frontend/src/views/MainPage.vue          | 20 ++++++++++++++++---
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/TunnelsTable.vue b/frontend/src/components/TunnelsTable.vue
index 29383278..e90cfacd 100644
--- a/frontend/src/components/TunnelsTable.vue
+++ b/frontend/src/components/TunnelsTable.vue
@@ -23,14 +23,21 @@
       </div>
     </template>
     <Column :expander="true" v-if="$props.admin" />
-    <Column field="active" header="Connected"></Column>
+    <Column field="active" header="Connected">
+      <template #body="slotProps">
+        <PVBadge v-if="slotProps.data.active" value="✔️" severity="success"></PVBadge>
+        <PVBadge v-else value="✖️" severity="danger"></PVBadge>
+        &nbsp;<span v-if="slotProps.data.connection_time == 'Never'">{{slotProps.data.connection_time}}</span>
+        <span v-else>{{slotProps.data.connection_time.fromNow()}}</span>
+      </template>
+    </Column>
     <Column field="hostname" header="Name"></Column>
     <Column field="ip" header="IP"></Column>
     <Column field="password" header="Password" v-if="$props.admin"></Column>
-    <Column field="connection_time" header="Connection Time" v-if="!$props.admin">
+    <Column field="rx_bytes_per_sec" header="Bandwidth Usage" v-if="!$props.admin">
       <template #body="slotProps">
-        <span v-if="slotProps.data.connection_time == 'Never'">{{slotProps.data.connection_time}}</span>
-        <span v-else>{{slotProps.data.connection_time.fromNow()}}</span>
+        <p><span style="font-weight: bold;">RX:</span> {{prettyBytes(slotProps.data.rx_bytes_per_sec)}}/s</p>
+        <p><span style="font-weight: bold;">TX:</span> {{prettyBytes(slotProps.data.tx_bytes_per_sec)}}/s</p>
       </template>
     </Column>
     <Column field="rx_bytes" header="Session Traffic" v-if="!$props.admin">
@@ -45,12 +52,6 @@
         <p><span style="font-weight: bold;">TX:</span> {{prettyBytes(slotProps.data.total_tx_mb)}}</p>
       </template>
     </Column>
-    <Column field="rx_bytes_per_sec" header="Bandwidth Usage" v-if="!$props.admin">
-      <template #body="slotProps">
-        <p><span style="font-weight: bold;">RX:</span> {{prettyBytes(slotProps.data.rx_bytes_per_sec)}}/s</p>
-        <p><span style="font-weight: bold;">TX:</span> {{prettyBytes(slotProps.data.tx_bytes_per_sec)}}/s</p>
-      </template>
-    </Column>
     <Column field="created_at" header="Created" v-if="$props.admin">
       <template #body="slotProps">{{
         slotProps.data.created_at.fromNow()
@@ -76,8 +77,9 @@
 
 <script>
 import Button from 'primevue/button';
-import DataTable from 'primevue/datatable';
+import Badge from 'primevue/badge';
 import Column from 'primevue/column';
+import DataTable from 'primevue/datatable';
 
 import moment from 'moment';
 import prettyBytes from 'pretty-bytes';
@@ -98,6 +100,7 @@ export default {
     PVButton: Button,
     DataTable,
     Column,
+    PVBadge: Badge,
   },
   data: function() {
     return {
diff --git a/frontend/src/views/MainPage.vue b/frontend/src/views/MainPage.vue
index e4b39d41..50e5351d 100644
--- a/frontend/src/views/MainPage.vue
+++ b/frontend/src/views/MainPage.vue
@@ -5,13 +5,25 @@
         <template #title>Daemon Status</template>
         <template #content>
           <h3 style="font-weight: bold;">VTun Daemon</h3>
-          <p>{{ vtundRunning ? 'Running':'Stopped' }}</p>
+          <p>
+            <PVBadge v-if="vtundRunning" value="✔️" severity="success"></PVBadge>
+            <PVBadge v-else value="✖️" severity="danger"></PVBadge>
+            {{ vtundRunning ? 'Running':'Stopped' }}
+          </p>
           <br />
           <h3 style="font-weight: bold;">OLSR Daemon</h3>
-          <p>{{ olsrdRunning ? 'Running':'Stopped' }}</p>
+          <p>
+            <PVBadge v-if="olsrdRunning" value="✔️" severity="success"></PVBadge>
+            <PVBadge v-else value="✖️" severity="danger"></PVBadge>
+            {{ olsrdRunning ? 'Running':'Stopped' }}
+          </p>
           <br />
           <h3 style="font-weight: bold;">DNSMasq</h3>
-          <p>{{ dnsRunning ? 'Running':'Stopped' }}</p>
+          <p>
+            <PVBadge v-if="dnsRunning" value="✔️" severity="success"></PVBadge>
+            <PVBadge v-else value="✖️" severity="danger"></PVBadge>
+            {{ dnsRunning ? 'Running':'Stopped' }}
+          </p>
         </template>
       </Card>
       <Card style="width: 48%;">
@@ -34,6 +46,7 @@
 </template>
 
 <script>
+import Badge from 'primevue/badge';
 import Card from 'primevue/card';
 
 import prettyBytes from 'pretty-bytes';
@@ -43,6 +56,7 @@ import API from '@/services/API';
 export default {
   components: {
     Card,
+    PVBadge: Badge,
   },
   created() {
     this.fetchData();