From 8f786d3883d2b966bc9f41c875be564298f167b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 17 Jan 2020 01:01:10 +0100
Subject: [PATCH 1/2] new Layout and new Routes for router

---
 package.json                           |   4 +-
 src/App.vue                            |  10 +-
 src/components/TitleBar.vue            |  33 ++---
 src/components/user/AddAmount.vue      | 132 +++++++++++++++++++
 src/components/user/CreditOverview.vue | 107 ++++++++++++++++
 src/plugins/routes.js                  |   4 +-
 src/router/index.js                    |  68 ++++++++--
 src/store/index.js                     |   4 +-
 src/store/modules/login.js             |  30 ++++-
 src/store/modules/user.js              | 168 +++++++++++++++++++++++++
 src/views/BarView.vue                  |  26 +---
 src/views/FinanzerView.vue             |  32 +++--
 src/views/Login.vue                    |  28 +++--
 src/views/MainView.vue                 |  84 +++++++++++++
 src/views/UserView.vue                 |  27 ++++
 src/views/contents/GeruechteView.vue   |  27 ++++
 16 files changed, 700 insertions(+), 84 deletions(-)
 create mode 100644 src/components/user/AddAmount.vue
 create mode 100644 src/components/user/CreditOverview.vue
 create mode 100644 src/store/modules/user.js
 create mode 100644 src/views/MainView.vue
 create mode 100644 src/views/UserView.vue
 create mode 100644 src/views/contents/GeruechteView.vue

diff --git a/package.json b/package.json
index 775126e..bce46ff 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,9 @@
       "@vue/prettier",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "no-console": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }
diff --git a/src/App.vue b/src/App.vue
index 164699d..58a0a74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,20 @@
 <template>
   <v-app>
+    <TitleBar />
     <router-view />
     <v-footer app>
-      <span class="px-4">&copy; {{ new Date().getFullYear()}} Studentenclub Wu 5 e.v.</span>
+      <span class="px-4"
+        >&copy; {{ new Date().getFullYear() }} Studentenclub Wu 5 e.v.</span
+      >
     </v-footer>
   </v-app>
 </template>
 
 <script>
+import TitleBar from './components/TitleBar'
 export default {
   name: 'App',
-
-  components: {},
-
+  components: { TitleBar },
   data: () => ({
     //
   })
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
index 60949de..63f956f 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/TitleBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar app clipped-left hide-on-scroll color="blue accent-4" class="elevation-4" dark>
+  <v-app-bar app clipped-left clipped-right 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>
@@ -8,42 +8,27 @@
     <v-btn icon v-if="isFinanzer" href="finanzer">
       <v-icon>attach_money</v-icon>
     </v-btn>
-    <v-btn icon v-if="isBar" href="bar">
+    <v-btn icon v-if="isBar">
       <v-icon>local_bar</v-icon>
     </v-btn>
-    <v-btn v-if="isLoggedIn" @click="logout">Logout</v-btn>
+    <v-btn icon v-if="isUser">
+      <v-icon>person</v-icon>
+    </v-btn>
   </v-app-bar>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'TitleBar',
   computed: {
-    isBar() {
-      try {
-        return this.$store.getters.getGroup.includes('bar') ? true : false
-      } catch (e) {
-        return false
-      }
-    },
-    isFinanzer() {
-      try {
-        return this.$store.getters.getGroup.includes('moneymaster')
-          ? true
-          : false
-      } catch (e) {
-        return false
-      }
-    },
-    isLoggedIn() {
-      return this.$store.getters.getToken
-    }
+    ...mapGetters(['isBar', 'isFinanzer', 'isUser', 'isLoggedIn'])
   },
   methods: {
     ...mapActions(['logout'])
-  }
+  },
+
 }
 </script>
 
