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

126
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,8 +9,7 @@
<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"
v-model="username" v-model="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,68 +125,62 @@
</template> </template>
<script> <script>
export default {
export default { data: () => ({
data: () => ({ step: 1,
step: 1, username: "",
username: "", password: "",
password: "", firstname: "",
firstname: "", lastname: "",
lastname: "", usernameR: "",
usernameR: "", passwordR: ""
passwordR: "" }),
props: {
}), source: String
props: {
source: String
},
methods: {
signin() {
if (this.username != "" && this.password != "") {
document.getElementById("missing").innerHTML= "";
const loginData = {
username: this.username,
password: this. password
}
this.$emit('signIn', loginData);
}else {
document.getElementById("missing").innerHTML= "Please fill out all fields";
}
}, },
signup(){ methods: {
if (this.usernameR != "" && this.passwordR != "") { signin() {
document.getElementById("missingR").innerHTML= ""; if (this.username != "" && this.password != "") {
const signupData = { document.getElementById("missing").innerHTML = "";
firstname: this.firstname, const loginData = {
lastname: this.lastname, username: this.username,
username: this.usernameR, password: this.password
password: this. passwordR }
this.$emit('signIn', loginData);
} else {
document.getElementById("missing").innerHTML = "Please fill out all fields";
}
},
signup() {
if (this.usernameR != "" && this.passwordR != "") {
document.getElementById("missingR").innerHTML = "";
const signupData = {
firstname: this.firstname,
lastname: this.lastname,
username: this.usernameR,
password: this.passwordR
}
this.$emit('signUp', signupData);
} else {
document.getElementById("missingR").innerHTML = "Please fill out all fields";
} }
this.$emit('signUp', signupData);
}else {
document.getElementById("missingR").innerHTML= "Please fill out all fields";
} }
},
mounted() {
var listen = document.getElementById('signInListen');
listen.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
e.preventDefault();
if (this.step == 1) {
this.signin();
} else {
this.signup();
}
}
});
} }
}, };
mounted(){
var listen = document.getElementById('signInListen');
listen.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
e.preventDefault();
if(this.step==1){
this.signin();
}else{
this.signup();
}
}
});
}
};
</script> </script>
<style lang="css" scoped> <style scoped>
</style> </style>

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

@ -1,43 +1,41 @@
<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,
WeekSummary, WeekSummary,
MonthSummary, MonthSummary,
WorkPausePie, WorkPausePie,
AccountPie AccountPie
} }
}; };
</script> </script>
<style scoped> <style scoped>
</style> </style>