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

Format User related stuff

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-21 22:57:58 +02:00
parent ebd5493e46
commit 3321f4a58a
3 changed files with 213 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
frontend/src/views/EditUser.vue
View File

@ -1,11 +1,9 @@
<template > <template>
<v-container> <v-container>
<v-card align-center> <v-card align-center>
<div class="text-center ma-3"> <div class="text-center ma-3">
<p class="text-center logowhite--text" style="font-size:30pt">User to edit:</p> <p class="text-center logowhite--text" style="font-size:30pt">User to edit:</p>
<p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p> <p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p>
</div> </div>
</v-card> </v-card>
<v-card align-center> <v-card align-center>
@ -73,109 +71,97 @@
</v-container> </v-container>
</template> </template>
<script> <script>
import { baseUri} from "../variables"; import {baseUri} from "../variables";
export default {
name: "Edituser",
data: () => ({
firstname: "",
lastname: "",
longitude: "",
latitude: "",
radius: "",
username: sessionStorage.getItem("usernameedit")
}),
methods: { export default {
editUserInformation() { name: "Edituser",
var link = sessionStorage.getItem("edituser"); data: () => ({
document.getElementById("noudata").innerHTML = ""; firstname: "",
var suc; lastname: "",
if (this.firstname != "" && this.lastname != "") { longitude: "",
var xhttp = new XMLHttpRequest(); latitude: "",
radius: "",
xhttp.onreadystatechange = function() { username: sessionStorage.getItem("usernameedit")
if ((this.status == 200) & (this.readyState == 4)) { }),
suc= true;
}
};
xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); methods: {
xhttp.send( editUserInformation() {
"{" + var link = sessionStorage.getItem("edituser");
document.getElementById("noudata").innerHTML = "";
var suc;
if (this.firstname != "" && this.lastname != "") {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if ((this.status == 200) & (this.readyState == 4)) {
suc = true;
}
};
xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(
"{" +
'"firstname": "' + '"firstname": "' +
this.firstname + this.firstname +
'", "lastname": "' + '", "lastname": "' +
this.lastname + this.lastname +
'"}' '"}'
); );
if(suc == true ){ if (suc == true) {
this.$router.push("/users"); this.$router.push("/users");
}
} else if (this.firstname != "") {
var xhttpfirst = new XMLHttpRequest();
xhttpfirst.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
suc = true;
} }
}; } else if (this.firstname != "") {
xhttpfirst.open("PATCH", link, false); var xhttpfirst = new XMLHttpRequest();
xhttpfirst.setRequestHeader("Content-Type", "application/json"); xhttpfirst.onreadystatechange = function () {
xhttpfirst.setRequestHeader( if ((this.status == 200) & (this.readyState == 4)) {
"Authorization", suc = true;
sessionStorage.getItem("jwt") }
); };
xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}'); xhttpfirst.open("PATCH", link, false);
if(suc == true ){ xhttpfirst.setRequestHeader("Content-Type", "application/json");
this.$router.push("/users"); xhttpfirst.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
} xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
} else if (this.lastname != "") { if (suc == true) {
var xhttplast = new XMLHttpRequest(); this.$router.push("/users");
xhttplast.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
suc = true;
} }
}; } else if (this.lastname != "") {
xhttplast.open("PATCH", link, false); var xhttplast = new XMLHttpRequest();
xhttplast.setRequestHeader("Content-Type", "application/json"); xhttplast.onreadystatechange = function () {
xhttplast.setRequestHeader( if ((this.status == 200) & (this.readyState == 4)) {
"Authorization", suc = true;
sessionStorage.getItem("jwt") }
); };
xhttplast.send("{" + '"lastname": "' + this.lastname + '"}'); xhttplast.open("PATCH", link, false);
if(suc == true ){ xhttplast.setRequestHeader("Content-Type", "application/json");
this.$router.push("/users"); xhttplast.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
} xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
} else { if (suc == true) {
document.getElementById("noudata").innerHTML = "please fill out at lest one field"; this.$router.push("/users");
}
},
editLocation() {
var numericerror = false;
var link = sessionStorage.getItem("edituser");
if (this.longitude != "" && this.latitude != "" && this.radius) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
var location = JSON.parse(xhttp.responseText);
sessionStorage.setItem("locationlink", location._links.self.href);
} else if(this.readyState == 4 ){
numericerror = true;
document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
} }
}; } else {
xhttp.open("POST", baseUri + "/locations", false); document.getElementById("noudata").innerHTML = "please fill out at lest one field";
xhttp.setRequestHeader("Content-Type", "application/json"); }
},
editLocation() {
var numericerror = false;
var link = sessionStorage.getItem("edituser");
if (this.longitude != "" && this.latitude != "" && this.radius) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if ((this.status == 201) & (this.readyState == 4)) {
var location = JSON.parse(xhttp.responseText);
sessionStorage.setItem("locationlink", location._links.self.href);
} else if (this.readyState == 4) {
numericerror = true;
document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
}
};
xhttp.open("POST", baseUri + "/locations", false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send( xhttp.send(
"{" + "{" +
'"latitude": "' + '"latitude": "' +
this.latitude + this.latitude +
'", "longitude": "' + '", "longitude": "' +
@ -183,60 +169,51 @@ export default {
'", "radius": "' + '", "radius": "' +
this.radius + this.radius +
'"}' '"}'
);
if (numericerror == false) {
var xhttpadd = new XMLHttpRequest();
var suc;
xhttpadd.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
suc = true;
}
};
xhttpadd.open("PATCH", link, false);
xhttpadd.setRequestHeader("Content-Type", "application/json");
xhttpadd.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
); );
xhttpadd.send(
"{" + if (numericerror == false) {
var xhttpadd = new XMLHttpRequest();
var suc;
xhttpadd.onreadystatechange = function () {
if ((this.status == 200) & (this.readyState == 4)) {
suc = true;
}
};
xhttpadd.open("PATCH", link, false);
xhttpadd.setRequestHeader("Content-Type", "application/json");
xhttpadd.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttpadd.send(
"{" +
'"location": "' + '"location": "' +
sessionStorage.getItem("locationlink") + sessionStorage.getItem("locationlink") +
'"}' '"}'
); );
if (suc == true) { if (suc == true) {
this.$router.push("/users"); this.$router.push("/users");
}
document.getElementById("locationnotcomplete").innerHTML = "";
sessionStorage.removeItem("locationlink");
} }
document.getElementById("locationnotcomplete").innerHTML = ""; } else {
sessionStorage.removeItem("locationlink"); document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
} }
} else {
document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
} }
},
created() {
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var username = JSON.parse(userxhttp.responseText);
sessionStorage.setItem(
"usernameedit",
username.username
);
}
};
userxhttp.open("GET", sessionStorage.getItem("edituser"), false);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
this.username = sessionStorage.getItem("usernameedit");
} }
}, };
created() { </script>
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var username = JSON.parse(userxhttp.responseText);
sessionStorage.setItem(
"usernameedit",
username.username
);
}
};
userxhttp.open("GET",sessionStorage.getItem("edituser"), false);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
this.username = sessionStorage.getItem("usernameedit");
}
};
</script>

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

