hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

users same style as timetrack

Browse Source
This commit is contained in:
Tim Zieger 2020-05-22 13:57:47 +02:00
parent 7488b5bb03
commit 736e571471
3 changed files with 54 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

@ -197,7 +197,7 @@ export default {
sessionStorage.setItem("lastname", userInformation.lastname);
sessionStorage.setItem("username", userInformation.username);
sessionStorage.setItem("role", userInformation.role.name);
console.log(this.fullname);
this.fullname= sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
location.reload();
@ -209,7 +209,7 @@ export default {
whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
whoxhttp.send(null);
location.reload();
}
},
signUp(signupData) {

4
frontend/src/views/Users.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<v-container fluid>
<div v-bind:key="user.username" v-for="user in users">
<UsersItems v-bind:user="user" v-on:edit-user="edituser" />
</div>
</div>
</v-container>
</template>
<script>

128
frontend/src/views/UsersItems.vue
View File

@ -1,58 +1,51 @@
<template>
<div class="time-record-item">
<v-card outlined>
<v-list-item class="main_accent">
<v-list-item-content>
<v-row no-gutters align="center">
<v-col cols="2">
<pre> <v-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</v-avatar>
</pre>
</v-col>
<v-col></v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2">
</v-col>
<v-col></v-col>
</v-row>
</v-list-item-content>
<v-list-item-action>
<v-speed-dial
v-model="fab"
transition="slide-x-reverse-transition"
direction="left"
open-on-hover
>
<template v-slot:activator>
<v-btn v-model="fab" color="background" elevation="0" dark fab>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-pencil</v-icon>
</v-btn>
</template>
<v-btn fab dark small color="green" @click="$emit('edit-user', user.username)">
<v-icon>mdi-file-document-edit</v-icon>
<v-card outlined>
<v-list-item class="main_accent">
<v-list-item-content>
<v-row no-gutters align="center">
<v-col cols="1">
<v-avatar><img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" /></v-avatar>
</v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2"></v-col>
<v-col></v-col>
</v-row>
</v-list-item-content>
<v-list-item-action>
<v-speed-dial
v-model="fab"
transition="slide-x-reverse-transition"
direction="left"
open-on-hover
>
<template v-slot:activator>
<v-btn v-model="fab" color="background" elevation="0" dark fab>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-pencil</v-icon>
</v-btn>
<v-btn fab dark small color="red" @click="$emit('del-user', user.username)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</v-list-item-action>
</v-list-item>
</v-card>
</div>
</template>
<v-btn fab dark small color="green" @click="$emit('edit-user', user.username)">
<v-icon>mdi-file-document-edit</v-icon>
</v-btn>
<v-btn fab dark small color="red" @click="$emit('del-user', user.username)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</v-list-item-action>
</v-list-item>
</v-card>
</template>
<script>
@ -63,30 +56,9 @@ export default {
</script>
<style scoped>
.time-record-item {
background: #131313;
padding: 10px;
border-bottom: 3px #272727 solid;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 0%;
cursor: pointer;
float: right;
}
.edit {
background: #272727;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 0%;
cursor: pointer;
float: right;
margin: 0px;
.v-card {
border-color: #131313 !important;
border-width: 3px !important;
border-radius: 10000px !important;
}
</style>