Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/user/Jobs.vue
View File

@ -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>
<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>

135
src/components/user/Jobs/Day.vue
View File

@ -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() }}
<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-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-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
}
}
}

2
src/components/vorstand/ServiceManagement.vue
View File

@ -94,7 +94,7 @@ export default {
},
computed: {
...mapGetters({
month: 'sm/month',
month: 'sm/month'
})
}
}

4
src/store/index.js
View File

@ -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
}
})

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
}