UI changes
This commit is contained in:
Douglas Barone
parent
979f1669e1
commit
5a5e8b2b46
|
|
@ -1,28 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<v-container fluid class="mb-12">
|
||||||
<v-toolbar height="115" flat tile>
|
<v-toolbar class="mb-2" flat outlined>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="search"
|
v-model="search"
|
||||||
class="mt-6 search"
|
|
||||||
label="Pesquisar"
|
label="Pesquisar"
|
||||||
hint="Ex.: jose, pp, sala 102, 10.7."
|
prepend-inner-icon="mdi-account-search"
|
||||||
prepend-icon="mdi-account-search"
|
|
||||||
clearable
|
clearable
|
||||||
outlined
|
hide-details
|
||||||
rounded
|
:loading="$apollo.queries.userPresence.loading"
|
||||||
style="max-width: 512px"
|
/>
|
||||||
>
|
|
||||||
<v-progress-circular
|
|
||||||
v-if="$apollo.queries.userPresence.loading && search"
|
|
||||||
slot="prepend"
|
|
||||||
color="grey"
|
|
||||||
class="pa-0 ma-0"
|
|
||||||
:width="2"
|
|
||||||
:size="24"
|
|
||||||
indeterminate
|
|
||||||
/>
|
|
||||||
</v-text-field>
|
|
||||||
|
|
||||||
<v-dialog v-model="helpDialog" width="500px">
|
<v-dialog v-model="helpDialog" width="500px">
|
||||||
<template #activator="{ on, attrs }">
|
<template #activator="{ on, attrs }">
|
||||||
<v-btn class="ml-1" color="info" dark v-bind="attrs" icon v-on="on">
|
<v-btn class="ml-1" color="info" dark v-bind="attrs" icon v-on="on">
|
||||||
|
|
@ -67,211 +53,198 @@
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-progress-linear
|
|
||||||
height="2"
|
|
||||||
:indeterminate="$apollo.queries.userPresence.loading"
|
|
||||||
/>
|
|
||||||
<v-container fluid class="mb-12">
|
|
||||||
<div v-if="stats" class="text-center my-4">
|
|
||||||
<span>
|
|
||||||
<v-chip color="online" class="mr-1" dark>
|
|
||||||
{{ stats.onlineUsers }}
|
|
||||||
</v-chip>
|
|
||||||
usuários online.
|
|
||||||
</span>
|
|
||||||
<v-scale-transition>
|
|
||||||
<span v-if="search && userPresence">
|
|
||||||
<v-chip color="primary" class="ml-2 mr-1" dark>
|
|
||||||
{{
|
|
||||||
userPresence.filter(presence => presence.status == 'ONLINE')
|
|
||||||
.length
|
|
||||||
}}
|
|
||||||
de {{ userPresence.length }}
|
|
||||||
</v-chip>
|
|
||||||
na sua pesquisa.
|
|
||||||
</span>
|
|
||||||
</v-scale-transition>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-fade-transition
|
<div v-if="stats" class="text-center my-4">
|
||||||
v-if="
|
<span>
|
||||||
!$apollo.queries.userPresence.loading || pagedUserPresences.length
|
<v-chip color="online" class="mr-1" dark>
|
||||||
"
|
{{ stats.onlineUsers }}
|
||||||
class="layout row row--dense wrap"
|
</v-chip>
|
||||||
group
|
usuários online.
|
||||||
|
</span>
|
||||||
|
<v-scale-transition>
|
||||||
|
<span v-if="search && userPresence">
|
||||||
|
<v-chip color="primary" class="ml-2 mr-1" dark>
|
||||||
|
{{
|
||||||
|
userPresence.filter(presence => presence.status == 'ONLINE')
|
||||||
|
.length
|
||||||
|
}}
|
||||||
|
de {{ userPresence.length }}
|
||||||
|
</v-chip>
|
||||||
|
na sua pesquisa.
|
||||||
|
</span>
|
||||||
|
</v-scale-transition>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-fade-transition
|
||||||
|
v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length"
|
||||||
|
class="layout row row--dense wrap"
|
||||||
|
group
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="userPresence in pagedUserPresences"
|
||||||
|
:key="userPresence.id"
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
lg="4"
|
||||||
|
xl="3"
|
||||||
>
|
>
|
||||||
<v-col
|
<v-card
|
||||||
v-for="userPresence in pagedUserPresences"
|
outlined
|
||||||
:key="userPresence.id"
|
class="border-highlight light-shadow pa-0 ma-0"
|
||||||
cols="12"
|
:class="{
|
||||||
md="6"
|
'user-online': userPresence.status == 'ONLINE',
|
||||||
lg="4"
|
'user-recent': userPresence.status == 'RECENT'
|
||||||
xl="3"
|
}"
|
||||||
>
|
>
|
||||||
<v-card
|
<v-list three-line class="pa-0">
|
||||||
outlined
|
<v-list-item>
|
||||||
class="border-highlight light-shadow"
|
<v-list-item-avatar size="52px" style="overflow: visible">
|
||||||
:class="{
|
<v-badge
|
||||||
'user-online': userPresence.status == 'ONLINE',
|
:color="color(userPresence.status)"
|
||||||
'user-recent': userPresence.status == 'RECENT'
|
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-title>
|
||||||
|
{{ userPresence.displayName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
|
||||||
|
<template v-if="userPresence.status == 'ONLINE'">
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span class="font-weight-medium">On-line</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span v-if="userPresence.local" class="font-weight-medium">
|
||||||
|
{{ userPresence.local }}
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
Próximo ao AP
|
||||||
|
{{ userPresence.apName }}
|
||||||
|
</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="userPresence.status == 'RECENT'">
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span class="font-weight-medium">Visto recentemente</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span v-if="userPresence.local" class="font-weight-medium">
|
||||||
|
{{ userPresence.local }}
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
Próximo ao AP
|
||||||
|
{{ userPresence.apName }}
|
||||||
|
</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="userPresence.status == 'OFFLINE'">
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span class="font-weight-medium">Off-line</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<span class="font-weight-medium">
|
||||||
|
Visto
|
||||||
|
{{ userPresence.lastSeen | from }}
|
||||||
|
</span>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</template>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-fade-transition>
|
||||||
|
|
||||||
|
<div v-else-if="!search">
|
||||||
|
<div class="layout row row--dense wrap">
|
||||||
|
<v-col v-for="i in pageSize" :key="i" cols="12" sm="6" md="4" lg="3">
|
||||||
|
<v-card outlined class="border-highlight light-shadow">
|
||||||
<v-list three-line>
|
<v-list three-line>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-avatar size="52px" style="overflow: visible">
|
<v-list-item-avatar>
|
||||||
<v-badge
|
<v-skeleton-loader type="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-avatar>
|
||||||
|
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-skeleton-loader
|
||||||
{{ userPresence.displayName }}
|
type="paragraph"
|
||||||
</v-list-item-title>
|
style="max-width: 300px"
|
||||||
|
/>
|
||||||
<template v-if="userPresence.status == 'ONLINE'">
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span class="font-weight-medium">On-line</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span
|
|
||||||
v-if="userPresence.local"
|
|
||||||
class="font-weight-medium"
|
|
||||||
>
|
|
||||||
{{ userPresence.local }}
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
Próximo ao AP
|
|
||||||
{{ userPresence.apName }}
|
|
||||||
</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="userPresence.status == 'RECENT'">
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span class="font-weight-medium">Visto recentemente</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span
|
|
||||||
v-if="userPresence.local"
|
|
||||||
class="font-weight-medium"
|
|
||||||
>
|
|
||||||
{{ userPresence.local }}
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
Próximo ao AP
|
|
||||||
{{ userPresence.apName }}
|
|
||||||
</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="userPresence.status == 'OFFLINE'">
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span class="font-weight-medium">Off-line</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<span class="font-weight-medium">
|
|
||||||
Visto
|
|
||||||
{{ userPresence.lastSeen | from }}
|
|
||||||
</span>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<div v-else-if="!search">
|
|
||||||
<div class="layout row row--dense wrap">
|
|
||||||
<v-col v-for="i in pageSize" :key="i" cols="12" sm="6" md="4" lg="3">
|
|
||||||
<v-card outlined class="border-highlight light-shadow">
|
|
||||||
<v-list three-line>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-avatar>
|
|
||||||
<v-skeleton-loader type="avatar" />
|
|
||||||
</v-list-item-avatar>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-skeleton-loader
|
|
||||||
type="paragraph"
|
|
||||||
style="max-width: 300px"
|
|
||||||
/>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<v-alert
|
</div>
|
||||||
v-if="!pagedUserPresences.length && search"
|
<v-alert
|
||||||
icon="mdi-account-search"
|
v-if="!pagedUserPresences.length && search"
|
||||||
color="info darken-2"
|
icon="mdi-account-search"
|
||||||
dark
|
color="info darken-2"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
Sua pesquisa não encontrou nenhum usuário.
|
||||||
|
</v-alert>
|
||||||
|
|
||||||
|
<v-footer class="mt-6 light-shadow" absolute>
|
||||||
|
<span v-if="$vuetify.breakpoint.mdAndUp">
|
||||||
|
Ordenando por <em>"visto por último"</em>
|
||||||
|
</span>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
:elevation="0"
|
||||||
|
:disabled="
|
||||||
|
!userPresence ||
|
||||||
|
resultSize >= userPresence.length ||
|
||||||
|
$apollo.queries.userPresence.loading
|
||||||
|
"
|
||||||
|
large
|
||||||
|
icon
|
||||||
|
@click="resultSize += pageSize"
|
||||||
>
|
>
|
||||||
Sua pesquisa não encontrou nenhum usuário.
|
<v-icon>mdi-plus</v-icon>
|
||||||
</v-alert>
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
class="ml-2"
|
||||||
|
icon
|
||||||
|
:elevation="0"
|
||||||
|
:disabled="
|
||||||
|
!userPresence ||
|
||||||
|
resultSize >= userPresence.length ||
|
||||||
|
$apollo.queries.userPresence.loading ||
|
||||||
|
resultSize <= pageSize
|
||||||
|
"
|
||||||
|
large
|
||||||
|
@click="resultSize -= pageSize"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-minus</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-footer>
|
||||||
|
|
||||||
<v-footer class="mt-6 light-shadow" absolute>
|
<v-row class="mt-6">
|
||||||
<span v-if="$vuetify.breakpoint.mdAndUp">
|
<v-col cols="12" md="6">
|
||||||
Ordenando por <em>"visto por último"</em>
|
<v-alert type="info" icon="mdi-alert" border="left" text>
|
||||||
</span>
|
A lista de usuários é obtida através do uso da rede
|
||||||
<v-spacer />
|
<strong>Wi-Fi</strong>. Ela pode não mostrar alguém presente ou
|
||||||
<v-btn
|
indicar alguém que deixou um dispositivo no campus. Use esta lista com
|
||||||
:elevation="0"
|
a <strong>devida cautela</strong>.
|
||||||
:disabled="
|
</v-alert>
|
||||||
!userPresence ||
|
</v-col>
|
||||||
resultSize >= userPresence.length ||
|
|
||||||
$apollo.queries.userPresence.loading
|
|
||||||
"
|
|
||||||
large
|
|
||||||
icon
|
|
||||||
@click="resultSize += pageSize"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-plus</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn
|
|
||||||
class="ml-2"
|
|
||||||
icon
|
|
||||||
:elevation="0"
|
|
||||||
:disabled="
|
|
||||||
!userPresence ||
|
|
||||||
resultSize >= userPresence.length ||
|
|
||||||
$apollo.queries.userPresence.loading ||
|
|
||||||
resultSize <= pageSize
|
|
||||||
"
|
|
||||||
large
|
|
||||||
@click="resultSize -= pageSize"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-minus</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-footer>
|
|
||||||
|
|
||||||
<v-row class="mt-6">
|
<v-col cols="12" md="6">
|
||||||
<v-col cols="12" md="6">
|
<v-alert type="info" icon="mdi-update" text border="left">
|
||||||
<v-alert type="info" icon="mdi-alert" border="left" text>
|
A lista é atualizada automaticamente. Não é necessário
|
||||||
A lista de usuários é obtida através do uso da rede
|
<strong>atualizar</strong> a página.
|
||||||
<strong>Wi-Fi</strong>. Ela pode não mostrar alguém presente ou
|
</v-alert>
|
||||||
indicar alguém que deixou um dispositivo no campus. Use esta lista
|
</v-col>
|
||||||
com a <strong>devida cautela</strong>.
|
</v-row>
|
||||||
</v-alert>
|
</v-container>
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-alert type="info" icon="mdi-update" text border="left">
|
|
||||||
A lista é atualizada automaticamente. Não é necessário
|
|
||||||
<strong>atualizar</strong> a página.
|
|
||||||
</v-alert>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user