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

Format Sign in and statistics component

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-21 23:04:10 +02:00
parent 6f9e9141b7
commit cfad59d139
2 changed files with 80 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/views/SignIn.vue
View File

@ -1,4 +1,4 @@
<template > <template>
<v-container class="fill-height" id="signInListen"> <v-container class="fill-height" id="signInListen">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col cols="12"> <v-col cols="12">
@ -9,7 +9,6 @@
<v-col cols="12" md="8" class="main"> <v-col cols="12" md="8" class="main">
<v-card-text class="mt-1"> <v-card-text class="mt-1">
<h1 class="text-center display-2 logowhite--text">Sign in</h1> <h1 class="text-center display-2 logowhite--text">Sign in</h1>
<v-form> <v-form>
<v-text-field <v-text-field
label="Username" label="Username"
@ -32,7 +31,7 @@
<p id="missing"></p> <p id="missing"></p>
</v-card-text> </v-card-text>
<div class="text-center mt-3"> <div class="text-center mt-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="signin()" >Sign In</v-btn> <v-btn rounded color="logowhite" outlined dark v-on:click="signin()">Sign In</v-btn>
</div> </div>
</v-col> </v-col>
<v-col cols="12" md="4" class="main"> <v-col cols="12" md="4" class="main">
@ -40,7 +39,7 @@
<h1 class="text-center display-1 primary--text">No account yet?</h1> <h1 class="text-center display-1 primary--text">No account yet?</h1>
<div class="text-center ma-12"> <div class="text-center ma-12">
<v-avatar min-width="100" size="230"> <v-avatar min-width="100" size="230">
<img src="../assets/logo_gt.svg" alt="John" /> <img src="../assets/logo_gt.svg" alt="John"/>
</v-avatar> </v-avatar>
</div> </div>
@ -51,7 +50,8 @@
outlined outlined
dark dark
@click="step++" @click="step++"
>Create Account</v-btn> >Create Account
</v-btn>
</div> </div>
</v-card-text> </v-card-text>
</v-col> </v-col>
@ -65,7 +65,7 @@
</v-card-text> </v-card-text>
<div class="text-center ma-12"> <div class="text-center ma-12">
<v-avatar min-width="100" size="230"> <v-avatar min-width="100" size="230">
<img src="../assets/logo_gt.svg" alt="John" /> <img src="../assets/logo_gt.svg" alt="John"/>
</v-avatar> </v-avatar>
</div> </div>
<div class="text-center mt-3"> <div class="text-center mt-3">
@ -112,7 +112,7 @@
<p id="missingR"></p> <p id="missingR"></p>
</v-card-text> </v-card-text>
<div class="text-center mt-n5"> <div class="text-center mt-n5">
<v-btn color="logowhite" rounded outlined v-on:click="signup()" >Sign Up</v-btn> <v-btn color="logowhite" rounded outlined v-on:click="signup()">Sign Up</v-btn>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
@ -125,8 +125,7 @@
</template> </template>
<script> <script>
export default {
export default {
data: () => ({ data: () => ({
step: 1, step: 1,
username: "", username: "",
@ -135,7 +134,6 @@ export default {
lastname: "", lastname: "",
usernameR: "", usernameR: "",
passwordR: "" passwordR: ""
}), }),
props: { props: {
source: String source: String
@ -143,50 +141,46 @@ export default {
methods: { methods: {
signin() { signin() {
if (this.username != "" && this.password != "") { if (this.username != "" && this.password != "") {
document.getElementById("missing").innerHTML= ""; document.getElementById("missing").innerHTML = "";
const loginData = { const loginData = {
username: this.username, username: this.username,
password: this. password password: this.password
} }
this.$emit('signIn', loginData); this.$emit('signIn', loginData);
}else { } else {
document.getElementById("missing").innerHTML= "Please fill out all fields"; document.getElementById("missing").innerHTML = "Please fill out all fields";
} }
}, },
signup(){ signup() {
if (this.usernameR != "" && this.passwordR != "") { if (this.usernameR != "" && this.passwordR != "") {
document.getElementById("missingR").innerHTML= ""; document.getElementById("missingR").innerHTML = "";
const signupData = { const signupData = {
firstname: this.firstname, firstname: this.firstname,
lastname: this.lastname, lastname: this.lastname,
username: this.usernameR, username: this.usernameR,
password: this. passwordR password: this.passwordR
} }
this.$emit('signUp', signupData); this.$emit('signUp', signupData);
}else { } else {
document.getElementById("missingR").innerHTML= "Please fill out all fields"; document.getElementById("missingR").innerHTML = "Please fill out all fields";
} }
} }
}, },
mounted(){ mounted() {
var listen = document.getElementById('signInListen'); var listen = document.getElementById('signInListen');
listen.addEventListener('keyup', (e) => { listen.addEventListener('keyup', (e) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
e.preventDefault(); e.preventDefault();
if(this.step==1){ if (this.step == 1) {
this.signin(); this.signin();
}else{ } else {
this.signup(); this.signup();
} }
} }
});
});
} }
}; };
</script> </script>
<style lang="css" scoped> <style scoped>
</style> </style>

24
frontend/src/views/StatisticOverview.vue
View File

@ -1,32 +1,31 @@
<template> <template>
<v-row class="ma-5"> <v-row class="ma-5">
<v-col cols="4"> <v-col cols="4">
<WorkPausePie /> <WorkPausePie/>
</v-col> </v-col>
<v-col cols="4"> <v-col cols="4">
<account-pie /> <account-pie/>
</v-col> </v-col>
<v-col cols="4"> <v-col cols="4">
<revenue-pie/> <revenue-pie/>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<MonthSummary /> <MonthSummary/>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<WeekSummary /> <WeekSummary/>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
<script> <script>
import RevenuePie from "./charts/RevenuePie.vue" import RevenuePie from "./charts/RevenuePie.vue"
import WeekSummary from "./charts/WeekSummary.vue"; import WeekSummary from "./charts/WeekSummary.vue";
import MonthSummary from "./charts/MonthSummary.vue"; import MonthSummary from "./charts/MonthSummary.vue";
import WorkPausePie from "./charts/WorkPausePie.vue"; import WorkPausePie from "./charts/WorkPausePie.vue";
import AccountPie from "./charts/AccountPie.vue"; import AccountPie from "./charts/AccountPie.vue";
export default { export default {
name: "StatisticOverview", name: "StatisticOverview",
components: { components: {
RevenuePie, RevenuePie,
@ -35,9 +34,8 @@ export default {
WorkPausePie, WorkPausePie,
AccountPie AccountPie
} }
}; };
</script> </script>
<style scoped> <style scoped>
</style> </style>