From d8a713045a7ab5f658726a22fc8dba1e1feed9c7 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Fri, 3 Jun 2022 18:05:53 +0000
Subject: [PATCH] Extract component

---
 web/src/components/DevicesDataTable.vue | 146 +++++++++++++++++
 web/src/plugins/format-bytes.js         |   5 +-
 web/src/views/AccessPoints/clients.vue  | 106 +-----------
 web/src/views/WifiDevices.vue           | 208 ++----------------------
 4 files changed, 175 insertions(+), 290 deletions(-)
 create mode 100644 web/src/components/DevicesDataTable.vue

diff --git a/web/src/components/DevicesDataTable.vue b/web/src/components/DevicesDataTable.vue
new file mode 100644
index 0000000..d68a6ec
--- /dev/null
+++ b/web/src/components/DevicesDataTable.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <v-data-table
+      sort-by="signalStrength"
+      :items="wifiDevices"
+      :headers="pickedHeaders"
+      :search="filter"
+      :hide-default-footer="!paginate"
+      :disable-pagination="!paginate"
+      no-data-text="Nenhum cliente conectado à este AP"
+    >
+      <template #[`item.user`]="{ item: { user } }">
+        <span v-if="user">
+          <Avatar left :src="user.thumbnailPhoto" size="24" />
+          {{ user.displayName }} ({{ user.sAMAccountName }})
+        </span>
+        <span v-else><Avatar left size="24" /> Não logado</span>
+      </template>
+
+      <template #[`item.uptime`]="{ item: { uptime } }">
+        <small> {{ uptime | durationFromSeconds }}</small>
+      </template>
+
+      <template #[`item.signalStrength`]="{ item: { signalStrength } }">
+        <template v-if="signalStrength < 0">
+          <v-chip
+            small
+            :color="signalStrengthColor(signalStrength) + ' lighten-5'"
+          >
+            <v-icon
+              small
+              left
+              :color="signalStrengthColor(signalStrength) + ' darken-2'"
+            >
+              {{ signalStrengthIcon(signalStrength) }}
+            </v-icon>
+            <span class="font-weight-medium">{{ signalStrength }}</span>
+            <small class="ml-1"> dBm </small>
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-chip small color="grey lighten-4">
+            <v-icon small left color="grey">mdi-signal-off</v-icon>
+            <small>Aguarde...</small>
+          </v-chip>
+        </template>
+      </template>
+
+      <template #[`item.speed`]="{ item: { speed } }">
+        {{ speed }} <small>Mbps</small>
+      </template>
+
+      <template #[`item.usage`]="{ item: { usage } }">
+        {{ usage | bytes }}
+      </template>
+
+      <template #[`item.protocol`]="{ item: { protocol } }">
+        <code v-if="protocol">{{ protocol }}</code>
+        <span v-else>-</span>
+      </template>
+
+      <template #[`item.frequency`]="{ item: { frequency } }">
+        {{ frequency || '-' }}
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import Avatar from './Avatar.vue'
+
+export default {
+  components: { Avatar },
+  props: {
+    wifiDevices: {
+      type: Array,
+      default: () => []
+    },
+    filter: {
+      type: String,
+      default: ''
+    },
+    paginate: {
+      type: Boolean,
+      default: false
+    },
+    headers: {
+      type: Array,
+      default: () => [
+        'hostname',
+        'mac',
+        'ip',
+        'essid',
+        'uptime',
+        'user',
+        'signalStrength',
+        'frequency',
+        'protocol',
+        'speed',
+        'usage'
+      ]
+    }
+  },
+  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' }
+    ]
+  }),
+  computed: {
+    pickedHeaders() {
+      return this.availableHeaders.filter(({ value }) =>
+        this.headers.includes(value)
+      )
+    }
+  },
+  methods: {
+    signalStrengthIcon(signalStrength) {
+      if (signalStrength > -50) return 'mdi-signal-cellular-3'
+      if (signalStrength > -67) return 'mdi-signal-cellular-2'
+      if (signalStrength > -80) return 'mdi-signal-cellular-1'
+      return 'mdi-signal-cellular-outline'
+    },
+    signalStrengthColor(signalStrength) {
+      if (signalStrength > -50) return 'green'
+      else if (signalStrength > -60) return 'light-green'
+      else if (signalStrength > -67) return 'lime'
+      else if (signalStrength > -70) return 'amber'
+      else if (signalStrength > -80) return 'orange'
+      else if (signalStrength > -90) return 'deep-orange'
+      else return 'red'
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/web/src/plugins/format-bytes.js b/web/src/plugins/format-bytes.js
index 0ab0cc8..56ff355 100644
--- a/web/src/plugins/format-bytes.js
+++ b/web/src/plugins/format-bytes.js
@@ -16,11 +16,14 @@ function bytes(bytes, kib, maxUnit) {
   const sizes = kib
     ? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
     : ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB']
-  var i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  let i = Math.floor(Math.log(bytes) / Math.log(k))
+
   if (maxUnit != undefined) {
     const index = sizes.indexOf(maxUnit)
     if (index != -1) i = index
   }
+
   return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]
 }
 
diff --git a/web/src/views/AccessPoints/clients.vue b/web/src/views/AccessPoints/clients.vue
index ed994b0..d0da5cc 100644
--- a/web/src/views/AccessPoints/clients.vue
+++ b/web/src/views/AccessPoints/clients.vue
@@ -41,70 +41,10 @@
         </v-card-title>
         <v-divider />
         <v-card-text>
-          <v-data-table
-            sort-by="signalStrength"
-            :items="accessPoint.wifiDevices"
-            :headers="headers"
-            :search="filter"
-            dense
-            hide-default-footer
-            disable-pagination
-            no-data-text="Nenhum cliente conectado à este AP"
-          >
-            <template #[`item.user`]="{ item: { user } }">
-              <span v-if="user">
-                <Avatar left :src="user.thumbnailPhoto" size="24" />
-                {{ user.displayName }} ({{ user.sAMAccountName }})
-              </span>
-              <span v-else><Avatar left size="24" /> Não logado</span>
-            </template>
-
-            <template #[`item.uptime`]="{ item: { uptime } }">
-              {{ uptime | durationFromSeconds }}
-            </template>
-
-            <template #[`item.signalStrength`]="{ item: { signalStrength } }">
-              <template v-if="signalStrength < 0">
-                <v-chip
-                  small
-                  :color="signalStrengthColor(signalStrength) + ' lighten-5'"
-                >
-                  <v-icon
-                    small
-                    left
-                    :color="signalStrengthColor(signalStrength) + ' darken-2'"
-                  >
-                    {{ signalStrengthIcon(signalStrength) }}
-                  </v-icon>
-                  <span class="font-weight-medium">{{ signalStrength }}</span>
-                  <small class="ml-1"> dBm </small>
-                </v-chip>
-              </template>
-              <template v-else>
-                <v-chip small color="grey lighten-4">
-                  <v-icon small left color="grey">mdi-signal-off</v-icon>
-                  <small>Aguarde...</small>
-                </v-chip>
-              </template>
-            </template>
-
-            <template #[`item.speed`]="{ item: { speed } }">
-              {{ speed }} <small>Mbps</small>
-            </template>
-
-            <template #[`item.usage`]="{ item: { usage } }">
-              {{ usage | bytes }}
-            </template>
-
-            <template #[`item.protocol`]="{ item: { protocol } }">
-              <code v-if="protocol">{{ protocol }}</code>
-              <span v-else>-</span>
-            </template>
-
-            <template #[`item.frequency`]="{ item: { frequency } }">
-              {{ frequency || '-' }}
-            </template>
-          </v-data-table>
+          <DevicesDataTable
+            :wifi-devices="accessPoint.wifiDevices"
+            :filter="filter"
+          />
         </v-card-text>
         <v-divider />
         <v-card-actions>
@@ -122,28 +62,16 @@
 
 <script>
 import gql from 'graphql-tag'
-import Avatar from '../../components/Avatar.vue'
+
 import ApIcon from '../../components/ApIcon.vue'
+import DevicesDataTable from '../../components/DevicesDataTable.vue'
 
 export default {
   name: 'SingleAccessPoint',
-  components: { Avatar, ApIcon },
+  components: { ApIcon, DevicesDataTable },
   data: () => ({
     showDialog: true,
-    filter: '',
-    headers: [
-      { 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' }
-    ]
+    filter: ''
   }),
   watch: {
     showDialog() {
@@ -152,24 +80,6 @@ export default {
     }
   },
 
-  methods: {
-    signalStrengthIcon(signalStrength) {
-      if (signalStrength > -50) return 'mdi-signal-cellular-3'
-      if (signalStrength > -67) return 'mdi-signal-cellular-2'
-      if (signalStrength > -80) return 'mdi-signal-cellular-1'
-      return 'mdi-signal-cellular-outline'
-    },
-    signalStrengthColor(signalStrength) {
-      if (signalStrength > -50) return 'green'
-      else if (signalStrength > -60) return 'light-green'
-      else if (signalStrength > -67) return 'lime'
-      else if (signalStrength > -70) return 'amber'
-      else if (signalStrength > -80) return 'orange'
-      else if (signalStrength > -90) return 'deep-orange'
-      else return 'red'
-    }
-  },
-
   apollo: {
     accessPoint: {
       pollInterval: 10000,
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index 615b4cf..eed6a2f 100644
--- a/web/src/views/WifiDevices.vue
+++ b/web/src/views/WifiDevices.vue
@@ -47,182 +47,8 @@
       no total.
     </div>
 
-    <v-data-iterator
-      :items="computedWifiDevices"
-      :items-per-page.sync="itemsPerPage"
-      :page="page"
-      :loading="$apollo.queries.wifiDevices.loading"
-    >
-      <template #loading>
-        <v-expansion-panels disabled>
-          <v-expansion-panel v-for="i in 10" :key="i">
-            <v-expansion-panel-header class="pa-1">
-              <v-skeleton-loader class="ma-0 pa-0" type="list-item-avatar" />
-            </v-expansion-panel-header>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </template>
-      <template #default="{ items }">
-        <v-expansion-panels multiple>
-          <v-expansion-panel v-for="device in items" :key="device.mac">
-            <v-expansion-panel-header>
-              <v-row dense align-content="center" no-gutters>
-                <v-col class="shrink" align-self="center">
-                  <v-badge
-                    :color="device.status == 'ONLINE' ? 'green' : 'grey'"
-                    left
-                    offset-y="16"
-                    dot
-                  >
-                    <ap-icon class="mr-4" :controller="device.controller" />
-                  </v-badge>
-                </v-col>
-                <v-col align-self="center" cols="3">
-                  {{ device.hostname }}
-                </v-col>
-                <v-col
-                  v-if="$vuetify.breakpoint.mdAndUp"
-                  cols="2"
-                  class="grow"
-                  >{{ device.ip }}</v-col
-                >
-                <v-col v-if="$vuetify.breakpoint.mdAndUp" class="grow">
-                  <div>
-                    <avatar left size="24px" :src="device.thumbnailPhoto" />{{
-                      device.displayName
-                    }}
-                  </div>
-                </v-col>
-              </v-row>
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-list dense>
-                <v-list-item v-if="device.status == 'ONLINE'">
-                  <v-list-item-action>
-                    <v-icon color="green darken-1">mdi-wifi</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.essid }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle> SSID </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
+    <DevicesDataTable :wifi-devices="computedWifiDevices" paginate />
 
-                <v-list-item v-else>
-                  <v-list-item-action>
-                    <v-icon>mdi-wifi-off</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.essid }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Dispositivo off-line
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item>
-                  <v-list-item-action>
-                    <v-icon>mdi-access-point</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{
-                        device.accessPoint.name || device.accessPoint.hostname
-                      }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Access Point ({{ device.controller }})
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item v-if="device.accessPoint.local">
-                  <v-list-item-action>
-                    <v-icon>mdi-map-marker-radius</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.accessPoint.local }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Localização do AP
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item>
-                  <v-list-item-action>
-                    <v-icon>mdi-ip-network</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.ip }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Último endereço IP conhecido
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-action>
-                    <v-icon>mdi-expansion-card-variant</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.mac }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      {{ device.oui }}
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-action>
-                    <v-icon>mdi-eye</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.lastSeen | dateAndTime }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Visto pela última vez
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-action>
-                    <v-icon>mdi-check-decagram</v-icon>
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.firstSeen | dateAndTime }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      Visto pela primeira vez
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-action>
-                    <Avatar :src="device.thumbnailPhoto" size="24px" />
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ device.displayName }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                      {{ device.sAMAccountName }}
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </template>
-    </v-data-iterator>
     <v-alert type="info" outlined dismissible>
       São exibidos apenas os 100 primeiros resultados da pesquisa
     </v-alert>
@@ -231,12 +57,11 @@
 
 <script>
 import gql from 'graphql-tag'
-import Avatar from '../components/Avatar.vue'
-import ApIcon from '../components/ApIcon.vue'
+import DevicesDataTable from '../components/DevicesDataTable.vue'
 
 export default {
   name: 'WifiDevices',
-  components: { Avatar, ApIcon },
+  components: { DevicesDataTable },
   data: () => ({
     search: '',
     itemsPerPage: 10,
@@ -273,27 +98,28 @@ export default {
       query: gql`
         query wifiDevices($search: String) {
           wifiDevices(search: $search) {
-            user {
-              displayName
-              sAMAccountName
-              thumbnailPhoto
-            }
             accessPoint {
               name
               hostname
               local
             }
-            oui
-            mac
-            controller
+            id
             hostname
-            firstSeen
-            lastSeen
             essid
-            ip
+            mac
             uptime
-            apName
-            status
+            lastSeen
+            ip
+            signalStrength
+            frequency
+            protocol
+            speed
+            usage
+            user {
+              displayName
+              sAMAccountName
+              thumbnailPhoto
+            }
           }
         }
       `,