added serviceManagement

src/components/finanzer/FinanzerNavigation.vue

@@ -11,6 +11,14 @@
         </v-list-item-icon>
         <v-list-item-title>Gesamtübersicht</v-list-item-title>
       </v-list-item>
+      <v-list-item link to="/main/finanzer/servicemanagement">
+        <v-list-item-icon>
+          <v-icon>work</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>
+          Dienstverwaltung
+        </v-list-item-title>
+      </v-list-item>
     </v-list>
     <v-divider />
     <v-list>

src/components/vorstand/ServiceManagement.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <v-content>
+      <v-toolbar>
+        <v-toolbar-title>
+          Dienstverwaltung
+        </v-toolbar-title>
+        <v-spacer />
+        <v-toolbar-items>
+          <v-btn text icon @click="changeMonth(-1)">
+            <v-icon>keyboard_arrow_left</v-icon>
+          </v-btn>
+          <v-list-item>
+            <v-list-item-title class="title">{{monthArray[date.getMonth()]}} {{date.getFullYear()}}</v-list-item-title>
+          </v-list-item>
+          <v-btn text icon @click="changeMonth(1)">
+            <v-icon>keyboard_arrow_right</v-icon>
+          </v-btn>
+        </v-toolbar-items>
+        <v-spacer />
+      </v-toolbar>
+      <v-card v-for="week in month" :key="month.indexOf(week)">
+        <v-card-title>
+          Woche vom {{ week.startDate.getDate() }}.{{
+            week.startDate.getMonth()+1
+          }}.{{week.startDate.getFullYear()}} bis {{ week.endDate.getDate() }}.{{
+          week.endDate.getMonth()+1
+          }}.{{week.endDate.getFullYear()}}
+        </v-card-title>
+        <v-card-text>
+          <div v-for="day in week.days" :key="day.id">
+            <Day v-bind:day="day" />
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import Day from './ServiceManagementComponents/Day'
+export default {
+  name: 'ServiceManagement',
+  components: { Day },
+  data() {
+    return {
+      id: 0,
+      date: new Date(),
+      monthArray: [
+              'Januar',
+              'Februar',
+              'März',
+              'April',
+              'Mai',
+              'Juni',
+              'Juli',
+              'August',
+              'September',
+              'Oktober',
+              'November',
+              'Dezember'
+      ]
+    }
+  },
+  created() {
+    this.createMonth(this.date)
+    this.getAllUsers()
+  },
+  methods: {
+    ...mapActions({
+      createMonth: 'sm/createMonth',
+      getAllUsers: 'sm/getAllUsers'
+    }),
+    changeMonth(value) {
+      if (value === -1) {
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0, 1)
+      } else {
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 2, 0, 1)
+      }
+      this.createMonth(this.date)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      month: 'sm/month'
+    })
+  }
+}
+</script>
+
+<style scoped></style>

src/components/vorstand/ServiceManagementComponents/Day.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-card v-if="day">
+    <v-card-title v-if="day.date">
+      {{ day.name }} den {{ day.date.getDate() }}.{{
+        day.date.getMonth() + 1
+      }}.{{ day.date.getFullYear() }}
+    </v-card-title>
+    <v-card-text>
+      <v-chip v-for="worker in day.worker" :key="day.worker.indexOf(worker)">
+        {{ worker.firstname }} {{ worker.lastname }}
+      </v-chip>
+      <v-autocomplete
+        chips
+        outlined
+        return-object
+        v-model="user"
+        placeholder="Suche Person"
+        :items="allUsers"
+        item-text="fullName"
+        prepend-inner-icon="search"
+        full-width
+      />
+      <v-btn @click="test({ worker: user, day: day })">Hinzufügen</v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'Day',
+  props: {
+    day: Object
+  },
+  data() {
+    return {
+      user: null
+    }
+  },
+  created() {},
+  methods: {
+    ...mapActions({
+      setWorker: 'sm/setWorker'
+    }),
+    test(data) {
+      this.setWorker(data)
+      console.log('user', this.day)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      allUsers: 'sm/allUsers'
+    })
+  }
+}
+</script>
+
+<style scoped></style>

