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

UI improvements

Browse Source
This commit is contained in:
Douglas Barone 2022-03-29 07:04:24 -04:00
parent 38c42079ff
commit e07153b7cd
1 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@
:search="search" :search="search"
calculate-widths calculate-widths
class="elevation-1" class="elevation-1"
@click:row="viewInfo" :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
> >
<template #[`item.name`]="{ item }"> <template #[`item.name`]="{ item }">
{{ item.name || item.hostname }} {{ item.name || item.hostname }}
@ -69,10 +69,12 @@
<template #[`item.clients`]="{ item }"> <template #[`item.clients`]="{ item }">
<div class="align-content-end"> <div class="align-content-end">
{{ item.clients }} <v-chip outlined>
<v-icon :color="loadColor(item.clients)"> <v-icon left :color="loadColor(item.clients)">
{{ loadIcon(item.clients) }} {{ loadIcon(item.clients) }}
</v-icon> </v-icon>
{{ item.clients }}
</v-chip>
</div> </div>
</template> </template>
@ -101,19 +103,25 @@ import gql from 'graphql-tag'
export default { export default {
name: 'AccessPoints', name: 'AccessPoints',
data: () => ({ data: () => ({
linesPerPage: 15, linesPerPage: 150,
search: '', search: '',
allHeaders: [ allHeaders: [
{ text: 'Nome', value: 'name', active: true }, { text: 'Nome', value: 'name', active: true },
{ text: 'IP', value: 'ip', active: true }, { text: 'Hostname', value: 'hostname', active: false },
{ text: 'IP', value: 'ip', active: true, width: 80 },
{ text: 'MAC', value: 'mac', active: false },
{ text: 'Localização', value: 'local', active: true }, { text: 'Localização', value: 'local', active: true },
{
text: 'Clientes',
value: 'clients',
active: true,
width: 140,
align: 'center'
},
{ text: 'Uptime', value: 'uptime', active: true }, { text: 'Uptime', value: 'uptime', active: true },
{ text: 'Modelo', value: 'model', active: false }, { text: 'Modelo', value: 'model', active: false },
{ text: 'Clientes', value: 'clients', active: true },
{ text: 'Observações', value: 'notes', active: true },
{ text: 'Hostname', value: 'hostname', active: false },
{ text: 'MAC', value: 'mac', active: false },
{ text: 'Controladora', value: 'controller', active: false }, { text: 'Controladora', value: 'controller', active: false },
{ text: 'Observações', value: 'notes', active: true },
{ text: 'Última atualização', value: 'updatedAt', active: true } { text: 'Última atualização', value: 'updatedAt', active: true }
] ]
}), }),
@ -127,11 +135,8 @@ export default {
readableUptime(uptime) { readableUptime(uptime) {
return Math.floor(uptime / 3600) return Math.floor(uptime / 3600)
}, },
viewInfo(data) {
console.log(data)
},
load(connectedClients) { load(connectedClients) {
const MAX_LOAD = 50 const MAX_LOAD = 70
const load = Math.floor((connectedClients / MAX_LOAD) * 100) const load = Math.floor((connectedClients / MAX_LOAD) * 100)
return load < 100 ? load : 100 return load < 100 ? load : 100
@ -139,26 +144,22 @@ export default {
loadColor(clients) { loadColor(clients) {
const load = this.load(clients) const load = this.load(clients)
let r = 0 if (load < 20) return 'teal lighten-2'
let g = 0 else if (load < 30) return 'green'
let b = 10 else if (load < 40) return 'light-green'
else if (load < 50) return 'lime'
if (load < 50) { else if (load < 60) return 'yellow darken-2'
g = 255 else if (load < 70) return 'amber'
r = Math.round(5.1 * load) else if (load < 80) return 'orange'
} else { else if (load < 90) return 'deep-orange'
r = 255 else return 'red'
g = Math.round(510 - 5.1 * load)
}
let h = r * 0x10000 + g * 0x100 + b * 0x1
return '#' + ('000000' + h.toString(16)).slice(-6)
}, },
loadIcon(clients) { loadIcon(clients) {
const load = this.load(clients) const load = this.load(clients)
if (load < 20) return 'mdi-gauge-empty' if (load < 25) return 'mdi-gauge-empty'
else if (load < 50) return 'mdi-gauge-low' else if (load < 50) return 'mdi-gauge-low'
else if (load < 80) return 'mdi-gauge' else if (load < 75) return 'mdi-gauge'
else return 'mdi-gauge-full' else return 'mdi-gauge-full'
} }
}, },
@ -207,15 +208,10 @@ export default {
} }
} }
`, `,
updateQuery: ( updateQuery: (previousResult, { subscriptionData }) => {
previousResult, return {
{ accessPoints: subscriptionData.data.accessPointsUpdated
subscriptionData: {
data: { accessPointsUpdated }
}
} }
) => {
return accessPointsUpdated
} }
} }
} }