diff --git a/src/components/user/AddAmount.vue b/src/components/user/AddAmount.vue
new file mode 100644
index 0000000..e60dfb4
--- /dev/null
+++ b/src/components/user/AddAmount.vue
@@ -0,0 +1,132 @@
+<template>
+  <v-container v-if="user">
+    <v-card>
+      <v-list-item>
+        <v-list-item-title class="title"
+          >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
+        >
+      </v-list-item>
+      <v-card-text>
+        <v-row>
+          <v-col cols="10">
+            <v-row>
+              <v-col>
+                <v-btn
+                  class="creditBtn"
+                  block
+                  @click="addAmount(200)"
+                  :color="color"
+                  :disabled="user.locked"
+                  >2 €</v-btn
+                >
+              </v-col>
+              <v-col>
+                <v-btn
+                  class="creditBtn"
+                  block
+                  @click="addAmount(100)"
+                  :color="color"
+                  :disabled="user.locked"
+                  >1 €</v-btn
+                >
+              </v-col>
+              <v-col>
+                <v-btn
+                  class="creditBtn"
+                  block
+                  @click="addAmount(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(40)"
+                  :color="color"
+                  :disabled="user.locked"
+                  >0,40 €</v-btn
+                >
+              </v-col>
+              <v-col>
+                <v-btn
+                  class="creditBtn"
+                  block
+                  @click="addAmount(20)"
+                  :color="color"
+                  :disabled="user.locked"
+                  >0,20 €</v-btn
+                >
+              </v-col>
+              <v-col>
+                <v-btn
+                  class="creditBtn"
+                  block
+                  @click="addAmount(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(getAllSum())"
+                  >{{
+                    (getAllSum() / 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-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+  import {mapGetters, mapActions} from 'vuex'
+export default {
+  name: 'AddAmount',
+  data() {
+    return {
+      color: 'green accent-4'
+    }
+  },
+  methods: {
+    ...mapActions({
+      addAmount: 'user/addAmount'
+    }),
+    getColor(value) {
+      return value >= 0 ? 'title green--text' : 'title red--text'
+    },
+    getAllSum() {
+      console.log("getAllSum", this.user)
+      if (this.user)
+        return this.user.creditList[this.year][2].sum + this.user.creditList[this.year][1].last
+      return 0
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'user/user',
+      year: 'user/year'
+    }),
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/user/CreditOverview.vue b/src/components/user/CreditOverview.vue
new file mode 100644
index 0000000..01c0cbe
--- /dev/null
+++ b/src/components/user/CreditOverview.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-toolbar>
+      <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
+      <v-spacer />
+      <v-toolbar-items>
+        <v-text-field
+          v-model="filter"
+          style="margin-top: 3px"
+          append-icon="search"
+          outlined
+          :rules="[isNumber]"
+        ></v-text-field>
+      </v-toolbar-items>
+    </v-toolbar>
+    <div v-for="year in years" :key="years.indexOf(year)">
+      <v-card style="margin-top: 3px" v-if="isFiltered(year)">
+        <v-card-title>{{ year }}</v-card-title>
+        <Table v-bind:user="user" v-bind:year="year" />
+        <v-container fluid>
+          <v-col>
+            <v-row>
+              <v-col>
+                <v-label>Vorjahr:</v-label>
+              </v-col>
+              <v-col>
+                <v-chip
+                  outlined
+                  :text-color="getLastColor(user.creditList[year][1].last)"
+                  >{{ (user.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
+                  :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>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-container>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Table from '../finanzer/Table'
+export default {
+  name: 'CreditOverview',
+  components: { Table },
+  data() {
+    return {
+      isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.",
+      filter: ''
+    }
+  },
+  methods: {
+    getLastColor(value) {
+      return value < 0 ? 'red' : 'green'
+    },
+    getAllSum(sum, lastYear) {
+      return lastYear + sum
+    },
+    isFiltered(value) {
+      return value.toString().includes(this.filter)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'user/user'
+    }),
+    years() {
+      let years = []
+      if (this.user) {
+        for (let year in this.user.creditList) {
+          years.unshift(parseInt(year))
+        }
+      }
+      return years
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 4a9c8a2..b4862fe 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -15,7 +15,9 @@ const url = {
   finanzerSetConfig: main + 'finanzerSetConfig',
   finanzerAddUser: main + 'finanzerAddUser',
   finanzerSendAllMail: main + 'finanzerSendAllMail',
-  finanzerSendOneMail: main + 'finanzerSendOneMail'
+  finanzerSendOneMail: main + 'finanzerSendOneMail',
+  userMain: main + 'user/main',
+  userAddAmount: main + 'user/addAmount'
 }
 
 export default url
diff --git a/src/router/index.js b/src/router/index.js
index e7f546e..013404d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,12 @@ import VueRouter from 'vue-router'
 import FinanzerView from '@/views/FinanzerView'
 import Login from '@/views/Login'
 import store from '@/store/index'
-import BarView from '@/views/BarView'
+import GeruechteView from '../views/contents/GeruechteView'
+import AddAmount from '../components/user/AddAmount'
+import CreditOverview from '../components/user/CreditOverview'
+import MainView from '../views/MainView'
+import UserView from '../views/UserView'
+import BarView from '../views/BarView'
 
 Vue.use(VueRouter)
 
@@ -19,9 +24,45 @@ const routes = [
     component: FinanzerView
   },
   {
-    path: '/bar',
-    name: 'bar',
-    component: BarView
+    path: '/main',
+    name: 'main',
+    component: MainView,
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        component: UserView,
+        children: [
+          {
+            path: 'add',
+            name: 'add',
+            component: AddAmount
+          },
+          {
+            path: 'overview',
+            name: 'userOverview',
+            component: CreditOverview
+          }
+        ]
+      },
+      {
+        path: 'bar',
+        name: 'bar',
+        component: BarView,
+        children: [
+          {
+            path: 'geruecht',
+            name: 'geruecht',
+            component: GeruechteView
+          }
+        ]
+      },
+      {
+        path: 'finanzer',
+        name: 'finanzer',
+        component: FinanzerView
+      }
+    ]
   },
   {
     path: '*',
@@ -39,18 +80,23 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   store.dispatch('fetchAccessToken')
-  let sites = ['/finanzer', '/bar']
-  if (sites.includes(to.fullPath)) {
-    if (to.fullPath === '/finanzer') {
+  console.log('fullPath', to.fullPath)
+  if (to.fullPath.includes('/main')) {
+    if (to.fullPath.includes('/main/finanzer')) {
       if (!store.state.login.user.group.includes('moneymaster')) {
         next('/login')
       }
     }
-    if (to.fullPath === '/bar') {
+    if (to.fullPath.includes('/main/bar')) {
       if (!store.state.login.user.group.includes('bar')) {
         next('/login')
       }
     }
+    if (to.fullPath.includes('/main/user')) {
+      if (!store.state.login.user.group.includes('user')) {
+        next('/login')
+      }
+    }
     if (!store.state.login.user.accessToken) {
       next('/login')
     }
@@ -58,9 +104,11 @@ router.beforeEach((to, from, next) => {
   if (to.fullPath === '/login') {
     if (store.state.login.user.accessToken) {
       if (store.state.login.user.group.includes('moneymaster')) {
-        next('/finanzer')
+        next('/main/finanzer')
       } else if (store.state.login.user.group.includes('bar')) {
-        next('/bar')
+        next('/main/bar/geruecht')
+      } else if (store.state.login.user.group.includes('user')) {
+        next('/main/user/add')
       }
     }
   }
diff --git a/src/store/index.js b/src/store/index.js
index e8ca7be..8687346 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import login from './modules/login'
 import finanzerUsers from './modules/finanzerUsers'
 import barUsers from '@/store/modules/barUsers'
+import user from '@/store/modules/user'
 
 Vue.use(Vuex)
 
@@ -10,6 +11,7 @@ export default new Vuex.Store({
   modules: {
     login,
     finanzerUsers,
-    barUsers
+    barUsers,
+    user
   }
 })
diff --git a/src/store/modules/login.js b/src/store/modules/login.js
index 8604395..7abbb6d 100644
--- a/src/store/modules/login.js
+++ b/src/store/modules/login.js
@@ -55,9 +55,11 @@ const actions = {
       commit('loginStop', null)
       commit('updateAccessToken', response.data)
       if (state.user.group.includes('moneymaster')) {
-        router.push('/finanzer')
+        router.push('/main/finanzer')
       } else if (state.user.group.includes('bar')) {
-        router.push('/bar')
+        router.push('/main/bar/geruecht')
+      } else if (state.user.group.includes('user')) {
+        router.push('/main/user/add')
       }
     } catch (err) {
       commit('loginStop', err.response.data.error)
@@ -96,6 +98,30 @@ const getters = {
   },
   loginError: state => {
     return state.loginError
+  },
+  isBar: state => {
+    try {
+      return state.user.group.includes('bar') ? true : false
+    } catch (e) {
+      return false
+    }
+  },
+  isFinanzer: state => {
+    try {
+      return state.user.group.includes('moneymaster') ? true : false
+    } catch (e) {
+      return false
+    }
+  },
+  isUser: state => {
+    try {
+      return state.user.group.includes('user') ? true : false
+    } catch (e) {
+      return false
+    }
+  },
+  isLoggedIn: state => {
+    return state.user.accessToken ? true : false
   }
 }
 
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..4118304
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,168 @@
+import axios from 'axios'
+import url from '@/plugins/routes'
+
+const state = {
+  user: null,
+  creditList: []
+}
+
+const mutations = {
+  setUser: (state, user) => {
+    state.user = user
+    let list = {}
+    for (let creditList in user['creditList']) {
+      console.log(creditList)
+      let amount = mutations.createAmount(user['creditList'][creditList])
+      let credit = mutations.createCredit(user['creditList'][creditList])
+      let sum = mutations.createSum(credit, amount)
+      list[creditList] = [{ ...credit }, { ...amount }, { ...sum }]
+    }
+    state.user.creditList = list
+    state.creditList = []
+    console.log(state.user)
+  },
+  createAmount(creditList) {
+    let amount = {
+      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,
+      mai_amount: 0 - creditList.mai.depts,
+      jun_amount: 0 - creditList.jun.depts,
+      jul_amount: 0 - creditList.jul.depts,
+      aug_amount: 0 - creditList.aug.depts,
+      sep_amount: 0 - creditList.sep.depts,
+      okt_amount: 0 - creditList.okt.depts,
+      nov_amount: 0 - creditList.nov.depts,
+      dez_amount: 0 - creditList.dez.depts,
+      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
+    return amount
+  },
+  createCredit(creditList) {
+    let credit = {
+      type: 'Guthaben',
+      jan_amount: creditList.jan.credit,
+      feb_amount: creditList.feb.credit,
+      maer_amount: creditList.maer.credit,
+      apr_amount: creditList.apr.credit,
+      mai_amount: creditList.mai.credit,
+      jun_amount: creditList.jun.credit,
+      jul_amount: creditList.jul.credit,
+      aug_amount: creditList.aug.credit,
+      sep_amount: creditList.sep.credit,
+      okt_amount: creditList.okt.credit,
+      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
+    return credit
+  },
+  createSum(credit, amount) {
+    let sum = {
+      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,
+      apr_amount: credit.apr_amount + amount.apr_amount,
+      mai_amount: credit.mai_amount + amount.mai_amount,
+      jun_amount: credit.jun_amount + amount.jun_amount,
+      jul_amount: credit.jul_amount + amount.jul_amount,
+      aug_amount: credit.aug_amount + amount.aug_amount,
+      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
+    }
+    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
+  }
+}
+
+const actions = {
+  async getUser({ commit, rootState, dispatch }) {
+    try {
+      const response = await axios.get(url.userMain, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
+      commit('setUser', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async addAmount({ commit, rootState, dispatch }, amount) {
+    try {
+      const response = await axios.post(
+        url.userAddAmount,
+        { amount: amount },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('setUser', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+
+const getters = {
+  user: state => {
+    return state.user
+  },
+  year: state => {
+    let year = 0
+    for (let creditList in state.user.creditList) {
+      let currentYear = parseInt(creditList)
+      if (currentYear > year) year = currentYear
+    }
+    return year
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}
diff --git a/src/views/BarView.vue b/src/views/BarView.vue
index 04a38a2..3487f61 100644
--- a/src/views/BarView.vue
+++ b/src/views/BarView.vue
@@ -1,29 +1,13 @@
 <template>
-  <div>
-    <TitleBar />
-    <v-content>
-      <SearchBar />
-      <CreditLists></CreditLists>
-    </v-content>
-  </div>
+  <v-content>
+    <router-view/>
+  </v-content>
 </template>
 
 <script>
-import TitleBar from '@/components/TitleBar'
-import CreditLists from '@/components/baruser/CreditLists'
-// eslint-disable-next-line no-unused-vars
-import axios from 'axios'
-import SearchBar from '../components/baruser/SearchBar'
 export default {
-  name: 'BarView',
-  components: { SearchBar, CreditLists, TitleBar },
-  created() {},
-  data() {
-    return {}
-  },
-  methods: {}
+  name: 'BarView'
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 067fd84..302413a 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
-    <TitleBar />
-    <v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
+    <v-navigation-drawer
+      mini-variant
+      expand-on-hover
+      app
+      clipped
+      permanent
+      overflow
+      right
+    >
       <v-list>
         <v-list-item class="title" link @click="setActiveUser(activeUser)">
           <v-list-item-icon>
@@ -15,11 +22,17 @@
         <v-list-item
           v-for="user in users"
           v-bind:key="users.indexOf(user)"
-          :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''"
+          :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-title
+            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
+          >
         </v-list-item>
       </v-list>
       <template v-slot:append>
@@ -63,7 +76,6 @@
 </template>
 
 <script>
-import TitleBar from '@/components/TitleBar'
 import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
 // eslint-disable-next-line no-unused-vars
@@ -72,10 +84,11 @@ import { mapActions } from 'vuex'
 
 export default {
   name: 'FinanzerView',
-  components: { User, Overview, TitleBar },
+  components: { User, Overview },
   created() {
     this.getAllUsers()
     this.getUsers()
+    this.createYears()
   },
   data() {
     return {
@@ -86,7 +99,9 @@ export default {
     getAllUsers: 'finanzerUsers/getAllUsers',
     setActiveUser: 'finanzerUsers/setActiveUser',
     getUsers: 'finanzerUsers/getUsers',
-    finanzerUsers: 'finanzerUsers/addUser'
+    finanzerUsers: 'finanzerUsers/addUser',
+    createYears: 'finanzerUsers/createYears',
+    logout: 'logout'
   }),
   computed: mapGetters({
     users: 'finanzerUsers/users',
@@ -96,5 +111,4 @@ export default {
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c357464..b281b4c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <TitleBar />
     <v-content>
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center">
@@ -19,7 +18,9 @@
                     type="text"
                     v-model="username"
                     ref="first"
-                    @keyup.enter="doLogin({username: username, password: password})"
+                    @keyup.enter="
+                      doLogin({ username: username, password: password })
+                    "
                     @input="resetLoginError"
                   />
 
@@ -30,19 +31,26 @@
                     prepend-icon="lock"
                     type="password"
                     v-model="password"
-                    @keyup.enter="doLogin({username: username, password: password})"
+                    @keyup.enter="
+                      doLogin({ username: username, password: password })
+                    "
                     @input="resetLoginError"
                   />
                 </v-form>
               </v-card-text>
-              <v-alert v-if="loginError" dense type="error">{{ loginError }}</v-alert>
+              <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})"
+                  @click="doLogin({ username: username, password: password })"
+                  @submit.prevent="
+                    doLogin({ username: username, password: password })
+                  "
                   color="primary"
-                >Login</v-btn>
+                  >Login</v-btn
+                >
               </v-card-actions>
             </v-card>
           </v-col>
@@ -53,13 +61,12 @@
 </template>
 
 <script>
-import TitleBar from '@/components/TitleBar'
 // eslint-disable-next-line no-unused-vars
 import { mapActions } from 'vuex'
 import { mapGetters } from 'vuex'
 export default {
   name: 'Login',
-  components: { TitleBar },
+  components: {},
   data() {
     return {
       username: null,
@@ -71,5 +78,4 @@ export default {
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
new file mode 100644
index 0000000..057d9c1
--- /dev/null
+++ b/src/views/MainView.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <v-navigation-drawer
+      v-if="isLoggedIn"
+      mini-variant
+      expand-on-hover
+      app
+      clipped
+      permanent
+      overflow
+    >
+      <v-list>
+        <v-list-item v-if="isUser" class="title" link to="/main/user/add">
+          <v-list-item-icon>
+            <v-icon>person</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>Account</v-list-item-title>
+        </v-list-item>
+        <v-list-item v-if="isBar" class="title" link to="/main/bar/geruecht">
+          <v-list-item-icon>
+            <v-icon>local_bar</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>
+            Gerüchte
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer">
+          <v-list-item-icon>
+            <v-icon>attach_money</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>Finanzer</v-list-item-title>
+        </v-list-item>
+      </v-list>
+      <v-divider />
+      <v-list v-if="isUser">
+        <v-list-item link to="/main/user/overview">
+          <v-list-item-icon>
+            <v-icon>account_balance</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>Finanzübersicht</v-list-item-title>
+        </v-list-item>
+      </v-list>
+      <template v-slot:append>
+        <v-list>
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon>exit_to_app</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>
+              <v-btn block text @click="logout">Logout</v-btn>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </template>
+    </v-navigation-drawer>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  name: 'MainView',
+  components: {  },
+  created() {
+  },
+  methods: {
+    ...mapActions({
+      logout: 'logout'
+    })
+  },
+  computed: {
+    ...mapGetters({
+      group: 'group',
+      isBar: 'isBar',
+      isUser: 'isUser',
+      isFinanzer: 'isFinanzer',
+      isLoggedIn: 'isLoggedIn'
+    })
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
new file mode 100644
index 0000000..0463d74
--- /dev/null
+++ b/src/views/UserView.vue
@@ -0,0 +1,27 @@
+<template>
+    <v-content>
+        <router-view/>
+    </v-content>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  name: 'UserView',
+  created() {
+    this.getUser()
+  },
+  methods: {
+    ...mapActions({
+      getUser: 'user/getUser'
+    })
+  },
+  computed: {
+    ...mapGetters({
+      user: 'user/user'
+    })
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/contents/GeruechteView.vue b/src/views/contents/GeruechteView.vue
new file mode 100644
index 0000000..204f650
--- /dev/null
+++ b/src/views/contents/GeruechteView.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <SearchBar />
+    <CreditLists></CreditLists>
+  </div>
+</template>
+
+<script>
+import CreditLists from '@/components/baruser/CreditLists'
+import { mapActions } from 'vuex'
+// eslint-disable-next-line no-unused-vars
+import axios from 'axios'
+import SearchBar from '../../components/baruser/SearchBar'
+export default {
+  name: 'GeruechteView',
+  components: { SearchBar, CreditLists },
+  created() {},
+  data() {
+    return {}
+  },
+  methods: {
+    ...mapActions(['logout'])
+  }
+}
+</script>
+
+<style scoped></style>

From 8ef387ac5513d212227e3ff315056af7aa267704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 17 Jan 2020 22:11:19 +0100
Subject: [PATCH 2/2] added certs for ssl in development mode, layout with
 route finished

---
 cert/server.crt                               |  21 ++++
 cert/server.key                               |  28 +++++
 src/components/baruser/BarNavigation.vue      |  20 ++++
 .../finanzer/FinanzerNavigation.vue           |  49 +++++++++
 src/components/finanzer/Overview.vue          |  46 ++++++--
 src/components/finanzer/User.vue              | 103 +++++++++++++-----
 src/components/user/UserNavigation.vue        |  26 +++++
 src/plugins/routes.js                         |   2 +-
 src/router/index.js                           |  28 +++--
 src/store/modules/finanzerUsers.js            |  21 ++--
 src/store/modules/login.js                    |   2 +-
 src/views/FinanzerView.vue                    |  37 +------
 src/views/MainView.vue                        |  13 +--
 vue.config.js                                 |  10 +-
 14 files changed, 297 insertions(+), 109 deletions(-)
 create mode 100644 cert/server.crt
 create mode 100644 cert/server.key
 create mode 100644 src/components/baruser/BarNavigation.vue
 create mode 100644 src/components/finanzer/FinanzerNavigation.vue
 create mode 100644 src/components/user/UserNavigation.vue

diff --git a/cert/server.crt b/cert/server.crt
new file mode 100644
index 0000000..e804409
--- /dev/null
+++ b/cert/server.crt
@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDazCCAlOgAwIBAgIJAJGH2ozWvd1RMA0GCSqGSIb3DQEBCwUAMFMxCzAJBgNV
+BAYTAkRFMQ8wDQYDVQQIDAZTYXhvbnkxEDAOBgNVBAcMB0RyZXNkZW4xITAfBgNV
+BAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDAxMTcwOTA0MDFaFw0z
+MDAxMDQwOTA0MDFaMEQxCzAJBgNVBAYTAkRFMQ8wDQYDVQQIDAZTYXhvbnkxEDAO
+BgNVBAcMB0RyZXNkZW4xEjAQBgNVBAMMCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcN
+AQEBBQADggEPADCCAQoCggEBALlkr1UOQypLKicESRnse52d5mAX9MjZQpH0/Y5u
+V5WxpPSasmOpt4MRj5MWTfTK2ukj/jLtPAMsggUh7wMXb1uytHj7T5mtiahXBM0H
+1sUi2nScXR6doQZlmqKWDGrVS7WHULM01WhirsnxI8S8e6Evpk4F5/RafKA8FgYI
+Ongg6S1B16+7T0e/FnILoMjKr1jpgzXnVkPFIneu/qVevSNco5/aw+bc6sjeS/ZA
+65dXFGpDlw0lPRHLT5/CgNyMyiLYov7KwMycZw7uxa1ynO+73tqe5tvO/DiMpAPJ
+EkrSz/StYBsGJxDhwq5RT31tHVtHhTf0rk1BmaoQJ0Aq7iECAwEAAaNRME8wHwYD
+VR0jBBgwFoAUt8P5gBfN9hCUAiWhtPH5fTWnctAwCQYDVR0TBAIwADALBgNVHQ8E
+BAMCBPAwFAYDVR0RBA0wC4IJbG9jYWxob3N0MA0GCSqGSIb3DQEBCwUAA4IBAQCD
+fBByVq8AbV1DMrY+MElb/nZA5/cuGnUpBpjSlk5OnYHWtywuQk6veiiJ0S2fNfqf
+RzwOFuZDHKmIcH0574VssLfUynMKP3w3xb2ZNic3AxAdhzZ6LXLx6+qF5tYcL7oC
+UWmj5Mo9SkX5HZLEGamQlVyGOGKNatxep4liyoSeKXr0AOHYfB4AkDhVZn7yQc/v
+But42fLBg4mE+rk4UBYOHA4XdoFwqgTCNZq2RxKzvG9LIcok6lOc6gDnfTsH8GqE
+byGpfIIQAXF8aftCm4dGXxtzMh8C5d0t2Ell9g+Rr8i/enebT2nJ9B9ptldDjhcZ
+7I0ywGsXwrh0EwFsX74/
+-----END CERTIFICATE-----
diff --git a/cert/server.key b/cert/server.key
new file mode 100644
index 0000000..153fd6b
--- /dev/null
+++ b/cert/server.key
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC5ZK9VDkMqSyon
+BEkZ7HudneZgF/TI2UKR9P2ObleVsaT0mrJjqbeDEY+TFk30ytrpI/4y7TwDLIIF
+Ie8DF29bsrR4+0+ZrYmoVwTNB9bFItp0nF0enaEGZZqilgxq1Uu1h1CzNNVoYq7J
+8SPEvHuhL6ZOBef0WnygPBYGCDp4IOktQdevu09HvxZyC6DIyq9Y6YM151ZDxSJ3
+rv6lXr0jXKOf2sPm3OrI3kv2QOuXVxRqQ5cNJT0Ry0+fwoDcjMoi2KL+ysDMnGcO
+7sWtcpzvu97anubbzvw4jKQDyRJK0s/0rWAbBicQ4cKuUU99bR1bR4U39K5NQZmq
+ECdAKu4hAgMBAAECggEABoMQ3Y34sf2d52zxHGYAGZM4SlvND1kCS5otZdleXjW1
+M5pTdci6V3JAdswrxNNzSQkonqVSnFHt5zw/5v3lvXTTfgRl0WIVGcKkuobx9k65
+Gat8YdzrkQv0mI1otj/zvtaX8ROEA3yj4xgDR5/PP+QqlUcD1MNw6TfzFhcn5pxB
+/RDPmvarMhzMdDW60Uub6Z7e/kVPuXWrW4bDyULd1d1NoSibnFZi+vGY0Lc1ctDW
+2Vl7A8RFTcQi6Cjx/FwgPGJTBE4UMjIBO3wnoPQBMrsSxeGhcarerqIlEafgT4XN
+p9BMtRyaXE7TTb1BXc35ZYNJLDLJKQxABhrEHtFreQKBgQDpiGwuKAFK8BLPlbAx
+zkShhKd9fhlwm2bfRv3cojPQZsxn0BjefmtrISbKCD79Ivyn7TnOyYAoKAxdp2q9
+wtz94aAXV2lfhUw2lhcb/aw4sXuY/s1XnVyoglOO8pYRCUN0o80pKuWFsaDyy/uL
+LhINff1oMNCa7vmMdu8Ccz0o/wKBgQDLOqdTQhSFs4f1yhlDDH3pqT6eKvtFNeRJ
+usxYDnAyRXHRqwhQ86z1nBZIgwXqq7PfO9V5Y/l6/2HmmA2ufjS8aBTNpCUMuvJk
+y98Z4hTjKRdnVlMUjHq9ahCixJVQ8pcCnWRFdeAwSKhHQiJEFLYeYOIrUeCIYJI4
+FiCshSPI3wKBgGU0ErWZ7p18FprRIs8itYlNhIwUxo+POPCPwloIDO5GblSa0Pwy
+yvhdIIMzOaDXtahMXN3pYtmEKX+4msBrnvuC+K7E2cxkZtfNCWy+7RCQkaCG45QR
+hOMdv3pWVIRDgHEevz0U8uySQs6VaYgySe6A5/1sEiriX1DpBcEJEbsfAoGAKUCb
+rGvSbJ1XsM24OQL1IBQJsON6o77fuxOe3RT5M0sjYnL8OipsZmKrp0ZpUgxOc7ba
+i0x+3LewMLWWuV/G5qOd7WwvVRkxkMJNZByfLskthf1g2d/2HjLEc7XBtW+4tYAr
+VWoq+sIU3noPKJCnsxzpa++vyx8HLzlWoo5YCDMCgYBJvGH2zMgInlQNO/2XY5nl
+E53EZMex+RDq8Wzr4tRM3IrCGc2t8WKEQ/9teKNH0tg9xib0vhqqmiGl1xNfqJVo
+ePJyfgFabeUx9goG3mgTdV9woSRlBJso62dM0DAC/jsJoHnVzgokysR4/BfW9Da+
+AYTxRZSNbfmsTHawXqG8Fw==
+-----END PRIVATE KEY-----
diff --git a/src/components/baruser/BarNavigation.vue b/src/components/baruser/BarNavigation.vue
new file mode 100644
index 0000000..2542cc7
--- /dev/null
+++ b/src/components/baruser/BarNavigation.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-list>
+    <v-list-item link to="/main/bar/geruecht">
+      <v-list-item-icon>
+        <v-icon>local_drink</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Geruecht
+      </v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: 'BarNavigation'
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/finanzer/FinanzerNavigation.vue b/src/components/finanzer/FinanzerNavigation.vue
new file mode 100644
index 0000000..065e4f1
--- /dev/null
+++ b/src/components/finanzer/FinanzerNavigation.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <v-list>
+      <v-list-item
+        class="title"
+        link
+        to="/main/finanzer/overview"
+      >
+        <v-list-item-icon>
+          <v-icon>home</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Gesamtübersicht</v-list-item-title>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-list>
+      <div v-for="user in users" v-bind:key="users.indexOf(user)">
+        <v-list-item
+          :to="{ name: 'activeUser', params: { id: user.username } }"
+          link
+        >
+          <v-list-item-title
+            >{{ user.lastname }}, {{ user.firstname }}
+          </v-list-item-title>
+        </v-list-item>
+      </div>
+    </v-list>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'FinanzerNavigation',
+  methods: {
+    ...mapActions({
+      addUser: 'finanzerUsers/addUser',
+    })
+  },
+  computed: {
+    ...mapGetters({
+      users: 'finanzerUsers/users',
+      allUsers: 'finanzerUsers/allUsers'
+    })
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index ec0c0ae..edfcd5a 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-content>
     <v-toolbar tile>
       <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
       <v-spacer />
@@ -17,12 +17,23 @@
       <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"
+        <v-autocomplete
           outlined
-        ></v-text-field>
+          return-object
+          v-model="user"
+          style="margin-top: 3px"
+          placeholder="Suche Person"
+          :items="allUsers"
+          item-text="fullName"
+          prepend-inner-icon="search"
+          full-width
+          :search-input.sync="filter"
+        />
+        <v-btn
+          text
+          @click="addToUser(user)"
+          >Hinzufügen</v-btn
+        >
       </v-toolbar-items>
     </v-toolbar>
     <v-expand-transition>
@@ -189,7 +200,7 @@
         </v-container>
       </v-card>
     </div>
-  </div>
+  </v-content>
 </template>
 
 <script>
@@ -204,6 +215,7 @@ export default {
       errorExpand: false,
 
       filter: '',
+      user: null,
 
       amount: null,
       isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
@@ -238,7 +250,8 @@ export default {
       addAmount: 'finanzerUsers/addAmount',
       addCredit: 'finanzerUsers/addCredit',
       countYear: 'finanzerUsers/countYear',
-      sendMails: 'finanzerUsers/sendMails'
+      sendMails: 'finanzerUsers/sendMails',
+      addUser: 'finanzerUsers/addUser'
     }),
     async getData(promise) {
       return await promise
@@ -307,10 +320,18 @@ export default {
       )
     },
     isFiltered(user) {
-      return (
-        user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
-        user.lastname.toLowerCase().includes(this.filter.toLowerCase())
-      )
+      try {
+        return (
+          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
+          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+        )
+      } catch (e) {
+        return true
+      }
+    },
+    addToUser(user) {
+      this.addUser(user)
+      this.$router.push({name: 'activeUser', params: {id: user.username}})
     },
     createDefault() {
       this.amount = null
@@ -344,6 +365,7 @@ export default {
     },
     ...mapGetters({
       users: 'finanzerUsers/users',
+      allUsers: 'finanzerUsers/allUsers',
       errorMails: 'finanzerUsers/errorMails',
       year: 'finanzerUsers/year',
       years: 'finanzerUsers/years',
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
index 0496546..22c3647 100644
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@@ -1,15 +1,21 @@
 <template>
-  <div>
+  <v-content v-if="activeUser">
     <v-toolbar tile>
-      <v-toolbar-title>{{activeUser.lastname}}, {{activeUser.firstname}}</v-toolbar-title>
+      <v-toolbar-title
+        >{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title
+      >
       <v-spacer />
       <v-toolbar-items>
-        <v-btn @click="sendMail({username: activeUser.username})" text>Email senden</v-btn>
+        <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)">{{errorMessage(errorMail)}}</v-alert>
+        <v-alert dense :type="computeError(errorMail)">{{
+          errorMessage(errorMail)
+        }}</v-alert>
       </v-card>
     </v-expand-transition>
     <v-card style="margin-top: 3px;">
@@ -24,12 +30,16 @@
               <v-chip
                 outlined
                 :text-color="getLockedColor(activeUser.locked)"
-              >{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+                >{{ 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>
+                @click="
+                  doLock({ user: activeUser, locked: !activeUser.locked })
+                "
+                >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}</v-btn
+              >
             </v-col>
           </v-row>
           <v-divider style="margin-bottom: 15px;" />
@@ -46,7 +56,10 @@
                 return-object
                 v-model="autoLock"
                 label="Automatische Sperre"
-                :items="[{value: true, text: 'Aktiviert'}, {value: false, text: 'Deaktiviert'}]"
+                :items="[
+                  { value: true, text: 'Aktiviert' },
+                  { value: false, text: 'Deaktiviert' }
+                ]"
                 item-text="text"
                 item-value="value"
               />
@@ -55,8 +68,15 @@
           <v-row>
             <v-btn
               block
-              @click="saveConfig({user: activeUser, limit: limit, autoLock: autoLock.value})"
-            >Speichern</v-btn>
+              @click="
+                saveConfig({
+                  user: activeUser,
+                  limit: limit,
+                  autoLock: autoLock.value
+                })
+              "
+              >Speichern</v-btn
+            >
           </v-row>
         </v-form>
       </v-card-text>
@@ -67,14 +87,21 @@
         <v-form style="margin-left: 15px; margin-right: 15px">
           <v-row>
             <v-col>
-              <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
+              <v-text-field
+                :rules="[isNumber]"
+                label="Betrag"
+                v-model="amount"
+              ></v-text-field>
             </v-col>
             <v-col>
               <v-select
                 return-object
                 v-model="type"
                 label="Typ"
-                :items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]"
+                :items="[
+                  { value: 'amount', text: 'Schulden' },
+                  { value: 'credit', text: 'Guthaben' }
+                ]"
                 item-text="text"
                 item-value="value"
               ></v-select>
@@ -108,7 +135,7 @@
     </v-card>
     <div v-for="year in years" :key="years.indexOf(year)">
       <v-card style="margin-top: 3px;">
-        <v-card-title>{{year}}</v-card-title>
+        <v-card-title>{{ year }}</v-card-title>
         <Table v-bind:user="activeUser" v-bind:year="year" />
         <v-container fluid>
           <v-col>
@@ -119,8 +146,13 @@
               <v-col>
                 <v-chip
                   outlined
-                  :text-color="getLastColor(activeUser.creditList[year][1].last)"
-                >{{(activeUser.creditList[year][1].last / 100).toFixed(2)}}</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>
@@ -129,10 +161,23 @@
                 <v-chip
                   outlined
                   x-large
-                  :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))"
+                  :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)}}
+                  {{
+                    (
+                      getAllSum(
+                        activeUser.creditList[year][2].sum,
+                        activeUser.creditList[year][1].last
+                      ) / 100
+                    ).toFixed(2)
+                  }}
                 </v-chip>
               </v-col>
             </v-row>
@@ -140,7 +185,7 @@
         </v-container>
       </v-card>
     </div>
-  </div>
+  </v-content>
 </template>
 
 <script>
@@ -148,6 +193,9 @@ import Table from './Table'
 import { mapGetters, mapActions } from 'vuex'
 export default {
   name: 'User',
+  props: {
+    id: String
+  },
   components: { Table },
   data() {
     return {
@@ -180,11 +228,7 @@ export default {
     }
   },
   created() {
-    this.limit = (this.activeUser.limit / 100).toFixed(2)
-    this.autoLock = {
-      value: this.activeUser.autoLock,
-      text: this.activeUser.autoLock ? 'Aktiviert' : 'Deaktiviert'
-    }
+    this.setActiveUser(this.$route.params.id)
   },
   methods: {
     ...mapActions({
@@ -192,7 +236,8 @@ export default {
       addCredit: 'finanzerUsers/addCredit',
       sendMail: 'finanzerUsers/sendMail',
       doLock: 'finanzerUsers/doLock',
-      saveConfig: 'finanzerUsers/saveConfig'
+      saveConfig: 'finanzerUsers/saveConfig',
+      setActiveUser: 'finanzerUsers/setActiveUser'
     }),
     getLastColor(value) {
       return value < 0 ? 'red' : 'green'
@@ -296,15 +341,19 @@ export default {
   },
   watch: {
     activeUser(newVal) {
+      console.log(newVal)
       this.limit = (newVal.limit / 100).toFixed(2)
       this.autoLock = {
         value: newVal.autoLock,
         text: newVal.autoLock ? 'Aktiviert' : 'Deaktiviert'
       }
+    },
+    id(newVal) {
+      console.log(newVal)
+      this.setActiveUser(newVal)
     }
   }
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/components/user/UserNavigation.vue b/src/components/user/UserNavigation.vue
new file mode 100644
index 0000000..69a68db
--- /dev/null
+++ b/src/components/user/UserNavigation.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-list>
+    <v-list-item link to="/main/user/add">
+      <v-list-item-icon>
+        <v-icon>home</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Home
+      </v-list-item-title>
+    </v-list-item>
+    <v-list-item link to="/main/user/overview">
+      <v-list-item-icon>
+        <v-icon>account_balance</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>Finanzübersicht</v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: 'UserNavigation'
+}
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index b4862fe..3861d98 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,5 +1,5 @@
 //const main = 'http://192.168.5.118:5000/'
-const main = 'http://localhost:5000/'
+const main = 'https://localhost:5000/'
 
 const url = {
   login: main + 'login',
diff --git a/src/router/index.js b/src/router/index.js
index 013404d..a816fab 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,11 @@ import CreditOverview from '../components/user/CreditOverview'
 import MainView from '../views/MainView'
 import UserView from '../views/UserView'
 import BarView from '../views/BarView'
+import UserNavigation from '../components/user/UserNavigation'
+import BarNavigation from '../components/baruser/BarNavigation'
+import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
+import Overview from '../components/finanzer/Overview'
+import User from '../components/finanzer/User'
 
 Vue.use(VueRouter)
 
@@ -18,11 +23,6 @@ const routes = [
     name: 'login',
     component: Login
   },
-  {
-    path: '/finanzer',
-    name: 'finanzer',
-    component: FinanzerView
-  },
   {
     path: '/main',
     name: 'main',
@@ -31,7 +31,7 @@ const routes = [
       {
         path: 'user',
         name: 'user',
-        component: UserView,
+        components: { userNav: UserNavigation, default: UserView },
         children: [
           {
             path: 'add',
@@ -48,7 +48,7 @@ const routes = [
       {
         path: 'bar',
         name: 'bar',
-        component: BarView,
+        components: { userNav: BarNavigation, default: BarView },
         children: [
           {
             path: 'geruecht',
@@ -60,7 +60,19 @@ const routes = [
       {
         path: 'finanzer',
         name: 'finanzer',
-        component: FinanzerView
+        components: { default: FinanzerView, finanzerNav: FinanzerNavigation },
+        children: [
+          {
+            path: 'overview',
+            component: Overview
+          },
+          {
+            path: 'user/:id',
+            name: 'activeUser',
+            props: true,
+            component: User
+          }
+        ]
       }
     ]
   },
diff --git a/src/store/modules/finanzerUsers.js b/src/store/modules/finanzerUsers.js
index 766f0f6..2f3984a 100644
--- a/src/store/modules/finanzerUsers.js
+++ b/src/store/modules/finanzerUsers.js
@@ -4,9 +4,7 @@ import url from '@/plugins/routes'
 
 const state = {
   users: [],
-  activeUser: {
-    username: null
-  },
+  activeUser: '',
   allUsers: [],
   user: null,
   errorMails: null,
@@ -38,13 +36,8 @@ const mutations = {
         state.allUsers[i].firstname + ' ' + state.allUsers[i].lastname
     }
   },
-  setActiveUser: (state, user) => {
-    if (state.activeUser.username === user.username) {
-      state.activeUser = { username: null }
-    } else {
-      state.activeUser = user
-    }
-    state.errorMail = null
+  setActiveUser: (state, username) => {
+    state.activeUser = username
   },
   setUsers: (state, users) => {
     for (let user in users) {
@@ -256,8 +249,8 @@ const actions = {
           dispatch('logout', null, { root: true })
     }
   },
-  setActiveUser({ commit }, user) {
-    commit('setActiveUser', user)
+  setActiveUser({ commit }, username) {
+    commit('setActiveUser', username)
   },
   async addAmount({ commit, rootState, dispatch }, data) {
     try {
@@ -390,7 +383,9 @@ const getters = {
     return state.users
   },
   activeUser: state => {
-    return state.activeUser
+    return state.users.find(user => {
+      return user.username === state.activeUser
+    })
   },
   allUsers: state => {
     return state.allUsers
diff --git a/src/store/modules/login.js b/src/store/modules/login.js
index 7abbb6d..5617825 100644
--- a/src/store/modules/login.js
+++ b/src/store/modules/login.js
@@ -55,7 +55,7 @@ const actions = {
       commit('loginStop', null)
       commit('updateAccessToken', response.data)
       if (state.user.group.includes('moneymaster')) {
-        router.push('/main/finanzer')
+        router.push('/main/finanzer/overview')
       } else if (state.user.group.includes('bar')) {
         router.push('/main/bar/geruecht')
       } else if (state.user.group.includes('user')) {
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 302413a..2341ee9 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -9,32 +9,6 @@
       overflow
       right
     >
-      <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>Gesamtübersicht</v-list-item-title>
-        </v-list-item>
-      </v-list>
-      <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-title
-            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
-          >
-        </v-list-item>
-      </v-list>
       <template v-slot:append>
         <v-list>
           <v-list-item>
@@ -66,25 +40,18 @@
         </v-list>
       </template>
     </v-navigation-drawer>
-    <v-content v-if="!activeUser.username">
-      <Overview />
-    </v-content>
-    <v-content v-else>
-      <User />
-    </v-content>
+    <router-view />
   </div>
 </template>
 
 <script>
-import Overview from '../components/finanzer/Overview'
-import User from '../components/finanzer/User'
 // eslint-disable-next-line no-unused-vars
 import { mapGetters } from 'vuex'
 import { mapActions } from 'vuex'
 
 export default {
   name: 'FinanzerView',
-  components: { User, Overview },
+  components: {},
   created() {
     this.getAllUsers()
     this.getUsers()
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 057d9c1..d8661c6 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -24,7 +24,7 @@
             Gerüchte
           </v-list-item-title>
         </v-list-item>
-        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer">
+        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
           <v-list-item-icon>
             <v-icon>attach_money</v-icon>
           </v-list-item-icon>
@@ -32,14 +32,9 @@
         </v-list-item>
       </v-list>
       <v-divider />
-      <v-list v-if="isUser">
-        <v-list-item link to="/main/user/overview">
-          <v-list-item-icon>
-            <v-icon>account_balance</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>Finanzübersicht</v-list-item-title>
-        </v-list-item>
-      </v-list>
+      <router-view name="finanzerNav" />
+      <router-view name="userNav"/>
+      <router-view name="barNav"/>
       <template v-slot:append>
         <v-list>
           <v-list-item>
diff --git a/vue.config.js b/vue.config.js
index 6f7f0e0..2bb43cb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,8 +1,12 @@
+//const fs = require('fs')
+
 module.exports = {
-  "transpileDependencies": [
-    "vuetify"
-  ],
+  transpileDependencies: ['vuetify'],
   devServer: {
     disableHostCheck: true
+    // https: {
+    //   key: fs.readFileSync('./cert/server.key'),
+    //   cert: fs.readFileSync('./cert/server.crt')
+    // }
   }
 }