Added subscriptions

web/src/views/AccessPoints.vue

@@ -1,14 +1,53 @@
 <template>
-  <v-container class="home" fluid>
-    <v-text-field
-      v-model="search"
-      placeholder="Nome, hostname, ip, modelo e etc."
-      label="Filtrar"
-      clearable
-      prepend-icon="mdi-magnify"
-      outlined
-      dense
-    />
+  <v-container class="access-points" fluid>
+    <v-toolbar class="mb-2" flat outlined>
+      <v-menu
+        offset-y
+        :close-on-content-click="false"
+        transition="slide-y-transition"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn icon v-bind="attrs" v-on="on">
+            <v-icon>mdi-tune</v-icon>
+          </v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item
+              v-for="header in allHeaders"
+              :key="header.value"
+              dense
+              @click.self="header.active = !header.active"
+            >
+              <v-checkbox v-model="header.active" :label="header.text" />
+            </v-list-item>
+          </v-list>
+          <v-card-actions>
+            <v-btn
+              text
+              block
+              @click="
+                allHeaders = allHeaders.map(header => ({
+                  ...header,
+                  active: true
+                }))
+              "
+            >
+              <v-icon left>mdi-check-all</v-icon>
+              Todos
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+
+      <v-text-field
+        v-model="search"
+        placeholder="Nome, hostname, ip, modelo e etc."
+        clearable
+        prepend-inner-icon="mdi-magnify"
+        hide-details
+      />
+    </v-toolbar>
 
     <v-data-table
       :headers="headers"
@@ -16,20 +55,24 @@
       :items-per-page="linesPerPage"
       :loading="!accessPoints"
       :search="search"
+      calculate-widths
       class="elevation-1"
-      dense
+      @click:row="viewInfo"
     >
       <template #[`item.name`]="{ item }">
         {{ item.name || item.hostname }}
       </template>
 
       <template #[`item.local`]="{ item }">
-        {{ item.local || 'Não informado' }}
+        {{ item.local || '-' }}
       </template>
 
       <template #[`item.clients`]="{ item }">
         <div class="align-content-end">
           {{ item.clients }}
+          <v-icon :color="loadColor(item.clients)">
+            {{ loadIcon(item.clients) }}
+          </v-icon>
         </div>
       </template>
 
@@ -41,9 +84,14 @@
       </template>
 
       <template #[`item.updatedAt`]="{ item }">
-        {{ item.updatedAt | conciseDate }}
+        <small>
+          {{ item.updatedAt | conciseDate }}
+        </small>
       </template>
     </v-data-table>
+    <v-alert class="mt-2" dismissible outlined type="success">
+      As informações são atualizadas automaticamente</v-alert
+    >
   </v-container>
 </template>
 
@@ -53,30 +101,71 @@ import gql from 'graphql-tag'
 export default {
   name: 'AccessPoints',
   data: () => ({
-    linesPerPage: 30,
+    linesPerPage: 15,
     search: '',
-    headers: [
-      { text: 'Nome', value: 'name' },
-      { text: 'Hostname', value: 'hostname' },
-      { text: 'IP', value: 'ip' },
-      { text: 'MAC', value: 'mac' },
-      { text: 'Localização', value: 'local' },
-      { text: 'Uptime', value: 'uptime' },
-      { text: 'Controladora', value: 'controller' },
-      { text: 'Modelo', value: 'model' },
-      { text: 'Clientes', value: 'clients' },
-      { text: 'Última atualização', value: 'updatedAt' },
-      { text: 'Observações', value: 'notes' }
+    allHeaders: [
+      { text: 'Nome', value: 'name', active: true },
+      { text: 'IP', value: 'ip', active: true },
+      { text: 'Localização', value: 'local', active: true },
+      { text: 'Uptime', value: 'uptime', active: true },
+      { text: 'Modelo', value: 'model', active: false },
+      { text: 'Clientes', value: 'clients', active: true },
+      { text: 'Observações', value: 'notes', active: true },
+      { text: 'Hostname', value: 'hostname', active: false },
+      { text: 'MAC', value: 'mac', active: false },
+      { text: 'Controladora', value: 'controller', active: false },
+      { text: 'Última atualização', value: 'updatedAt', active: true }
     ]
   }),
+
+  computed: {
+    headers() {
+      return this.allHeaders.filter(header => header.active)
+    }
+  },
   methods: {
     readableUptime(uptime) {
       return Math.floor(uptime / 3600)
+    },
+    viewInfo(data) {
+      console.log(data)
+    },
+    load(connectedClients) {
+      const MAX_LOAD = 50
+      const load = Math.floor((connectedClients / MAX_LOAD) * 100)
+
+      return load < 100 ? load : 100
+    },
+    loadColor(clients) {
+      const load = this.load(clients)
+
+      let r = 0
+      let g = 0
+      let b = 10
+
+      if (load < 50) {
+        g = 255
+        r = Math.round(5.1 * load)
+      } else {
+        r = 255
+        g = Math.round(510 - 5.1 * load)
+      }
+      let h = r * 0x10000 + g * 0x100 + b * 0x1
+      return '#' + ('000000' + h.toString(16)).slice(-6)
+    },
+    loadIcon(clients) {
+      const load = this.load(clients)
+
+      if (load < 20) return 'mdi-gauge-empty'
+      else if (load < 50) return 'mdi-gauge-low'
+      else if (load < 80) return 'mdi-gauge'
+      else return 'mdi-gauge-full'
     }
   },
   apollo: {
     accessPoints: {
       fetchPolicy: 'cache-and-network',
+
       query: gql`
         query accessPoints {
           accessPoints {
@@ -96,7 +185,39 @@ export default {
             updatedAt
           }
         }
-      `
+      `,
+      subscribeToMore: {
+        document: gql`
+          subscription {
+            accessPointsUpdated {
+              id
+              mac
+              hostname
+              local
+              notes
+              uptime
+              name
+              controller
+              model
+              ip
+              clients
+
+              createdAt
+              updatedAt
+            }
+          }
+        `,
+        updateQuery: (
+          previousResult,
+          {
+            subscriptionData: {
+              data: { accessPointsUpdated }
+            }
+          }
+        ) => {
+          return accessPointsUpdated
+        }
+      }
     }
   }
 }