From 91bb30cd54ef1ea9959e49f1277a55bcd5204818 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 7 Jun 2022 16:05:43 +0000
Subject: [PATCH] Reorganize components

---
 .../AccessPointClientsDataTable.vue}          |  17 ++-
 .../UserWifiDevicesDataTable.vue}             |  37 +++--
 .../DataTables/WifiDevicesDataTable.vue       | 133 ++++++++++++++++++
 web/src/components/signalStrength.vue         |  12 +-
 web/src/views/AccessPoints/clients.vue        |   6 +-
 web/src/views/WifiDevices.vue                 |   7 +-
 web/src/views/WifiUsers.vue                   |  12 +-
 7 files changed, 201 insertions(+), 23 deletions(-)
 rename web/src/components/{ClientsDataTable.vue => DataTables/AccessPointClientsDataTable.vue} (86%)
 rename web/src/components/{WifiDevicesTable.vue => DataTables/UserWifiDevicesDataTable.vue} (65%)
 create mode 100644 web/src/components/DataTables/WifiDevicesDataTable.vue

diff --git a/web/src/components/ClientsDataTable.vue b/web/src/components/DataTables/AccessPointClientsDataTable.vue
similarity index 86%
rename from web/src/components/ClientsDataTable.vue
rename to web/src/components/DataTables/AccessPointClientsDataTable.vue
index 844731f..f4cd9e7 100644
--- a/web/src/components/ClientsDataTable.vue
+++ b/web/src/components/DataTables/AccessPointClientsDataTable.vue
@@ -17,6 +17,14 @@
         <span v-else><Avatar left size="24" /> Não logado</span>
       </template>
 
+      <template #[`item.mac`]="{ item: { mac } }">
+        <code @click="setClipboard(mac)">{{ mac }}</code>
+      </template>
+
+      <template #[`item.ip`]="{ item: { ip } }">
+        <code @click="setClipboard(ip)">{{ ip }}</code>
+      </template>
+
       <template #[`item.uptime`]="{ item: { uptime } }">
         <small> {{ uptime | durationFromSeconds }}</small>
       </template>
@@ -46,8 +54,8 @@
 </template>
 
 <script>
-import Avatar from './Avatar.vue'
-import SignalStrength from './signalStrength.vue'
+import Avatar from '../Avatar.vue'
+import SignalStrength from '../signalStrength.vue'
 
 export default {
   components: { Avatar, SignalStrength },
@@ -102,6 +110,11 @@ export default {
         this.headers.includes(value)
       )
     }
+  },
+  methods: {
+    setClipboard(text) {
+      navigator.clipboard.writeText(text)
+    }
   }
 }
 </script>
diff --git a/web/src/components/WifiDevicesTable.vue b/web/src/components/DataTables/UserWifiDevicesDataTable.vue
similarity index 65%
rename from web/src/components/WifiDevicesTable.vue
rename to web/src/components/DataTables/UserWifiDevicesDataTable.vue
index 0089a35..a5af963 100644
--- a/web/src/components/WifiDevicesTable.vue
+++ b/web/src/components/DataTables/UserWifiDevicesDataTable.vue
@@ -7,7 +7,7 @@
       clearable
     />
     <v-data-table
-      :items="wifiDevices"
+      :items="items"
       :headers="headers"
       :search="search"
       calculate-widths
@@ -18,17 +18,30 @@
         </v-chip>
         <v-chip v-else color="grey" dark x-small>Offline</v-chip>
       </template>
-      <template #[`item.ip`]="{ item }">
-        <code> {{ item.ip }}</code>
+
+      <template #[`item.ip`]="{ item: { ip } }">
+        <code> {{ ip }}</code>
       </template>
-      <template #[`item.mac`]="{ item }">
-        <code> {{ item.mac }}</code>
+      <template #[`item.mac`]="{ item: { mac } }">
+        <code> {{ mac }}</code>
+      </template>
+      <template #[`item.essid`]="{ item: { essid } }">
+        <small>{{ essid }}</small>
+      </template>
+      <template #[`item.signalStrength`]="{ item: { signalStrength } }">
+        <SignalStrength :value="signalStrength" no-signal-text="" />
+      </template>
+      <template #[`item.usage`]="{ item: { usage } }">
+        {{ usage | bytes }}
+      </template>
+      <template #[`item.oui`]="{ item: { oui } }">
+        <small> {{ oui }}</small>
       </template>
       <template #[`item.firstSeen`]="{ item }">
-        {{ item.firstSeen | shortDate }}
+        <small> {{ item.firstSeen | shortDate }} </small>
       </template>
       <template #[`item.lastSeen`]="{ item }">
-        {{ item.lastSeen | shortDate }}
+        <small>{{ item.lastSeen | shortDate }} </small>
       </template>
       <template #[`item.apName`]="{ item }">
         <router-link
