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

Refactor UserPresence view

Browse Source
This commit is contained in:
Douglas Barone 2020-11-30 13:51:24 -04:00
parent 093c7f3a7e
commit c4efe7f168
1 changed files with 46 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
web/src/components/UserPresenceStatusList.vue
View File

@ -1,83 +1,52 @@
<template> <template>
<div v-if="!loading"> <div v-if="!loading">
<v-divider /> <v-list three-line>
<v-fade-transition group hide-on-leave appear> <v-fade-transition group hide-on-leave appear>
<v-sheet <v-list-item
v-for="userPresence in userPresences" v-for="userPresence in userPresences"
:key="userPresence.user.id" :key="userPresence.user.id"
> link
<v-list three-line> >
<v-list-item> <v-list-item-avatar size="52px" style="overflow: visible">
<v-list-item-avatar size="52px" style="overflow: visible"> <v-badge
<v-badge :color="
:color=" userPresence.wifiDevices.some(
userPresence.wifiDevices.some( wifiDevice => wifiDevice.status === 'ONLINE'
wifiDevice => wifiDevice.status === 'ONLINE' )
) ? 'green'
? 'green' : 'grey'
: 'grey' "
" bottom
bottom offset-x="18px"
offset-x="18px" offset-y="18px"
offset-y="18px" >
> <Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
<Avatar :src="userPresence.user.thumbnailPhoto" size="52px" /> </v-badge>
</v-badge> </v-list-item-avatar>
</v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title> <v-list-item-title>
{{ userPresence.user.displayName }} {{ userPresence.user.displayName }}
</v-list-item-title> </v-list-item-title>
<v-list-item-subtitle <v-list-item-subtitle
v-if="userPresence.wifiDevices[0].status === 'OFFLINE'" v-if="userPresence.wifiDevices[0].status === 'OFFLINE'"
> >
<span class="font-weight-medium">Off-line.</span> <span class="font-weight-medium">Off-line.</span>
Visto {{ userPresence.wifiDevices[0].lastSeen | from }} Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle v-else> <v-list-item-subtitle v-else>
<span class="font-weight-medium">On-line</span> <span class="font-weight-medium">On-line</span>
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle> <v-list-item-subtitle>
Próximo ao AP Próximo ao AP
<span class="font-weight-medium" <span class="font-weight-medium"
>{{ userPresence.wifiDevices[0].apName }} >{{ userPresence.wifiDevices[0].apName }}
</span>
<ApIcon :controller="userPresence.wifiDevices[0].controller" />
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-icon>
<span v-if="$vuetify.breakpoint.smAndUp" class="ml-1">
<v-badge
color="green"
bottom
:content="
userPresence.wifiDevices
.filter(wifiDevice => wifiDevice.status === 'ONLINE')
.length.toString()
"
>
<v-icon color="green">mdi-wifi</v-icon>
</v-badge>
<v-badge
class="mx-4"
color="grey"
bottom
:content="
userPresence.wifiDevices
.filter(wifiDevice => wifiDevice.status === 'OFFLINE')
.length.toString()
"
>
<v-icon color="grey">mdi-wifi</v-icon>
</v-badge>
</span> </span>
</v-list-item-icon> </v-list-item-subtitle>
</v-list-item> </v-list-item-content>
</v-list> </v-list-item>
<v-divider /> </v-fade-transition>
</v-sheet> </v-list>
</v-fade-transition>
</div> </div>
<v-list v-else> <v-list v-else>
<v-divider /> <v-divider />
@ -97,11 +66,10 @@
<script> <script>
import Avatar from './Avatar' import Avatar from './Avatar'
import ApIcon from './ApIcon'
export default { export default {
name: 'UserPresenceStatusList', name: 'UserPresenceStatusList',
components: { Avatar, ApIcon }, components: { Avatar },
props: { props: {
userPresences: { userPresences: {
type: Array, type: Array,