finished ##168

This commit is contained in:
Tim Gröger 2020-02-22 11:14:54 +01:00
parent ae89781da1
commit 62af175884
5 changed files with 375 additions and 88 deletions

View File

@ -11,12 +11,8 @@
</v-btn> </v-btn>
<v-list-item> <v-list-item>
<v-list-item-title class="title" <v-list-item-title class="title"
>{{ date.getDate() }}.{{ date.getMonth() + 1 }}.{{ >{{ monthArray[date.getMonth()] }}
date.getFullYear() {{ date.getFullYear() }}
}}
bis {{ toDate.getDate() }}.{{ toDate.getMonth() + 1 }}.{{
toDate.getFullYear()
}}
</v-list-item-title> </v-list-item-title>
</v-list-item> </v-list-item>
<v-btn text icon @click="changeMonth(1)"> <v-btn text icon @click="changeMonth(1)">
@ -25,10 +21,25 @@
</v-toolbar-items> </v-toolbar-items>
<v-spacer /> <v-spacer />
</v-toolbar> </v-toolbar>
<v-progress-linear indeterminate v-if="loading" /> <v-card v-for="week in month" :key="month.indexOf(week)">
<div v-for="day in days" :key="days.indexOf(day)"> <v-card-title class="subtitle-1 font-weight-bold">
<Day v-bind:day="day" style="margin-top: 3px"></Day> 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>
<v-row justify="start" align="start">
<div v-for="day in week.days" :key="day.id">
<v-col>
<Day v-bind:day="day" />
</v-col>
</div> </div>
</v-row>
</v-card-text>
</v-card>
</div> </div>
</template> </template>
@ -43,46 +54,43 @@ export default {
return { return {
keyboard_arrow_left: mdiChevronLeft, keyboard_arrow_left: mdiChevronLeft,
keyboard_arrow_right: mdiChevronRight, keyboard_arrow_right: mdiChevronRight,
date: new Date() date: new Date(),
monthArray: [
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'
]
} }
}, },
created() { created() {
this.createDays(this.date) this.createMonth(this.date)
}, },
methods: { methods: {
...mapActions({ ...mapActions({
createDays: 'user/createDays' createMonth: 'jobs/createMonth'
}), }),
changeMonth(value) { changeMonth(value) {
if (value === -1) { if (value === -1) {
this.date = new Date( this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
this.date.getFullYear(),
this.date.getMonth(),
this.date.getDate() - 1
)
} else { } else {
this.date = new Date( this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
this.date.getFullYear(),
this.date.getMonth(),
this.date.getDate() + 1
)
} }
this.createDays(this.date) this.createMonth(this.date)
},
test(day) {
let index = this.days.indexOf(day)
console.log(index, index % 3)
return true
} }
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
days: 'user/days', month: 'jobs/month'
loading: 'user/loading' })
}),
toDate() {
return new Date(new Date().setDate(this.date.getDate() + 10))
}
} }
} }
</script> </script>

View File

