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

Merge branch '77-list-of-users' into 'master'

Browse Source 
Resolve "List of users"

Closes #77

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!60
This commit is contained in:
Tim Zieger 2020-05-21 08:36:55 +00:00
commit 7488b5bb03
4 changed files with 156 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/App.vue
View File

@ -12,7 +12,7 @@
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
<v-list-item link to="/timerecords" v-bind:class="{'d-none':loggedIn=='false'}">
<v-list-item-action>
<v-icon>mdi-clock</v-icon>
</v-list-item-action>
@ -20,7 +20,7 @@
<v-list-item-title>Time Records</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
<v-list-item link to="/statistics" v-bind:class="{'d-none':loggedIn=='false'}">
<v-list-item-action>
<v-icon>mdi-chart-bar</v-icon>
</v-list-item-action>
@ -36,6 +36,14 @@
<v-list-item-title>About</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link to="/users" v-bind:class="{'d-none':loggedIn=='false'}">
<v-list-item-action>
<v-icon>mdi-account-group</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Users</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
@ -129,7 +137,6 @@
<script>
import SignIn from "./views/SignIn.vue";
//var baseUri = "http://plesk.icaotix.de:5000";
import { baseUri } from "./variables.js";
if (!sessionStorage.getItem("loggedin")) {
@ -185,7 +192,6 @@ export default {
var whoxhttp = new XMLHttpRequest();
whoxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// console.log(whoxhttp.responseText);
var userInformation = JSON.parse(whoxhttp.responseText);
sessionStorage.setItem("firstname", userInformation.firstname);
sessionStorage.setItem("lastname", userInformation.lastname);
@ -194,17 +200,16 @@ export default {
console.log(this.fullname);
this.fullname= sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
//data.reload;
location.reload();
}
};
whoxhttp.open("GET", baseUri + "/whoami", false);
// whoxhttp.withCredentials = true;
whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
whoxhttp.send(null);
location.reload();
}
},
signUp(signupData) {

8
frontend/src/router/index.js
View File

@ -8,7 +8,8 @@ import TimeRecords from "../views/TimeRecords.vue";
import About from "../views/About.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import StatisticOverview from "../views/StatisticOverview.vue"
import StatisticOverview from "../views/StatisticOverview.vue";
import Users from "../views/Users.vue";
Vue.use(VueRouter);
@ -60,6 +61,11 @@ const routes = [
name: "Statistics",
component: StatisticOverview
},
{
path: "/users",
name: "Users",
component: Users
},
{
path: '*',
component: missing

45
frontend/src/views/Users.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div>
<div v-bind:key="user.username" v-for="user in users">
<UsersItems v-bind:user="user" v-on:edit-user="edituser" />
</div>
</div>
</template>
<script>
import { baseUri } from "../variables.js";
import UsersItems from "./UsersItems.vue";
export default {
components: {
UsersItems
},
data: () => ({
users: JSON.parse(sessionStorage.getItem("users"))
}),
methods: {
edituser(username) {
alert("Not Implemented. TimeRecordId: " + username);
}
},
created() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var usersInformation = JSON.parse(xhttp.responseText);
console.log(usersInformation);
console.log(usersInformation._embedded.users);
sessionStorage.setItem(
"users",
JSON.stringify(usersInformation._embedded.users)
);
}
};
xhttp.open("GET", baseUri + "/users", false);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
this.users = JSON.parse(sessionStorage.getItem("users"));
}
};
</script>

92
frontend/src/views/UsersItems.vue Normal file
View File

@ -0,0 +1,92 @@
<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-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>
<script>
export default {
name: "UsersItems",
props: ["user"]
};
</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;
}
</style>