WiFi devices page OK
This commit is contained in:
Douglas Barone
parent
63126777cf
commit
d2d6a3a28a
|
|
@ -51,6 +51,7 @@ async function updateDBWithOnlineDevices() {
|
||||||
},
|
},
|
||||||
update: {
|
update: {
|
||||||
...device,
|
...device,
|
||||||
|
hostname: device.hostname || device.mac,
|
||||||
user
|
user
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,20 @@
|
||||||
:items="computedWifiDevices"
|
:items="computedWifiDevices"
|
||||||
:items-per-page.sync="itemsPerPage"
|
:items-per-page.sync="itemsPerPage"
|
||||||
:page="page"
|
:page="page"
|
||||||
|
:loading="$apollo.queries.wifiDevices.loading"
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<v-toolbar flat>
|
<v-toolbar flat class="mb-2">
|
||||||
Dispositivos Wi-Fi
|
<v-text-field
|
||||||
<v-spacer />
|
v-model="search"
|
||||||
|
rounded
|
||||||
|
outlined
|
||||||
|
label="Buscar"
|
||||||
|
hint="MAC, IP, Usuário"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
<v-btn
|
<v-btn
|
||||||
|
class="ml-2 mb-6"
|
||||||
:loading="$apollo.queries.wifiDevices.loading"
|
:loading="$apollo.queries.wifiDevices.loading"
|
||||||
color="primary"
|
color="primary"
|
||||||
text
|
text
|
||||||
|
|
@ -20,25 +28,114 @@
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
</template>
|
</template>
|
||||||
<template #default="{ items }">
|
<template #default="{ items }">
|
||||||
<v-row>
|
<v-expansion-panels popout multiple>
|
||||||
<v-col
|
<v-expansion-panel v-for="item in items" :key="item.mac">
|
||||||
v-for="item in items"
|
<v-expansion-panel-header>
|
||||||
:key="item.mac"
|
<div>
|
||||||
cols="12"
|
<v-icon left :color="item.isOnline ? 'green darken-1' : ''">
|
||||||
md="4"
|
mdi-cellphone-wireless
|
||||||
class="grow"
|
</v-icon>
|
||||||
>
|
{{ item.hostname }} - {{ item.ip }}
|
||||||
<v-card>
|
</div>
|
||||||
<v-card-text>
|
</v-expansion-panel-header>
|
||||||
<Avatar :src="item.user.thumbnailPhoto" />
|
<v-expansion-panel-content>
|
||||||
|
<v-list dense>
|
||||||
|
<v-list-item v-if="item.status === 'ONLINE'">
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon color="green darken-1">mdi-wifi</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.essid }} (próximo ao AP {{ item.apName }})
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle> SSID </v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
{{ item.mac }}
|
<v-list-item v-else>
|
||||||
</v-card-text>
|
<v-list-item-action>
|
||||||
</v-card>
|
<v-icon>mdi-wifi-off</v-icon>
|
||||||
</v-col>
|
</v-list-item-action>
|
||||||
</v-row>
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.essid }} (próximo ao AP {{ item.apName }})
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Dispositivo off-line
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon>mdi-ip-network</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.ip }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Último endereço IP conhecido
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon>mdi-expansion-card-variant</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.mac }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
{{ item.oui }}
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon>mdi-eye</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.lastSeen | dateAndTime }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Visto pela última vez
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon>mdi-check-decagram</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.firstSeen | dateAndTime }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Visto pela primeira vez
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
<Avatar :src="item.user.thumbnailPhoto" size="24px" />
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.user.displayName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
{{ item.user.sAMAccountName }}
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-expansion-panel-content>
|
||||||
|
</v-expansion-panel>
|
||||||
|
</v-expansion-panels>
|
||||||
</template>
|
</template>
|
||||||
<template #footer> Footer </template>
|
|
||||||
</v-data-iterator>
|
</v-data-iterator>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -51,6 +148,7 @@ export default {
|
||||||
name: 'WifiDevices',
|
name: 'WifiDevices',
|
||||||
components: { Avatar },
|
components: { Avatar },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
search: '',
|
||||||
itemsPerPage: 24,
|
itemsPerPage: 24,
|
||||||
itemsPerPageArray: [15, 30, 60, 120],
|
itemsPerPageArray: [15, 30, 60, 120],
|
||||||
page: 1
|
page: 1
|
||||||
|
|
@ -84,15 +182,26 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
computedWifiDevices() {
|
computedWifiDevices() {
|
||||||
return this.wifiDevices?.map(device => ({
|
const filter = this.search.toLowerCase()
|
||||||
...device,
|
|
||||||
hostname: device.hostname || 'Desconhecido',
|
return this.wifiDevices
|
||||||
user: device.user || {
|
?.map(device => ({
|
||||||
displayName: 'Não identificado',
|
...device,
|
||||||
sAMAccountName: null,
|
hostname: device.hostname || 'Desconhecido',
|
||||||
thumbnailPhoto: null
|
isOnline: device.status == 'ONLINE',
|
||||||
}
|
user: device.user || {
|
||||||
}))
|
displayName: 'Não autenticado',
|
||||||
|
sAMAccountName: null,
|
||||||
|
thumbnailPhoto: null
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
.filter(
|
||||||
|
({ ip, mac, user }) =>
|
||||||
|
ip.includes(filter) ||
|
||||||
|
mac.includes(filter) ||
|
||||||
|
user.displayName.toLowerCase().includes(filter) ||
|
||||||
|
user.sAMAccountName?.includes(filter)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user