@ -1,28 +1,61 @@
<template> <template>
<v-card v-if="day.job"> <div v-if="day">
<v-card-title <v-card :color="color(day)" max-width="250px" min-width="250px">
>{{ daysArray[day.date.getDay()] }} den {{ day.date.getDate() }} <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
{{ monthArray[day.date.getMonth()] }} {{ day.name }} den {{ day.date.getDate() }}.{{
{{ day.date.getFullYear() }} day.date.getMonth() + 1
}}.{{ day.date.getFullYear() }}
</v-card-title> </v-card-title>
<v-card-text v-if="day.workers.length !== 0"> <v-card-text>
Du hast Dienst mit: <v-expand-transition>
<v-chip <v-row align="center" justify="center" v-if="day.loading">
style="margin: 3px" <v-progress-circular indeterminate color="grey" />
v-for="person in day.workers" </v-row>
:key="day.workers.indexOf(person)" </v-expand-transition>
>{{ person.user.firstname }} <v-expand-transition>
{{ person.user.lastname }} <div v-show="!day.loading">
</v-chip> <!-- <v-autocomplete-->
</v-card-text> <!-- chips-->
<v-card-text v-else> <!-- return-object-->
Du hast alleine Dienst! <!-- multiple-->
<!-- v-model="day.worker"-->
<!-- item-text="fullName"-->
<!-- label="Dienste"-->
<!-- filled-->
<!-- color="green"-->
<!-- @input="searchInput = null"-->
<!-- :search-input.sync="searchInput"-->
<!-- @blur="focused = false"-->
<!-- @focus="focused = true"-->
<!-- disabled-->
<!-- >-->
<!-- <template v-slot:prepend-inner>-->
<!-- <v-icon>{{ account_add }}</v-icon>-->
<!-- </template>-->
<!-- <template v-slot:selection="data">-->
<!-- <v-chip v-bind="data.attrs" :input-value="data.selected" close>-->
<!-- {{ data.item.firstname }} {{ data.item.lastname }}-->
<!-- </v-chip>-->
<!-- </template>-->
<!-- <template v-slot:item="data">-->
<!-- <v-list-item-content>-->
<!-- <v-list-item-title>-->
<!-- {{ data.item.firstname }} {{ data.item.lastname }}-->
<!-- </v-list-item-title>-->
<!-- </v-list-item-content>-->
<!-- </template>-->
<!-- </v-autocomplete>-->
<v-chip style="margin: 3px;" v-for="worker in day.worker" :key="day.worker.indexOf(worker)">{{ worker.firstname }} {{ worker.lastname }}</v-chip>
</div>
</v-expand-transition>
</v-card-text> </v-card-text>
</v-card> </v-card>
</div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions, mapGetters } from 'vuex'
import { mdiAccountPlus } from '@mdi/js'
export default { export default {
name: 'Day', name: 'Day',
props: { props: {
@ -30,42 +63,56 @@ export default {
}, },
data() { data() {
return { return {
monthArray: [ account_add: mdiAccountPlus,
'Januar', searchInput: null
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'
],
daysArray: [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samstag'
]
} }
}, },
created() { created() {
this.updateDay({ date: this.day.date }) this.setLoading(this.day.date)
this.getUser({
date: this.day.date.getTime() / 1000,
startdatetime: this.day.date
})
}, },
methods: { methods: {
...mapActions({ ...mapActions({
updateDay: 'user/updateDay' getUser: 'jobs/getUser',
setLoading: 'jobs/setDayLoading',
setNotLoading: 'jobs/setDayNotLoading'
}),
test(event) {
console.log('blur', event)
},
color: day => {
if (day) {
if (day.date.getDay() === 0 || day.date.getDay() === 1) {
return 'grey lighten-4'
} else {
if (day.worker.length < 2) {
return 'yellow'
} else {
return 'light-green'
}
}
} else {
return 'grey lighten-4'
}
}
},
computed: {
...mapGetters({
disabled: 'jobs/disabled'
}) })
}, },
watch: { watch: {
day() { day() {
this.updateDay({ date: this.day.date }) this.getUser({
date: this.day.date.getTime() / 1000,
startdatetime: this.day.date
})
},
worker() {
return this.day.worker
} }
} }
} }

View File

@ -8,7 +8,7 @@
<v-spacer /> <v-spacer />
<v-toolbar-items> <v-toolbar-items>
<v-btn text icon @click="changeMonth(-1)"> <v-btn text icon @click="changeMonth(-1)">
<v-icon>{{keyboard_arrow_left}}</v-icon> <v-icon>{{ keyboard_arrow_left }}</v-icon>
</v-btn> </v-btn>
<v-list-item> <v-list-item>
<v-list-item-title class="title" <v-list-item-title class="title"
@ -17,7 +17,7 @@
> >
</v-list-item> </v-list-item>
<v-btn text icon @click="changeMonth(1)"> <v-btn text icon @click="changeMonth(1)">
<v-icon>{{keyboard_arrow_right}}</v-icon> <v-icon>{{ keyboard_arrow_right }}</v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-spacer /> <v-spacer />
@ -35,7 +35,7 @@
<v-row justify="start" align="start"> <v-row justify="start" align="start">
<div v-for="day in week.days" :key="day.id"> <div v-for="day in week.days" :key="day.id">
<v-col> <v-col>
<Day v-bind:day="day"/> <Day v-bind:day="day" />
</v-col> </v-col>
</div> </div>
</v-row> </v-row>
@ -47,7 +47,7 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import {mdiChevronLeft, mdiChevronRight} from '@mdi/js' import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
import Day from './ServiceManagementComponents/Day' import Day from './ServiceManagementComponents/Day'
export default { export default {
name: 'ServiceManagement', name: 'ServiceManagement',
@ -94,7 +94,7 @@ export default {
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
month: 'sm/month', month: 'sm/month'
}) })
} }
} }

