From a5ba94ad25a64b6180c5a0631a1813aec2002cfa Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 8 Feb 2023 08:12:22 -0400
Subject: [PATCH] Data fetching OK

---
 web/src/router/index.js              |  12 +++
 web/src/views/AccessPoints/index.vue |   9 ++
 web/src/views/AccessPoints/stats.vue | 155 +++++++++++++++++++++++++++
 3 files changed, 176 insertions(+)
 create mode 100644 web/src/views/AccessPoints/stats.vue

diff --git a/web/src/router/index.js b/web/src/router/index.js
index fa9a662..4422b27 100755
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -217,6 +217,18 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "wifi-stats" */ '../views/WifiStats.vue')
   },
+  {
+    path: '/access-points/stats',
+    name: 'access-points-stats',
+    meta: {
+      title: 'Status dos Access Points',
+      roles: ['superAdmin']
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "access-points-stats" */ '../views/AccessPoints/stats.vue'
+      )
+  },
 
   {
     path: '/access-points/:id/clients',
diff --git a/web/src/views/AccessPoints/index.vue b/web/src/views/AccessPoints/index.vue
index ff8da20..4787c4c 100644
--- a/web/src/views/AccessPoints/index.vue
+++ b/web/src/views/AccessPoints/index.vue
@@ -62,6 +62,15 @@
         hide-details
         :label="`Somente ${me.campusFull}`"
       />
+      <v-btn
+        class="ml-2"
+        text
+        color="secondary"
+        :to="{ name: 'access-points-stats' }"
+      >
+        <v-icon left>mdi-chart-line</v-icon>
+        Status
+      </v-btn>
     </v-toolbar>
 
     <v-data-table
diff --git a/web/src/views/AccessPoints/stats.vue b/web/src/views/AccessPoints/stats.vue
new file mode 100644
index 0000000..526272c
--- /dev/null
+++ b/web/src/views/AccessPoints/stats.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <v-toolbar dense flat>
+      <v-select
+        class="mr-2"
+        :items="subnetSelectItems"
+        v-model="subnet"
+        style="max-width: 250px"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-home-group"
+      />
+
+      <v-spacer />
+      <v-select
+        class="mr-2"
+        v-model="orderBy"
+        style="max-width: 250px"
+        :items="orderByOptions"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-sort"
+      />
+      <v-select
+        v-model="minutesIn"
+        style="max-width: 250px"
+        :items="minutesInItems"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-timer-outline"
+      />
+    </v-toolbar>
+
+    {{ accessPoints }}
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+export default {
+  name: 'AccessPointsStats',
+  data() {
+    return {
+      subnet: null,
+      minutesIn: 1440,
+      minutesInItems: [
+        {
+          text: 'Última hora',
+          value: 60
+        },
+        {
+          text: 'Últimas 3 horas',
+          value: 180
+        },
+        {
+          text: 'Últimas 6 horas',
+          value: 360
+        },
+        {
+          text: 'Últimas 12 horas',
+          value: 720
+        },
+        {
+          text: 'Últimas 24 horas',
+          value: 1440
+        },
+        {
+          text: 'Últimos 7 dias',
+          value: 10080
+        },
+        {
+          text: 'Últimos 30 dias',
+          value: 43200
+        }
+      ],
+      orderByOptions: [
+        'Alfabética',
+        'Clientes atualmente',
+        'Pico de clientes',
+        'Menor quantidade de clientes',
+        'Média de clientes'
+      ],
+      orderBy: 'Pico de clientes'
+    }
+  },
+  computed: {
+    subnetSelectItems() {
+      return this.subnets?.map(network => {
+        return {
+          text: network.name,
+          value: network.shortName
+        }
+      })
+    }
+  },
+
+  apollo: {
+    me: {
+      query: gql`
+        {
+          me {
+            campus
+          }
+        }
+      `,
+      result({ data }) {
+        this.subnet = data?.me.campus
+      }
+    },
+    subnets: {
+      query: gql`
+        {
+          subnets {
+            shortName
+            name
+            cidr
+          }
+        }
+      `
+    },
+    accessPoints: {
+      skip() {
+        return !this.subnet
+      },
+      query: gql`
+        query accessPoints($networkShortName: String!, $minutesIn: Int!) {
+          accessPoints(networkShortName: $networkShortName) {
+            id
+            mac
+            subnetInfo {
+              shortName
+            }
+            stats(minutesIn: $minutesIn) {
+              timestamp
+              id
+              clients
+              avgUsage
+              sumUsage
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          networkShortName: this.subnet,
+          minutesIn: this.minutesIn
+        }
+      }
+    }
+  }
+}
+</script>