SISSy/src/components/Vertretungsplan.vue

<template>
  <div id="vertretungsplan">
    <v-data-table
      :headers="headers"
      :fixed-header="true"
      class="overflow-y-auto"
      height="85vh"
      :items="vp"
      :items-per-page="10000"
      item-key="nr"
      sort-by="stunde"
      group-by="lehrkraft_vertretung"
      flat
      hide-default-footer
      :expanded.sync="expanded"
      :single-expand="true"
    >
      <!-- Titelzeile -->
      <template v-slot:top>
        <v-toolbar
          flat
        >
          <v-toolbar-title>Vertretungsplan für den </v-toolbar-title>
          &nbsp;
          <v-menu
            v-model="datepicker"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="auto"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                v-bind="attrs"
                v-on="on"
                rounded
                :class="(today) ? '' : 'red'"
              ><v-icon :color="(today) ? '' : 'white'">mdi-calendar</v-icon><span :class="(today) ? '' : 'white--text'">{{ vpDatum.getDate() }}.{{ vpDatum.getMonth() + 1 }}.{{ vpDatum.getFullYear() }}</span></v-btn>
            </template>
            <v-date-picker
              v-model="neuesDatum"
              @input="datepicker = false"
            ></v-date-picker>
          </v-menu>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template> 

      <!-- Kopfzeile für Gruppen -->
      <template v-slot:group.header="{ group, headers, isOpen, toggle }">
        <td :colspan="headers.length">
          <v-btn @click="toggle" v-if="isOpen"><v-icon color="grey">mdi-account</v-icon>{{ group }}</v-btn>
          <v-btn @click="toggle" v-if="!isOpen"><v-icon color="grey">mdi-account-outline</v-icon>{{ group }}</v-btn>
        </td>
      </template> 

      <!-- Darstellung des Datumsfelds -->
      <template v-slot:item.datum></template> 
      <template v-slot:header.datum></template> 

      <!-- Darstellung der Vertretungsart -->
      <template v-slot:item.art_vertretung="{ item }">
        {{ vertretungsart(item.art_vertretung) }}
      </template> 

      <!-- Button für Anmerkungen -->
      <template v-slot:item.expand="{ item }">
        <v-btn @click="expanded = [item]" v-if="item.anmerkung !== '' && !expanded.includes(item)"><v-icon>mdi-comment-plus</v-icon></v-btn>
        <v-btn @click="expanded = []" v-if="item.anmerkung !== '' && expanded.includes(item)"><v-icon>mdi-comment-minus</v-icon></v-btn>
      </template> 
  
      <!-- Anmerkungen -->
      <template v-slot:expanded-item="{ headers, item }">
        <td :colspan="headers.length" v-if="item.anmerkung !== ''">
          <pre>{{item.anmerkung}}</pre>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script> 
var vertretungsarten = {
  'T': 'verlegt',
  'F': 'verlegt von',
  'W': 'Tausch',
  'S': 'Betreuung',
  'A': 'Sondereinsatz',
  'C': 'Entfall',
  'L': 'Freisetzung',
  'P': 'Teil_vertretung',
  'R': 'Raumvertretung',
  'B': 'Pausenaufsicht',
  '~': 'Lehrertausch',
  'E': 'Klausur',
  '': 'Vertretung'      
}
export default {
  name: 'Vertretungsplan',
  data() {
    return {
      vp: [],
      headers: [
        {
          text: 'Datum',
          value: 'datum',
          sortable: false,
          width: 0,
          // nur ausgewähltes Datum
          filter: value => {
            if (value !== this.datumIso) {
              return false
            } else {
              return true
            }
          }
        },
        {
          text: 'Stunde',
          value: 'stunde',
          sortable: false
        },
        {
          text: 'Durch',
          value: 'lehrkraft_vertretung',
          sortable: false
        },
        {
          text: 'Klasse(n)',
          value: 'klassen',
          sortable: false
        },
        {
          text: 'Fach (neu)',
          value: 'fach_vertretung',
          sortable: false
        },
        {
          text: 'Raum (neu)',
          value: 'raum_vertretung',
          sortable: false
        },
        {
          text: 'Für',
          value: 'lehrkraft',
          sortable: false
        },
        {
          text: 'Fach',
          value: 'fach',
          sortable: false
        },
        {
          text: 'Raum',
          value: 'raum',
          sortable: false
        },
        {
          text: 'Durch',
          value: 'lehrkraft_vertretung',
          sortable: false,
          // nur Zeilen mit Vertreter
          filter: value => {
            if (value === '') {
              return false
            } else {
              return true
            }
          }
        },
        {
          text: 'Art',
          value: 'art_vertretung',
          sortable: false
        },
        {
          text: 'Anmerkung',
          value: 'expand',
          sortable: false,
          align: 'end'
        },
      ],
      expanded:[],
      datepicker: false,
      vpDatum: new Date()
    };
  },
  props: {
    vpUrl: String, // URL der GPU014,
    startDatum: Date
  },
  computed: {
    datumIso () {
      return this.vpDatum.getFullYear() + "" + (this.vpDatum.getMonth() + 1) + "" + this.vpDatum.getDate()
    },
    neuesDatum: {
      get: function () {
        return this.vpDatum.toISOString().substr(0, 10)
      },
      set: function (val) {
        this.vpDatum = new Date(val)
      }
    },
    today () {
      var d = new Date()
      return d.toDateString() === this.vpDatum.toDateString()
    }
  },
  methods: {
    async reload () {
      // Feldnamen definieren
      const vpHeader  = 'nr,datum,stunde,absenznr,id_unterricht,lehrkraft,lehrkraft_vertretung,fach,fach_statistik_id,fach_vertretung,fach_vertretung_statistik_id,raum,raum_vertretung,statistik_id,klassen,absenzgrund,anmerkung,art,klassen_vertretung,art_vertretung,letzte_aenderung,extra\n'
      // Abrufen
      const res = await fetch(this.vpUrl)
      // Text extrahieren und Feldnamen hinzufügen
      const vpText = vpHeader + await res.text()
      // Parsen und Array in Daten ablegen
      this.vp = this.$papa.parse(vpText, {'header': 'true', 'skipEmptyLines': 'greedy'}).data 
    },
    vertretungsart (code) {
      return vertretungsarten[code]
    },
  },
  created () {
    // Startdatum festlegen
    if (typeof this.startDatum !== 'undefined') this.vpDatum = this.startDatum
    // Vertretungsplan neu laden
    this.reload()
  }
}
</script>

<style>
  div.news-text {
    height: calc(100% - 6px);
    overflow-y: auto;
  }
</style>