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

Reorganize components

Browse Source
This commit is contained in:
Douglas Barone 2022-06-07 16:05:43 +00:00
parent d7cf330761
commit 91bb30cd54
7 changed files with 201 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/ClientsDataTable.vue → web/src/components/DataTables/AccessPointClientsDataTable.vue
View File

@ -17,6 +17,14 @@
<span v-else><Avatar left size="24" /> Não logado</span>
</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 } }">
<small> {{ uptime | durationFromSeconds }}</small>
</template>
@ -46,8 +54,8 @@
</template>
<script>
import Avatar from './Avatar.vue'
import SignalStrength from './signalStrength.vue'
import Avatar from '../Avatar.vue'
import SignalStrength from '../signalStrength.vue'
export default {
components: { Avatar, SignalStrength },
@ -102,6 +110,11 @@ export default {
this.headers.includes(value)
)
}
},
methods: {
setClipboard(text) {
navigator.clipboard.writeText(text)
}
}
}
</script>

37
web/src/components/WifiDevicesTable.vue → web/src/components/DataTables/UserWifiDevicesDataTable.vue
View File

@ -7,7 +7,7 @@
clearable
/>
<v-data-table
:items="wifiDevices"
:items="items"
:headers="headers"
:search="search"
calculate-widths
@ -18,17 +18,30 @@
</v-chip>
<v-chip v-else color="grey" dark x-small>Offline</v-chip>
</template>
<template #[`item.ip`]="{ item }">
<code> {{ item.ip }}</code>
<template #[`item.ip`]="{ item: { ip } }">
<code> {{ ip }}</code>
</template>
<template #[`item.mac`]="{ item }">
<code> {{ item.mac }}</code>
<template #[`item.mac`]="{ item: { mac } }">
<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 #[`item.firstSeen`]="{ item }">
{{ item.firstSeen | shortDate }}
<small> {{ item.firstSeen | shortDate }} </small>
</template>
<template #[`item.lastSeen`]="{ item }">
{{ item.lastSeen | shortDate }}
<small>{{ item.lastSeen | shortDate }} </small>
</template>
<template #[`item.apName`]="{ item }">
<router-link
@ -57,7 +70,10 @@
</template>
<script>
import SignalStrength from '../signalStrength.vue'
export default {
components: { SignalStrength },
props: {
wifiDevices: {
type: Array,
@ -72,19 +88,20 @@ export default {
{ text: 'MAC', value: 'mac' },
{ text: 'Status', value: 'status' },
{ text: 'ESSID', value: 'essid' },
{ text: 'Sinal', value: 'signalStrength' },
{ text: 'Uptime', value: 'uptime' },
{ text: 'Marca', value: 'oui' },
{ text: 'Primeira aparição', value: 'firstSeen' },
{ text: 'Última aparição', value: 'lastSeen' },
{ text: 'AccessPoint', value: 'apName' }
{ text: 'AccessPoint', value: 'apName' },
{ text: 'Uso', value: 'usage' }
]
}),
computed: {
items() {
return this.wifiDevices.map(device => ({
...device.accessPoint,
...device,
accessPointId: device.accessPoint?.id
signalStrength: device.status == 'ONLINE' ? device.signalStrength : 0
}))
}
}

133
web/src/components/DataTables/WifiDevicesDataTable.vue Normal file
View 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>

12
web/src/components/signalStrength.vue
View File

@ -1,5 +1,9 @@
<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 v-if="value < 0">
<v-chip
@ -18,7 +22,7 @@
<template v-else>
<v-chip small color="grey lighten-4">
<v-icon small left color="grey">mdi-signal-off</v-icon>
<small>Aguarde...</small>
<small>{{ noSignalText }}</small>
</v-chip>
</template>
</template>
@ -32,6 +36,10 @@ export default {
value: {
type: Number,
default: -1
},
noSignalText: {
type: String,
default: 'Aguarde...'
}
},
methods: {

6
web/src/views/AccessPoints/clients.vue
View File

@ -41,7 +41,7 @@
</v-card-title>
<v-divider />
<v-card-text>
<ClientsDataTable
<AccessPointClientsDataTable
:wifi-devices="accessPoint.wifiDevices"
:filter="filter"
/>
@ -64,11 +64,11 @@
import gql from 'graphql-tag'
import ApIcon from '../../components/ApIcon.vue'
import ClientsDataTable from '../../components/ClientsDataTable.vue'
import AccessPointClientsDataTable from '../../components/DataTables/AccessPointClientsDataTable.vue'
export default {
name: 'SingleAccessPoint',
components: { ApIcon, ClientsDataTable },
components: { ApIcon, AccessPointClientsDataTable },
data: () => ({
showDialog: true,
filter: ''

7
web/src/views/WifiDevices.vue
View File

@ -60,7 +60,7 @@
<v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
<ClientsDataTable :wifi-devices="computedWifiDevices" />
<WifiDevicesDataTable :wifi-devices="computedWifiDevices" />
<v-pagination
v-model="page"
@ -73,11 +73,11 @@
<script>
import gql from 'graphql-tag'
import ClientsDataTable from '../components/ClientsDataTable.vue'
import WifiDevicesDataTable from '../components/DataTables/WifiDevicesDataTable.vue'
export default {
name: 'WifiDevices',
components: { ClientsDataTable },
components: { WifiDevicesDataTable },
data: () => ({
search: '',
page: 1,
@ -123,6 +123,7 @@ export default {
total
data {
accessPoint {
id
name
hostname
local

12
web/src/views/WifiUsers.vue
View File

@ -91,7 +91,7 @@
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panels accordion>
<wifi-devices-table :wifi-devices="user.wifiDevices" />
<UserWifiDevicesDataTable :wifi-devices="user.wifiDevices" />
</v-expansion-panels>
</v-expansion-panel-content>
</v-expansion-panel>
@ -106,10 +106,10 @@
<script>
import gql from 'graphql-tag'
import Avatar from '../components/Avatar.vue'
import WifiDevicesTable from '../components/WifiDevicesTable.vue'
import UserWifiDevicesDataTable from '../components/DataTables/UserWifiDevicesDataTable.vue'
export default {
components: { Avatar, WifiDevicesTable },
components: { Avatar, UserWifiDevicesDataTable },
data: () => ({
search: ''
}),
@ -153,6 +153,12 @@ export default {
essid
ip
uptime
signalStrength
frequency
protocol
speed
usage
accessPoint {
id
name