From d648178f8960d1f3bbb28254679fefffffba6b19 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 2 May 2022 15:41:46 -0400
Subject: [PATCH] Added WifiDevicesTable

---
 web/src/components/WifiDevicesTable.vue | 102 ++++++++++++++++++
 web/src/views/WifiUsers.vue             | 135 +-----------------------
 2 files changed, 107 insertions(+), 130 deletions(-)
 create mode 100644 web/src/components/WifiDevicesTable.vue

diff --git a/web/src/components/WifiDevicesTable.vue b/web/src/components/WifiDevicesTable.vue
new file mode 100644
index 0000000..ee3b89d
--- /dev/null
+++ b/web/src/components/WifiDevicesTable.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <v-text-field
+      v-model="search"
+      prepend-icon="mdi-magnify"
+      placeholder="Pesquisar"
+      clearable
+    />
+    <v-data-table
+      :items="wifiDevices"
+      :headers="headers"
+      :search="search"
+      calculate-widths
+    >
+      <template #[`item.status`]="{ item }">
+        <v-chip v-if="item.status == 'ONLINE'" color="green" dark small>
+          Online
+        </v-chip>
+        <v-chip v-else color="grey" small dark>Offline</v-chip>
+      </template>
+      <template #[`item.ip`]="{ item }">
+        <code> {{ item.ip }}</code>
+      </template>
+      <template #[`item.mac`]="{ item }">
+        <code> {{ item.mac }}</code>
+      </template>
+      <template #[`item.firstSeen`]="{ item }">
+        {{ item.firstSeen | shortDate }}
+      </template>
+      <template #[`item.lastSeen`]="{ item }">
+        {{ item.lastSeen | shortDate }}
+      </template>
+      <template #[`item.apName`]="{ item }">
+        <router-link
+          class="text-decoration-none"
+          :to="{
+            name: 'access-point-clients',
+            params: { id: item.accessPoint.id }
+          }"
+        >
+          {{ item.apName }}
+        </router-link>
+      </template>
+      <template #[`item.uptime`]="{ item }">
+        <span v-if="item.uptime > 0">
+          <small>
+            {{ item.uptime | durationFromSeconds }}
+          </small>
+        </span>
+        <span v-else><small> Off-line </small> </span>
+      </template>
+      <template #[`item.controller`]="{ item }">
+        <ApIcon :controller="item.controller" />
+      </template>
+      <template #[`item.local`]="{ item }">
+        {{ item.accessPoint.local }}
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import ApIcon from '@/components/ApIcon.vue'
+
+export default {
+  components: { ApIcon },
+  props: {
+    wifiDevices: {
+      type: Array,
+      required: true
+    }
+  },
+  data: () => ({
+    search: '',
+    headers: [
+      { text: 'Hostname', value: 'hostname' },
+      { text: 'IP', value: 'ip' },
+      { text: 'MAC', value: 'mac' },
+      { text: 'Status', value: 'status' },
+      { text: 'ESSID', value: 'essid' },
+      { text: 'Controladora', value: 'controller' },
+      { 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: 'Local', value: 'local' }
+    ]
+  }),
+  computed: {
+    items() {
+      return this.wifiDevices.map(device => ({
+        ...device.accessPoint,
+        ...device,
+        accessPointId: device.accessPoint.id
+      }))
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/web/src/views/WifiUsers.vue b/web/src/views/WifiUsers.vue
index 5d123b2..5b7fa31 100644
--- a/web/src/views/WifiUsers.vue
+++ b/web/src/views/WifiUsers.vue
@@ -91,134 +91,7 @@
             </v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-expansion-panels accordion>
-                <v-expansion-panel
-                  v-for="device in user.wifiDevices"
-                  :key="device.mac"
-                >
-                  <v-expansion-panel-header>
-                    <div>
-                      <v-icon
-                        v-if="device.status == 'ONLINE'"
-                        left
-                        color="green"
-                      >
-                        mdi-cellphone-wireless
-                      </v-icon>
-                      <v-icon v-else left> mdi-cellphone </v-icon>
-                      {{ device.hostname || device.mac }} {{ device.oui }}
-                    </div>
-                  </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>
-
-                      <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.apName }}
-                          </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 && 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></v-expansion-panel-content
-                  >
-                </v-expansion-panel>
+                <wifi-devices-table :wifi-devices="user.wifiDevices" />
               </v-expansion-panels>
             </v-expansion-panel-content>
           </v-expansion-panel>
@@ -233,10 +106,10 @@
 <script>
 import gql from 'graphql-tag'
 import Avatar from '../components/Avatar.vue'
+import WifiDevicesTable from '../components/WifiDevicesTable.vue'
 
 export default {
-  components: { Avatar },
-
+  components: { Avatar, WifiDevicesTable },
   data: () => ({
     search: ''
   }),
@@ -279,7 +152,9 @@ export default {
               apName
               essid
               ip
+              uptime
               accessPoint {
+                id
                 name
                 hostname
                 local