1839811/ifms-pti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak colors

Browse Source
This commit is contained in:
Douglas Barone 2022-03-29 10:56:57 -04:00
parent bce128dfa9
commit 637bc55a78
1 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/views/AccessPoints.vue
View File

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