@ -1,11 +1,12 @@
<template> <template>
<v-container fluid> <v-container fluid>
<div v-bind:key="user.username" v-for="user in users"> <div v-bind:key="user.username" v-for="user in users">
<UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:del-user="deluser" v-on:show-accounts="showAccounts"/> <UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:del-user="deluser"
v-on:show-accounts="showAccounts"/>
</div> </div>
<v-row> <v-row>
<v-col cols="5"></v-col> <v-col cols="5"></v-col>
<v-col cols="1"> <v-col cols="1">
<v-btn v-if="havePrevPage == true" @click="prevPage()"> <v-btn v-if="havePrevPage == true" @click="prevPage()">
<v-icon>mdi-arrow-left</v-icon> <v-icon>mdi-arrow-left</v-icon>
</v-btn> </v-btn>
@ -14,95 +15,85 @@
<v-btn v-if="haveNextPage == true" @click="nextPage()"> <v-btn v-if="haveNextPage == true" @click="nextPage()">
<v-icon>mdi-arrow-right</v-icon> <v-icon>mdi-arrow-right</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="5"></v-col> <v-col cols="5"></v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<script> <script>
import { baseUri} from "../variables.js"; import {baseUri} from "../variables.js";
import UsersItems from "./UsersItems.vue"; import UsersItems from "./UsersItems.vue";
export default {
components: { export default {
UsersItems components: {
}, UsersItems
data: () => ({ },
users: JSON.parse(sessionStorage.getItem("users")), data: () => ({
dialog: false, users: JSON.parse(sessionStorage.getItem("users")),
page: sessionStorage.getItem("page"), dialog: false,
page: sessionStorage.getItem("page"),
haveNextPage: "", haveNextPage: "",
havePrevPage: "" havePrevPage: ""
}), }),
methods: { methods: {
edituser(userlink) { edituser(userlink) {
sessionStorage.setItem("edituser", userlink);
sessionStorage.setItem("edituser", userlink); this.$router.push("/edituser");
},
this.$router.push( "/edituser"); deluser(selfLink) {
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 204) {
location.reload();
}
};
userxhttp.open("DELETE", selfLink, false);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
},
showAccounts(username, uid) {
sessionStorage.setItem("timeTrackAccountListUser", username);
sessionStorage.setItem("timeTrackAccountListUserId", uid);
this.$router.push("/timetrackaccounts");
},
nextPage() {
var pageTMP = parseInt(this.page) + 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
},
prevPage() {
var pageTMP = parseInt(this.page) - 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
}
}, },
deluser(selfLink){ created() {
var userxhttp = new XMLHttpRequest(); var userLinks;
userxhttp.onreadystatechange = function() { if (this.page == null) {
if (this.readyState == 4 && this.status == 204) { this.page = 0;
location.reload(); }
sessionStorage.removeItem("page");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var usersInformation = JSON.parse(xhttp.responseText);
sessionStorage.setItem("users", JSON.stringify(usersInformation._embedded.users));
userLinks = usersInformation._links;
} }
}; };
userxhttp.open("DELETE", selfLink , false); xhttp.open("GET", baseUri + "/users?page=" + this.page, false);
userxhttp.setRequestHeader( xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
"Authorization",
sessionStorage.getItem("jwt")
);
userxhttp.send(null); xhttp.send(null);
}, if (userLinks.next != undefined) {
showAccounts(username, uid) { this.haveNextPage = true;
sessionStorage.setItem("timeTrackAccountListUser", username);
sessionStorage.setItem("timeTrackAccountListUserId", uid);
this.$router.push("/timetrackaccounts");
},
nextPage() {
var pageTMP = parseInt(this.page) + 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
},
prevPage() {
var pageTMP = parseInt(this.page) - 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
}
},
created() {
var userLinks;
if (this.page == null) {
this.page = 0;
}
sessionStorage.removeItem("page");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var usersInformation = JSON.parse(xhttp.responseText);
sessionStorage.setItem(
"users",
JSON.stringify(usersInformation._embedded.users)
);
userLinks = usersInformation._links;
} }
}; if (userLinks.prev != undefined) {
xhttp.open("GET", baseUri + "/users?page=" +this.page, false); this.havePrevPage = true;
}
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); this.users = JSON.parse(sessionStorage.getItem("users"));
xhttp.send(null);
if (userLinks.next != undefined) {
this.haveNextPage = true;
} }
if (userLinks.prev != undefined) { };
this.havePrevPage = true; </script>
}
this.users = JSON.parse(sessionStorage.getItem("users"));
}
};
</script>

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

