used prettier on code

src/App.vue

@@ -1,24 +1,20 @@
 <template>
   <v-app>
-    <router-view/>
+    <router-view />
-    <v-footer
+    <v-footer app>
-            app
-    >
       <span class="px-4">&copy; {{ new Date().getFullYear()}} Studentenclub Wu 5 e.v.</span>
     </v-footer>
   </v-app>
 </template>
 
 <script>
-
 export default {
   name: 'App',
 
-  components: {
+  components: {},
-  },
 
   data: () => ({
     //
-  }),
+  })
-};
+}
 </script>

src/components/TitleBar.vue

@@ -1,17 +1,10 @@
 <template>
-    <v-app-bar
+  <v-app-bar app clipped-left hide-on-scroll color="blue accent-4" class="elevation-4" dark>
-            app
-            clipped-left
-            hide-on-scroll
-            color="blue accent-4"
-            class="elevation-4"
-            dark>
-
     <v-btn icon>
       <v-img src="@/assets/logo-big.png" contain height="40"></v-img>
     </v-btn>
     <v-toolbar-title>WU5-Dashboard</v-toolbar-title>
-        <v-spacer/>
+    <v-spacer />
     <v-btn icon v-if="isFinanzer" href="finanzer">
       <v-icon>attach_money</v-icon>
     </v-btn>
@@ -23,10 +16,10 @@
 </template>
 
 <script>
-    import {mapActions} from "vuex";
+import { mapActions } from 'vuex'
 
-    export default {
+export default {
-        name: "TitleBar",
+  name: 'TitleBar',
   computed: {
     isBar() {
       try {
@@ -37,7 +30,9 @@
     },
     isFinanzer() {
       try {
-                    return this.$store.getters.getGroup.includes('moneymaster') ? true : false
+        return this.$store.getters.getGroup.includes('moneymaster')
+          ? true
+          : false
       } catch (e) {
         return false
       }
@@ -47,13 +42,10 @@
     }
   },
   methods: {
-            ...mapActions([
+    ...mapActions(['logout'])
-                'logout'
-            ])
-        }
   }
+}
 </script>
 
 <style scoped>
-
 </style>

src/components/baruser/CreditLists.vue

@@ -11,54 +11,77 @@
               <v-col cols="10">
                 <v-row>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 200})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">2 €
+                      class="creditBtn"
-                                        </v-btn>
+                      block
+                      @click="addAmount({username: user.username, amount: 200})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >2 €</v-btn>
                   </v-col>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 100})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">1 €
+                      class="creditBtn"
-                                        </v-btn>
+                      block
+                      @click="addAmount({username: user.username, amount: 100})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >1 €</v-btn>
                   </v-col>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 50})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">
+                      class="creditBtn"
-                                            0,50 €
+                      block
-                                        </v-btn>
+                      @click="addAmount({username: user.username, amount: 50})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >0,50 €</v-btn>
                   </v-col>
                 </v-row>
                 <v-row>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username:user.username, amount: 40})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">
+                      class="creditBtn"
-                                            0,40 €
+                      block
-                                        </v-btn>
+                      @click="addAmount({username:user.username, amount: 40})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >0,40 €</v-btn>
                   </v-col>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 20})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">
+                      class="creditBtn"
-                                            0,20 €
+                      block
-                                        </v-btn>
+                      @click="addAmount({username: user.username, amount: 20})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >0,20 €</v-btn>
                   </v-col>
                   <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 10})"
+                    <v-btn
-                                               :color="color" :disabled="user.locked">
+                      class="creditBtn"
-                                            0,10 €
+                      block
-                                        </v-btn>
+                      @click="addAmount({username: user.username, amount: 10})"
+                      :color="color"
+                      :disabled="user.locked"
+                    >0,10 €</v-btn>
                   </v-col>
                 </v-row>
               </v-col>
               <v-col align-self="center">
                 <v-row>
                   <v-list-item>
-                                        <v-list-item-action-text :class="getColor(user.type)">
+                    <v-list-item-action-text
-                                            {{(user.amount/100).toFixed(2)}} €
+                      :class="getColor(user.type)"
-                                        </v-list-item-action-text>
+                    >{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
                   </v-list-item>
                 </v-row>
               </v-col>
             </v-row>
-                        <v-alert v-if="user.locked" type="error">{{user.firstname}} darf nicht mehr anschreiben. {{user.firstname}} sollte sich lieber mal beim Finanzer melden.</v-alert>
+            <v-alert
+              v-if="user.locked"
+              type="error"
+            >{{user.firstname}} darf nicht mehr anschreiben. {{user.firstname}} sollte sich lieber mal beim Finanzer melden.</v-alert>
           </v-card-text>
         </v-card>
       </v-container>
@@ -67,16 +90,14 @@
 </template>
 
 <script>
-    import { mapGetters, mapActions } from 'vuex';
+import { mapGetters, mapActions } from 'vuex'
 
-    export default {
+export default {
-        name: "CreditLists",
+  name: 'CreditLists',
-        props: {
+  props: {},
-        },
+  data() {
-        data () {
     return {
-                color: 'green accent-4',
+      color: 'green accent-4'
-
     }
   },
   created() {
@@ -92,16 +113,15 @@
     getColor(type) {
       return type === 'credit' ? 'title green--text' : 'title red--text'
     }
-
   },
   computed: {
-            ...mapGetters({users: 'barUsers/users'})
+    ...mapGetters({ users: 'barUsers/users' })
-        }
   }
+}
 </script>
 
 <style scoped>
-    .creditBtn {
+.creditBtn {
   margin: 2px;
-    }
+}
 </style>

src/components/baruser/SearchBar.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
     <v-toolbar>
-            <v-spacer/>
+      <v-spacer />
       <v-toolbar-items>
-                <v-autocomplete outlined return-object v-model="user" style="margin-top: 3px"
+        <v-autocomplete
-                                placeholder="Suche Person" :items="allUsers" item-text="fullName"
+          outlined
-                                prepend-inner-icon="search" full-width/>
+          return-object
+          v-model="user"
+          style="margin-top: 3px"
+          placeholder="Suche Person"
+          :items="allUsers"
+          item-text="fullName"
+          prepend-inner-icon="search"
+          full-width
+        />
         <v-btn text @click="addUser">Hinzufügen</v-btn>
       </v-toolbar-items>
     </v-toolbar>
@@ -13,23 +21,20 @@
 </template>
 
 <script>
-    import { mapGetters, mapActions } from 'vuex';
+import { mapGetters, mapActions } from 'vuex'
 
-    export default {
+export default {
-        name: "SearchBar",
+  name: 'SearchBar',
-        props: {
+  props: {},
-
+  data() {
-        },
-        data () {
     return {
-
+      user: null
-                user: null,
     }
   },
   created() {
     this.getAllUsers()
   },
-        methods : {
+  methods: {
     ...mapActions({
       getAllUsers: 'barUsers/getAllUsers',
       addCreditList: 'barUsers/addCreditList'
@@ -40,11 +45,10 @@
     }
   },
   computed: {
-            ...mapGetters({ allUsers: 'barUsers/allUsers'}),
+    ...mapGetters({ allUsers: 'barUsers/allUsers' })
-        }
   }
+}
 </script>
 
 <style scoped>
-
 </style>

src/components/finanzer/Overview.vue

@@ -2,13 +2,19 @@
   <div>
     <v-toolbar tile>
       <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
-            <v-spacer/>
+      <v-spacer />
       <v-toolbar-items>
-                <v-btn text icon @click="countYear(false)"><v-icon>keyboard_arrow_left</v-icon></v-btn>
+        <v-btn text icon @click="countYear(false)">
-                <v-list-item><v-list-item-title class="title">{{year}}</v-list-item-title></v-list-item>
+          <v-icon>keyboard_arrow_left</v-icon>
-                <v-btn text icon @click="countYear(true)" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+        </v-btn>
+        <v-list-item>
+          <v-list-item-title class="title">{{year}}</v-list-item-title>
+        </v-list-item>
+        <v-btn text icon @click="countYear(true)" :disabled="isActualYear">
+          <v-icon>keyboard_arrow_right</v-icon>
+        </v-btn>
       </v-toolbar-items>
-            <v-spacer/>
+      <v-spacer />
       <v-toolbar-items>
         <v-btn text @click="sendMails">Emails senden</v-btn>
         <v-text-field v-model="filter" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
@@ -17,28 +23,32 @@
     <v-expand-transition>
       <v-card style="margin-top: 3px" v-show="errorMails">
         <v-row>
-                <v-spacer/>
+          <v-spacer />
-                <v-btn text icon style="margin-right: 5px"
+          <v-btn
-                       @click="errorExpand ? errorExpand = false : errorExpand = true">
+            text
+            icon
+            style="margin-right: 5px"
+            @click="errorExpand ? errorExpand = false : errorExpand = true"
+          >
             <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
           </v-btn>
         </v-row>
         <v-expand-transition>
           <div v-show="errorExpand">
-                    <v-alert v-for="error in errorMails" :key="errorMails.indexOf(error)"
+            <v-alert
+              v-for="error in errorMails"
+              :key="errorMails.indexOf(error)"
               dense
               :type="computeError(error.error)"
-                             >{{errorMessage(error)}}
+            >{{errorMessage(error)}}</v-alert>
-                    </v-alert>
           </div>
         </v-expand-transition>
       </v-card>
     </v-expand-transition>
     <div v-for="user in users" :key="users.indexOf(user)">
-            <v-card v-if="user.creditList[year] && isFiltered(user)"
+      <v-card v-if="user.creditList[year] && isFiltered(user)" style="margin-top: 3px">
-                    style="margin-top: 3px">
         <v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title>
-                <Table v-bind:user="user" v-bind:year="year"/>
+        <Table v-bind:user="user" v-bind:year="year" />
         <v-container fluid>
           <v-row align="start" align-content="start">
             <v-col>
@@ -47,9 +57,10 @@
                   <v-label>Vorjahr:</v-label>
                 </v-col>
                 <v-col>
-                                    <v-chip outlined :text-color="getLastColor(user.creditList[year][1].last)">
+                  <v-chip
-                                        {{(user.creditList[year][1].last / 100).toFixed(2)}}
+                    outlined
-                                    </v-chip>
+                    :text-color="getLastColor(user.creditList[year][1].last)"
+                  >{{(user.creditList[year][1].last / 100).toFixed(2)}}</v-chip>
                 </v-col>
               </v-row>
               <v-row>
@@ -57,8 +68,11 @@
                   <v-label>Gesamt:</v-label>
                 </v-col>
                 <v-col>
-                                    <v-chip outlined x-large
+                  <v-chip
-                                            :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))">
+                    outlined
+                    x-large
+                    :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))"
+                  >
                     {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
                     100).toFixed(2)}}
                   </v-chip>