View File

@ -5,6 +5,7 @@ import finanzerUsers from './modules/finanzerUsers'
import barUsers from '@/store/modules/barUsers' import barUsers from '@/store/modules/barUsers'
import user from '@/store/modules/user' import user from '@/store/modules/user'
import sm from '@/store/modules/serviceManagement' import sm from '@/store/modules/serviceManagement'
import jobs from '@/store/modules/jobs'
Vue.use(Vuex) Vue.use(Vuex)
@ -14,6 +15,7 @@ export default new Vuex.Store({
finanzerUsers, finanzerUsers,
barUsers, barUsers,
user, user,
sm sm,
jobs
} }
}) })

230
src/store/modules/jobs.js Normal file
View File

@ -0,0 +1,230 @@
import axios from 'axios'
import url from '@/plugins/routes'
const state = {
month: [],
disabled: false
}
const mutations = {
createMonth: (state, date) => {
let month = []
let id = 0
const year = date.getFullYear()
const mon = date.getMonth()
let a = new Date(year, mon + 1, 0)
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 end = false
let week = { id: id, days: {} }
for (let intDay = startDate; intDay <= days + 7; intDay++) {
if (end) break
let currentDate = new Date(year, mon, intDay, 12)
switch (currentDate.getDay()) {
case 1:
mutations.setStartEndDate(week)
month.push(week)
id++
week = { id: id, days: {} }
week.days.monday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Montag',
worker: [],
loading: false
}
break
case 2:
week.days.tuesday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Dienstag',
worker: [],
loading: false
}
break
case 3:
if (currentDate.getMonth() === mon + 1) {
end = true
mutations.setStartEndDate(week)
month.push(week)
} else {
week.days.wednesday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Mittwoch',
worker: [],
loading: false
}
}
break
case 4:
week.days.thursday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Donnerstag',
worker: [],
loading: false
}
break
case 5:
week.days.friday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Freitag',
worker: [],
loading: false
}
break
case 6:
week.days.satturday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Samstag',
worker: [],
loading: false
}
break
case 0:
week.days.sunday = {
id: currentDate.getDay(),
date: currentDate,
name: 'Sontag',
worker: [],
loading: false
}
break
}
}
state.month = month
},
updateMonth: (state, data) => {
const date = new Date(data.startdatetime)
const user = data.user
for (let week = 0; week < state.month.length; week++) {
for (let day in state.month[week].days) {
if (state.month[week].days[day].date - date === 0) {
let worker = state.month[week].days[day].worker.find(a => {
return a.username === user.username
})
if (!worker && data.com === 'add') {
state.month[week].days[day].worker.push({
firstname: user.firstname,
lastname: user.lastname,
username: user.username,
fullName: user.firstname + ' ' + user.lastname
})
}
}
}
}
},
setDayLoading: (state, { date, getters }) => {
let day = getters.getDay(date)
day.loading = true
},
setDayNotLoading: (state, { date, getters }) => {
let day = getters.getDay(date)
day.loading = false
},
setDisabled: (state, data) => {
state.disabled = data
},
setStartEndDate: week => {
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
}
}
}
const actions = {
createMonth({ commit }, date) {
commit('setDisabled', true)
commit('createMonth', date)
commit('setDisabled', false)
},
setDayLoading({ commit, getters }, date) {
commit('setDayLoading', { date, getters })
},
setDayNotLoading({ commit, getters }, date) {
commit('setDayNotLoading', { date, getters })
},
async getUser({ commit, rootState, dispatch, getters }, data) {
commit('setDayLoading', { date: data.startdatetime, getters })
try {
const response = await axios.post(
url.user.job,
{ ...data },
{ headers: { Token: rootState.login.user.accessToken } }
)
for (let item = 0; item < response.data.length; item++) {
commit('updateMonth', { ...response.data[item], com: 'add' })
}
commit('setDayNotLoading', { date: data.startdatetime, getters })
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
}
}
const getters = {
month: state => {
return state.month
},
getDay: state => date => {
for (let week = 0; week < state.month.length; week++) {
for (let day in state.month[week].days) {
if (state.month[week].days[day].date - date === 0) {
return state.month[week].days[day]
}
}
}
},
disabled: state => {
return state.disabled
}
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}