@ -5,10 +5,9 @@
<v-row no-gutters align="center"> <v-row no-gutters align="center">
<v-col cols="1"> <v-col cols="1">
<v-avatar> <v-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" /> <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"/>
</v-avatar> </v-avatar>
</v-col> </v-col>
<v-col cols="3"> <v-col cols="3">
<v-card color="background" elevation="0"> <v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre> <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
@ -26,12 +25,7 @@
</v-row> </v-row>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-speed-dial <v-speed-dial v-model="fab" transition="slide-x-reverse-transition" direction="left" open-on-hover>
v-model="fab"
transition="slide-x-reverse-transition"
direction="left"
open-on-hover
>
<template v-slot:activator> <template v-slot:activator>
<v-btn v-model="fab" color="background" elevation="0" dark fab> <v-btn v-model="fab" color="background" elevation="0" dark fab>
<v-icon v-if="fab">mdi-close</v-icon> <v-icon v-if="fab">mdi-close</v-icon>
@ -54,26 +48,25 @@
</template> </template>
<script> <script>
export default { export default {
name: "UsersItems", name: "UsersItems",
props: ["user"], props: ["user"],
data: () => ({ data: () => ({
fab: undefined, fab: undefined,
}), }),
methods: { methods: {
getUid(hrefTmp) { getUid(hrefTmp) {
var parts = hrefTmp.split("/"); var parts = hrefTmp.split("/");
return parts[4]; return parts[4];
}
} }
} };
};
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-color: #131313 !important; border-color: #131313 !important;
border-width: 3px !important; border-width: 3px !important;
border-radius: 10000px !important; border-radius: 10000px !important;
} }
</style> </style>