Use new data
This commit is contained in:
parent
93a36995fe
commit
1364c63f8a
|
@ -95,6 +95,7 @@ export async function getOnlineWifiDevices() {
|
|||
|
||||
const restructuredOnlineDevices = onlineDevices.map(client => ({
|
||||
user: client.Name == 'unknown' ? null : client.Name,
|
||||
identity: client.Name == 'unknown' ? null : client.Name,
|
||||
oui: ouiFinder(client.macaddr),
|
||||
mac: client.macaddr,
|
||||
hostname: client.HN == 'unknown' ? undefined : client.HN,
|
||||
|
|
|
@ -179,6 +179,7 @@ export async function getOnlineWifiDevices() {
|
|||
|
||||
const restructuredOnlineDevices = onlineDevices[0].map(client => ({
|
||||
user: client['1x_identity'] || null,
|
||||
identity: client['1x_identity'] || null,
|
||||
oui: ouiFinder(client.mac),
|
||||
mac: client.mac,
|
||||
hostname: client.hostname,
|
||||
|
@ -193,7 +194,7 @@ export async function getOnlineWifiDevices() {
|
|||
signalStrength: client.signal,
|
||||
frequency: null,
|
||||
protocol: null,
|
||||
speed: client.tx_rate,
|
||||
speed: Math.floor(client.tx_rate / 1000),
|
||||
usage: +client.tx_bytes + +client.rx_bytes
|
||||
}))
|
||||
|
||||
|
|
|
@ -236,6 +236,11 @@ const typeDefs = gql`
|
|||
apName: String
|
||||
status: Status
|
||||
accessPoint: AccessPoint
|
||||
signalStrength: Int
|
||||
frequency: String
|
||||
protocol: String
|
||||
speed: Int
|
||||
usage: Int
|
||||
}
|
||||
|
||||
"A user that is on the Wi-Fi network reach"
|
||||
|
|
|
@ -8,6 +8,7 @@ import '@mdi/font/css/materialdesignicons.css'
|
|||
import './scss/style.scss'
|
||||
|
||||
import './plugins/date'
|
||||
import './plugins/format-bytes'
|
||||
|
||||
import { defaultApolloProvider } from './plugins/vue-apollo'
|
||||
|
||||
|
|
22
web/src/plugins/format-bytes.js
Normal file
22
web/src/plugins/format-bytes.js
Normal file
|
@ -0,0 +1,22 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
function bytes(bytes, decimals, kib, maxUnit) {
|
||||
console.log(bytes, decimals, kib, maxUnit)
|
||||
kib = kib || false
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
if (isNaN(parseFloat(bytes)) && !isFinite(bytes)) return ''
|
||||
const k = kib ? 1024 : 1000
|
||||
const dm =
|
||||
decimals != null && !isNaN(decimals) && decimals >= 0 ? decimals : 2
|
||||
const sizes = kib
|
||||
? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
|
||||
: ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB']
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
if (maxUnit != undefined) {
|
||||
const index = sizes.indexOf(maxUnit)
|
||||
if (index != -1) i = index
|
||||
}
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
Vue.filter('bytes', bytes)
|
|
@ -2,19 +2,27 @@
|
|||
<div>
|
||||
<v-dialog
|
||||
v-model="showDialog"
|
||||
:fullscreen="$vuetify.breakpoint.mdAndDown"
|
||||
fullscreen
|
||||
transition="dialog-bottom-transition"
|
||||
scrollable
|
||||
>
|
||||
<v-card v-if="!accessPoint">
|
||||
<v-skeleton-loader
|
||||
type="table-heading, list-item-two-line, image, table-tfoot"
|
||||
/>
|
||||
</v-card>
|
||||
|
||||
<v-card v-else :loading="!accessPoint">
|
||||
<v-card-title class="font-weight-regular">
|
||||
{{ accessPoint.name || accessPoint.hostname }}
|
||||
<small> ({{ accessPoint.ip }}) </small>
|
||||
<ApIcon class="mr-1" :controller="accessPoint.controller" />
|
||||
<div>
|
||||
<ApIcon class="mr-2" :controller="accessPoint.controller" />
|
||||
{{ accessPoint.name || accessPoint.hostname }}
|
||||
<small> ({{ accessPoint.ip }}) </small>
|
||||
<small v-if="accessPoint.local" class="font-weight-light">
|
||||
<v-divider />
|
||||
{{ accessPoint.local }}
|
||||
</small>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="filter"
|
||||
|
@ -22,12 +30,16 @@
|
|||
prepend-inner-icon="mdi-magnify"
|
||||
single-line
|
||||
hide-details
|
||||
style="max-width: 350px"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
|
||||
<v-btn icon @click="showDialog = false">
|
||||
<v-btn class="ml-1" icon @click="showDialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
sort-by="name"
|
||||
|
@ -35,7 +47,8 @@
|
|||
:headers="headers"
|
||||
:search="filter"
|
||||
dense
|
||||
:footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
>
|
||||
<template #[`item.user`]="{ item: { user } }">
|
||||
<span v-if="user">
|
||||
|
@ -48,8 +61,36 @@
|
|||
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||
{{ uptime | durationFromSeconds }}
|
||||
</template>
|
||||
|
||||
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||
<template v-if="signalStrength < 0">
|
||||
<v-icon :color="signalStrengthColor(signalStrength)">
|
||||
{{ signalStrengthIcon(signalStrength) }}
|
||||
</v-icon>
|
||||
{{ signalStrength }} dBm
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-icon>mdi-sine-wave</v-icon>
|
||||
Aguarde...
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #[`item.speed`]="{ item: { speed } }">
|
||||
{{ speed }} Mbps
|
||||
</template>
|
||||
|
||||
<template #[`item.usage`]="{ item: { usage } }">
|
||||
{{ usage | bytes }}
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
{{ accessPoint.wifiDevices.length }} clientes conectados
|
||||
<v-spacer />
|
||||
<v-btn color="primary" @click="showDialog = false"> Voltar </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
|
@ -72,7 +113,12 @@ export default {
|
|||
{ text: 'IP', value: 'ip' },
|
||||
{ text: 'ESSID', value: 'essid' },
|
||||
{ text: 'Uptime', value: 'uptime' },
|
||||
{ text: 'Usuário', value: 'user' }
|
||||
{ text: 'Usuário', value: 'user' },
|
||||
{ text: 'Sinal', value: 'signalStrength' },
|
||||
{ text: 'Frequência', value: 'frequency' },
|
||||
{ text: 'Protocolo', value: 'protocol' },
|
||||
{ text: 'Velocidade', value: 'speed' },
|
||||
{ text: 'Uso', value: 'usage' }
|
||||
]
|
||||
}),
|
||||
watch: {
|
||||
|
@ -82,6 +128,24 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
signalStrengthIcon(signalStrength) {
|
||||
if (signalStrength > -40) return 'mdi-network-strength-4'
|
||||
if (signalStrength > -65) return 'mdi-network-strength-3'
|
||||
if (signalStrength > -80) return 'mdi-network-strength-2'
|
||||
return 'mdi-network-strength-1'
|
||||
},
|
||||
signalStrengthColor(signalStrength) {
|
||||
if (signalStrength > -40) return 'green'
|
||||
else if (signalStrength > -50) return 'light-green'
|
||||
else if (signalStrength > -60) return 'lime'
|
||||
else if (signalStrength > -75) return 'amber'
|
||||
else if (signalStrength > -90) return 'orange'
|
||||
else if (signalStrength > -105) return 'deep-orange'
|
||||
else return 'red'
|
||||
}
|
||||
},
|
||||
|
||||
apollo: {
|
||||
accessPoint: {
|
||||
pollInterval: 10000,
|
||||
|
@ -109,6 +173,11 @@ export default {
|
|||
uptime
|
||||
lastSeen
|
||||
ip
|
||||
signalStrength
|
||||
frequency
|
||||
protocol
|
||||
speed
|
||||
usage
|
||||
user {
|
||||
displayName
|
||||
sAMAccountName
|
||||
|
|
|
@ -65,9 +65,10 @@
|
|||
:loading="!accessPoints"
|
||||
:search="search"
|
||||
calculate-widths
|
||||
class="elevation-1"
|
||||
class="elevation-2 mb-2"
|
||||
sort-by="name"
|
||||
:footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:group-by="groupBy ? 'campus' : null"
|
||||
>
|
||||
<template
|
||||
|
@ -183,9 +184,6 @@
|
|||
<small>{{ item.notes }}</small>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-alert class="mt-2" dismissible outlined type="success">
|
||||
As informações são atualizadas automaticamente</v-alert
|
||||
>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user