src/plugins/routes.js

@@ -1,5 +1,6 @@
-//const main = 'http://192.168.5.118:5000/'
+//const main = 'https://192.168.5.128:5000/'
 const main = 'https://localhost:5000/'
+//const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',

src/router/index.js

@@ -14,6 +14,7 @@ import BarNavigation from '../components/baruser/BarNavigation'
 import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
 import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
+import ServiceManagement from '../components/vorstand/ServiceManagement'
 
 Vue.use(VueRouter)
 
@@ -71,6 +72,10 @@ const routes = [
             name: 'activeUser',
             props: true,
             component: User
+          },
+          {
+            path: 'servicemanagement',
+            component: ServiceManagement
           }
         ]
       }

src/store/index.js

@@ -4,6 +4,7 @@ import login from './modules/login'
 import finanzerUsers from './modules/finanzerUsers'
 import barUsers from '@/store/modules/barUsers'
 import user from '@/store/modules/user'
+import sm from '@/store/modules/serviceManagement'
 
 Vue.use(Vuex)
 
@@ -12,6 +13,7 @@ export default new Vuex.Store({
     login,
     finanzerUsers,
     barUsers,
-    user
+    user,
+    sm
   }
 })

src/store/modules/serviceManagement.js

@@ -0,0 +1,219 @@
+import axios from 'axios'
+import url from '@/plugins/routes'
+
+const state = {
+  month: [],
+  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
+    }
+  },
+  createMonth: (state, date) => {
+    let month = []
+    let id = 0
+    const year = date.getFullYear()
+    const mon = date.getMonth()
+    let a = new Date(year, mon, 0, 13, 1)
+    console.log('createMonth', a)
+    let days = a.getDate()
+    let startDate = 1
+    for (let intDay = 1; intDay <= days; intDay++) {
+      if (new Date(year, mon, intDay).getDay() === 3) {
+        startDate = intDay
+        break
+      }
+    }
+    let week = { id: id, days: {} }
+    for (let intDay = startDate; intDay <= days; intDay++) {
+      let currentDate = new Date(year, mon, intDay, 13, 1)
+      console.log('currentDate', currentDate)
+
+      switch (currentDate.getDay()) {
+        case 1:
+          if (week.days.monday) {
+            week.startDate = week.days.monday.date
+          } else if (week.days.tuesday) {
+            week.startDate = week.days.tuesday.date
+          } else if (week.days.wednesday) {
+            week.startDate = week.days.wednesday.date
+          } else if (week.days.thursday) {
+            week.startDate = week.days.thursday.date
+          } else if (week.days.friday) {
+            week.startDate = week.days.friday.date
+          } else if (week.days.satturday) {
+            week.startDate = week.days.satturday.date
+          } else if (week.days.sunday) {
+            week.startDate = week.days.sunday.date
+          }
+
+          if (week.days.sunday) {
+            week.endDate = week.days.sunday.date
+          } else if (week.days.satturday) {
+            week.endDate = week.days.satturday.date
+          } else if (week.days.friday) {
+            week.endDate = week.days.friday.date
+          } else if (week.days.thursday) {
+            week.endDate = week.days.thursday.date
+          } else if (week.days.wednesday) {
+            week.endDate = week.days.wednesday.date
+          } else if (week.days.tuesday) {
+            week.endDate = week.days.tuesday.date
+          } else if (week.days.monday) {
+            week.endDate = week.days.monday.date
+          }
+
+          month.push(week)
+          id++
+          week = { id: id, days: {} }
+          week.days.monday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Montag',
+            worker: []
+          }
+          break
+        case 2:
+          week.days.tuesday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Dienstag',
+            worker: []
+          }
+          break
+        case 3:
+          week.days.wednesday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Mittwoch',
+            worker: []
+          }
+          break
+        case 4:
+          week.days.thursday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Donnerstag',
+            worker: []
+          }
+          break
+        case 5:
+          week.days.friday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Freitag',
+            worker: []
+          }
+          break
+        case 6:
+          week.days.satturday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Samstag',
+            worker: []
+          }
+          break
+        case 0:
+          week.days.sunday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Sontag',
+            worker: []
+          }
+          break
+      }
+    }
+    if (week.days.monday) {
+      week.startDate = week.days.monday.date
+    } else if (week.days.tuesday) {
+      week.startDate = week.days.tuesday.date
+    } else if (week.days.wednesday) {
+      week.startDate = week.days.wednesday.date
+    } else if (week.days.thursday) {
+      week.startDate = week.days.thursday.date
+    } else if (week.days.friday) {
+      week.startDate = week.days.friday.date
+    } else if (week.days.satturday) {
+      week.startDate = week.days.satturday.date
+    } else if (week.days.sunday) {
+      week.startDate = week.days.sunday.date
+    }
+
+    if (week.days.sunday) {
+      week.endDate = week.days.sunday.date
+    } else if (week.days.satturday) {
+      week.endDate = week.days.satturday.date
+    } else if (week.days.friday) {
+      week.endDate = week.days.friday.date
+    } else if (week.days.thursday) {
+      week.endDate = week.days.thursday.date
+    } else if (week.days.wednesday) {
+      week.endDate = week.days.wednesday.date
+    } else if (week.days.tuesday) {
+      week.endDate = week.days.tuesday.date
+    } else if (week.days.monday) {
+      week.endDate = week.days.monday.date
+    }
+    month.push(week)
+    state.month = month
+    console.log(state.month)
+  },
+  setWorker: (state, data) => {
+    console.log('hier ist die mutation', data)
+    for (let week in state.month) {
+      console.log('week', week)
+      for (let day in state.month[week].days) {
+        console.log(state.month[week].days[day], data.day)
+        if (state.month[week].days[day].date - data.day.date === 0) {
+          state.month[week].days[day].worker.push(data.worker)
+          console.log('sm', state.month)
+          return
+        }
+      }
+    }
+  }
+}
+const actions = {
+  createMonth({ commit }, date) {
+    commit('createMonth', date)
+  },
+  async getAllUsers({ commit, rootState, dispatch }) {
+    try {
+      const response = await axios.post(
+        url.searchUser,
+        { searchString: '' },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('setAllUsers', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.data === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  setWorker({ commit }, data) {
+    console.log('hier bin ich', data)
+    commit('setWorker', data)
+  }
+}
+const getters = {
+  month: state => {
+    return state.month
+  },
+  allUsers: state => {
+    return state.allUsers
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}

src/views/FinanzerView.vue

@@ -1,52 +1,10 @@
 <template>
   <div>
-    <v-navigation-drawer
-      mini-variant
-      expand-on-hover
-      app
-      clipped
-      permanent
-      overflow
-      right
-    >
-      <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-title>
-              <v-autocomplete
-                outlined
-                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-title>
-              <v-btn text block @click="addUser(user)">Hinzufügen</v-btn>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </template>
-    </v-navigation-drawer>
     <router-view />
   </div>
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
-import { mapGetters } from 'vuex'
 import { mapActions } from 'vuex'
 
 export default {
@@ -57,23 +15,11 @@ export default {
     this.getUsers()
     this.createYears()
   },
-  data() {
-    return {
-      user: null
-    }
-  },
   methods: mapActions({
     getAllUsers: 'finanzerUsers/getAllUsers',
-    setActiveUser: 'finanzerUsers/setActiveUser',
     getUsers: 'finanzerUsers/getUsers',
-    finanzerUsers: 'finanzerUsers/addUser',
     createYears: 'finanzerUsers/createYears',
     logout: 'logout'
-  }),
-  computed: mapGetters({
-    users: 'finanzerUsers/users',
-    activeUser: 'finanzerUsers/activeUser',
-    allUsers: 'finanzerUsers/allUsers'
   })
 }
 </script>

src/views/Home.vue

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