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

Format App.vue

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-21 23:09:16 +02:00
parent cfad59d139
commit 695df651e1
1 changed files with 119 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
frontend/src/App.vue
View File

@ -57,7 +57,7 @@
<!-- Top menu bar --> <!-- Top menu bar -->
<v-app-bar app clipped-left class="main" elevation="10"> <v-app-bar app clipped-left class="main" elevation="10">
<v-app-bar-nav-icon @click.stop="drawer = !drawer" /> <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
<v-img @click="forward" src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img> <v-img @click="forward" src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
<v-toolbar-title>Geo Timetracking</v-toolbar-title> <v-toolbar-title>Geo Timetracking</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -80,7 +80,7 @@
<v-list> <v-list>
<v-list-item> <v-list-item>
<v-list-item-avatar> <v-list-item-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" /> <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"/>
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
@ -93,7 +93,6 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -104,7 +103,6 @@
</v-menu> </v-menu>
<v-card v-if="loggedIn == 'false'"> <v-card v-if="loggedIn == 'false'">
<!-- Modal --> <!-- Modal -->
<v-row justify="center"> <v-row justify="center">
<v-dialog v-model="dialog" width="70%" persistent> <v-dialog v-model="dialog" width="70%" persistent>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
@ -117,7 +115,7 @@
<v-icon>mdi-window-close</v-icon> <v-icon>mdi-window-close</v-icon>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
<SignIn v-on:signIn="signIn" v-on:signUp="signUp" /> <SignIn v-on:signIn="signIn" v-on:signUp="signUp"/>
<p id="loginError"></p> <p id="loginError"></p>
</v-card> </v-card>
</v-dialog> </v-dialog>
@ -127,7 +125,7 @@
<!-- Routed pages are inserted here --> <!-- Routed pages are inserted here -->
<v-content> <v-content>
<router-view /> <router-view/>
</v-content> </v-content>
<!-- Footer on bottom --> <!-- Footer on bottom -->
@ -139,102 +137,89 @@
</template> </template>
<script> <script>
import SignIn from "./views/SignIn.vue"; import SignIn from "./views/SignIn.vue";
import { baseUri } from "./variables.js"; import {baseUri} from "./variables.js";
if (!sessionStorage.getItem("loggedin")) { if (!sessionStorage.getItem("loggedin")) {
sessionStorage.setItem("loggedin", false); sessionStorage.setItem("loggedin", false);
} }
export default { export default {
components: { components: {
SignIn SignIn
},
props: {
source: String
},
data: () => ({
drawer: null,
dialog: false,
menu: false,
loggedIn: sessionStorage.getItem("loggedin"),
fullname:
sessionStorage.getItem("firstname") +
" " +
sessionStorage.getItem("lastname")
}),
methods: {
forward() {
this.$router.push("/");
}, },
signIn(loginData) { props: {
var xhttp = new XMLHttpRequest(); source: String
},
data: () => ({
drawer: null,
dialog: false,
menu: false,
loggedIn: sessionStorage.getItem("loggedin"),
fullname: sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname")
}),
methods: {
forward() {
this.$router.push("/");
},
signIn(loginData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function () {
if ((this.status == 200) & (this.readyState == 4)) { if ((this.status == 200) & (this.readyState == 4)) {
sessionStorage.setItem( sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
"jwt", sessionStorage.setItem("loggedin", true);
this.getResponseHeader("Authorization") } else if (this.status != 200 && this.status != 0) {
); document.getElementById("loginError").innerHTML =
sessionStorage.setItem("loggedin", true); "Login not successfull";
} else if (this.status != 200 && this.status != 0) { }
document.getElementById("loginError").innerHTML = };
"Login not successfull";
}
};
xhttp.open("POST", baseUri + "/login", false); xhttp.open("POST", baseUri + "/login", false);
xhttp.send( xhttp.send(
'{"username": "' + '{"username": "' +
loginData.username + loginData.username +
'", "password": "' + '", "password": "' +
loginData.password + loginData.password +
'"}' '"}'
); );
if (sessionStorage.getItem("loggedin") == "true") { if (sessionStorage.getItem("loggedin") == "true") {
sessionStorage.setItem("haveData", true); sessionStorage.setItem("haveData", true);
var whoxhttp = new XMLHttpRequest(); var whoxhttp = new XMLHttpRequest();
whoxhttp.onreadystatechange = function() { whoxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var userInformation = JSON.parse(whoxhttp.responseText); var userInformation = JSON.parse(whoxhttp.responseText);
sessionStorage.setItem("firstname", userInformation.firstname); sessionStorage.setItem("firstname", userInformation.firstname);
sessionStorage.setItem("lastname", userInformation.lastname); sessionStorage.setItem("lastname", userInformation.lastname);
sessionStorage.setItem("username", userInformation.username); sessionStorage.setItem("username", userInformation.username);
sessionStorage.setItem("userIDOwn", userInformation.id); sessionStorage.setItem("userIDOwn", userInformation.id);
this.fullname = this.fullname = sessionStorage.getItem("firstname")
sessionStorage.getItem("firstname") + + " "
" " + + sessionStorage.getItem("lastname");
sessionStorage.getItem("lastname"); location.reload();
}
};
whoxhttp.open("GET", baseUri + "/whoami", false);
whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
whoxhttp.send(null);
location.reload();
}
},
signUp(signupData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if ((this.status == 201) & (this.readyState == 4)) {
location.reload(); location.reload();
} else if (this.status != 201 && this.status != 0) {
document.getElementById("loginError").innerHTML = "The username already exist";
} }
}; };
whoxhttp.open("GET", baseUri + "/whoami", false); xhttp.open("POST", baseUri + "/sign-up", true);
xhttp.setRequestHeader("Content-Type", "application/json");
whoxhttp.setRequestHeader( xhttp.send(
"Authorization", "{" +
sessionStorage.getItem("jwt")
);
whoxhttp.send(null);
location.reload();
}
},
signUp(signupData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
location.reload();
} else if (this.status != 201 && this.status != 0) {
document.getElementById("loginError").innerHTML =
"The username already exist";
}
};
xhttp.open("POST", baseUri + "/sign-up", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(
"{" +
'"firstname": "' + '"firstname": "' +
signupData.firstname + signupData.firstname +
'", "lastname": "' + '", "lastname": "' +
@ -244,66 +229,59 @@ export default {
'", "password": "' + '", "password": "' +
signupData.password + signupData.password +
'"}' '"}'
); );
}, },
logout() { logout() {
sessionStorage.clear(); sessionStorage.clear();
sessionStorage.setItem("loggedin", false); sessionStorage.setItem("loggedin", false);
location.reload(); location.reload();
}, },
toAccounts() { toAccounts() {
sessionStorage.setItem( sessionStorage.setItem("timeTrackAccountListUser", sessionStorage.getItem("username"));
"timeTrackAccountListUser", var xhttp = new XMLHttpRequest();
sessionStorage.getItem("username") xhttp.onreadystatechange = function () {
); if (this.readyState == 4 && this.status == 200) {
var xhttp = new XMLHttpRequest(); var usersInformation = JSON.parse(xhttp.responseText);
xhttp.onreadystatechange = function() { sessionStorage.setItem(
if (this.readyState == 4 && this.status == 200) { "timeTrackAccountListUserId",
var usersInformation = JSON.parse(xhttp.responseText); usersInformation._links.self.href
sessionStorage.setItem( );
"timeTrackAccountListUserId", }
usersInformation._links.self.href };
); xhttp.open(
} "GET",
}; baseUri +
xhttp.open(
"GET",
baseUri +
"/users/search/byUsername?username=" + "/users/search/byUsername?username=" +
sessionStorage.getItem("username"), sessionStorage.getItem("username"),
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
this.users = JSON.parse(sessionStorage.getItem("users"));
xhttp.send(null); if (this.$route.path == "/timetrackaccounts") {
this.users = JSON.parse(sessionStorage.getItem("users")); location.reload();
} else {
if (this.$route.path == "/timetrackaccounts" ) { this.$router.push("/timetrackaccounts");
}
location.reload();
}else{
this.$router.push("/timetrackaccounts");
} }
},
created() {
this.$vuetify.theme.dark = true;
} }
}, };
created() {
this.$vuetify.theme.dark = true;
}
};
</script> </script>
<style scoped> <style scoped>
.link { .link {
color: #f1f1f1f1; color: #f1f1f1f1;
text-decoration: none; text-decoration: none;
} }
.v-application {
font-family: "Montserrat", sans-serif; .v-application {
background-color: var(--v-background-base) !important; font-family: "Montserrat", sans-serif;
} background-color: var(--v-background-base) !important;
}
</style> </style>