WiFi devices page OK
This commit is contained in:
Douglas Barone
parent
63126777cf
commit
d2d6a3a28a
|
|
@ -51,6 +51,7 @@ async function updateDBWithOnlineDevices() {
|
|||
},
|
||||
update: {
|
||||
...device,
|
||||
hostname: device.hostname || device.mac,
|
||||
user
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,12 +4,20 @@
|
|||
:items="computedWifiDevices"
|
||||
:items-per-page.sync="itemsPerPage"
|
||||
:page="page"
|
||||
:loading="$apollo.queries.wifiDevices.loading"
|
||||
>
|
||||
<template #header>
|
||||
<v-toolbar flat>
|
||||
Dispositivos Wi-Fi
|
||||
<v-spacer />
|
||||
<v-toolbar flat class="mb-2">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
rounded
|
||||
outlined
|
||||
label="Buscar"
|
||||
hint="MAC, IP, Usuário"
|
||||
dense
|
||||
/>
|
||||
<v-btn
|
||||
class="ml-2 mb-6"
|
||||
:loading="$apollo.queries.wifiDevices.loading"
|
||||
color="primary"
|
||||
text
|
||||
|
|
@ -20,25 +28,114 @@
|
|||
</v-toolbar>
|
||||
</template>
|
||||
<template #default="{ items }">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="item in items"
|
||||
:key="item.mac"
|
||||
cols="12"
|
||||
md="4"
|
||||
class="grow"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<Avatar :src="item.user.thumbnailPhoto" />
|
||||
<v-expansion-panels popout multiple>
|
||||
<v-expansion-panel v-for="item in items" :key="item.mac">
|
||||
<v-expansion-panel-header>
|
||||
<div>
|
||||
<v-icon left :color="item.isOnline ? 'green darken-1' : ''">
|
||||
mdi-cellphone-wireless
|
||||
</v-icon>
|
||||
{{ item.hostname }} - {{ item.ip }}
|
||||
</div>
|
||||
</v-expansion-panel-header>
|
||||
<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>
|
||||
|
||||
<v-list-item v-else>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-wifi-off</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>
|
||||
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-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</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 #footer> Footer </template>
|
||||
</v-data-iterator>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
@ -51,6 +148,7 @@ export default {
|
|||
name: 'WifiDevices',
|
||||
components: { Avatar },
|
||||
data: () => ({
|
||||
search: '',
|
||||
itemsPerPage: 24,
|
||||
itemsPerPageArray: [15, 30, 60, 120],
|
||||
page: 1
|
||||
|
|
@ -84,15 +182,26 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
computedWifiDevices() {
|
||||
return this.wifiDevices?.map(device => ({
|
||||
const filter = this.search.toLowerCase()
|
||||
|
||||
return this.wifiDevices
|
||||
?.map(device => ({
|
||||
...device,
|
||||
hostname: device.hostname || 'Desconhecido',
|
||||
isOnline: device.status == 'ONLINE',
|
||||
user: device.user || {
|
||||
displayName: 'Não identificado',
|
||||
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