From 3be03159930f01fb0fb1e25351755d1286a4ccf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Mon, 27 Jan 2020 19:56:56 +0100
Subject: [PATCH] add joboverview, so the user can see when he has to work

---
 src/components/baruser/CreditLists.vue |  3 +-
 src/components/user/Config.vue         |  4 +-
 src/components/user/CreditOverview.vue | 11 +++-
 src/components/user/Jobs.vue           | 90 ++++++++++++++++++++++++++
 src/components/user/Jobs/Day.vue       | 74 +++++++++++++++++++++
 src/components/user/UserNavigation.vue | 13 +++-
 src/plugins/routes.js                  |  7 +-
 src/router/index.js                    |  6 ++
 src/store/modules/user.js              | 66 +++++++++++++++++--
 9 files changed, 259 insertions(+), 15 deletions(-)
 create mode 100644 src/components/user/Jobs.vue
 create mode 100644 src/components/user/Jobs/Day.vue

diff --git a/src/components/baruser/CreditLists.vue b/src/components/baruser/CreditLists.vue
index 4fae18e..099cd79 100644
--- a/src/components/baruser/CreditLists.vue
+++ b/src/components/baruser/CreditLists.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
+    <v-progress-linear v-if="loading && users.length !== 0" indeterminate />
     <v-container>
-      <AddAmountSkeleton v-if="loading" />
+      <AddAmountSkeleton v-if="loading && users.length === 0" />
     </v-container>
     <div v-for="user in users" :key="users.indexOf(user)">
       <div v-if="isFiltered(user)">
