Add slots

web/src/views/AccessPoints.vue

@@ -1,6 +1,15 @@
 <template>
   <v-container class="home" fluid>
-    <v-text-field v-model="search" />
+    <v-text-field
+      v-model="search"
+      placeholder="Nome, hostname, ip, modelo e etc."
+      label="Filtrar"
+      clearable
+      prepend-icon="mdi-magnify"
+      outlined
+      dense
+    />
+
     <v-data-table
       :headers="headers"
       :items="accessPoints"
@@ -8,7 +17,32 @@
       :loading="!accessPoints"
       :search="search"
       class="elevation-1"
+      dense
     >
+      <template #[`item.name`]="{ item }">
+        {{ item.name || item.hostname }}
+      </template>
+
+      <template #[`item.local`]="{ item }">
+        {{ item.local || 'Não informado' }}
+      </template>
+
+      <template #[`item.clients`]="{ item }">
+        <div class="align-content-end">
+          {{ item.clients }}
+        </div>
+      </template>
+
+      <template #[`item.uptime`]="{ item }">
+        <span v-if="item.uptime">
+          {{ item.uptime | durationFromSeconds }}
+        </span>
+        <span v-else> Off-line </span>
+      </template>
+
+      <template #[`item.updatedAt`]="{ item }">
+        {{ item.updatedAt | conciseDate }}
+      </template>
     </v-data-table>
   </v-container>
 </template>
@@ -19,7 +53,7 @@ import gql from 'graphql-tag'
 export default {
   name: 'AccessPoints',
   data: () => ({
-    linesPerPage: 10,
+    linesPerPage: 30,
     search: '',
     headers: [
       { text: 'Nome', value: 'name' },
@@ -35,6 +69,11 @@ export default {
       { text: 'Observações', value: 'notes' }
     ]
   }),
+  methods: {
+    readableUptime(uptime) {
+      return Math.floor(uptime / 3600)
+    }
+  },
   apollo: {
     accessPoints: {
       fetchPolicy: 'cache-and-network',