frontend: Use ✔️/✖️ to show connection and running status

USA-RedDragon · Aug 17, 2023 · 950c197 · 950c197
1 parent 055de90
commit 950c197
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git 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
@@ -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();