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

Addes progress bar as loader

Browse Source
This commit is contained in:
Douglas Barone 2020-12-18 09:40:19 -04:00
parent 18a46374f0
commit 127078a506
1 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
web/src/views/UserPresence.vue
View File

@ -18,7 +18,7 @@
style="max-width: 512px" style="max-width: 512px"
> >
<v-progress-circular <v-progress-circular
v-if="$apollo.queries.userPresence.loading" v-if="$apollo.queries.userPresence.loading && search"
slot="prepend" slot="prepend"
color="grey" color="grey"
class="pa-0 ma-0" class="pa-0 ma-0"
@ -28,6 +28,10 @@
/> />
</v-text-field> </v-text-field>
</v-toolbar> </v-toolbar>
<v-progress-linear
height="2"
:indeterminate="$apollo.queries.userPresence.loading"
/>
<v-container fluid class="mb-12"> <v-container fluid class="mb-12">
<div v-if="stats" class="text-center my-4"> <div v-if="stats" class="text-center my-4">
<span> <span>
@ -50,90 +54,88 @@
</v-scale-transition> </v-scale-transition>
</div> </div>
<div <v-fade-transition
v-if=" v-if="
!$apollo.queries.userPresence.loading || pagedUserPresences.length !$apollo.queries.userPresence.loading || pagedUserPresences.length
" "
class="layout row row--dense wrap"
group
> >
<v-fade-transition class="layout row row--dense wrap" group> <v-col
<v-col v-for="userPresence in pagedUserPresences"
v-for="userPresence in pagedUserPresences" :key="userPresence.id"
:key="userPresence.id" cols="12"
cols="12" sm="6"
sm="6" md="4"
md="4" lg="3"
lg="3" >
<v-card
outlined
class="border-highlight light-shadow"
:class="{
online: userPresence.status == 'ONLINE',
recent: userPresence.status == 'RECENT'
}"
> >
<v-card <v-list three-line>
outlined <v-list-item>
class="border-highlight light-shadow" <v-list-item-avatar size="52px" style="overflow: visible">
:class="{ <v-badge
online: userPresence.status == 'ONLINE', :color="color(userPresence.status)"
recent: userPresence.status == 'RECENT' bottom
}" offset-x="18px"
> offset-y="18px"
<v-list three-line> >
<v-list-item> <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
<v-list-item-avatar size="52px" style="overflow: visible"> </v-badge>
<v-badge </v-list-item-avatar>
:color="color(userPresence.status)"
bottom
offset-x="18px"
offset-y="18px"
>
<Avatar :src="userPresence.thumbnailPhoto" size="52px" />
</v-badge>
</v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title> <v-list-item-title>
{{ userPresence.displayName }} {{ userPresence.displayName }}
</v-list-item-title> </v-list-item-title>
<template v-if="userPresence.status == 'ONLINE'"> <template v-if="userPresence.status == 'ONLINE'">
<v-list-item-subtitle> <v-list-item-subtitle>
<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.apName }} {{ userPresence.apName }}
</span> </span>
</v-list-item-subtitle> </v-list-item-subtitle>
</template> </template>
<template v-if="userPresence.status == 'RECENT'"> <template v-if="userPresence.status == 'RECENT'">
<v-list-item-subtitle> <v-list-item-subtitle>
<span class="font-weight-medium" <span class="font-weight-medium">Visto recentemente</span>
>Visto recentemente</span </v-list-item-subtitle>
> <v-list-item-subtitle>
</v-list-item-subtitle> Próximo ao AP
<v-list-item-subtitle> <span class="font-weight-medium">
Próximo ao AP {{ userPresence.apName }}
<span class="font-weight-medium"> </span>
{{ userPresence.apName }} </v-list-item-subtitle>
</span> </template>
</v-list-item-subtitle>
</template>
<template v-if="userPresence.status == 'OFFLINE'"> <template v-if="userPresence.status == 'OFFLINE'">
<v-list-item-subtitle> <v-list-item-subtitle>
<span class="font-weight-medium">Off-line</span> <span class="font-weight-medium">Off-line</span>
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle> <v-list-item-subtitle>
<span class="font-weight-medium"> <span class="font-weight-medium">
Visto Visto
{{ userPresence.lastSeen | from }} {{ userPresence.lastSeen | from }}
</span> </span>
</v-list-item-subtitle> </v-list-item-subtitle>
</template> </template>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card> </v-card>
</v-col> </v-col>
</v-fade-transition> </v-fade-transition>
</div>
<div v-else> <div v-else>
<div class="layout row row--dense wrap"> <div class="layout row row--dense wrap">