@@ -68,16 +82,19 @@
             <v-col align-self="center">
               <v-row>
                 <v-col>
-                                    <v-label>Status: </v-label>
+                  <v-label>Status:</v-label>
                 </v-col>
                 <v-col>
-                                    <v-chip outlined :text-color="getLockedColor(user.locked)">{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+                  <v-chip
+                    outlined
+                    :text-color="getLockedColor(user.locked)"
+                  >{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
                 </v-col>
               </v-row>
               <v-card outlined>
                 <v-row>
                   <v-card-title class="subtitle-2">Geld transferieren</v-card-title>
-                                    <v-spacer/>
+                  <v-spacer />
                   <v-btn text icon style="margin-right: 5px" @click="setExpand(user)">
                     <v-icon :class="isExpand(user.expand)" dense>$expand</v-icon>
                   </v-btn>
@@ -87,25 +104,39 @@
                     <v-form style="margin-left: 15px; margin-right: 15px">
                       <v-row>
                         <v-col>
-                                                    <v-text-field :rules="[isNumber]" label="Betrag"
+                          <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
-                                                                  v-model="amount"></v-text-field>
                         </v-col>
                         <v-col>
-                                                    <v-select return-object v-model="type" label="Typ"
+                          <v-select
+                            return-object
+                            v-model="type"
+                            label="Typ"
                             :items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]"
-                                                              item-text="text" item-value="value"></v-select>
+                            item-text="text"
+                            item-value="value"
+                          ></v-select>
                         </v-col>
                       </v-row>
                       <v-row>
                         <v-col>
-                                                    <v-select return-object v-model="selectedYear" label="Jahr"
+                          <v-select
-                                                              :items="years" item-text="text"
+                            return-object
-                                                              item-value="value"></v-select>
+                            v-model="selectedYear"
+                            label="Jahr"
+                            :items="years"
+                            item-text="text"
+                            item-value="value"
+                          ></v-select>
                         </v-col>
                         <v-col>
-                                                    <v-select return-object v-model="selectedMonth" label="Monat"
+                          <v-select
-                                                              :items="months" item-text="text"
+                            return-object
-                                                              item-value="value"></v-select>
+                            v-model="selectedMonth"
+                            label="Monat"
+                            :items="months"
+                            item-text="text"
+                            item-value="value"
+                          ></v-select>
                         </v-col>
                       </v-row>
                     </v-form>
@@ -122,50 +153,66 @@
 </template>
 
 <script>
-    import Table from "./Table";
+import Table from './Table'
-    import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
-    export default {
+export default {
-        name: "Overview",
+  name: 'Overview',
-        components: {Table},
+  components: { Table },
-        props: {
+  props: {},
-        },
+  data() {
-        data () {
     return {
-
       errorExpand: false,
 
-                filter: "",
+      filter: '',
 
       amount: null,
       isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
-                type: {value: 'credit', text: 'Guthaben'},
+      type: { value: 'credit', text: 'Guthaben' },
-                selectedYear: {value: new Date().getFullYear(), text: new Date().getFullYear()},
+      selectedYear: {
-                selectedMonth: {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+        value: new Date().getFullYear(),
-                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+        text: new Date().getFullYear()
-                    ][new Date().getMonth()]}
+      },
+      selectedMonth: {
+        value: new Date().getMonth() + 1,
+        text: [
+          'Januar',
+          'Februar',
+          'März',
+          'April',
+          'Mai',
+          'Juni',
+          'Juli',
+          'August',
+          'September',
+          'Oktober',
+          'November',
+          'Dezember'
+        ][new Date().getMonth()]
+      }
     }
   },
   created() {
     // eslint-disable-next-line no-console
     console.log(this.getData(this.createYears()))
-
   },
   methods: {
-            ...mapActions({createYears: 'finanzerUsers/createYears',
+    ...mapActions({
+      createYears: 'finanzerUsers/createYears',
       addAmount: 'finanzerUsers/addAmount',
       addCredit: 'finanzerUsers/addCredit',
       countYear: 'finanzerUsers/countYear',
-                sendMails: 'finanzerUsers/sendMails'}),
+      sendMails: 'finanzerUsers/sendMails'
+    }),
     async getData(promise) {
       return await promise
     },
-            getLastColor (value) {
+    getLastColor(value) {
       return value < 0 ? 'red' : 'green'
     },
     getAllSum(sum, lastYear) {
       return lastYear + sum
     },
-            getLockedColor (value) {
+    getLockedColor(value) {
       return value ? 'red' : 'green'
     },
     computeError(error) {
@@ -173,11 +220,25 @@
       else return 'success'
     },
     errorMessage(error) {
-                if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
+      if (error.error)
-                else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
+        return (
+          'Konnte Email an ' +
+          error.user.firstname +
+          ' ' +
+          error.user.lastname +
+          ' nicht senden!'
+        )
+      else
+        return (
+          'Email wurde an ' +
+          error.user.firstname +
+          ' ' +
+          error.user.lastname +
+          ' versandt.'
+        )
     },
     setExpand(user) {
-                user.expand ? user.expand=false : user.expand=true
+      user.expand ? (user.expand = false) : (user.expand = true)
     },
     isExpand(value) {
       return value ? 'rotate' : ''
@@ -185,43 +246,78 @@
     // eslint-disable-next-line no-unused-vars
     add(user) {
       if (this.type.value === 'amount') {
-                    this.addAmount({user: user, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+        this.addAmount({
+          user: user,
+          amount: this.amount,
+          year: this.selectedYear.value,
+          month: this.selectedMonth.value
+        })
       }
       if (this.type.value === 'credit') {
-                    this.addCredit( {user: user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+        this.addCredit({
+          user: user,
+          credit: this.amount,
+          year: this.selectedYear.value,
+          month: this.selectedMonth.value
+        })
       }
 
-                this.createDefault(this.amount, this.type, this.selectedYear, this.selectedMonth)
+      this.createDefault(
-
+        this.amount,
+        this.type,
+        this.selectedYear,
+        this.selectedMonth
+      )
     },
     isFiltered(user) {
-              return user.firstname.toLowerCase().includes(this.filter.toLowerCase()) || user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+      return (
+        user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
+        user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+      )
     },
     createDefault() {
       this.amount = null
-                this.type = {value: 'credit', text: 'Guthaben'}
+      this.type = { value: 'credit', text: 'Guthaben' }
-                this.selectedYear = {value: new Date().getFullYear(), text: new Date().getFullYear()}
+      this.selectedYear = {
-                this.selectedMonth = {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+        value: new Date().getFullYear(),
-                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+        text: new Date().getFullYear()
-                    ][new Date().getMonth()]}
+      }
-            },
+      this.selectedMonth = {
+        value: new Date().getMonth() + 1,
+        text: [
+          'Januar',
+          'Februar',
+          'März',
+          'April',
+          'Mai',
+          'Juni',
+          'Juli',
+          'August',
+          'September',
+          'Oktober',
+          'November',
+          'Dezember'
+        ][new Date().getMonth()]
+      }
+    }
   },
   computed: {
     isActualYear() {
       return this.year === new Date().getFullYear()
     },
-            ...mapGetters({users: 'finanzerUsers/users',
+    ...mapGetters({
+      users: 'finanzerUsers/users',
       errorMails: 'finanzerUsers/errorMails',
       year: 'finanzerUsers/year',
       years: 'finanzerUsers/years',
-                months: 'finanzerUsers/months'})
+      months: 'finanzerUsers/months'
-        }
+    })
-
   }
+}
 </script>
 
 <style scoped>
-    .rotate {
+.rotate {
   transform: rotate(180deg);
-    }
+}
 </style>

src/components/finanzer/Table.vue

@@ -1,66 +1,74 @@
 <template>
-    <v-data-table
+  <v-data-table dense :headers="headers" :items="user.creditList[year]" :hide-default-footer="true">
-            dense
-            :headers="headers"
-            :items="user.creditList[year]"
-            :hide-default-footer="true">
     <template v-slot:item.jan_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.jan_amount)">{{(item.jan_amount /
+      <v-chip outlined :text-color="getColor(item, item.jan_amount)">
+        {{(item.jan_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.feb_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.feb_amount)">{{(item.feb_amount /
+      <v-chip outlined :text-color="getColor(item, item.feb_amount)">
+        {{(item.feb_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.maer_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.maer_amount)">{{(item.maer_amount /
+      <v-chip outlined :text-color="getColor(item, item.maer_amount)">
+        {{(item.maer_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.apr_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.apr_amount)">{{(item.apr_amount /
+      <v-chip outlined :text-color="getColor(item, item.apr_amount)">
+        {{(item.apr_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.mai_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.mai_amount)">{{(item.mai_amount /
+      <v-chip outlined :text-color="getColor(item, item.mai_amount)">
+        {{(item.mai_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.jun_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.jun_amount)">{{(item.jun_amount /
+      <v-chip outlined :text-color="getColor(item, item.jun_amount)">
+        {{(item.jun_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.jul_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.jul_amount)">{{(item.jul_amount /
+      <v-chip outlined :text-color="getColor(item, item.jul_amount)">
+        {{(item.jul_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.aug_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.aug_amount)">{{(item.aug_amount /
+      <v-chip outlined :text-color="getColor(item, item.aug_amount)">
+        {{(item.aug_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.sep_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.sep_amount)">{{(item.sep_amount /
+      <v-chip outlined :text-color="getColor(item, item.sep_amount)">
+        {{(item.sep_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.okt_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.okt_amount)">{{(item.okt_amount /
+      <v-chip outlined :text-color="getColor(item, item.okt_amount)">
+        {{(item.okt_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.nov_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.nov_amount)">{{(item.nov_amount /
+      <v-chip outlined :text-color="getColor(item, item.nov_amount)">
+        {{(item.nov_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
     <template v-slot:item.dez_amount="{ item }">
-            <v-chip outlined :text-color="getColor(item, item.dez_amount)">{{(item.dez_amount /
+      <v-chip outlined :text-color="getColor(item, item.dez_amount)">
+        {{(item.dez_amount /
         100).toFixed(2)}}
       </v-chip>
     </template>
@@ -71,13 +79,13 @@
 </template>
 
 <script>
-    export default {
+export default {
-        name: "Table",
+  name: 'Table',
   props: {
     user: Object,
-            year: Number,
+    year: Number
   },
-        data () {
+  data() {
     return {
       headers: [
         {
@@ -86,33 +94,32 @@
           sortable: false,
           value: 'type'
         },
-                    {text: 'Januar in EUR', value: 'jan_amount'},
+        { text: 'Januar in EUR', value: 'jan_amount' },
-                    {text: 'Februar in EUR', value: 'feb_amount'},
+        { text: 'Februar in EUR', value: 'feb_amount' },
-                    {text: 'März in EUR', value: 'maer_amount'},
+        { text: 'März in EUR', value: 'maer_amount' },
-                    {text: 'April in EUR', value: 'apr_amount'},
+        { text: 'April in EUR', value: 'apr_amount' },
-                    {text: 'Mai in EUR', value: 'mai_amount'},
+        { text: 'Mai in EUR', value: 'mai_amount' },
-                    {text: 'Juni in EUR', value: 'jun_amount'},
+        { text: 'Juni in EUR', value: 'jun_amount' },
-                    {text: 'Juli in EUR', value: 'jul_amount'},
+        { text: 'Juli in EUR', value: 'jul_amount' },
-                    {text: 'August in EUR', value: 'aug_amount'},
+        { text: 'August in EUR', value: 'aug_amount' },
-                    {text: 'September in EUR', value: 'sep_amount'},
+        { text: 'September in EUR', value: 'sep_amount' },
-                    {text: 'Oktober in EUR', value: 'okt_amount'},
+        { text: 'Oktober in EUR', value: 'okt_amount' },
-                    {text: 'November in EUR', value: 'nov_amount'},
+        { text: 'November in EUR', value: 'nov_amount' },
-                    {text: 'Dezember in EUR', value: 'dez_amount'},
+        { text: 'Dezember in EUR', value: 'dez_amount' },
-                    {text: 'Summe in EUR', value: 'sum'}
+        { text: 'Summe in EUR', value: 'sum' }
-                ],
+      ]
     }
   },
   methods: {
-            getColor (item, value) {
+    getColor(item, value) {
       if (item.type === 'Summe') {
         return value < 0 ? 'red' : 'green'
       }
       return item.type === 'Guthaben' ? 'green' : 'red'
-            },
     }
   }
+}
 </script>
 
 <style scoped>
-
 </style>

src/components/finanzer/User.vue

@@ -2,16 +2,14 @@
   <div>
     <v-toolbar tile>
       <v-toolbar-title>{{activeUser.lastname}}, {{activeUser.firstname}}</v-toolbar-title>
-            <v-spacer/>
+      <v-spacer />
       <v-toolbar-items>
         <v-btn @click="sendMail({username: activeUser.username})" text>Email senden</v-btn>
       </v-toolbar-items>
     </v-toolbar>
     <v-expand-transition>
       <v-card style="margin-top: 3px" v-show="errorMail">
-                <v-alert dense :type="computeError(errorMail)">
+        <v-alert dense :type="computeError(errorMail)">{{errorMessage(errorMail)}}</v-alert>
-                    {{errorMessage(errorMail)}}
-                </v-alert>
       </v-card>
     </v-expand-transition>
     <v-card style="margin-top: 3px;">
@@ -20,27 +18,45 @@
         <v-form style="margin-left: 15px; margin-right: 15px">
           <v-row>
             <v-col>
-                            <v-label>Status: </v-label>
+              <v-label>Status:</v-label>
             </v-col>
             <v-col>
-                            <v-chip outlined :text-color="getLockedColor(activeUser.locked)">{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+              <v-chip
+                outlined
+                :text-color="getLockedColor(activeUser.locked)"
+              >{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
             </v-col>
             <v-col>
-                            <v-btn @click="doLock({user: activeUser, locked: !activeUser.locked})">{{activeUser.locked ? 'Entperren' : 'Sperren'}}</v-btn>
+              <v-btn
+                @click="doLock({user: activeUser, locked: !activeUser.locked})"
+              >{{activeUser.locked ? 'Entperren' : 'Sperren'}}</v-btn>
             </v-col>
           </v-row>
-                    <v-divider style="margin-bottom: 15px;"/>
+          <v-divider style="margin-bottom: 15px;" />
           <v-row>
             <v-col>
-                            <v-text-field :rules="[isNumber]" label="Betrag des Sperrlimits in € (EURO)" v-model="limit"></v-text-field>
+              <v-text-field
+                :rules="[isNumber]"
+                label="Betrag des Sperrlimits in € (EURO)"
+                v-model="limit"
+              ></v-text-field>
             </v-col>
             <v-col>
-                            <v-select return-object v-model="autoLock" label="Automatische Sperre" :items="[{value: true, text: 'Aktiviert'}, {value: false, text: 'Deaktiviert'}]"
+              <v-select
-                                      item-text="text" item-value="value"/>
+                return-object
+                v-model="autoLock"
+                label="Automatische Sperre"
+                :items="[{value: true, text: 'Aktiviert'}, {value: false, text: 'Deaktiviert'}]"
+                item-text="text"
+                item-value="value"
+              />
             </v-col>
           </v-row>
           <v-row>
-                        <v-btn block @click="saveConfig({user: activeUser, limit: limit, autoLock: autoLock.value})">Speichern</v-btn>
+            <v-btn
+              block
+              @click="saveConfig({user: activeUser, limit: limit, autoLock: autoLock.value})"
+            >Speichern</v-btn>
           </v-row>
         </v-form>
       </v-card-text>
@@ -51,25 +67,39 @@
         <v-form style="margin-left: 15px; margin-right: 15px">
           <v-row>
             <v-col>
-                            <v-text-field :rules="[isNumber]" label="Betrag"
+              <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
-                                          v-model="amount"></v-text-field>
             </v-col>
             <v-col>
-                            <v-select return-object v-model="type" label="Typ"
+              <v-select
+                return-object
+                v-model="type"
+                label="Typ"
                 :items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]"
-                                      item-text="text" item-value="value"></v-select>
+                item-text="text"
+                item-value="value"
+              ></v-select>
             </v-col>
           </v-row>
           <v-row>
             <v-col>
-                            <v-select return-object v-model="selectedYear" label="Jahr"
+              <v-select
-                                      :items="selectYears" item-text="text"
+                return-object
-                                      item-value="value"></v-select>
+                v-model="selectedYear"
+                label="Jahr"
+                :items="selectYears"
+                item-text="text"
+                item-value="value"
+              ></v-select>
             </v-col>
             <v-col>
-                            <v-select return-object v-model="selectedMonth" label="Monat"
+              <v-select
-                                      :items="months" item-text="text"
+                return-object
-                                      item-value="value"></v-select>
+                v-model="selectedMonth"
+                label="Monat"
+                :items="months"
+                item-text="text"
+                item-value="value"
+              ></v-select>
             </v-col>
           </v-row>
         </v-form>
@@ -79,7 +109,7 @@
     <div v-for="year in years" :key="years.indexOf(year)">
       <v-card style="margin-top: 3px;">
         <v-card-title>{{year}}</v-card-title>
-                <Table v-bind:user="activeUser" v-bind:year="year"/>
+        <Table v-bind:user="activeUser" v-bind:year="year" />
         <v-container fluid>
           <v-col>
             <v-row>
@@ -87,16 +117,20 @@
                 <v-label>Vorjahr:</v-label>
               </v-col>
               <v-col>
-                                <v-chip outlined :text-color="getLastColor(activeUser.creditList[year][1].last)">
+                <v-chip
-                                    {{(activeUser.creditList[year][1].last / 100).toFixed(2)}}
+                  outlined
-                                </v-chip>
+                  :text-color="getLastColor(activeUser.creditList[year][1].last)"
+                >{{(activeUser.creditList[year][1].last / 100).toFixed(2)}}</v-chip>
               </v-col>
               <v-col>
                 <v-label>Gesamt:</v-label>
               </v-col>
               <v-col>
-                                <v-chip outlined x-large
+                <v-chip
-                                        :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))">
+                  outlined
+                  x-large
+                  :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))"
+                >
                   {{(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last) /
                   100).toFixed(2)}}
                 </v-chip>
@@ -110,28 +144,47 @@
 </template>
 
 <script>
-    import Table from "./Table";
+import Table from './Table'
-    import {mapGetters, mapActions} from 'vuex';
+import { mapGetters, mapActions } from 'vuex'
-    export default {
+export default {
-        name: "User",
+  name: 'User',
-        components: {Table},
+  components: { Table },
-        data () {
+  data() {
     return {
       isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
       limit: null,
       autoLock: null,
       amount: null,
-                type: {value: 'credit', text: 'Guthaben'},
+      type: { value: 'credit', text: 'Guthaben' },
-                selectedYear: {value: new Date().getFullYear(), text: new Date().getFullYear()},
+      selectedYear: {
-                selectedMonth: {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+        value: new Date().getFullYear(),
-                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+        text: new Date().getFullYear()
-                    ][new Date().getMonth()]}
+      },
-
+      selectedMonth: {
+        value: new Date().getMonth() + 1,
+        text: [
+          'Januar',
+          'Februar',
+          'März',
+          'April',
+          'Mai',
+          'Juni',
+          'Juli',
+          'August',
+          'September',
+          'Oktober',
+          'November',
+          'Dezember'
+        ][new Date().getMonth()]
+      }
     }
   },
   created() {
     this.limit = (this.activeUser.limit / 100).toFixed(2)
-            this.autoLock = {value: this.activeUser.autoLock, text: this.activeUser.autoLock? "Aktiviert" : "Deaktiviert"}
+    this.autoLock = {
+      value: this.activeUser.autoLock,
+      text: this.activeUser.autoLock ? 'Aktiviert' : 'Deaktiviert'
+    }
   },
   methods: {
     ...mapActions({
@@ -139,26 +192,36 @@
       addCredit: 'finanzerUsers/addCredit',
       sendMail: 'finanzerUsers/sendMail',
       doLock: 'finanzerUsers/doLock',
-                saveConfig: 'finanzerUsers/saveConfig'}),
+      saveConfig: 'finanzerUsers/saveConfig'
-            getLastColor (value) {
+    }),
+    getLastColor(value) {
       return value < 0 ? 'red' : 'green'
     },
     getAllSum(sum, lastYear) {
       return lastYear + sum
     },
-            getLockedColor (value) {
+    getLockedColor(value) {
       return value ? 'red' : 'green'
     },
     add() {
       if (this.type.value === 'amount') {
-                    this.addAmount( {user: this.activeUser, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+        this.addAmount({
+          user: this.activeUser,
+          amount: this.amount,
+          year: this.selectedYear.value,
+          month: this.selectedMonth.value
+        })
       }
       if (this.type.value === 'credit') {
-                    this.addCredit({user: this.activeUser, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+        this.addCredit({
+          user: this.activeUser,
+          credit: this.amount,
+          year: this.selectedYear.value,
+          month: this.selectedMonth.value
+        })
       }
 
       this.createDefault()
-
     },
     createDefault() {
       // eslint-disable-next-line no-unused-vars
@@ -166,11 +229,28 @@
       // eslint-disable-next-line no-unused-vars
       let month = new Date().getMonth()
       this.amount = null
-                this.type = {value: 'credit', text: 'Guthaben'}
+      this.type = { value: 'credit', text: 'Guthaben' }
-                this.selectedYear = {value: new Date().getFullYear(), text: new Date().getFullYear()}
+      this.selectedYear = {
-                this.selectedMonth = {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+        value: new Date().getFullYear(),
-                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+        text: new Date().getFullYear()
-                    ][new Date().getMonth()]}
+      }
+      this.selectedMonth = {
+        value: new Date().getMonth() + 1,
+        text: [
+          'Januar',
+          'Februar',
+          'März',
+          'April',
+          'Mai',
+          'Juni',
+          'Juli',
+          'August',
+          'September',
+          'Oktober',
+          'November',
+          'Dezember'
+        ][new Date().getMonth()]
+      }
     },
     computeError(error) {
       if (error) {
@@ -180,8 +260,22 @@
     },
     errorMessage(error) {
       if (error) {
-                    if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
+        if (error.error)
-                    else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
+          return (
+            'Konnte Email an ' +
+            error.user.firstname +
+            ' ' +
+            error.user.lastname +
+            ' nicht senden!'
+          )
+        else
+          return (
+            'Email wurde an ' +
+            error.user.firstname +
+            ' ' +
+            error.user.lastname +
+            ' versandt.'
+          )
       }
     }
   },
@@ -193,20 +287,24 @@
       }
       return years
     },
-            ...mapGetters({activeUser: 'finanzerUsers/activeUser',
+    ...mapGetters({
+      activeUser: 'finanzerUsers/activeUser',
       errorMail: 'finanzerUsers/errorMail',
       months: 'finanzerUsers/months',
-                selectYears: 'finanzerUsers/selectYears'})
+      selectYears: 'finanzerUsers/selectYears'
+    })
   },
   watch: {
     activeUser(newVal) {
       this.limit = (newVal.limit / 100).toFixed(2)
-                this.autoLock = {value: newVal.autoLock, text: newVal.autoLock? "Aktiviert" : "Deaktiviert"}
+      this.autoLock = {
+        value: newVal.autoLock,
+        text: newVal.autoLock ? 'Aktiviert' : 'Deaktiviert'
       }
     }
   }
+}
 </script>
 
 <style scoped>
-
 </style>

src/plugins/routes.js

@@ -1,4 +1,4 @@
-const main = 'http://192.168.5.118:5000/';
+const main = 'http://192.168.5.118:5000/'
 
 const url = {
   login: main + 'login',
@@ -15,6 +15,6 @@ const url = {
   finanzerAddUser: main + 'finanzerAddUser',
   finanzerSendAllMail: main + 'finanzerSendAllMail',
   finanzerSendOneMail: main + 'finanzerSendOneMail'
-};
+}
 
-export default url;
+export default url

src/plugins/vuetify.js

@@ -1,11 +1,11 @@
-import Vue from 'vue';
+import Vue from 'vue'
-import Vuetify from 'vuetify/lib';
+import Vuetify from 'vuetify/lib'
 import 'material-design-icons-iconfont'
 
-Vue.use(Vuetify);
+Vue.use(Vuetify)
 
 export default new Vuetify({
   icons: {
-        iconfont: 'md',
+    iconfont: 'md'
   }
-});
+})

src/router/index.js

@@ -1,36 +1,34 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import FinanzerView from "@/views/FinanzerView";
+import FinanzerView from '@/views/FinanzerView'
-import Login from "@/views/Login";
+import Login from '@/views/Login'
-import store from "@/store/index";
+import store from '@/store/index'
-import BarView from "@/views/BarView";
+import BarView from '@/views/BarView'
 
 Vue.use(VueRouter)
 
 const routes = [
-
   {
-    path: "/login",
+    path: '/login',
-    name: "login",
+    name: 'login',
     component: Login
   },
   {
-    path: "/finanzer",
+    path: '/finanzer',
-    name: "finanzer",
+    name: 'finanzer',
     component: FinanzerView
   },
   {
-    path: "/bar",
+    path: '/bar',
-    name: "bar",
+    name: 'bar',
     component: BarView
   },
   {
     path: '*',
     redirect: {
-      name: "login"
+      name: 'login'
+    }
   }
-  },
-
 ]
 
 const router = new VueRouter({
@@ -40,7 +38,7 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  store.dispatch('fetchAccessToken');
+  store.dispatch('fetchAccessToken')
   let sites = ['/finanzer', '/bar']
   if (sites.includes(to.fullPath)) {
     if (to.fullPath === '/finanzer') {
@@ -64,10 +62,9 @@ router.beforeEach((to, from, next) => {
       } else if (store.state.login.user.group.includes('bar')) {
         next('/bar')
       }
-
     }
   }
-  next();
+  next()
-});
+})
 
 export default router

src/store/index.js

@@ -1,8 +1,8 @@
-import Vue from 'vue';
+import Vue from 'vue'
-import Vuex from 'vuex';
+import Vuex from 'vuex'
-import login from './modules/login';
+import login from './modules/login'
 import finanzerUsers from './modules/finanzerUsers'
-import barUsers from "@/store/modules/barUsers";
+import barUsers from '@/store/modules/barUsers'
 
 Vue.use(Vuex)
 

src/store/modules/barUsers.js

@@ -1,17 +1,18 @@
-import axios from 'axios';
+import axios from 'axios'
-import url from '@/plugins/routes';
+import url from '@/plugins/routes'
 
 const state = {
   users: [],
   allUsers: []
-};
+}
 
 const mutations = {
   setAllUsers: (state, users) => {
     state.allUsers = []
     state.allUsers = users
     for (let i = 0; i < state.allUsers.length; i++) {
-            state.allUsers[i].fullName = state.allUsers[i].firstname + " " + state.allUsers[i].lastname
+      state.allUsers[i].fullName =
+        state.allUsers[i].firstname + ' ' + state.allUsers[i].lastname
     }
   },
   setUsers: (state, users) => {
@@ -20,7 +21,9 @@ const mutations = {
     for (let user in users) {
       // eslint-disable-next-line no-console
       console.log(user)
-            let existuser = state.users.find(a => {return user === a.username})
+      let existuser = state.users.find(a => {
+        return user === a.username
+      })
 
       if (existuser) {
         existuser.sername = users[user].username
@@ -44,67 +47,87 @@ const mutations = {
     console.log(state.users)
     mutations.sortUsers(state)
   },
-    sortUsers: (state) => {
+  sortUsers: state => {
-        state.users = state.users.sort((a,b) => {
+    state.users = state.users.sort((a, b) => {
       if (a.lastname > b.lastname) return 1
       if (a.lastname < b.lastname) return -1
       if (a.firstname > b.firstname) return 1
       if (a.firstname < b.firstname) return -1
       return 0
     })
-    },
+  }
-
+}
-};
 
 const actions = {
   // eslint-disable-next-line no-unused-vars
-    async getUsers({commit, rootState, dispatch}) {
+  async getUsers({ commit, rootState, dispatch }) {
     try {
-            const response = await axios.get(url.bar, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.get(url.bar, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
       // eslint-disable-next-line no-console
       console.log(response.data)
       commit('setUsers', response.data)
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async addAmount({commit, rootState, dispatch}, data) {
+  async addAmount({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.barAddAmount, {userId: data.username, amount: data.amount}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
-            commit('setUsers', {[response.data.username]: response.data})
+        url.barAddAmount,
+        { userId: data.username, amount: data.amount },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('setUsers', { [response.data.username]: response.data })
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async addCreditList({commit, rootState, dispatch}, data) {
+  async addCreditList({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.barGetUser, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
-            commit('setUsers', {[response.data.username]: response.data})
+        url.barGetUser,
+        { userId: data.username },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('setUsers', { [response.data.username]: response.data })
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async getAllUsers({commit, rootState, dispatch}) {
+  async getAllUsers({ commit, rootState, dispatch }) {
     // eslint-disable-next-line no-console
     console.log('hier bin ich')
     try {
-            const response = await axios.post(url.searchUser, {searchString: ""}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.searchUser,
+        { searchString: '' },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       // eslint-disable-next-line no-console
       console.log(response)
       commit('setAllUsers', response.data)
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e)
-            if (e.response) if (e.response.data === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.data === 401) dispatch('logout', null, { root: true })
     }
   }
-
+}
-};
 
 const getters = {
-    users: (state) => { return state.users },
+  users: state => {
-    allUsers: (state) => { return state.allUsers }
+    return state.users
-};
+  },
+  allUsers: state => {
+    return state.allUsers
+  }
+}
 
 export default {
   namespaced: true,

src/store/modules/finanzerUsers.js

@@ -1,11 +1,11 @@
-import axios from 'axios';
+import axios from 'axios'
 // eslint-disable-next-line no-unused-vars
 import url from '@/plugins/routes'
 
 const state = {
   users: [],
   activeUser: {
-        username: null,
+    username: null
   },
   allUsers: [],
   user: null,
@@ -14,32 +14,33 @@ const state = {
   year: new Date().getFullYear(),
   years: [],
   months: [
-        {value: 1, text: 'Januar'},
+    { value: 1, text: 'Januar' },
-        {value: 2, text: 'Februar'},
+    { value: 2, text: 'Februar' },
-        {value: 3, text: 'März'},
+    { value: 3, text: 'März' },
-        {value: 4, text:'April'},
+    { value: 4, text: 'April' },
-        {value: 5, text: 'Mai'},
+    { value: 5, text: 'Mai' },
-        {value: 6, text: 'Juni'},
+    { value: 6, text: 'Juni' },
-        {value: 7, text: 'Juli'},
+    { value: 7, text: 'Juli' },
-        {value: 8, text: 'August'},
+    { value: 8, text: 'August' },
-        {value: 9, text: 'September'},
+    { value: 9, text: 'September' },
-        {value: 10, text: 'Oktober'},
+    { value: 10, text: 'Oktober' },
-        {value: 11, text: 'November'},
+    { value: 11, text: 'November' },
-        {value: 12, text: 'Dezember'}
+    { value: 12, text: 'Dezember' }
-    ],
+  ]
-};
+}
 
 const mutations = {
   setAllUsers: (state, users) => {
     state.allUsers = []
     state.allUsers = users
     for (let i = 0; i < state.allUsers.length; i++) {
-            state.allUsers[i].fullName = state.allUsers[i].firstname + " " + state.allUsers[i].lastname
+      state.allUsers[i].fullName =
+        state.allUsers[i].firstname + ' ' + state.allUsers[i].lastname
     }
   },
   setActiveUser: (state, user) => {
     if (state.activeUser.username === user.username) {
-            state.activeUser = {username: null}
+      state.activeUser = { username: null }
     } else {
       state.activeUser = user
     }
@@ -53,13 +54,19 @@ const mutations = {
       console.log('user', user)
       let list = {}
       for (let creditList in users[user]['creditList']) {
-                let amount = mutations.createAmount(users[user]['creditList'][creditList])
+        let amount = mutations.createAmount(
-                let credit = mutations.createCredit(users[user]['creditList'][creditList])
+          users[user]['creditList'][creditList]
+        )
+        let credit = mutations.createCredit(
+          users[user]['creditList'][creditList]
+        )
         let sum = mutations.createSum(credit, amount)
-                list[creditList] = [{...credit}, {...amount}, {...sum}]
+        list[creditList] = [{ ...credit }, { ...amount }, { ...sum }]
       }
 
-            let existUser = state.users.find(a => {return a.username === user})
+      let existUser = state.users.find(a => {
+        return a.username === user
+      })
 
       // eslint-disable-next-line no-console
       console.log(existUser)
@@ -91,11 +98,11 @@ const mutations = {
   },
   createAmount(creditList) {
     let amount = {
-            type:'Schulden',
+      type: 'Schulden',
       jan_amount: 0 - creditList.jan.depts,
       feb_amount: 0 - creditList.feb.depts,
       maer_amount: 0 - creditList.maer.depts,
-            apr_amount:0 - creditList.apr.depts,
+      apr_amount: 0 - creditList.apr.depts,
       mai_amount: 0 - creditList.mai.depts,
       jun_amount: 0 - creditList.jun.depts,
       jul_amount: 0 - creditList.jul.depts,
@@ -107,12 +114,24 @@ const mutations = {
       last: 0 - creditList['last']
     }
 
-        amount.sum = amount.jan_amount + amount.feb_amount + amount.maer_amount + amount.apr_amount + amount.mai_amount + amount.jun_amount + amount.jul_amount + amount.aug_amount + amount.sep_amount + amount.okt_amount + amount.nov_amount + amount.dez_amount
+    amount.sum =
+      amount.jan_amount +
+      amount.feb_amount +
+      amount.maer_amount +
+      amount.apr_amount +
+      amount.mai_amount +
+      amount.jun_amount +
+      amount.jul_amount +
+      amount.aug_amount +
+      amount.sep_amount +
+      amount.okt_amount +
+      amount.nov_amount +
+      amount.dez_amount
     return amount
   },
   createCredit(creditList) {
     let credit = {
-            type:'Guthaben',
+      type: 'Guthaben',
       jan_amount: creditList.jan.credit,
       feb_amount: creditList.feb.credit,
       maer_amount: creditList.maer.credit,
@@ -126,12 +145,24 @@ const mutations = {
       nov_amount: creditList.nov.credit,
       dez_amount: creditList.dez.credit
     }
-        credit.sum = credit.jan_amount + credit.feb_amount + credit.maer_amount + credit.apr_amount + credit.mai_amount + credit.jun_amount + credit.jul_amount + credit.aug_amount + credit.sep_amount + credit.okt_amount + credit.nov_amount + credit.dez_amount
+    credit.sum =
+      credit.jan_amount +
+      credit.feb_amount +
+      credit.maer_amount +
+      credit.apr_amount +
+      credit.mai_amount +
+      credit.jun_amount +
+      credit.jul_amount +
+      credit.aug_amount +
+      credit.sep_amount +
+      credit.okt_amount +
+      credit.nov_amount +
+      credit.dez_amount
     return credit
   },
   createSum(credit, amount) {
     let sum = {
-            type:'Summe',
+      type: 'Summe',
       jan_amount: credit.jan_amount + amount.jan_amount,
       feb_amount: credit.feb_amount + amount.feb_amount,
       maer_amount: credit.maer_amount + amount.maer_amount,
@@ -143,13 +174,25 @@ const mutations = {
       sep_amount: credit.sep_amount + amount.sep_amount,
       okt_amount: credit.okt_amount + amount.okt_amount,
       nov_amount: credit.nov_amount + amount.nov_amount,
-            dez_amount: credit.dez_amount + amount.dez_amount,
+      dez_amount: credit.dez_amount + amount.dez_amount
     }
-        sum.sum = sum.jan_amount + sum.feb_amount + sum.maer_amount + sum.apr_amount + sum.mai_amount + sum.jun_amount + sum.jul_amount + sum.aug_amount + sum.sep_amount + sum.okt_amount + sum.nov_amount + sum.dez_amount
+    sum.sum =
+      sum.jan_amount +
+      sum.feb_amount +
+      sum.maer_amount +
+      sum.apr_amount +
+      sum.mai_amount +
+      sum.jun_amount +
+      sum.jul_amount +
+      sum.aug_amount +
+      sum.sep_amount +
+      sum.okt_amount +
+      sum.nov_amount +
+      sum.dez_amount
     return sum
   },
-    sortUsers: (state) => {
+  sortUsers: state => {
-        state.users = state.users.sort((a,b) => {
+    state.users = state.users.sort((a, b) => {
       if (a.lastname > b.lastname) return 1
       if (a.lastname < b.lastname) return -1
       if (a.firstname > b.firstname) return 1
@@ -158,14 +201,18 @@ const mutations = {
     })
   },
   updateUsers: (state, data) => {
-        let index = state.users.indexOf(state.users.find(a => {return a.username === data.username}))
+    let index = state.users.indexOf(
+      state.users.find(a => {
+        return a.username === data.username
+      })
+    )
     if (data.creditLists !== undefined) {
       let list = {}
       for (let creditList in data.creditLists) {
         let amount = mutations.createAmount(data.creditLists[creditList])
         let credit = mutations.createCredit(data.creditLists[creditList])
         let sum = mutations.createSum(credit, amount)
-                list[creditList] = [{...credit}, {...amount}, {...sum}]
+        list[creditList] = [{ ...credit }, { ...amount }, { ...sum }]
       }
       state.users[index].creditList = list
     }
@@ -179,128 +226,213 @@ const mutations = {
   setMail: (state, data) => {
     state.errorMail = data
   },
-    setYears: (state) => {
+  setYears: state => {
     for (let year = new Date().getFullYear(); year >= 2000; year--) {
-            state.years.push({value: year, text: year})
+      state.years.push({ value: year, text: year })
     }
   },
   setYear: (state, value) => {
-        if(value) state.year++
+    if (value) state.year++
     else state.year--
   }
-};
+}
 
 const actions = {
   // eslint-disable-next-line no-unused-vars
-    async getAllUsers({commit, rootState, dispatch}) {
+  async getAllUsers({ commit, rootState, dispatch }) {
     // eslint-disable-next-line no-console
     console.log(rootState)
     try {
-            const response = await axios.post(url.searchUser, {searchString: ""}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.searchUser,
+        { searchString: '' },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       commit('setAllUsers', response.data)
     } catch (err) {
       // eslint-disable-next-line no-console
-            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
+      if (err.response)
+        if (err.response.status === 401)
+          dispatch('logout', null, { root: true })
     }
   },
-    async getUsers({commit, rootState, dispatch}) {
+  async getUsers({ commit, rootState, dispatch }) {
     try {
-            const response = await axios.get(url.getFinanzerMain, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.get(url.getFinanzerMain, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
       // eslint-disable-next-line no-console
       console.log('response', response.data)
       commit('setUsers', response.data)
     } catch (err) {
       // eslint-disable-next-line no-console
       console.log(err)
-            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
+      if (err.response)
+        if (err.response.status === 401)
+          dispatch('logout', null, { root: true })
     }
   },
   setActiveUser({ commit }, user) {
     commit('setActiveUser', user)
   },
-    async addAmount({commit, rootState, dispatch}, data) {
+  async addAmount({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.finanzerAddAmount, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
-            const creditLists = {...response.data}
+        url.finanzerAddAmount,
+        {
+          userId: data.user.username,
+          amount: data.amount * 100,
+          year: data.year,
+          month: data.month
+        },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      const creditLists = { ...response.data }
       delete creditLists.locked
-            commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
+      commit('updateUsers', {
+        creditLists: creditLists,
+        locked: response.data.locked,
+        username: data.user.username
+      })
     } catch (err) {
-            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
+      if (err.response)
+        if (err.response.status === 401)
+          dispatch('logout', null, { root: true })
     }
   },
-    async addCredit({commit, rootState, dispatch}, data) {
+  async addCredit({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.finanzerAddCredit, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
-            const creditLists = {...response.data}
+        url.finanzerAddCredit,
+        {
+          userId: data.user.username,
+          credit: data.credit * 100,
+          year: data.year,
+          month: data.month
+        },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      const creditLists = { ...response.data }
       delete creditLists.locked
-            commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
+      commit('updateUsers', {
+        creditLists: creditLists,
+        locked: response.data.locked,
+        username: data.user.username
+      })
     } catch (err) {
-            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
+      if (err.response)
+        if (err.response.status === 401)
+          dispatch('logout', null, { root: true })
     }
   },
-    async doLock({commit, rootState, dispatch}, data) {
+  async doLock({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.lockUser, {userId: data.user.username, locked: data.locked}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.lockUser,
+        { userId: data.user.username, locked: data.locked },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       commit('updateUsers', response.data)
     } catch (e) {
-            if (e.response) if(e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async saveConfig({commit, rootState, dispatch}, data) {
+  async saveConfig({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.finanzerSetConfig, {userId: data.user.username, limit: data.limit * 100, autoLock: data.autoLock}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.finanzerSetConfig,
+        {
+          userId: data.user.username,
+          limit: data.limit * 100,
+          autoLock: data.autoLock
+        },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       commit('updateUsers', response.data)
     } catch (e) {
-            if (e.response) if(e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async addUser({commit, rootState, dispatch}, data) {
+  async addUser({ commit, rootState, dispatch }, data) {
     try {
-            const response = await  axios.post(url.finanzerAddUser, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.finanzerAddUser,
+        { userId: data.username },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       commit('setUsers', response.data)
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async sendMails({commit, rootState, dispatch}) {
+  async sendMails({ commit, rootState, dispatch }) {
     try {
-            const response = await axios.get(url.finanzerSendAllMail, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.get(url.finanzerSendAllMail, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
       commit('setMails', response.data)
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    async sendMail({commit, rootState, dispatch}, data) {
+  async sendMail({ commit, rootState, dispatch }, data) {
     try {
-            const response = await axios.post(url.finanzerSendOneMail, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.finanzerSendOneMail,
+        { userId: data.username },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       commit('setMail', response.data)
     } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
-    createYears({commit}) {
+  createYears({ commit }) {
     commit('setYears')
     return 'hallo'
   },
-    countYear({commit}, value) {
+  countYear({ commit }, value) {
     commit('setYear', value)
   }
-};
+}
 
 const getters = {
-    users: state => { return state.users },
+  users: state => {
-    activeUser: state => { return state.activeUser },
+    return state.users
-    allUsers: state => { return state.allUsers },
+  },
-    user: state => { return state.user },
+  activeUser: state => {
-    errorMails: state => { return state.errorMails },
+    return state.activeUser
-    errorMail: state => { return state.errorMail },
+  },
-    years: state => { return state.years },
+  allUsers: state => {
-    selectYears: state => {return state.years},
+    return state.allUsers
-    year: state => { return state.year },
+  },
-    months: state => { return state.months},
+  user: state => {
-
+    return state.user
-
+  },
-};
+  errorMails: state => {
+    return state.errorMails
+  },
+  errorMail: state => {
+    return state.errorMail
+  },
+  years: state => {
+    return state.years
+  },
+  selectYears: state => {
+    return state.years
+  },
+  year: state => {
+    return state.year
+  },
+  months: state => {
+    return state.months
+  }
+}
 
 export default {
   namespaced: true,

src/store/modules/login.js

@@ -1,5 +1,5 @@
-import axios from 'axios';
+import axios from 'axios'
-import router from "@/router";
+import router from '@/router'
 import url from '@/plugins/routes'
 
 const state = {
@@ -10,67 +10,76 @@ const state = {
   },
   loggingIn: false,
   loginError: null
-};
+}
 
 const mutations = {
-    loginStart: state => state.loggingIn = true,
+  loginStart: state => (state.loggingIn = true),
-    loginStop (state, errorMessage){
+  loginStop(state, errorMessage) {
-        state.loggingIn = false;
+    state.loggingIn = false
-        state.loginError = errorMessage;
+    state.loginError = errorMessage
   },
-    updateAccessToken (state, data) {
+  updateAccessToken(state, data) {
-        if (typeof(data) === typeof("")) {
+    if (typeof data === typeof '') {
       data = JSON.parse(data)
     }
     if (data === null || data === undefined) {
-            state.user.username = null;
+      state.user.username = null
-            state.user.accessToken = null;
+      state.user.accessToken = null
-            state.user.group = null;
+      state.user.group = null
     } else {
-            state.user.username = data.username;
+      state.user.username = data.username
-            state.user.accessToken = data.accessToken;
+      state.user.accessToken = data.accessToken
-            state.user.group = data.group;
+      state.user.group = data.group
     }
   },
-    logout (state) {
+  logout(state) {
-        state.user.accessToken = null;
+    state.user.accessToken = null
-        state.user.username = null;
+    state.user.username = null
-        state.user.group = null;
+    state.user.group = null
   }
-};
+}
 
 const actions = {
   async doLogin({ commit }, loginData) {
-        commit('loginStart');
+    commit('loginStart')
     try {
-            const response = await axios.post(url.login, {...loginData})
+      const response = await axios.post(url.login, { ...loginData })
-            localStorage.setItem('user', JSON.stringify({ username: response.data.username, accessToken: response.data.token, group: response.data.group}));
+      localStorage.setItem(
-            commit('loginStop', null);
+        'user',
+        JSON.stringify({
+          username: response.data.username,
+          accessToken: response.data.token,
+          group: response.data.group
+        })
+      )
+      commit('loginStop', null)
       commit('updateAccessToken', response.data)
       if (state.user.group.includes('moneymaster')) {
-                router.push('/finanzer');
+        router.push('/finanzer')
-            }
+      } else if (state.user.group.includes('bar')) {
-            else if (state.user.group.includes('bar')) {
         router.push('/bar')
       }
-
     } catch (err) {
       commit('loginStop', err.response.data.error)
-            commit('updateAccessToken', {username: null, accessToken: null, group: null})
+      commit('updateAccessToken', {
+        username: null,
+        accessToken: null,
+        group: null
+      })
     }
   },
   fetchAccessToken({ commit }) {
     commit('updateAccessToken', localStorage.getItem('user'))
   },
   logout({ commit }) {
-        localStorage.removeItem('user');
+    localStorage.removeItem('user')
-        commit('logout');
+    commit('logout')
-        router.push('/login');
+    router.push('/login')
   },
   resetLoginError({ commit }) {
-        commit("loginStop")
+    commit('loginStop')
   }
-};
+}
 
 const getters = {
   getGroup: state => {
@@ -88,11 +97,11 @@ const getters = {
   loginError: state => {
     return state.loginError
   }
-};
+}
 
 export default {
   state,
   mutations,
   actions,
   getters
-};
+}

src/views/BarView.vue

@@ -1,34 +1,29 @@
 <template>
   <div>
-        <TitleBar/>
+    <TitleBar />
     <v-content>
-            <SearchBar/>
+      <SearchBar />
       <CreditLists></CreditLists>
     </v-content>
   </div>
 </template>
 
 <script>
-    import TitleBar from "@/components/TitleBar";
+import TitleBar from '@/components/TitleBar'
-    import CreditLists from "@/components/baruser/CreditLists";
+import CreditLists from '@/components/baruser/CreditLists'
-    // eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
-    import axios from "axios";
+import axios from 'axios'
-    import SearchBar from "../components/baruser/SearchBar";
+import SearchBar from '../components/baruser/SearchBar'
-    export default {
+export default {
-        name: "BarView",
+  name: 'BarView',
-        components: {SearchBar, CreditLists, TitleBar},
+  components: { SearchBar, CreditLists, TitleBar },
-        created() {
+  created() {},
+  data() {
+    return {}
   },
-        data () {
+  methods: {}
-            return {
+}
-            }
-        },
-        methods: {
-
-        }
-    }
 </script>
 
 <style scoped>
-
 </style>

src/views/FinanzerView.vue

@@ -1,36 +1,51 @@
 <template>
   <div>
-            <TitleBar/>
+    <TitleBar />
     <v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
       <v-list>
         <v-list-item class="title" link @click="setActiveUser(activeUser)">
           <v-list-item-icon>
             <v-icon>home</v-icon>
           </v-list-item-icon>
-                        <v-list-item-title>
+          <v-list-item-title>Gesamtübersicht</v-list-item-title>
-                            Gesamtübersicht
-                        </v-list-item-title>
-
         </v-list-item>
       </v-list>
-                <v-divider/>
+      <v-divider />
       <v-list>
-                    <v-list-item v-for="user in users" v-bind:key="users.indexOf(user)" :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''" link @click="setActiveUser(user)">
+        <v-list-item
+          v-for="user in users"
+          v-bind:key="users.indexOf(user)"
+          :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''"
+          link
+          @click="setActiveUser(user)"
+        >
           <v-list-item-title>{{user.lastname}}, {{user.firstname}}</v-list-item-title>
         </v-list-item>
       </v-list>
       <template v-slot:append>
         <v-list>
           <v-list-item>
-                            <v-list-item-icon><v-icon>search</v-icon></v-list-item-icon>
+            <v-list-item-icon>
+              <v-icon>search</v-icon>
+            </v-list-item-icon>
             <v-list-item-title>
-                                <v-autocomplete outlined return-object v-model="user" style="margin-top: 3px"
+              <v-autocomplete
-                                                placeholder="Suche Person" :items="allUsers" item-text="fullName"
+                outlined
-                                                prepend-inner-icon="search" full-width/>
+                return-object
+                v-model="user"
+                style="margin-top: 3px"
+                placeholder="Suche Person"
+                :items="allUsers"
+                item-text="fullName"
+                prepend-inner-icon="search"
+                full-width
+              />
             </v-list-item-title>
           </v-list-item>
           <v-list-item>
-                            <v-list-item-icon><v-icon>person_add</v-icon></v-list-item-icon>
+            <v-list-item-icon>
+              <v-icon>person_add</v-icon>
+            </v-list-item-icon>
             <v-list-item-title>
               <v-btn text block @click="addUser(user)">Hinzufügen</v-btn>
             </v-list-item-title>
@@ -39,44 +54,47 @@
       </template>
     </v-navigation-drawer>
     <v-content v-if="!activeUser.username">
-                <Overview/>
+      <Overview />
     </v-content>
     <v-content v-else>
-                <User/>
+      <User />
     </v-content>
   </div>
 </template>
 
 <script>
-    import TitleBar from "@/components/TitleBar";
+import TitleBar from '@/components/TitleBar'
-    import Overview from "../components/finanzer/Overview";
+import Overview from '../components/finanzer/Overview'
-    import User from "../components/finanzer/User";
+import User from '../components/finanzer/User'
-    // eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
-    import { mapGetters } from 'vuex';
+import { mapGetters } from 'vuex'
-    import { mapActions } from 'vuex';
+import { mapActions } from 'vuex'
 
-    export default {
+export default {
-        name: "FinanzerView",
+  name: 'FinanzerView',
-        components: {User, Overview, TitleBar},
+  components: { User, Overview, TitleBar },
   created() {
     this.getAllUsers()
     this.getUsers()
   },
-        data () {
+  data() {
     return {
-                user: null,
+      user: null
     }
   },
-        methods: mapActions({ getAllUsers: 'finanzerUsers/getAllUsers',
+  methods: mapActions({
+    getAllUsers: 'finanzerUsers/getAllUsers',
     setActiveUser: 'finanzerUsers/setActiveUser',
     getUsers: 'finanzerUsers/getUsers',
-            finanzerUsers: 'finanzerUsers/addUser'}),
+    finanzerUsers: 'finanzerUsers/addUser'
-        computed: mapGetters({users: 'finanzerUsers/users',
+  }),
+  computed: mapGetters({
+    users: 'finanzerUsers/users',
     activeUser: 'finanzerUsers/activeUser',
-        allUsers: 'finanzerUsers/allUsers'})
+    allUsers: 'finanzerUsers/allUsers'
-    }
+  })
+}
 </script>
 
 <style scoped>
-
 </style>

src/views/Home.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <TitleBar/>
+    <TitleBar />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 
-import TitleBar from "@/components/TitleBar";
+import TitleBar from '@/components/TitleBar'
 export default {
   name: 'home',
   components: {

src/views/Login.vue

@@ -1,31 +1,17 @@
 <template>
   <div>
-    <TitleBar/>
+    <TitleBar />
     <v-content>
-        <v-container
+      <v-container class="fill-height" fluid>
-                class="fill-height"
+        <v-row align="center" justify="center">
-                fluid
+          <v-col cols="12" sm="8" md="4">
-        >
-            <v-row
-                    align="center"
-                    justify="center"
-            >
-                <v-col
-                        cols="12"
-                        sm="8"
-                        md="4"
-                >
             <v-card class="elevation-12">
-                        <v-toolbar
+              <v-toolbar color="blue accent-4" dark flat>
-                                color="blue accent-4"
-                                dark
-                                flat
-                        >
                 <v-toolbar-title>Login form</v-toolbar-title>
                 <v-spacer />
               </v-toolbar>
               <v-card-text>
-                            <v-form >
+                <v-form>
                   <v-text-field
                     label="Login"
                     name="login"
@@ -52,7 +38,11 @@
               <v-alert v-if="loginError" dense type="error">{{ loginError }}</v-alert>
               <v-card-actions>
                 <v-spacer />
-                            <v-btn @click="doLogin({username: username, password: password})" @submit.prevent="doLogin({username: username, password: password})" color="primary">Login</v-btn>
+                <v-btn
+                  @click="doLogin({username: username, password: password})"
+                  @submit.prevent="doLogin({username: username, password: password})"
+                  color="primary"
+                >Login</v-btn>
               </v-card-actions>
             </v-card>
           </v-col>
@@ -63,13 +53,13 @@
 </template>
 
 <script>
-    import TitleBar from "@/components/TitleBar";
+import TitleBar from '@/components/TitleBar'
-    // eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
-    import { mapActions } from 'vuex';
+import { mapActions } from 'vuex'
-    import { mapGetters } from 'vuex';
+import { mapGetters } from 'vuex'
-    export default {
+export default {
-        name: "Login",
+  name: 'Login',
-        components: {TitleBar},
+  components: { TitleBar },
   data() {
     return {
       username: null,
@@ -78,9 +68,8 @@
   },
   methods: mapActions(['doLogin', 'resetLoginError']),
   computed: mapGetters(['loginError'])
-    }
+}
 </script>
 
 <style scoped>
-
 </style>