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

Layout updates

Browse Source
This commit is contained in:
Douglas Barone 2020-12-09 10:32:51 -04:00
parent dcbac7f2c7
commit ad3c6f05a3
7 changed files with 461 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/UserMenu.vue
View File

@ -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>

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

@ -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;

2
web/src/layouts/Default.vue
View File

@ -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>

18
web/src/scss/style.scss
View File

@ -1,5 +1,5 @@
//.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,
@ -7,10 +7,10 @@
// #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,
@ -18,7 +18,7 @@
// #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;
}

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

@ -1,5 +1,6 @@
<template> <template>
<v-container fluid class="mb-12"> <div>
<v-toolbar height="100" class="align-content-center bottom-border" flat>
<v-text-field <v-text-field
v-model="search" v-model="search"
:loading="$apollo.queries.userPresence.loading" :loading="$apollo.queries.userPresence.loading"
@ -9,16 +10,26 @@
prepend-icon="mdi-account-search" prepend-icon="mdi-account-search"
clearable clearable
filled filled
style="max-width: 400px" 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>
<div v-if="stats" class="text-center mb-6 mt-0"> </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> <v-chip color="green" class="mr-2" dark>
{{ stats.onlineUsers }} {{ stats.onlineUsers }}
</v-chip> </v-chip>
usuários online. usuários online.
</div> </div>
<UserPresenceStatusList <UserPresenceStatusList
:user-presences="pagedUserPresences" :user-presences="pagedUserPresences"
:loading="$apollo.queries.userPresence.loading && !userPresence" :loading="$apollo.queries.userPresence.loading && !userPresence"
@ -50,9 +61,9 @@
dark dark
> >
A lista de pessoas mostrada aqui é obtida através do uso da rede 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 <strong>Wi-Fi</strong> Este método não é preciso, podendo não
alguém presente ou indicar alguém que deixou um dispositivo no campus. indicar alguém presente ou indicar alguém que deixou um dispositivo
Use esta lista com a <strong>devida cautela</strong>. no campus. Use esta lista com a <strong>devida cautela</strong>.
</v-alert> </v-alert>
</v-col> </v-col>
@ -70,6 +81,7 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</div>
</template> </template>
<script> <script>

26
web/src/views/WifiDevices.vue
View File

@ -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,7 +29,8 @@
</template> </template>
</v-tooltip> </v-tooltip>
</v-toolbar> </v-toolbar>
<div v-if="stats" class="text-center mb-6 mt-0"> <v-container fluid>
<div v-if="stats" class="text-center my-4">
<v-chip color="green" class="mr-1" dark> <v-chip color="green" class="mr-1" dark>
{{ {{
wifiDevices && wifiDevices.filter(device => device.isOnline).length wifiDevices && wifiDevices.filter(device => device.isOnline).length
@ -193,6 +196,7 @@
</template> </template>
</v-data-iterator> </v-data-iterator>
</v-container> </v-container>
</div>
</template> </template>
<script> <script>

26
web/src/views/WifiUsers.vue
View File

@ -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,7 +29,8 @@
</template> </template>
</v-tooltip> </v-tooltip>
</v-toolbar> </v-toolbar>
<div v-if="stats" class="text-center mb-6 mt-0"> <v-container fluid>
<div v-if="stats" class="text-center my-4">
<v-chip color="green" class="mr-2" dark> <v-chip color="green" class="mr-2" dark>
{{ stats.onlineUsers }} {{ stats.onlineUsers }}
</v-chip> </v-chip>
@ -194,6 +197,7 @@
</template> </template>
</v-data-iterator> </v-data-iterator>
</v-container> </v-container>
</div>
</template> </template>
<script> <script>
import gql from 'graphql-tag' import gql from 'graphql-tag'