finished ##168
This commit is contained in:
parent
ae89781da1
commit
62af175884
|
|
@ -11,12 +11,8 @@
|
|||
</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()
|
||||
}}
|
||||
>{{ monthArray[date.getMonth()] }}
|
||||
{{ date.getFullYear() }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-btn text icon @click="changeMonth(1)">
|
||||
|
|
@ -25,10 +21,25 @@
|
|||
</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>
|
||||
<v-card v-for="week in month" :key="month.indexOf(week)">
|
||||
<v-card-title class="subtitle-1 font-weight-bold">
|
||||
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>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -43,46 +54,43 @@ export default {
|
|||
return {
|
||||
keyboard_arrow_left: mdiChevronLeft,
|
||||
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() {
|
||||
this.createDays(this.date)
|
||||
this.createMonth(this.date)
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
createDays: 'user/createDays'
|
||||
createMonth: 'jobs/createMonth'
|
||||
}),
|
||||
changeMonth(value) {
|
||||
if (value === -1) {
|
||||
this.date = new Date(
|
||||
this.date.getFullYear(),
|
||||
this.date.getMonth(),
|
||||
this.date.getDate() - 1
|
||||
)
|
||||
this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
|
||||
} else {
|
||||
this.date = new Date(
|
||||
this.date.getFullYear(),
|
||||
this.date.getMonth(),
|
||||
this.date.getDate() + 1
|
||||
)
|
||||
this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
|
||||
}
|
||||
this.createDays(this.date)
|
||||
},
|
||||
test(day) {
|
||||
let index = this.days.indexOf(day)
|
||||
console.log(index, index % 3)
|
||||
return true
|
||||
this.createMonth(this.date)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
days: 'user/days',
|
||||
loading: 'user/loading'
|
||||
}),
|
||||
toDate() {
|
||||
return new Date(new Date().setDate(this.date.getDate() + 10))
|
||||
}
|
||||
month: 'jobs/month'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,61 @@
|
|||
<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>
|
||||
<div v-if="day">
|
||||
<v-card :color="color(day)" max-width="250px" min-width="250px">
|
||||
<v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
|
||||
{{ day.name }} den {{ day.date.getDate() }}.{{
|
||||
day.date.getMonth() + 1
|
||||
}}.{{ day.date.getFullYear() }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expand-transition>
|
||||
<v-row align="center" justify="center" v-if="day.loading">
|
||||
<v-progress-circular indeterminate color="grey" />
|
||||
</v-row>
|
||||
</v-expand-transition>
|
||||
<v-expand-transition>
|
||||
<div v-show="!day.loading">
|
||||
<!-- <v-autocomplete-->
|
||||
<!-- chips-->
|
||||
<!-- return-object-->
|
||||
<!-- 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { mdiAccountPlus } from '@mdi/js'
|
||||
export default {
|
||||
name: 'Day',
|
||||
props: {
|
||||
|
|
@ -30,42 +63,56 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
monthArray: [
|
||||
'Januar',
|
||||
'Februar',
|
||||
'März',
|
||||
'April',
|
||||
'Mai',
|
||||
'Juni',
|
||||
'Juli',
|
||||
'August',
|
||||
'September',
|
||||
'Oktober',
|
||||
'November',
|
||||
'Dezember'
|
||||
],
|
||||
daysArray: [
|
||||
'Sonntag',
|
||||
'Montag',
|
||||
'Dienstag',
|
||||
'Mittwoch',
|
||||
'Donnerstag',
|
||||
'Freitag',
|
||||
'Samstag'
|
||||
]
|
||||
account_add: mdiAccountPlus,
|
||||
searchInput: null
|
||||
}
|
||||
},
|
||||
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: {
|
||||
...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: {
|
||||
day() {
|
||||
this.updateDay({ date: this.day.date })
|
||||
this.getUser({
|
||||
date: this.day.date.getTime() / 1000,
|
||||
startdatetime: this.day.date
|
||||
})
|
||||
},
|
||||
worker() {
|
||||
return this.day.worker
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-btn text icon @click="changeMonth(-1)">
|
||||
<v-icon>{{keyboard_arrow_left}}</v-icon>
|
||||
<v-icon>{{ keyboard_arrow_left }}</v-icon>
|
||||
</v-btn>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="title"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
>
|
||||
</v-list-item>
|
||||
<v-btn text icon @click="changeMonth(1)">
|
||||
<v-icon>{{keyboard_arrow_right}}</v-icon>
|
||||
<v-icon>{{ keyboard_arrow_right }}</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar-items>
|
||||
<v-spacer />
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<v-row justify="start" align="start">
|
||||
<div v-for="day in week.days" :key="day.id">
|
||||
<v-col>
|
||||
<Day v-bind:day="day"/>
|
||||
<Day v-bind:day="day" />
|
||||
</v-col>
|
||||
</div>
|
||||
</v-row>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import {mdiChevronLeft, mdiChevronRight} from '@mdi/js'
|
||||
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
|
||||
import Day from './ServiceManagementComponents/Day'
|
||||
export default {
|
||||
name: 'ServiceManagement',
|
||||
|
|
@ -94,7 +94,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
month: 'sm/month',
|
||||
month: 'sm/month'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import finanzerUsers from './modules/finanzerUsers'
|
|||
import barUsers from '@/store/modules/barUsers'
|
||||
import user from '@/store/modules/user'
|
||||
import sm from '@/store/modules/serviceManagement'
|
||||
import jobs from '@/store/modules/jobs'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
|
|
@ -14,6 +15,7 @@ export default new Vuex.Store({
|
|||
finanzerUsers,
|
||||
barUsers,
|
||||
user,
|
||||
sm
|
||||
sm,
|
||||
jobs
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue