Minor Ui changes

server/src/resolvers/WifiDevice.js

@@ -15,6 +15,8 @@ const WifiDevice = {
       })
     ).user,
 
+  usage: parent => parent.usage < 0 ? parent.usage * -1 : parent.usage,
+
   accessPoint: async parent => {
 
     try {

web/src/plugins/format-bytes.js

@@ -1,13 +1,18 @@
 import Vue from 'vue'
 
-function bytes(bytes, decimals, kib, maxUnit) {
-  console.log(bytes, decimals, kib, maxUnit)
+function bytes(bytes, kib, maxUnit) {
+  const decimals = 1
+
   kib = kib || false
+
+  if (bytes < 0) bytes = bytes * -1
+
   if (bytes === 0) return '0 Bytes'
+
   if (isNaN(parseFloat(bytes)) && !isFinite(bytes)) return ''
+
   const k = kib ? 1024 : 1000
-  const dm =
-    decimals != null && !isNaN(decimals) && decimals >= 0 ? decimals : 2
+
   const sizes = kib
     ? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
     : ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB']
@@ -16,7 +21,7 @@ function bytes(bytes, decimals, kib, maxUnit) {
     const index = sizes.indexOf(maxUnit)
     if (index != -1) i = index
   }
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]
 }
 
 Vue.filter('bytes', bytes)

web/src/views/AccessPoints/clients.vue

@@ -89,7 +89,7 @@
             </template>
 
             <template #[`item.speed`]="{ item: { speed } }">
-              {{ speed }} Mbps
+              {{ speed }} <small>Mbps</small>
             </template>
 
             <template #[`item.usage`]="{ item: { usage } }">
@@ -97,20 +97,23 @@
             </template>
 
             <template #[`item.protocol`]="{ item: { protocol } }">
-              <code>{{ protocol || 'Indisponível' }}</code>
+              <code v-if="protocol">{{ protocol }}</code>
+              <span v-else>-</span>
             </template>
 
             <template #[`item.frequency`]="{ item: { frequency } }">
-              {{ frequency || 'Indisponível' }}
+              {{ frequency || '-' }}
             </template>
           </v-data-table>
         </v-card-text>
         <v-divider />
         <v-card-actions>
-          <v-icon left>mdi-account-group</v-icon>
+          <v-icon small left>mdi-account-group</v-icon>
           {{ accessPoint.wifiDevices.length }} clientes conectados
           <v-spacer />
-          <v-btn color="primary" @click="showDialog = false"> Voltar </v-btn>
+          <v-btn color="primary" text @click="showDialog = false">
+            Voltar
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -136,10 +139,10 @@ export default {
       { text: 'Uptime', value: 'uptime' },
       { text: 'Usuário', value: 'user' },
       { text: 'Sinal', value: 'signalStrength' },
-      { text: 'Frequência', value: 'frequency' },
+      { text: 'Frequência', value: 'frequency', align: 'end' },
       { text: 'Protocolo', value: 'protocol' },
-      { text: 'Velocidade', value: 'speed' },
-      { text: 'Uso', value: 'usage' }
+      { text: 'Velocidade', value: 'speed', align: 'end' },
+      { text: 'Uso', value: 'usage', align: 'end' }
     ]
   }),
   watch: {