Tweak colors
This commit is contained in:
parent
bce128dfa9
commit
637bc55a78
|
@ -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>
|
||||
{{ item.clients }}
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user