146 lines
3.9 KiB
Vue
146 lines
3.9 KiB
Vue
<template>
|
|
<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">
|
|
<div v-for="worker in day.worker" :key="day.worker.indexOf(worker)">
|
|
<v-chip
|
|
style="margin: 3px;"
|
|
:close="user(worker) && !day.locked"
|
|
@click:close="
|
|
deleteJob({
|
|
year: day.date.getFullYear(),
|
|
month: day.date.getMonth() + 1,
|
|
day: day.date.getDate()
|
|
})
|
|
"
|
|
>{{ worker.firstname }} {{ worker.lastname }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</v-expand-transition>
|
|
</v-card-text>
|
|
<v-card-actions class="text--secondary">
|
|
<div v-if="!userInWorker">
|
|
<div v-if="day.locked">
|
|
Du kannst dich nicht zum Bardienst eintragen, da der Tag gesperrt
|
|
ist.
|
|
</div>
|
|
<div v-else-if="day.worker.length >= 2">
|
|
Du kannst dich nicht Bardienst eintragen, da mehr als 2 Personen
|
|
schon eingetragen sind.
|
|
</div>
|
|
<div v-else>Hier kannst du dich zum Bardienst eintragen.</div>
|
|
</div>
|
|
<v-spacer />
|
|
<v-btn
|
|
v-if="!day.locked && !day.loading && day.worker.length < 2"
|
|
@click="
|
|
addJob({
|
|
year: day.date.getFullYear(),
|
|
month: day.date.getMonth() + 1,
|
|
day: day.date.getDate()
|
|
})
|
|
"
|
|
>Eintragen</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
import { mdiAccountPlus } from '@mdi/js'
|
|
export default {
|
|
name: 'Day',
|
|
props: {
|
|
day: Object
|
|
},
|
|
data() {
|
|
return {
|
|
account_add: mdiAccountPlus,
|
|
searchInput: null
|
|
}
|
|
},
|
|
created() {
|
|
this.setLoading(this.day.date)
|
|
this.getUser({
|
|
date: this.day.date.getTime() / 1000,
|
|
startdatetime: this.day.date,
|
|
year: this.day.date.getFullYear(),
|
|
month: this.day.date.getMonth() + 1,
|
|
day: this.day.date.getDate()
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
getUser: 'jobs/getUser',
|
|
setLoading: 'jobs/setDayLoading',
|
|
setNotLoading: 'jobs/setDayNotLoading',
|
|
addJob: 'jobs/addJob',
|
|
deleteJob: 'jobs/deleteJob'
|
|
}),
|
|
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'
|
|
}
|
|
},
|
|
user(worker) {
|
|
return worker.username === this.activeUser.username
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
disabled: 'jobs/disabled',
|
|
activeUser: 'user'
|
|
}),
|
|
userInWorker() {
|
|
return this.day.worker.find(a => {
|
|
return a.username === this.activeUser.username
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
day() {
|
|
this.getUser({
|
|
date: this.day.date.getTime() / 1000,
|
|
startdatetime: this.day.date,
|
|
year: this.day.date.getFullYear(),
|
|
month: this.day.date.getMonth() + 1,
|
|
day: this.day.date.getDate()
|
|
})
|
|
},
|
|
worker() {
|
|
return this.day.worker
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|