Added SubnetInfo

server/src/resolvers/AccessPoint.js

@@ -1,4 +1,5 @@
 import prisma from "../prisma";
+import { getSubnetInfo } from "../utils/subnetInfo";
 
 export const AccessPoint = {
   updatedAt: parent => parent.updatedAt?.toISOString(),
@@ -9,5 +10,7 @@ export const AccessPoint = {
         id: parent.id
       }
     }
-  })
+  }),
+  subnetInfo: parent => getSubnetInfo(parent.ip)
+
 }

server/src/typeDefs.js

@@ -307,12 +307,27 @@ const typeDefs = gql`
     model: String
     ip: String
     clients: Int
+    subnetInfo: SubnetInfo
 
     createdAt: String
     updatedAt: String
     wifiDevices: [WifiDevice]
   }
 
+  type SubnetInfo {
+    shortName: String!
+    name: String!
+    cidr: String!
+    networkAddress: String!     
+    firstAddress: String! 
+    lastAddress: String! 
+    broadcastAddress: String! 
+    subnetMask: String!
+    subnetMaskLength: String! 
+    numHosts: String! 
+    length: String! 
+  }
+
   input LoginInput {
     username: String!
     password: String!

server/src/utils/subnetInfo.js

@@ -0,0 +1,104 @@
+import ip from 'ip'
+
+const subNetsInfo = [
+  {
+    shortName: 'RT',
+    name: 'Reitoria',
+    cidr: '10.0.0.0/16',
+  },
+  {
+    shortName: 'RT',
+    name: 'Reitoria 2',
+    cidr: '10.1.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.32.4' }
+    ]
+  },
+  {
+    shortName: 'AQ',
+    name: 'Aquidauana',
+    cidr: '10.2.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.32.253' }
+    ]
+  },
+  {
+    shortName: 'CG',
+    name: 'Campo Grande',
+    cidr: '10.3.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.32.120' }
+    ]
+  },
+  {
+    shortName: 'CB',
+    name: 'Corumbá',
+    cidr: '10.4.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.37.2' }
+    ]
+  },
+  {
+    shortName: 'CX',
+    name: 'Coxim',
+    cidr: '10.5.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.36.16' }
+    ],
+  },
+  {
+    shortName: 'NA',
+    name: 'Nova Andradina',
+    cidr: '10.6.0.0/16',
+    addresses: []
+  },
+  {
+    shortName: 'PP',
+    name: 'Ponta Porã',
+    cidr: '10.7.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.34.254' }
+    ]
+  },
+  {
+    shortName: 'TL',
+    name: 'Três Lagoas',
+    cidr: '10.8.0.0/16',
+    addresses: [
+      { name: 'RNP', ip: '200.19.35.2' }
+    ]
+  },
+  {
+    shortName: 'JD',
+    name: 'Jardim',
+    cidr: '10.9.0.0/16',
+    addresses: []
+  },
+  {
+    shortName: 'NV',
+    name: 'Naviraí',
+    cidr: '10.10.0.0/16',
+    addresses: []
+
+  },
+  {
+    shortName: 'DR',
+    name: 'Dourados',
+    cidr: '10.11.0.0/16'
+    ,
+    addresses: []
+  }
+]
+
+export const subNets = subNetsInfo.map(subNetInfo => ({
+  ...subNetInfo,
+  ...ip.cidrSubnet(subNetInfo.cidr)
+}))
+
+export function getSubnetInfo(ip) {
+  const subnet = subNets.find(subnet => subnet.contains(ip))
+
+
+  return subnet
+}
+

web/src/views/AccessPoints/index.vue

@@ -51,6 +51,8 @@
               color="secondary"
               :label="header.text"
             />
+            <v-divider />
+            <v-switch v-model="groupBy" label="Agrupar por campus" />
           </v-card-text>
         </v-card>
       </v-menu>
@@ -66,7 +68,18 @@
       class="elevation-1"
       sort-by="ip"
       :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
+      :group-by="groupBy ? 'campus' : null"
     >
+      <template #[`group.header`]="{ group, toggle, headers, isOpen }">
+        <td :colspan="headers.length">
+          <v-btn @click="toggle()" icon>
+            <v-icon v-if="isOpen">mdi-chevron-down</v-icon>
+            <v-icon v-else>mdi-chevron-up</v-icon>
+          </v-btn>
+          {{ group }}
+        </td>
+      </template>
+
       <template #[`item.name`]="{ item }">
         <v-hover v-slot="{ hover }">
           <span>
@@ -94,6 +107,20 @@
         </v-hover>
       </template>
 
+      <template #[`item.ip`]="{ item }">
+        <code> {{ item.ip }} </code>
+      </template>
+
+      <template #[`item.mac`]="{ item }">
+        <code>
+          {{ item.mac }}
+        </code>
+      </template>
+
+      <template #[`item.campus`]="{ item }">
+        {{ item.subnetInfo.name }}
+      </template>
+
       <template #[`item.local`]="{ item }">
         {{ item.local || '-' }}
       </template>
@@ -156,12 +183,23 @@ export default {
   data: () => ({
     linesPerPage: 150,
     search: '',
-    defaultHeaders: ['name', 'ip', 'local', 'clients', 'uptime', 'notes'],
+    groupBy: false,
+    defaultHeaders: [
+      'name',
+      'ip',
+      'campus',
+      'local',
+      'clients',
+      'uptime',
+      'notes'
+    ],
     allHeaders: [
       { text: 'Nome', value: 'name' },
       { text: 'Hostname', value: 'hostname' },
       { text: 'IP', value: 'ip', width: 80 },
       { text: 'MAC', value: 'mac' },
+      { text: 'Campus', value: 'campus', group: true },
+
       { text: 'Localização', value: 'local' },
       {
         text: 'Clientes',
@@ -187,6 +225,7 @@ export default {
     computedAccessPoints() {
       return this.accessPoints?.map(accessPoint => ({
         ...accessPoint,
+        campus: accessPoint.subnetInfo.name,
         name: accessPoint.name || accessPoint.hostname
       }))
     }
@@ -228,6 +267,7 @@ export default {
       else return 'mdi-gauge-full'
     },
     resetDefaultHeaders() {
+      this.groupBy = false
       this.allHeaders = this.allHeaders.map(header => ({
         ...header,
         active: this.defaultHeaders.includes(header.value)
@@ -254,6 +294,11 @@ export default {
 
             createdAt
             updatedAt
+
+            subnetInfo {
+              shortName
+              name
+            }
           }
         }
       `,
@@ -275,6 +320,10 @@ export default {
 
               createdAt
               updatedAt
+              subnetInfo {
+                shortName
+                name
+              }
             }
           }
         `,