flaschengeist-frontend/src/components/vorstand/ServiceManagement.vue

<template>
  <div>
    <v-toolbar>
      <v-toolbar-title>
        Dienstverwaltung
      </v-toolbar-title>
      <v-spacer />
      <v-toolbar-items>
        <v-btn text icon @click="changeMonth(-1)">
          <v-icon>{{ keyboard_arrow_left }}</v-icon>
        </v-btn>
        <v-list-item>
          <v-list-item-title class="title"
            >{{ monthArray[date.getMonth()] }}
            {{ date.getFullYear() }}</v-list-item-title
          >
        </v-list-item>
        <v-btn text icon @click="changeMonth(1)">
          <v-icon>{{ keyboard_arrow_right }}</v-icon>
        </v-btn>
      </v-toolbar-items>
      <v-spacer />
      <v-toolbar-items>
        <v-btn text @click="lockDays(true)">Monat sperren</v-btn>
        <v-btn text @click="lockDays(false)">Monat freigeben</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-card v-for="week in month" :key="month.indexOf(week)" tile flat>
      <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>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
import Day from './ServiceManagementComponents/Day'
export default {
  name: 'ServiceManagement',
  components: { Day },
  data() {
    return {
      keyboard_arrow_left: mdiChevronLeft,
      keyboard_arrow_right: mdiChevronRight,
      id: 0,
      date: new Date(),
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ]
    }
  },
  created() {
    this.createMonth(this.date)
    this.getAllUsers()
  },
  methods: {
    ...mapActions({
      createMonth: 'sm/createMonth',
      getAllUsers: 'sm/getAllUsers',
      lockDay: 'sm/lockDay'
    }),
    changeMonth(value) {
      if (value === -1) {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
      } else {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
      }
      this.createMonth(this.date)
    },
    lockDays(value) {
      for (var week in this.month) {
        for (var dayint in this.month[week].days) {
          var day = this.month[week].days[dayint]
          this.lockDay({
            year: day.date.getFullYear(),
            month: day.date.getMonth() + 1,
            day: day.date.getDate(),
            locked: value
          })
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      month: 'sm/month'
    })
  }
}
</script>

<style scoped></style>