diff --git a/src/components/user/Config.vue b/src/components/user/Config.vue
index 4d0acd2..160542c 100644
--- a/src/components/user/Config.vue
+++ b/src/components/user/Config.vue
@@ -192,10 +192,10 @@ export default {
       loading: 'user/loading'
     }),
     lock() {
-      return this.user.lock ? 'gesperrt' : 'nicht gesperrt'
+      return this.user.locked ? 'gesperrt' : 'nicht gesperrt'
     },
     lockColor() {
-      return this.user.lock ? 'red' : 'green'
+      return this.user.locked ? 'red' : 'green'
     },
     autoLock() {
       return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
diff --git a/src/components/user/CreditOverview.vue b/src/components/user/CreditOverview.vue
index 03cab3f..3595f20 100644
--- a/src/components/user/CreditOverview.vue
+++ b/src/components/user/CreditOverview.vue
@@ -7,11 +7,14 @@
         <v-text-field
           v-model="filter"
           style="margin-top: 3px"
-          append-icon="search"
           outlined
           type="number"
           :rules="[isNumber]"
-        ></v-text-field>
+        >
+          <template v-slot:append>
+            <v-icon>{{magnify}}</v-icon>
+          </template>
+        </v-text-field>
       </v-toolbar-items>
     </v-toolbar>
     <CreditOverviewSkeleton v-if="loading" />
@@ -70,13 +73,15 @@
 import { mapGetters } from 'vuex'
 import Table from '../finanzer/Table'
 import CreditOverviewSkeleton from './Skeleton/CreditOverviewSkeleton'
+import { mdiMagnify } from '@mdi/js'
 export default {
   name: 'CreditOverview',
   components: { CreditOverviewSkeleton, Table },
   data() {
     return {
       isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.",
-      filter: ''
+      filter: '',
+      magnify: mdiMagnify
     }
   },
   methods: {
diff --git a/src/components/user/Jobs.vue b/src/components/user/Jobs.vue
new file mode 100644
index 0000000..5733292
--- /dev/null
+++ b/src/components/user/Jobs.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <v-toolbar>
+      <v-toolbar-title>
+        Dienstübersicht
+      </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"
+            >{{ date.getDate() }}.{{ date.getMonth() + 1 }}.{{
+              date.getFullYear()
+            }}
+            bis {{ toDate.getDate() }}.{{ toDate.getMonth() + 1 }}.{{
+              toDate.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-progress-linear indeterminate v-if="loading" />
+    <div v-for="day in days" :key="days.indexOf(day)">
+      <Day v-bind:day="day" style="margin-top: 3px"></Day>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+import { mapGetters, mapActions } from 'vuex'
+import Day from '@/components/user/Jobs/Day'
+export default {
+  name: 'Jobs',
+  components: { Day },
+  data() {
+    return {
+      keyboard_arrow_left: mdiChevronLeft,
+      keyboard_arrow_right: mdiChevronRight,
+      date: new Date()
+    }
+  },
+  created() {
+    this.createDays(this.date)
+  },
+  methods: {
+    ...mapActions({
+      createDays: 'user/createDays'
+    }),
+    changeMonth(value) {
+      if (value === -1) {
+        this.date = new Date(
+          this.date.getFullYear(),
+          this.date.getMonth(),
+          this.date.getDate() - 1
+        )
+      } else {
+        this.date = new Date(
+          this.date.getFullYear(),
+          this.date.getMonth(),
+          this.date.getDate() + 1
+        )
+      }
+      this.createDays(this.date)
+    },
+    test(day) {
+      let index = this.days.indexOf(day)
+      console.log(index, index % 3)
+      return true
+    }
+  },
+  computed: {
+    ...mapGetters({
+      days: 'user/days',
+      loading: 'user/loading'
+    }),
+    toDate() {
+      return new Date(new Date().setDate(this.date.getDate() + 10))
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/user/Jobs/Day.vue b/src/components/user/Jobs/Day.vue
new file mode 100644
index 0000000..59ae525
--- /dev/null
+++ b/src/components/user/Jobs/Day.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card v-if="day.job">
+    <v-card-title
+      >{{ daysArray[day.date.getDay()] }} den {{ day.date.getDate() }}
+      {{ monthArray[day.date.getMonth()] }}
+      {{ day.date.getFullYear() }}
+    </v-card-title>
+    <v-card-text v-if="day.workers.length !== 0">
+      Du hast Dienst mit:
+      <v-chip
+        style="margin: 3px"
+        v-for="person in day.workers"
+        :key="day.workers.indexOf(person)"
+        >{{ person.user.firstname }}
+        {{ person.user.lastname }}
+      </v-chip>
+    </v-card-text>
+    <v-card-text v-else>
+      Du hast alleine Dienst!
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'Day',
+  props: {
+    day: Object
+  },
+  data() {
+    return {
+      monthArray: [
+        'Januar',
+        'Februar',
+        'März',
+        'April',
+        'Mai',
+        'Juni',
+        'Juli',
+        'August',
+        'September',
+        'Oktober',
+        'November',
+        'Dezember'
+      ],
+      daysArray: [
+        'Sonntag',
+        'Montag',
+        'Dienstag',
+        'Mittwoch',
+        'Donnerstag',
+        'Freitag',
+        'Samstag'
+      ]
+    }
+  },
+  created() {
+    this.updateDay({ date: this.day.date })
+  },
+  methods: {
+    ...mapActions({
+      updateDay: 'user/updateDay'
+    })
+  },
+  watch: {
+    day() {
+      this.updateDay({ date: this.day.date })
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/user/UserNavigation.vue b/src/components/user/UserNavigation.vue
index cdbef9d..ade5ca4 100644
--- a/src/components/user/UserNavigation.vue
+++ b/src/components/user/UserNavigation.vue
@@ -14,6 +14,14 @@
       </v-list-item-icon>
       <v-list-item-title>Finanzübersicht</v-list-item-title>
     </v-list-item>
+    <v-list-item link to="/main/user/jobs">
+      <v-list-item-icon>
+        <v-icon>
+          {{briefcase}}
+        </v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>Dienstübersicht</v-list-item-title>
+    </v-list-item>
     <v-list-item link to="/main/user/config">
       <v-list-item-icon>
         <v-icon>{{account_card_details}}</v-icon>
@@ -24,14 +32,15 @@
 </template>
 
 <script>
-  import {mdiAccountCardDetails, mdiHome, mdiBank} from '@mdi/js'
+  import {mdiAccountCardDetails, mdiHome, mdiBank, mdiBriefcase } from '@mdi/js'
 export default {
   name: 'UserNavigation',
   data () {
     return {
       account_card_details: mdiAccountCardDetails,
       account: mdiHome,
-      bank: mdiBank
+      bank: mdiBank,
+      briefcase: mdiBriefcase
     }
   }
 }
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 6a02cd9..e444ee5 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,7 +1,7 @@
 //const main = 'https://192.168.5.128:5000/'
-//const main = 'http://localhost:5000/'
+const main = 'http://localhost:5000/'
 //const main = 'http://192.168.5.118:5000/'
-const main = 'https://groeger-clan.duckdns.org:5000/'
+//const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',
@@ -28,7 +28,8 @@ const url = {
     }
   },
   user: {
-    config: main + 'user/saveConfig'
+    config: main + 'user/saveConfig',
+    job: main + 'user/job'
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 7b9bc1d..39bd28b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,7 @@ import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
 import ServiceManagement from '../components/vorstand/ServiceManagement'
 import Config from "@/components/user/Config";
+import Jobs from "@/components/user/Jobs";
 
 Vue.use(VueRouter)
 
@@ -49,6 +50,11 @@ const routes = [
             path: 'config',
             name: 'userConfig',
             component: Config
+          },
+          {
+            path: 'jobs',
+            name: 'userJobs',
+            component: Jobs
           }
         ]
       },
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 74a0ae3..575501c 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -6,7 +6,8 @@ const state = {
   creditList: [],
   loading: false,
   addLoading: false,
-  error: ''
+  error: '',
+  days: []
 }
 
 const mutations = {
@@ -131,6 +132,31 @@ const mutations = {
   setError(state, value) {
     state.error = value
     console.log(state)
+  },
+  createDays(state, date) {
+    let days = []
+    for (let i = 0; i <= 10; i++) {
+      days.push({
+        date: new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() + i,
+          12
+        ),
+        job: false,
+        workers: []
+      })
+    }
+    state.days = days
+  },
+  updateDay(state, data) {
+    const date = data.date
+    for (let day in state.days) {
+      if (state.days[day].date - date === 0) {
+        state.days[day].job = data.job
+        if (data.workers) state.days[day].workers = data.workers
+      }
+    }
   }
 }
 
@@ -168,13 +194,17 @@ const actions = {
   async saveConfig({ commit, rootState, dispatch }, data) {
     commit('setLoading', true)
     try {
-      const response = await axios.post(url.user.config, {...data}, {headers: {Token: rootState.login.user.accessToken}})
+      const response = await axios.post(
+        url.user.config,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
       console.log(response.data)
       commit('setUser', response.data)
       commit('setError', '')
     } catch (e) {
       if (e.response) {
-        if (e.response.status === 401) dispatch('logout', null, {root: true})
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
         if (e.response.data) {
           console.log(e.response.data)
           commit('setError', e.response.data.error)
@@ -182,6 +212,32 @@ const actions = {
       }
     }
     commit('setLoading', false)
+  },
+  createDays({ commit }, date) {
+    commit('createDays', date)
+  },
+  async updateDay({ commit, rootState, dispatch }, data) {
+    commit('setLoading', true)
+    try {
+      console.log('hier bin ich')
+      const response = await axios.post(
+        url.user.job,
+        { date: data.date.getTime() / 1000 },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      console.log(response.data)
+      commit('updateDay', { ...response.data, date: data.date })
+    } catch (e) {
+      if (e.response) {
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+        if (e.response.data) {
+          console.log(e.response.data, data.date)
+          commit('setError', e.response.data.error)
+        }
+      }
+      console.log(e)
+    }
+    commit('setLoading', false)
   }
 }
 
@@ -205,8 +261,10 @@ const getters = {
   },
   error: state => {
     return state.error
+  },
+  days: state => {
+    return state.days
   }
-
 }
 
 export default {