flaschengeist-frontend/src/components/user/Jobs/Day.vue

124 lines
3.2 KiB
Vue
Raw Normal View History

<template>
2020-02-22 10:14:54 +00:00
<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-chip
style="margin: 3px;"
v-for="worker in day.worker"
:key="day.worker.indexOf(worker)"
>{{ worker.firstname }} {{ worker.lastname }}</v-chip
>
2020-02-22 10:14:54 +00:00
</div>
</v-expand-transition>
</v-card-text>
2020-02-24 11:19:13 +00:00
<v-card-actions class="text--secondary">
<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>
2020-02-23 21:32:31 +00:00
<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>
2020-02-22 10:14:54 +00:00
</v-card>
</div>
</template>
<script>
2020-02-22 10:14:54 +00:00
import { mapActions, mapGetters } from 'vuex'
import { mdiAccountPlus } from '@mdi/js'
export default {
name: 'Day',
props: {
day: Object
},
data() {
return {
2020-02-22 10:14:54 +00:00
account_add: mdiAccountPlus,
searchInput: null
}
},
created() {
2020-02-22 10:14:54 +00:00
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()
2020-02-22 10:14:54 +00:00
})
},
methods: {
...mapActions({
2020-02-22 10:14:54 +00:00
getUser: 'jobs/getUser',
setLoading: 'jobs/setDayLoading',
2020-02-23 21:32:31 +00:00
setNotLoading: 'jobs/setDayNotLoading',
addJob: 'jobs/addJob'
2020-02-22 10:14:54 +00:00
}),
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() {
2020-02-22 10:14:54 +00:00
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()
2020-02-22 10:14:54 +00:00
})
},
worker() {
return this.day.worker
}
}
}
</script>
<style scoped></style>