@@ -57,7 +70,10 @@
 </template>
 
 <script>
+import SignalStrength from '../signalStrength.vue'
+
 export default {
+  components: { SignalStrength },
   props: {
     wifiDevices: {
       type: Array,
@@ -72,19 +88,20 @@ export default {
       { text: 'MAC', value: 'mac' },
       { text: 'Status', value: 'status' },
       { text: 'ESSID', value: 'essid' },
+      { text: 'Sinal', value: 'signalStrength' },
       { text: 'Uptime', value: 'uptime' },
       { text: 'Marca', value: 'oui' },
       { text: 'Primeira aparição', value: 'firstSeen' },
       { text: 'Última aparição', value: 'lastSeen' },
-      { text: 'AccessPoint', value: 'apName' }
+      { text: 'AccessPoint', value: 'apName' },
+      { text: 'Uso', value: 'usage' }
     ]
   }),
   computed: {
     items() {
       return this.wifiDevices.map(device => ({
-        ...device.accessPoint,
         ...device,
-        accessPointId: device.accessPoint?.id
+        signalStrength: device.status == 'ONLINE' ? device.signalStrength : 0
       }))
     }
   }
diff --git a/web/src/components/DataTables/WifiDevicesDataTable.vue b/web/src/components/DataTables/WifiDevicesDataTable.vue
new file mode 100644
index 0000000..3fcf561
--- /dev/null
+++ b/web/src/components/DataTables/WifiDevicesDataTable.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <v-data-table
+      sort-by="signalStrength"
+      :items="wifiDevices"
+      :headers="headers"
+      :search="filter"
+      :hide-default-footer="!paginate"
+      :disable-pagination="!paginate"
+      no-data-text="Nenhum cliente conectado à este AP"
+    >
+      <template #[`item.user`]="{ item: { user } }">
+        <div v-if="user" class="d-flex">
+          <Avatar
+            class="flex-column center-block"
+            left
+            :src="user.thumbnailPhoto"
+            size="28"
+          />
+          <small class="d-block text-no-wrap">
+            {{ user.displayName }} <br />
+            {{ user.sAMAccountName }}
+          </small>
+        </div>
+        <span v-else><Avatar left size="28" /> Não logado</span>
+      </template>
+
+      <template #[`item.mac`]="{ item: { mac } }">
+        <code @click="setClipboard(mac)">{{ mac }}</code>
+      </template>
+
+      <template #[`item.essid`]="{ item: { essid } }">
+        <small class="text-no-wrap">{{ essid }}</small>
+      </template>
+
+      <template #[`item.ip`]="{ item: { ip } }">
+        <code @click="setClipboard(ip)">{{ ip }}</code>
+      </template>
+
+      <template #[`item.uptime`]="{ item: { uptime } }">
+        <small class="text-no-wrap"> {{ uptime | durationFromSeconds }}</small>
+      </template>
+
+      <template #[`item.signalStrength`]="{ item: { signalStrength } }">
+        <SignalStrength :value="signalStrength" />
+      </template>
+
+      <template #[`item.speed`]="{ item: { speed } }">
+        {{ speed }} <small>Mbps</small>
+      </template>
+
+      <template #[`item.usage`]="{ item: { usage } }">
+        <span class="text-no-wrap"> {{ usage | bytes }}</span>
+      </template>
+
+      <template #[`item.protocol`]="{ item: { protocol } }">
+        <code v-if="protocol">{{ protocol }}</code>
+        <span v-else>-</span>
+      </template>
+
+      <template #[`item.frequency`]="{ item: { frequency } }">
+        {{ frequency || '-' }}
+      </template>
+      <template #[`item.apName`]="{ item }">
+        <router-link
+          class="text-decoration-none"
+          :to="{
+            name: 'access-point-clients',
+            params: { id: item.accessPoint.id }
+          }"
+        >
+          <small class="text-no-wrap">
+            {{ item.accessPoint.name || item.accessPoint.hostname }}
+          </small>
+        </router-link>
+        <span v-if="item.accessPoint.local">
+          ({{ item.accessPoint.local }})
+        </span>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import Avatar from '../Avatar.vue'
+import SignalStrength from '../signalStrength.vue'
+
+export default {
+  components: { Avatar, SignalStrength },
+  props: {
+    wifiDevices: {
+      type: Array,
+      default: () => []
+    },
+    filter: {
+      type: String,
+      default: ''
+    },
+    paginate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    availableHeaders: [
+      { text: 'Hostname', value: 'hostname' },
+      { text: 'MAC', value: 'mac' },
+      { text: 'IP', value: 'ip' },
+      { text: 'ESSID', value: 'essid' },
+      { text: 'Uptime', value: 'uptime' },
+      { text: 'Usuário', value: 'user' },
+      { text: 'Sinal', value: 'signalStrength' },
+      { text: 'Frequência', value: 'frequency', align: 'end' },
+      { text: 'Protocolo', value: 'protocol' },
+      { text: 'Velocidade', value: 'speed', align: 'end' },
+      { text: 'Uso', value: 'usage', align: 'end' },
+      { text: 'Access Point', value: 'apName' }
+    ]
+  }),
+  computed: {
+    headers() {
+      return this.availableHeaders
+    }
+  },
+  methods: {
+    setClipboard(text) {
+      navigator.clipboard.writeText(text)
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/web/src/components/signalStrength.vue b/web/src/components/signalStrength.vue
index 48b9b02..bc3f335 100644
--- a/web/src/components/signalStrength.vue
+++ b/web/src/components/signalStrength.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-tooltip left :color="signalStrengthColor(value)" open-delay="400">
+  <v-tooltip
+    left
+    :color="signalStrengthColor(value) + ' darken-4'"
+    open-delay="400"
+  >
     <template #activator="{ on, attrs }">
       <template v-if="value < 0">
         <v-chip
@@ -18,7 +22,7 @@
       <template v-else>
         <v-chip small color="grey lighten-4">
           <v-icon small left color="grey">mdi-signal-off</v-icon>
-          <small>Aguarde...</small>
+          <small>{{ noSignalText }}</small>
         </v-chip>
       </template>
     </template>
@@ -32,6 +36,10 @@ export default {
     value: {
       type: Number,
       default: -1
+    },
+    noSignalText: {
+      type: String,
+      default: 'Aguarde...'
     }
   },
   methods: {
diff --git a/web/src/views/AccessPoints/clients.vue b/web/src/views/AccessPoints/clients.vue
index 4bdd787..81af58a 100644
--- a/web/src/views/AccessPoints/clients.vue
+++ b/web/src/views/AccessPoints/clients.vue
@@ -41,7 +41,7 @@
         </v-card-title>
         <v-divider />
         <v-card-text>
-          <ClientsDataTable
+          <AccessPointClientsDataTable
             :wifi-devices="accessPoint.wifiDevices"
             :filter="filter"
           />
@@ -64,11 +64,11 @@
 import gql from 'graphql-tag'
 
 import ApIcon from '../../components/ApIcon.vue'
-import ClientsDataTable from '../../components/ClientsDataTable.vue'
+import AccessPointClientsDataTable from '../../components/DataTables/AccessPointClientsDataTable.vue'
 
 export default {
   name: 'SingleAccessPoint',
-  components: { ApIcon, ClientsDataTable },
+  components: { ApIcon, AccessPointClientsDataTable },
   data: () => ({
     showDialog: true,
     filter: ''
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index 6b71e28..5ef4d63 100644
--- a/web/src/views/WifiDevices.vue
+++ b/web/src/views/WifiDevices.vue
@@ -60,7 +60,7 @@
 
     <v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
 
-    <ClientsDataTable :wifi-devices="computedWifiDevices" />
+    <WifiDevicesDataTable :wifi-devices="computedWifiDevices" />
 
     <v-pagination
       v-model="page"
@@ -73,11 +73,11 @@
 
 <script>
 import gql from 'graphql-tag'
-import ClientsDataTable from '../components/ClientsDataTable.vue'
+import WifiDevicesDataTable from '../components/DataTables/WifiDevicesDataTable.vue'
 
 export default {
   name: 'WifiDevices',
-  components: { ClientsDataTable },
+  components: { WifiDevicesDataTable },
   data: () => ({
     search: '',
     page: 1,
@@ -123,6 +123,7 @@ export default {
             total
             data {
               accessPoint {
+                id
                 name
                 hostname
                 local
diff --git a/web/src/views/WifiUsers.vue b/web/src/views/WifiUsers.vue
index 5b7fa31..6a1f3c4 100644
--- a/web/src/views/WifiUsers.vue
+++ b/web/src/views/WifiUsers.vue
@@ -91,7 +91,7 @@
             </v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-expansion-panels accordion>
-                <wifi-devices-table :wifi-devices="user.wifiDevices" />
+                <UserWifiDevicesDataTable :wifi-devices="user.wifiDevices" />
               </v-expansion-panels>
             </v-expansion-panel-content>
           </v-expansion-panel>
@@ -106,10 +106,10 @@
 <script>
 import gql from 'graphql-tag'
 import Avatar from '../components/Avatar.vue'
-import WifiDevicesTable from '../components/WifiDevicesTable.vue'
+import UserWifiDevicesDataTable from '../components/DataTables/UserWifiDevicesDataTable.vue'
 
 export default {
-  components: { Avatar, WifiDevicesTable },
+  components: { Avatar, UserWifiDevicesDataTable },
   data: () => ({
     search: ''
   }),
@@ -153,6 +153,12 @@ export default {
               essid
               ip
               uptime
+              signalStrength
+              frequency
+              protocol
+              speed
+              usage
+
               accessPoint {
                 id
                 name