Layout updates
This commit is contained in:
Douglas Barone
parent
dcbac7f2c7
commit
ad3c6f05a3
|
|
@ -47,11 +47,11 @@
|
||||||
<v-list-item-title> {{ item.title }} </v-list-item-title>
|
<v-list-item-title> {{ item.title }} </v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
|
<v-divider />
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<ThemeToggleBtn />
|
<ThemeToggleBtn />
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-btn color="error darken-2" depressed @click="doLogout">
|
<v-btn text depressed @click="doLogout">
|
||||||
<v-icon left>mdi-logout</v-icon> Sair
|
<v-icon left>mdi-logout</v-icon> Sair
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
<transition-group
|
<transition-group
|
||||||
name="scale-transition"
|
name="scale-transition"
|
||||||
tag="div"
|
tag="div"
|
||||||
class="d-flex flex-wrap"
|
class="d-flex flex-wrap mx-n2"
|
||||||
|
mode="out-in"
|
||||||
>
|
>
|
||||||
<v-col
|
<v-col
|
||||||
v-for="userPresence in userPresences"
|
v-for="userPresence in userPresences"
|
||||||
|
|
@ -108,7 +109,7 @@ export default {
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.border-highlight {
|
.border-highlight {
|
||||||
box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05);
|
box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05);
|
||||||
border-left: 3px solid grey;
|
border-left: 4px solid grey;
|
||||||
}
|
}
|
||||||
.online {
|
.online {
|
||||||
border-left-color: #4caf50;
|
border-left-color: #4caf50;
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,9 @@
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
|
|
||||||
<v-main>
|
<v-main>
|
||||||
<v-container>
|
<v-slide-x-transition hide-on-leave>
|
||||||
<v-slide-x-transition hide-on-leave>
|
<router-view />
|
||||||
<router-view />
|
</v-slide-x-transition>
|
||||||
</v-slide-x-transition>
|
|
||||||
</v-container>
|
|
||||||
</v-main>
|
</v-main>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
//.theme--light .gradient-bg,
|
// .theme--light .gradient-bg,
|
||||||
//.theme--light .primary {
|
// .theme--light .primary {
|
||||||
// background-color: #3fa14c;
|
// background-color: #3fa14c;
|
||||||
// background-image: linear-gradient(
|
// background-image: linear-gradient(
|
||||||
// 45deg,
|
// 45deg,
|
||||||
// #3fa14cff 0%,
|
// #3fa14cff 0%,
|
||||||
// #3ecf51 60%,
|
// #3ecf51 60%,
|
||||||
// #39e650 100%
|
// #39e650 100%
|
||||||
// );
|
// );
|
||||||
//}
|
// }
|
||||||
//
|
|
||||||
//.theme--dark .gradient-bg,
|
// .theme--dark .gradient-bg,
|
||||||
//.theme--dark .primary {
|
// .theme--dark .primary {
|
||||||
// background-color: #174a63;
|
// background-color: #174a63;
|
||||||
// background-image: linear-gradient(
|
// background-image: linear-gradient(
|
||||||
// 45deg,
|
// 45deg,
|
||||||
// #479bb3 0%,
|
// #479bb3 0%,
|
||||||
// #457099 60%,
|
// #457099 60%,
|
||||||
// #4762b3 100%
|
// #4762b3 100%
|
||||||
// );
|
// );
|
||||||
//}
|
// }
|
||||||
|
|
||||||
// .theme--light.v-application {
|
// .theme--light.v-application {
|
||||||
// background: #f5f5f5;
|
// background: #f5f5f5;
|
||||||
|
|
@ -27,3 +27,7 @@
|
||||||
// .theme--dark.v-application {
|
// .theme--dark.v-application {
|
||||||
// background: #313233;
|
// background: #313233;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
.bottom-border {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,75 +1,87 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid class="mb-12">
|
<div>
|
||||||
<v-text-field
|
<v-toolbar height="100" class="align-content-center bottom-border" flat>
|
||||||
v-model="search"
|
<v-text-field
|
||||||
:loading="$apollo.queries.userPresence.loading"
|
v-model="search"
|
||||||
class="mt-6 search"
|
:loading="$apollo.queries.userPresence.loading"
|
||||||
label="Pesquisar"
|
class="mt-6 search"
|
||||||
hint="Ex.: jose, pp, sala 102, 10.7."
|
label="Pesquisar"
|
||||||
prepend-icon="mdi-account-search"
|
hint="Ex.: jose, pp, sala 102, 10.7."
|
||||||
clearable
|
prepend-icon="mdi-account-search"
|
||||||
filled
|
clearable
|
||||||
style="max-width: 400px"
|
filled
|
||||||
/>
|
style="max-width: 512px"
|
||||||
|
>
|
||||||
|
<v-progress-circular
|
||||||
|
v-if="$apollo.queries.userPresence.loading"
|
||||||
|
slot="prepend"
|
||||||
|
color="grey"
|
||||||
|
class="pa-0 ma-0"
|
||||||
|
:width="2"
|
||||||
|
:size="24"
|
||||||
|
indeterminate
|
||||||
|
/>
|
||||||
|
</v-text-field>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-container fluid class="mb-12">
|
||||||
|
<div v-if="stats" class="text-center my-4">
|
||||||
|
<v-chip color="green" class="mr-2" dark>
|
||||||
|
{{ stats.onlineUsers }}
|
||||||
|
</v-chip>
|
||||||
|
usuários online.
|
||||||
|
</div>
|
||||||
|
<UserPresenceStatusList
|
||||||
|
:user-presences="pagedUserPresences"
|
||||||
|
:loading="$apollo.queries.userPresence.loading && !userPresence"
|
||||||
|
/>
|
||||||
|
|
||||||
<div v-if="stats" class="text-center mb-6 mt-0">
|
<v-btn
|
||||||
<v-chip color="green" class="mr-2" dark>
|
:elevation="0"
|
||||||
{{ stats.onlineUsers }}
|
color="accent"
|
||||||
</v-chip>
|
:disabled="
|
||||||
usuários online.
|
!userPresence ||
|
||||||
</div>
|
resultSize >= userPresence.length ||
|
||||||
|
$apollo.queries.userPresence.loading
|
||||||
|
"
|
||||||
|
text
|
||||||
|
large
|
||||||
|
block
|
||||||
|
@click="resultSize += 12"
|
||||||
|
>
|
||||||
|
Mostrar mais
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
<UserPresenceStatusList
|
<v-row class="mt-6">
|
||||||
:user-presences="pagedUserPresences"
|
<v-col cols="12" md="6">
|
||||||
:loading="$apollo.queries.userPresence.loading && !userPresence"
|
<v-alert
|
||||||
/>
|
class="fill-height"
|
||||||
|
color="info darken-2"
|
||||||
|
icon="mdi-alert"
|
||||||
|
outlined
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
A lista de pessoas mostrada aqui é obtida através do uso da rede
|
||||||
|
<strong>Wi-Fi</strong> Este método não é preciso, podendo não
|
||||||
|
indicar alguém presente ou indicar alguém que deixou um dispositivo
|
||||||
|
no campus. Use esta lista com a <strong>devida cautela</strong>.
|
||||||
|
</v-alert>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<v-btn
|
<v-col cols="12" md="6">
|
||||||
:elevation="0"
|
<v-alert
|
||||||
color="accent"
|
class="fill-height"
|
||||||
:disabled="
|
color="info darken-2"
|
||||||
!userPresence ||
|
icon="mdi-update"
|
||||||
resultSize >= userPresence.length ||
|
outlined
|
||||||
$apollo.queries.userPresence.loading
|
dark
|
||||||
"
|
>
|
||||||
text
|
A lista é atualizada automaticamente. Não é necessário
|
||||||
large
|
<strong>atualizar</strong> a página.
|
||||||
block
|
</v-alert>
|
||||||
@click="resultSize += 12"
|
</v-col>
|
||||||
>
|
</v-row>
|
||||||
Mostrar mais
|
</v-container>
|
||||||
</v-btn>
|
</div>
|
||||||
|
|
||||||
<v-row class="mt-6">
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-alert
|
|
||||||
class="fill-height"
|
|
||||||
color="info darken-2"
|
|
||||||
icon="mdi-alert"
|
|
||||||
outlined
|
|
||||||
dark
|
|
||||||
>
|
|
||||||
A lista de pessoas mostrada aqui é obtida através do uso da rede
|
|
||||||
<strong>Wi-Fi</strong> Este método não é preciso, podendo não indicar
|
|
||||||
alguém presente ou indicar alguém que deixou um dispositivo no campus.
|
|
||||||
Use esta lista com a <strong>devida cautela</strong>.
|
|
||||||
</v-alert>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-alert
|
|
||||||
class="fill-height"
|
|
||||||
color="info darken-2"
|
|
||||||
icon="mdi-update"
|
|
||||||
outlined
|
|
||||||
dark
|
|
||||||
>
|
|
||||||
A lista é atualizada automaticamente. Não é necessário
|
|
||||||
<strong>atualizar</strong> a página.
|
|
||||||
</v-alert>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid>
|
<div>
|
||||||
<v-toolbar flat class="mb-2 pt-3">
|
<v-toolbar height="100" class="align-content-center bottom-border" flat>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="search"
|
v-model="search"
|
||||||
prepend-inner-icon="mdi-cellphone"
|
:loading="$apollo.queries.wifiDevices.loading"
|
||||||
rounded
|
class="mt-6 search"
|
||||||
outlined
|
label="Pesquisar"
|
||||||
dense
|
hint="MAC/IP/Usuário"
|
||||||
label="Buscar"
|
prepend-icon="mdi-cellphone"
|
||||||
hint="MAC, IP, Usuário"
|
clearable
|
||||||
|
filled
|
||||||
|
style="max-width: 512px"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-tooltip bottom>
|
<v-tooltip bottom>
|
||||||
<span>Atualizar</span>
|
<span>Atualizar</span>
|
||||||
<template #activator="{ on }">
|
<template #activator="{ on }">
|
||||||
<v-btn
|
<v-btn
|
||||||
class="ml-2 mb-6"
|
class="ml-2"
|
||||||
:loading="$apollo.queries.wifiDevices.loading"
|
:loading="$apollo.queries.wifiDevices.loading"
|
||||||
color="primary"
|
|
||||||
icon
|
icon
|
||||||
large
|
large
|
||||||
v-on="on"
|
v-on="on"
|
||||||
|
|
@ -27,172 +29,174 @@
|
||||||
</template>
|
</template>
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<div v-if="stats" class="text-center mb-6 mt-0">
|
<v-container fluid>
|
||||||
<v-chip color="green" class="mr-1" dark>
|
<div v-if="stats" class="text-center my-4">
|
||||||
{{
|
<v-chip color="green" class="mr-1" dark>
|
||||||
wifiDevices && wifiDevices.filter(device => device.isOnline).length
|
{{
|
||||||
}}
|
wifiDevices && wifiDevices.filter(device => device.isOnline).length
|
||||||
</v-chip>
|
}}
|
||||||
online de
|
</v-chip>
|
||||||
<v-chip class="mx-1">
|
online de
|
||||||
{{ stats.totalWifiDevices }}
|
<v-chip class="mx-1">
|
||||||
</v-chip>
|
{{ stats.totalWifiDevices }}
|
||||||
no total.
|
</v-chip>
|
||||||
</div>
|
no total.
|
||||||
<v-data-iterator
|
</div>
|
||||||
:items="computedWifiDevices"
|
<v-data-iterator
|
||||||
:items-per-page.sync="itemsPerPage"
|
:items="computedWifiDevices"
|
||||||
:page="page"
|
:items-per-page.sync="itemsPerPage"
|
||||||
:loading="$apollo.queries.wifiDevices.loading"
|
:page="page"
|
||||||
:search="search"
|
:loading="$apollo.queries.wifiDevices.loading"
|
||||||
>
|
:search="search"
|
||||||
<template #default="{ items }">
|
>
|
||||||
<v-expansion-panels multiple>
|
<template #default="{ items }">
|
||||||
<v-expansion-panel v-for="device in items" :key="device.mac">
|
<v-expansion-panels multiple>
|
||||||
<v-expansion-panel-header>
|
<v-expansion-panel v-for="device in items" :key="device.mac">
|
||||||
<v-row dense align-content="center" no-gutters>
|
<v-expansion-panel-header>
|
||||||
<v-col class="shrink" align-self="center">
|
<v-row dense align-content="center" no-gutters>
|
||||||
<v-badge
|
<v-col class="shrink" align-self="center">
|
||||||
:color="device.isOnline ? 'green' : 'grey'"
|
<v-badge
|
||||||
left
|
:color="device.isOnline ? 'green' : 'grey'"
|
||||||
offset-y="16"
|
left
|
||||||
dot
|
offset-y="16"
|
||||||
|
dot
|
||||||
|
>
|
||||||
|
<ap-icon class="mr-4" :controller="device.controller" />
|
||||||
|
</v-badge>
|
||||||
|
</v-col>
|
||||||
|
<v-col align-self="center" cols="3">
|
||||||
|
{{ device.hostname }}
|
||||||
|
</v-col>
|
||||||
|
<v-col
|
||||||
|
v-if="$vuetify.breakpoint.mdAndUp"
|
||||||
|
cols="2"
|
||||||
|
class="grow"
|
||||||
|
>{{ device.ip }}</v-col
|
||||||
>
|
>
|
||||||
<ap-icon class="mr-4" :controller="device.controller" />
|
<v-col v-if="$vuetify.breakpoint.mdAndUp" class="grow">
|
||||||
</v-badge>
|
<div>
|
||||||
</v-col>
|
<avatar left size="24px" :src="device.thumbnailPhoto" />{{
|
||||||
<v-col align-self="center" cols="3">
|
device.displayName
|
||||||
{{ device.hostname }}
|
}}
|
||||||
</v-col>
|
</div>
|
||||||
<v-col
|
</v-col>
|
||||||
v-if="$vuetify.breakpoint.mdAndUp"
|
</v-row>
|
||||||
cols="2"
|
</v-expansion-panel-header>
|
||||||
class="grow"
|
<v-expansion-panel-content>
|
||||||
>{{ device.ip }}</v-col
|
<v-list dense>
|
||||||
>
|
<v-list-item v-if="device.isOnline">
|
||||||
<v-col v-if="$vuetify.breakpoint.mdAndUp" class="grow">
|
<v-list-item-action>
|
||||||
<div>
|
<v-icon color="green darken-1">mdi-wifi</v-icon>
|
||||||
<avatar left size="24px" :src="device.thumbnailPhoto" />{{
|
</v-list-item-action>
|
||||||
device.displayName
|
<v-list-item-content>
|
||||||
}}
|
<v-list-item-title>
|
||||||
</div>
|
{{ device.essid }}
|
||||||
</v-col>
|
</v-list-item-title>
|
||||||
</v-row>
|
<v-list-item-subtitle> SSID </v-list-item-subtitle>
|
||||||
</v-expansion-panel-header>
|
</v-list-item-content>
|
||||||
<v-expansion-panel-content>
|
</v-list-item>
|
||||||
<v-list dense>
|
|
||||||
<v-list-item v-if="device.isOnline">
|
|
||||||
<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>
|
|
||||||
{{ device.essid }}
|
|
||||||
</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 v-else>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-wifi-off</v-icon>
|
<v-icon>mdi-wifi-off</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.essid }}
|
{{ device.essid }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Dispositivo off-line
|
Dispositivo off-line
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-access-point</v-icon>
|
<v-icon>mdi-access-point</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.apName }}
|
{{ device.apName }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Access Point ({{ device.controller }})
|
Access Point ({{ device.controller }})
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-ip-network</v-icon>
|
<v-icon>mdi-ip-network</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.ip }}
|
{{ device.ip }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Último endereço IP conhecido
|
Último endereço IP conhecido
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-expansion-card-variant</v-icon>
|
<v-icon>mdi-expansion-card-variant</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.mac }}
|
{{ device.mac }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
{{ device.oui }}
|
{{ device.oui }}
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-eye</v-icon>
|
<v-icon>mdi-eye</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.lastSeen | dateAndTime }}
|
{{ device.lastSeen | dateAndTime }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Visto pela última vez
|
Visto pela última vez
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<v-icon>mdi-check-decagram</v-icon>
|
<v-icon>mdi-check-decagram</v-icon>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.firstSeen | dateAndTime }}
|
{{ device.firstSeen | dateAndTime }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Visto pela primeira vez
|
Visto pela primeira vez
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>
|
<v-list-item-action>
|
||||||
<Avatar :src="device.thumbnailPhoto" size="24px" />
|
<Avatar :src="device.thumbnailPhoto" size="24px" />
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ device.displayName }}
|
{{ device.displayName }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
{{ device.sAMAccountName }}
|
{{ device.sAMAccountName }}
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-expansion-panel-content>
|
</v-expansion-panel-content>
|
||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</template>
|
</template>
|
||||||
</v-data-iterator>
|
</v-data-iterator>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid>
|
<div>
|
||||||
<v-toolbar flat class="mb-2 pt-3">
|
<v-toolbar height="100" class="align-content-center bottom-border" flat>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="search"
|
v-model="search"
|
||||||
prepend-inner-icon="mdi-account"
|
:loading="$apollo.queries.wifiUsers.loading"
|
||||||
rounded
|
class="mt-6 search"
|
||||||
outlined
|
label="Pesquisar"
|
||||||
label="Buscar"
|
hint="Nome/conta"
|
||||||
hint="Nome, conta"
|
prepend-icon="mdi-account-search"
|
||||||
dense
|
clearable
|
||||||
|
filled
|
||||||
|
style="max-width: 512px"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-tooltip bottom>
|
<v-tooltip bottom>
|
||||||
<span>Atualizar</span>
|
<span>Atualizar</span>
|
||||||
<template #activator="{ on }">
|
<template #activator="{ on }">
|
||||||
<v-btn
|
<v-btn
|
||||||
class="ml-2 mb-6"
|
class="ml-2"
|
||||||
:loading="$apollo.queries.wifiUsers.loading"
|
:loading="$apollo.queries.wifiUsers.loading"
|
||||||
color="primary"
|
|
||||||
icon
|
icon
|
||||||
large
|
large
|
||||||
v-on="on"
|
v-on="on"
|
||||||
|
|
@ -27,173 +29,175 @@
|
||||||
</template>
|
</template>
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<div v-if="stats" class="text-center mb-6 mt-0">
|
<v-container fluid>
|
||||||
<v-chip color="green" class="mr-2" dark>
|
<div v-if="stats" class="text-center my-4">
|
||||||
{{ stats.onlineUsers }}
|
<v-chip color="green" class="mr-2" dark>
|
||||||
</v-chip>
|
{{ stats.onlineUsers }}
|
||||||
usuários online de
|
</v-chip>
|
||||||
<v-chip class="ml-2">
|
usuários online de
|
||||||
{{ stats.totalUsers }}
|
<v-chip class="ml-2">
|
||||||
</v-chip>
|
{{ stats.totalUsers }}
|
||||||
</div>
|
</v-chip>
|
||||||
<v-data-iterator
|
</div>
|
||||||
:items="sortedWifiUsers"
|
<v-data-iterator
|
||||||
:loading="$apollo.queries.wifiUsers.loading"
|
:items="sortedWifiUsers"
|
||||||
:search="search"
|
:loading="$apollo.queries.wifiUsers.loading"
|
||||||
>
|
:search="search"
|
||||||
<template #default="{ items }">
|
>
|
||||||
<v-expansion-panels>
|
<template #default="{ items }">
|
||||||
<v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
|
<v-expansion-panels>
|
||||||
<v-expansion-panel-header>
|
<v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
|
||||||
<div style="width: 50px">
|
<v-expansion-panel-header>
|
||||||
<avatar size="24" left :src="user.thumbnailPhoto" />
|
<div style="width: 50px">
|
||||||
{{ user.displayName }} ({{ user.sAMAccountName }})
|
<avatar size="24" left :src="user.thumbnailPhoto" />
|
||||||
</div>
|
{{ user.displayName }} ({{ user.sAMAccountName }})
|
||||||
<template #actions>
|
</div>
|
||||||
<v-badge
|
<template #actions>
|
||||||
class="mx-4"
|
|
||||||
color="grey darken-1"
|
|
||||||
bottom
|
|
||||||
offset-y="10"
|
|
||||||
:content="
|
|
||||||
user.wifiDevices
|
|
||||||
.filter(wifiDevice => !wifiDevice.isOnline)
|
|
||||||
.length.toString()
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<v-badge
|
<v-badge
|
||||||
color="green"
|
class="mx-4"
|
||||||
top
|
color="grey darken-1"
|
||||||
|
bottom
|
||||||
offset-y="10"
|
offset-y="10"
|
||||||
:content="
|
:content="
|
||||||
user.wifiDevices
|
user.wifiDevices
|
||||||
.filter(wifiDevice => wifiDevice.isOnline)
|
.filter(wifiDevice => !wifiDevice.isOnline)
|
||||||
.length.toString()
|
.length.toString()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<v-icon>mdi-cellphone-wireless</v-icon>
|
<v-badge
|
||||||
|
color="green"
|
||||||
|
top
|
||||||
|
offset-y="10"
|
||||||
|
:content="
|
||||||
|
user.wifiDevices
|
||||||
|
.filter(wifiDevice => wifiDevice.isOnline)
|
||||||
|
.length.toString()
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-cellphone-wireless</v-icon>
|
||||||
|
</v-badge>
|
||||||
</v-badge>
|
</v-badge>
|
||||||
</v-badge>
|
</template>
|
||||||
</template>
|
</v-expansion-panel-header>
|
||||||
</v-expansion-panel-header>
|
<v-expansion-panel-content>
|
||||||
<v-expansion-panel-content>
|
<v-expansion-panels accordion>
|
||||||
<v-expansion-panels accordion>
|
<v-expansion-panel
|
||||||
<v-expansion-panel
|
v-for="device in user.wifiDevices"
|
||||||
v-for="device in user.wifiDevices"
|
:key="device.mac"
|
||||||
:key="device.mac"
|
|
||||||
>
|
|
||||||
<v-expansion-panel-header>
|
|
||||||
<div>
|
|
||||||
<v-icon left :color="device.isOnline ? 'green' : ''">
|
|
||||||
mdi-cellphone-wireless
|
|
||||||
</v-icon>
|
|
||||||
{{ device.hostname || device.mac }} {{ device.oui }}
|
|
||||||
</div>
|
|
||||||
</v-expansion-panel-header>
|
|
||||||
<v-expansion-panel-content>
|
|
||||||
<v-list dense>
|
|
||||||
<v-list-item v-if="device.isOnline">
|
|
||||||
<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>
|
|
||||||
{{ device.essid }}
|
|
||||||
</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>
|
|
||||||
{{ device.essid }}
|
|
||||||
</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-access-point</v-icon>
|
|
||||||
</v-list-item-action>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>
|
|
||||||
{{ device.apName }}
|
|
||||||
</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
Access Point ({{ device.controller }})
|
|
||||||
</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>
|
|
||||||
{{ device.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>
|
|
||||||
{{ device.mac }}
|
|
||||||
</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
{{ device.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>
|
|
||||||
{{ device.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>
|
|
||||||
{{ device.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></v-expansion-panel-content
|
|
||||||
>
|
>
|
||||||
</v-expansion-panel>
|
<v-expansion-panel-header>
|
||||||
</v-expansion-panels>
|
<div>
|
||||||
</v-expansion-panel-content>
|
<v-icon left :color="device.isOnline ? 'green' : ''">
|
||||||
</v-expansion-panel>
|
mdi-cellphone-wireless
|
||||||
</v-expansion-panels>
|
</v-icon>
|
||||||
</template>
|
{{ device.hostname || device.mac }} {{ device.oui }}
|
||||||
</v-data-iterator>
|
</div>
|
||||||
</v-container>
|
</v-expansion-panel-header>
|
||||||
|
<v-expansion-panel-content>
|
||||||
|
<v-list dense>
|
||||||
|
<v-list-item v-if="device.isOnline">
|
||||||
|
<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>
|
||||||
|
{{ device.essid }}
|
||||||
|
</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>
|
||||||
|
{{ device.essid }}
|
||||||
|
</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-access-point</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ device.apName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Access Point ({{ device.controller }})
|
||||||
|
</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>
|
||||||
|
{{ device.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>
|
||||||
|
{{ device.mac }}
|
||||||
|
</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
{{ device.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>
|
||||||
|
{{ device.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>
|
||||||
|
{{ device.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></v-expansion-panel-content
|
||||||
|
>
|
||||||
|
</v-expansion-panel>
|
||||||
|
</v-expansion-panels>
|
||||||
|
</v-expansion-panel-content>
|
||||||
|
</v-expansion-panel>
|
||||||
|
</v-expansion-panels>
|
||||||
|
</template>
|
||||||
|
</v-data-iterator>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user