Reorganize components
This commit is contained in:
parent
d7cf330761
commit
91bb30cd54
|
@ -17,6 +17,14 @@
|
||||||
<span v-else><Avatar left size="24" /> Não logado</span>
|
<span v-else><Avatar left size="24" /> Não logado</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.mac`]="{ item: { mac } }">
|
||||||
|
<code @click="setClipboard(mac)">{{ mac }}</code>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.ip`]="{ item: { ip } }">
|
||||||
|
<code @click="setClipboard(ip)">{{ ip }}</code>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template #[`item.uptime`]="{ item: { uptime } }">
|
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||||
<small> {{ uptime | durationFromSeconds }}</small>
|
<small> {{ uptime | durationFromSeconds }}</small>
|
||||||
</template>
|
</template>
|
||||||
|
@ -46,8 +54,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Avatar from './Avatar.vue'
|
import Avatar from '../Avatar.vue'
|
||||||
import SignalStrength from './signalStrength.vue'
|
import SignalStrength from '../signalStrength.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Avatar, SignalStrength },
|
components: { Avatar, SignalStrength },
|
||||||
|
@ -102,6 +110,11 @@ export default {
|
||||||
this.headers.includes(value)
|
this.headers.includes(value)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setClipboard(text) {
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -7,7 +7,7 @@
|
||||||
clearable
|
clearable
|
||||||
/>
|
/>
|
||||||
<v-data-table
|
<v-data-table
|
||||||
:items="wifiDevices"
|
:items="items"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
:search="search"
|
:search="search"
|
||||||
calculate-widths
|
calculate-widths
|
||||||
|
@ -18,17 +18,30 @@
|
||||||
</v-chip>
|
</v-chip>
|
||||||
<v-chip v-else color="grey" dark x-small>Offline</v-chip>
|
<v-chip v-else color="grey" dark x-small>Offline</v-chip>
|
||||||
</template>
|
</template>
|
||||||
<template #[`item.ip`]="{ item }">
|
|
||||||
<code> {{ item.ip }}</code>
|
<template #[`item.ip`]="{ item: { ip } }">
|
||||||
|
<code> {{ ip }}</code>
|
||||||
</template>
|
</template>
|
||||||
<template #[`item.mac`]="{ item }">
|
<template #[`item.mac`]="{ item: { mac } }">
|
||||||
<code> {{ item.mac }}</code>
|
<code> {{ mac }}</code>
|
||||||
|
</template>
|
||||||
|
<template #[`item.essid`]="{ item: { essid } }">
|
||||||
|
<small>{{ essid }}</small>
|
||||||
|
</template>
|
||||||
|
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||||
|
<SignalStrength :value="signalStrength" no-signal-text="" />
|
||||||
|
</template>
|
||||||
|
<template #[`item.usage`]="{ item: { usage } }">
|
||||||
|
{{ usage | bytes }}
|
||||||
|
</template>
|
||||||
|
<template #[`item.oui`]="{ item: { oui } }">
|
||||||
|
<small> {{ oui }}</small>
|
||||||
</template>
|
</template>
|
||||||
<template #[`item.firstSeen`]="{ item }">
|
<template #[`item.firstSeen`]="{ item }">
|
||||||
{{ item.firstSeen | shortDate }}
|
<small> {{ item.firstSeen | shortDate }} </small>
|
||||||
</template>
|
</template>
|
||||||
<template #[`item.lastSeen`]="{ item }">
|
<template #[`item.lastSeen`]="{ item }">
|
||||||
{{ item.lastSeen | shortDate }}
|
<small>{{ item.lastSeen | shortDate }} </small>
|
||||||
</template>
|
</template>
|
||||||
<template #[`item.apName`]="{ item }">
|
<template #[`item.apName`]="{ item }">
|
||||||
<router-link
|
<router-link
|
||||||
|
@ -57,7 +70,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SignalStrength from '../signalStrength.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { SignalStrength },
|
||||||
props: {
|
props: {
|
||||||
wifiDevices: {
|
wifiDevices: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -72,19 +88,20 @@ export default {
|
||||||
{ text: 'MAC', value: 'mac' },
|
{ text: 'MAC', value: 'mac' },
|
||||||
{ text: 'Status', value: 'status' },
|
{ text: 'Status', value: 'status' },
|
||||||
{ text: 'ESSID', value: 'essid' },
|
{ text: 'ESSID', value: 'essid' },
|
||||||
|
{ text: 'Sinal', value: 'signalStrength' },
|
||||||
{ text: 'Uptime', value: 'uptime' },
|
{ text: 'Uptime', value: 'uptime' },
|
||||||
{ text: 'Marca', value: 'oui' },
|
{ text: 'Marca', value: 'oui' },
|
||||||
{ text: 'Primeira aparição', value: 'firstSeen' },
|
{ text: 'Primeira aparição', value: 'firstSeen' },
|
||||||
{ text: 'Última aparição', value: 'lastSeen' },
|
{ text: 'Última aparição', value: 'lastSeen' },
|
||||||
{ text: 'AccessPoint', value: 'apName' }
|
{ text: 'AccessPoint', value: 'apName' },
|
||||||
|
{ text: 'Uso', value: 'usage' }
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
items() {
|
items() {
|
||||||
return this.wifiDevices.map(device => ({
|
return this.wifiDevices.map(device => ({
|
||||||
...device.accessPoint,
|
|
||||||
...device,
|
...device,
|
||||||
accessPointId: device.accessPoint?.id
|
signalStrength: device.status == 'ONLINE' ? device.signalStrength : 0
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
133
web/src/components/DataTables/WifiDevicesDataTable.vue
Normal file
133
web/src/components/DataTables/WifiDevicesDataTable.vue
Normal file
|
@ -0,0 +1,133 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-data-table
|
||||||
|
sort-by="signalStrength"
|
||||||
|
:items="wifiDevices"
|
||||||
|
:headers="headers"
|
||||||
|
:search="filter"
|
||||||
|
:hide-default-footer="!paginate"
|
||||||
|
:disable-pagination="!paginate"
|
||||||
|
no-data-text="Nenhum cliente conectado à este AP"
|
||||||
|
>
|
||||||
|
<template #[`item.user`]="{ item: { user } }">
|
||||||
|
<div v-if="user" class="d-flex">
|
||||||
|
<Avatar
|
||||||
|
class="flex-column center-block"
|
||||||
|
left
|
||||||
|
:src="user.thumbnailPhoto"
|
||||||
|
size="28"
|
||||||
|
/>
|
||||||
|
<small class="d-block text-no-wrap">
|
||||||
|
{{ user.displayName }} <br />
|
||||||
|
{{ user.sAMAccountName }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<span v-else><Avatar left size="28" /> Não logado</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.mac`]="{ item: { mac } }">
|
||||||
|
<code @click="setClipboard(mac)">{{ mac }}</code>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.essid`]="{ item: { essid } }">
|
||||||
|
<small class="text-no-wrap">{{ essid }}</small>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.ip`]="{ item: { ip } }">
|
||||||
|
<code @click="setClipboard(ip)">{{ ip }}</code>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||||
|
<small class="text-no-wrap"> {{ uptime | durationFromSeconds }}</small>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||||
|
<SignalStrength :value="signalStrength" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.speed`]="{ item: { speed } }">
|
||||||
|
{{ speed }} <small>Mbps</small>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.usage`]="{ item: { usage } }">
|
||||||
|
<span class="text-no-wrap"> {{ usage | bytes }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.protocol`]="{ item: { protocol } }">
|
||||||
|
<code v-if="protocol">{{ protocol }}</code>
|
||||||
|
<span v-else>-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.frequency`]="{ item: { frequency } }">
|
||||||
|
{{ frequency || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #[`item.apName`]="{ item }">
|
||||||
|
<router-link
|
||||||
|
class="text-decoration-none"
|
||||||
|
:to="{
|
||||||
|
name: 'access-point-clients',
|
||||||
|
params: { id: item.accessPoint.id }
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<small class="text-no-wrap">
|
||||||
|
{{ item.accessPoint.name || item.accessPoint.hostname }}
|
||||||
|
</small>
|
||||||
|
</router-link>
|
||||||
|
<span v-if="item.accessPoint.local">
|
||||||
|
({{ item.accessPoint.local }})
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Avatar from '../Avatar.vue'
|
||||||
|
import SignalStrength from '../signalStrength.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Avatar, SignalStrength },
|
||||||
|
props: {
|
||||||
|
wifiDevices: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
paginate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
availableHeaders: [
|
||||||
|
{ text: 'Hostname', value: 'hostname' },
|
||||||
|
{ text: 'MAC', value: 'mac' },
|
||||||
|
{ text: 'IP', value: 'ip' },
|
||||||
|
{ text: 'ESSID', value: 'essid' },
|
||||||
|
{ text: 'Uptime', value: 'uptime' },
|
||||||
|
{ text: 'Usuário', value: 'user' },
|
||||||
|
{ text: 'Sinal', value: 'signalStrength' },
|
||||||
|
{ text: 'Frequência', value: 'frequency', align: 'end' },
|
||||||
|
{ text: 'Protocolo', value: 'protocol' },
|
||||||
|
{ text: 'Velocidade', value: 'speed', align: 'end' },
|
||||||
|
{ text: 'Uso', value: 'usage', align: 'end' },
|
||||||
|
{ text: 'Access Point', value: 'apName' }
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
headers() {
|
||||||
|
return this.availableHeaders
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setClipboard(text) {
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<v-tooltip left :color="signalStrengthColor(value)" open-delay="400">
|
<v-tooltip
|
||||||
|
left
|
||||||
|
:color="signalStrengthColor(value) + ' darken-4'"
|
||||||
|
open-delay="400"
|
||||||
|
>
|
||||||
<template #activator="{ on, attrs }">
|
<template #activator="{ on, attrs }">
|
||||||
<template v-if="value < 0">
|
<template v-if="value < 0">
|
||||||
<v-chip
|
<v-chip
|
||||||
|
@ -18,7 +22,7 @@
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<v-chip small color="grey lighten-4">
|
<v-chip small color="grey lighten-4">
|
||||||
<v-icon small left color="grey">mdi-signal-off</v-icon>
|
<v-icon small left color="grey">mdi-signal-off</v-icon>
|
||||||
<small>Aguarde...</small>
|
<small>{{ noSignalText }}</small>
|
||||||
</v-chip>
|
</v-chip>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
@ -32,6 +36,10 @@ export default {
|
||||||
value: {
|
value: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: -1
|
default: -1
|
||||||
|
},
|
||||||
|
noSignalText: {
|
||||||
|
type: String,
|
||||||
|
default: 'Aguarde...'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<ClientsDataTable
|
<AccessPointClientsDataTable
|
||||||
:wifi-devices="accessPoint.wifiDevices"
|
:wifi-devices="accessPoint.wifiDevices"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
/>
|
/>
|
||||||
|
@ -64,11 +64,11 @@
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
|
|
||||||
import ApIcon from '../../components/ApIcon.vue'
|
import ApIcon from '../../components/ApIcon.vue'
|
||||||
import ClientsDataTable from '../../components/ClientsDataTable.vue'
|
import AccessPointClientsDataTable from '../../components/DataTables/AccessPointClientsDataTable.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SingleAccessPoint',
|
name: 'SingleAccessPoint',
|
||||||
components: { ApIcon, ClientsDataTable },
|
components: { ApIcon, AccessPointClientsDataTable },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
showDialog: true,
|
showDialog: true,
|
||||||
filter: ''
|
filter: ''
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
|
|
||||||
<v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
|
<v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
|
||||||
|
|
||||||
<ClientsDataTable :wifi-devices="computedWifiDevices" />
|
<WifiDevicesDataTable :wifi-devices="computedWifiDevices" />
|
||||||
|
|
||||||
<v-pagination
|
<v-pagination
|
||||||
v-model="page"
|
v-model="page"
|
||||||
|
@ -73,11 +73,11 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import ClientsDataTable from '../components/ClientsDataTable.vue'
|
import WifiDevicesDataTable from '../components/DataTables/WifiDevicesDataTable.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WifiDevices',
|
name: 'WifiDevices',
|
||||||
components: { ClientsDataTable },
|
components: { WifiDevicesDataTable },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: '',
|
search: '',
|
||||||
page: 1,
|
page: 1,
|
||||||
|
@ -123,6 +123,7 @@ export default {
|
||||||
total
|
total
|
||||||
data {
|
data {
|
||||||
accessPoint {
|
accessPoint {
|
||||||
|
id
|
||||||
name
|
name
|
||||||
hostname
|
hostname
|
||||||
local
|
local
|
||||||
|
|
|
@ -91,7 +91,7 @@
|
||||||
</v-expansion-panel-header>
|
</v-expansion-panel-header>
|
||||||
<v-expansion-panel-content>
|
<v-expansion-panel-content>
|
||||||
<v-expansion-panels accordion>
|
<v-expansion-panels accordion>
|
||||||
<wifi-devices-table :wifi-devices="user.wifiDevices" />
|
<UserWifiDevicesDataTable :wifi-devices="user.wifiDevices" />
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</v-expansion-panel-content>
|
</v-expansion-panel-content>
|
||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
|
@ -106,10 +106,10 @@
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import Avatar from '../components/Avatar.vue'
|
import Avatar from '../components/Avatar.vue'
|
||||||
import WifiDevicesTable from '../components/WifiDevicesTable.vue'
|
import UserWifiDevicesDataTable from '../components/DataTables/UserWifiDevicesDataTable.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Avatar, WifiDevicesTable },
|
components: { Avatar, UserWifiDevicesDataTable },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: ''
|
search: ''
|
||||||
}),
|
}),
|
||||||
|
@ -153,6 +153,12 @@ export default {
|
||||||
essid
|
essid
|
||||||
ip
|
ip
|
||||||
uptime
|
uptime
|
||||||
|
signalStrength
|
||||||
|
frequency
|
||||||
|
protocol
|
||||||
|
speed
|
||||||
|
usage
|
||||||
|
|
||||||
accessPoint {
|
accessPoint {
|
||||||
id
|
id
|
||||||
name
|
name
|
||||||
|
|
Loading…
Reference in New Issue
Block a user