Show AP clients dialog
This commit is contained in:
parent
637bc55a78
commit
000d033648
|
@ -3,6 +3,12 @@ import prisma from '../../prisma'
|
|||
export async function accessPoint(parent, { id }, context, info) {
|
||||
return prisma.accessPoint.findUnique({
|
||||
where: { id: parseInt(id) },
|
||||
include: { wifiDevices: true }
|
||||
include: {
|
||||
wifiDevices: {
|
||||
where: {
|
||||
status: 'ONLINE'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -177,8 +177,22 @@ const routes = [
|
|||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "access-points" */ '../views/AccessPoints.vue'
|
||||
)
|
||||
/* webpackChunkName: "access-points" */ '../views/AccessPoints/index.vue'
|
||||
),
|
||||
children: [
|
||||
{
|
||||
path: ':id/clients',
|
||||
name: 'access-point',
|
||||
meta: {
|
||||
title: 'Access Point',
|
||||
roles: ['superAdmin']
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "access-points" */ '../views/AccessPoints/single.vue'
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<v-container class="access-points" fluid>
|
||||
<router-view />
|
||||
<v-toolbar class="mb-2" flat outlined>
|
||||
<v-menu
|
||||
offset-y
|
||||
|
@ -73,6 +74,7 @@
|
|||
class="client-chip"
|
||||
:color="loadColor(item.clients) + ' lighten-5'"
|
||||
pill
|
||||
@click="navigateToAccessPoint(item)"
|
||||
>
|
||||
<v-icon left :color="loadColor(item.clients)">
|
||||
{{ loadIcon(item.clients) }}
|
||||
|
@ -109,7 +111,7 @@
|
|||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import ApIcon from '../components/ApIcon.vue'
|
||||
import ApIcon from '@/components/ApIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'AccessPoints',
|
||||
|
@ -149,9 +151,7 @@ export default {
|
|||
{ text: 'Última atualização', value: 'updatedAt', width: 160 }
|
||||
]
|
||||
}),
|
||||
mounted() {
|
||||
this.resetDefaultHeaders()
|
||||
},
|
||||
|
||||
computed: {
|
||||
headers() {
|
||||
return this.allHeaders.filter(header => header.active)
|
||||
|
@ -163,12 +163,21 @@ export default {
|
|||
}))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetDefaultHeaders()
|
||||
},
|
||||
methods: {
|
||||
navigateToAccessPoint(accessPoint) {
|
||||
this.$router.push({
|
||||
name: 'access-point',
|
||||
params: { id: accessPoint.id }
|
||||
})
|
||||
},
|
||||
readableUptime(uptime) {
|
||||
return Math.floor(uptime / 3600)
|
||||
},
|
||||
load(connectedClients) {
|
||||
const MAX_LOAD = 70
|
||||
const MAX_LOAD = 60
|
||||
const load = Math.floor((connectedClients / MAX_LOAD) * 100)
|
||||
return load < 100 ? load : 100
|
||||
},
|
111
web/src/views/AccessPoints/single.vue
Normal file
111
web/src/views/AccessPoints/single.vue
Normal file
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="showDialog">
|
||||
<v-card v-if="!accessPoint">
|
||||
<v-skeleton-loader
|
||||
type="table-heading, list-item-two-line, image, table-tfoot"
|
||||
/>
|
||||
</v-card>
|
||||
<v-card v-else :loading="!accessPoint">
|
||||
<v-card-title class="font-weight-regular">
|
||||
{{ accessPoint.name || accessPoint.hostname }}
|
||||
<small> ({{ accessPoint.ip }}) </small>
|
||||
<ApIcon class="mr-1" :controller="accessPoint.controller" />
|
||||
<v-spacer />
|
||||
<v-btn icon @click="showDialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
sort-by="name"
|
||||
:items="accessPoint.wifiDevices"
|
||||
:headers="headers"
|
||||
dense
|
||||
:footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
|
||||
>
|
||||
<template #[`item.user`]="{ item: { user } }">
|
||||
<span v-if="user">
|
||||
<Avatar left :src="user.thumbnailPhoto" size="24" />
|
||||
{{ user.displayName }} ({{ user.sAMAccountName }})
|
||||
</span>
|
||||
<span v-else><Avatar left size="24" /> Não logado</span>
|
||||
</template>
|
||||
|
||||
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||
{{ uptime | durationFromSeconds }}
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import Avatar from '../../components/Avatar.vue'
|
||||
import ApIcon from '../../components/ApIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'SingleAccessPoint',
|
||||
components: { Avatar, ApIcon },
|
||||
data: () => ({
|
||||
showDialog: true,
|
||||
headers: [
|
||||
{ text: 'Hostname', value: 'hostname' },
|
||||
{ text: 'MAC', value: 'mac' },
|
||||
{ text: 'ESSID', value: 'essid' },
|
||||
{ text: 'Uptime', value: 'uptime' },
|
||||
{ text: 'Usuário', value: 'user' }
|
||||
]
|
||||
}),
|
||||
watch: {
|
||||
showDialog() {
|
||||
this.$router.push({ name: 'access-points' })
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
accessPoint: {
|
||||
query: gql`
|
||||
query accessPoint($id: ID!) {
|
||||
accessPoint(id: $id) {
|
||||
id
|
||||
name
|
||||
hostname
|
||||
ip
|
||||
mac
|
||||
local
|
||||
clients
|
||||
uptime
|
||||
model
|
||||
controller
|
||||
notes
|
||||
updatedAt
|
||||
wifiDevices {
|
||||
id
|
||||
hostname
|
||||
essid
|
||||
mac
|
||||
uptime
|
||||
lastSeen
|
||||
user {
|
||||
displayName
|
||||
sAMAccountName
|
||||
thumbnailPhoto
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return {
|
||||
id: this.$route.params.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
Loading…
Reference in New Issue
Block a user