Format Sign in and statistics component

frontend/src/views/SignIn.vue

@@ -1,4 +1,4 @@
-<template >
+<template>
   <v-container class="fill-height" id="signInListen">
     <v-row align="center" justify="center">
       <v-col cols="12">
@@ -9,7 +9,6 @@
                 <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-text-field
                         label="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 {
-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>
 
-<style lang="css" scoped>
+<style scoped>
 </style>

frontend/src/views/StatisticOverview.vue

@@ -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 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>
 
-
 <style scoped>
 </style>