Tweak colors

web/src/views/AccessPoints.vue

@@ -12,19 +12,20 @@
           </v-btn>
         </template>
         <v-card>
-          <v-list>
+          <v-list flat>
             <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-divider />
           <v-card-actions>
             <v-btn
               text
+              color="primary"
               @click="
                 allHeaders = allHeaders.map(header => ({
                   ...header,
@@ -35,7 +36,7 @@
               <v-icon left>mdi-check-all</v-icon>
               Todos
             </v-btn>
-            <v-btn text @click="resetDefaultHeaders">
+            <v-btn color="secondary" text @click="resetDefaultHeaders">
               <v-icon left>mdi-check-all</v-icon>
               Padrões
             </v-btn>
@@ -54,7 +55,7 @@
 
     <v-data-table
       :headers="headers"
-      :items="accessPoints"
+      :items="computedAccessPoints"
       :items-per-page="linesPerPage"
       :loading="!accessPoints"
       :search="search"
@@ -62,21 +63,23 @@
       class="elevation-1"
       :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
     >
-      <template #[`item.name`]="{ item }">
-        {{ item.name || item.hostname }}
-      </template>
-
       <template #[`item.local`]="{ item }">
         {{ item.local || '-' }}
       </template>
 
       <template #[`item.clients`]="{ item }">
         <div class="align-content-end">
-          <v-chip outlined>
+          <v-chip
+            class="client-chip"
+            :color="loadColor(item.clients) + ' lighten-5'"
+            pill
+          >
             <v-icon left :color="loadColor(item.clients)">
               {{ loadIcon(item.clients) }}
             </v-icon>
+            <span class="text--black">
               {{ item.clients }}
+            </span>
           </v-chip>
         </div>
       </template>
@@ -97,15 +100,6 @@
       <template #[`item.controller`]="{ item }">
         <ApIcon :controller="item.controller" />
       </template>
-
-      <template #[`item.actions`]>
-        <v-btn icon small>
-          <v-icon small>mdi-pencil</v-icon>
-        </v-btn>
-        <v-btn icon small>
-          <v-icon small>mdi-eye</v-icon>
-        </v-btn>
-      </template>
     </v-data-table>
     <v-alert class="mt-2" dismissible outlined type="success">
       As informações são atualizadas automaticamente</v-alert
@@ -131,7 +125,7 @@ export default {
       'clients',
       'uptime',
       'updatedAt',
-      'actions'
+      'notes'
     ],
     allHeaders: [
       { text: 'Nome', value: 'name' },
@@ -142,7 +136,6 @@ export default {
       {
         text: 'Clientes',
         value: 'clients',
-
         width: 140,
         align: 'center'
       },
@@ -153,13 +146,7 @@ export default {
         value: 'controller'
       },
       { text: 'Observações', value: 'notes' },
-      { text: 'Última atualização', value: 'updatedAt' },
-      {
-        text: 'Ações',
-        value: 'actions',
-        width: 120,
-        align: 'center'
-      }
+      { text: 'Última atualização', value: 'updatedAt', width: 160 }
     ]
   }),
   mounted() {
@@ -168,6 +155,12 @@ export default {
   computed: {
     headers() {
       return this.allHeaders.filter(header => header.active)
+    },
+    computedAccessPoints() {
+      return this.accessPoints?.map(accessPoint => ({
+        ...accessPoint,
+        name: accessPoint.name || accessPoint.hostname
+      }))
     }
   },
   methods: {
@@ -181,11 +174,10 @@ export default {
     },
     loadColor(clients) {
       const load = this.load(clients)
-      if (load < 20) return 'teal lighten-2'
-      else if (load < 30) return 'green'
+      if (load < 10) return 'teal'
+      else if (load < 25) return 'green'
       else if (load < 40) return 'light-green'
       else if (load < 50) return 'lime'
-      else if (load < 60) return 'yellow darken-2'
       else if (load < 70) return 'amber'
       else if (load < 80) return 'orange'
       else if (load < 90) return 'deep-orange'
@@ -260,4 +252,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.client-chip {
+  width: 75px;
+}
+</style>