Format Sign in and statistics component

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

View File

@ -1,4 +1,4 @@
<template >
<template>
<v-container class="fill-height" id="signInListen">
<v-row align="center" justify="center">
<v-col cols="12">
@ -9,8 +9,7 @@
<v-col cols="12" md="8" class="main">
<v-card-text class="mt-1">
<h1 class="text-center display-2 logowhite--text">Sign in</h1>
<v-form>
<v-form>
<v-text-field
label="Username"
v-model="username"
@ -32,7 +31,7 @@
<p id="missing"></p>
</v-card-text>
<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>
</v-col>
<v-col cols="12" md="4" class="main">
@ -40,7 +39,7 @@
<h1 class="text-center display-1 primary--text">No account yet?</h1>
<div class="text-center ma-12">
<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>
</div>
@ -51,7 +50,8 @@
outlined
dark
@click="step++"
>Create Account</v-btn>
>Create Account
</v-btn>
</div>
</v-card-text>
</v-col>
@ -65,7 +65,7 @@
</v-card-text>
<div class="text-center ma-12">
<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>
</div>
<div class="text-center mt-3">
@ -112,7 +112,7 @@
<p id="missingR"></p>
</v-card-text>
<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>
</v-col>
</v-row>
@ -125,68 +125,62 @@
</template>
<script>
export default {
data: () => ({
step: 1,
username: "",
password: "",
firstname: "",
lastname: "",
usernameR: "",
passwordR: ""
}),
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";
}
export default {
data: () => ({
step: 1,
username: "",
password: "",
firstname: "",
lastname: "",
usernameR: "",
passwordR: ""
}),
props: {
source: String
},
signup(){
if (this.usernameR != "" && this.passwordR != "") {
document.getElementById("missingR").innerHTML= "";
const signupData = {
firstname: this.firstname,
lastname: this.lastname,
username: this.usernameR,
password: this. passwordR
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() {
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>
<style lang="css" scoped>
<style scoped>
</style>

View File

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