Funktion zum Ausblenden abgelaufener Vertretungen hinzugefügt. Dazu Zeitraster.js zum Rechnen mit Schulstunden implementiert.

src/Zeitraster.js

@@ -0,0 +1,148 @@
+export class Zeitraum {
+  constructor (beginnStunde, beginnMinute, endeStunde, endeMinute) {
+    this.beginn = new Date("1970-01-01T00:00:00.000")
+    this.ende = new Date("1970-01-01T00:00:00.000")
+    this.beginn.setHours(parseInt(beginnStunde))
+    this.beginn.setMinutes(parseInt(beginnMinute))
+    this.ende.setHours(parseInt(endeStunde))
+    this.ende.setMinutes(parseInt(endeMinute))
+  }
+}
+
+export default class Zeitraster {
+  constructor (stunden, pausen) {
+    if (typeof stunden !== "undefined" && typeof pausen !== "undefined") {
+      this.stunden = stunden
+      this.pausen = pausen
+    } else {
+      this.stunden = [
+        new Zeitraum(7,50,8,35),
+        new Zeitraum(8,35,9,20),
+        new Zeitraum(9,40,10,25),
+        new Zeitraum(10,25,11,10),
+        new Zeitraum(11,30,12,15),
+        new Zeitraum(12,20,13,5),
+        new Zeitraum(13,10,13,55),
+        new Zeitraum(14,0,14,45),
+        new Zeitraum(14,50,15,35),
+        new Zeitraum(15,40,16,25),
+      ]
+      this.pausen = [
+        new Zeitraum(9,20,9,40),
+        new Zeitraum(11,10,11,30),
+        new Zeitraum(12,15,12,20),
+        new Zeitraum(13,5,14,0),
+        new Zeitraum(14,45,14,50),
+        new Zeitraum(15,35,15,40),
+      ]
+    }
+  }
+
+  gibStunden() {
+    return this.stunden
+  }
+
+  gibPausen() {
+    return this.pausen
+  }
+
+  gibStunde(zeit) {
+    if (typeof zeit === "undefined") zeit = new Date()
+
+    // Zeit normalisieren
+    zeit.setDate(1)
+    zeit.setMonth(0)
+    zeit.setYear(1970)
+
+    var aktuelleStunde = 0
+    this.stunden.forEach((stunde, index) => {
+      // Zeit überprüfen
+      if (stunde.beginn <= zeit && stunde.ende > zeit) {
+        aktuelleStunde = index + 1
+      }
+    })
+    return aktuelleStunde
+  }
+
+  gibVergangeneStunden(zeit) {
+    if (typeof zeit === "undefined") zeit = new Date()
+
+    // Zeit normalisieren
+    zeit.setDate(1)
+    zeit.setMonth(0)
+    zeit.setYear(1970)
+
+    var vergangeneStunden = 0
+    this.stunden.forEach((stunde, index) => {
+      // Zeit überprüfen
+      if (stunde.ende <= zeit) {
+        vergangeneStunden = index + 1
+      }
+    })
+    return vergangeneStunden
+  }
+
+  gibStundeRestzeit(zeit) {
+    if (typeof zeit === "undefined") zeit = new Date()
+
+    // Zeit normalisieren
+    zeit.setDate(1)
+    zeit.setMonth(0)
+    zeit.setYear(1970)
+
+    var restzeit = 0
+    this.stunden.forEach(stunde => {
+      // Zeit überprüfen
+      if (stunde.beginn <= zeit && stunde.ende > zeit) {
+        const rzDate = (new Date(stunde.ende - zeit))
+        restzeit = rzDate.getUTCHours() * 360000 + rzDate.getMinutes() * 60000 + rzDate.getSeconds() * 1000 + rzDate.getMilliseconds();
+      }
+    })
+    return restzeit 
+  }
+
+  gibPauseRestzeit(zeit) {
+    if (typeof zeit === 'undefined') zeit = new Date()
+
+    // Zeit normalisieren
+    zeit.setDate(1)
+    zeit.setMonth(0)
+    zeit.setYear(1970)
+
+    var restzeit = 0
+    this.pausen.forEach(pause => {
+      // Zeit überprüfen
+      if (pause.beginn <= zeit && pause.ende > zeit) {
+        const rzDate = (new Date(pause.ende - zeit))
+        restzeit = rzDate.getUTCHours() * 360000 + rzDate.getMinutes() * 60000 + rzDate.getSeconds() * 1000 + rzDate.getMilliseconds();
+      }
+    })
+    return restzeit 
+  }
+
+  setzeStunden(stunden) {
+    this.stunden = stunden
+  }
+
+  setzePausen(pausen) {
+    this.pausen = pausen
+  }
+
+  istPause(zeit) {
+    if (typeof zeit === "undefined") zeit = new Date()
+
+    // Zeit normalisieren
+    zeit.setDate(1)
+    zeit.setMonth(0)
+    zeit.setYear(1970)
+
+    var jetztPause = false
+    this.pausen.forEach(pause => {
+      // Zeit überprüfen
+      if (pause.beginn <= zeit && pause.ende > zeit) jetztPause = true
+    })
+    return jetztPause
+  }
+
+}
+  

src/components/Vertretungsplan.vue

@@ -20,18 +20,18 @@
         <v-toolbar
           flat
         >
-          <v-toolbar-title>Vertretungsplan für den </v-toolbar-title>
+          <v-toolbar-title class="pa-2 align-self-start">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
+                class="pa-2 align-self-baseline"
                 v-bind="attrs"
                 v-on="on"
                 rounded
@@ -47,6 +47,12 @@
               locale="de-DE"
             ></v-date-picker>
           </v-menu>
+          <v-checkbox
+            v-if="today"
+            v-model="vergangeneAusblenden"
+            label="vergangene Vertretungen ausblenden"
+            class="align-self-baseline pa-2"
+          ></v-checkbox>
           <v-spacer></v-spacer>
         </v-toolbar>
       </template> 
@@ -111,6 +117,7 @@
 
 <script> 
 import Klasse from '@/components/Klasse.vue'
+import Zeitraster from '@/Zeitraster.js'
 
 var vertretungsarten = {
   'T': 'verlegt',
@@ -137,6 +144,7 @@ export default {
     return {
       vp: [],
       pa: [],
+      zeitraster: new Zeitraster(),
       headers: [
         {
           text: 'Datum',
@@ -155,7 +163,18 @@ export default {
         {
           text: 'Stunde',
           value: 'stunde',
-          sortable: false
+          sortable: false,
+          filter: value => {
+            if (this.today && this.vergangeneAusblenden) {
+              if (value <= this.zeitraster.gibVergangeneStunden()) {
+                return false
+              } else {
+                return true
+              }
+            } else {
+              return true
+            }
+          }
         },
         {
           text: 'Durch',
@@ -219,6 +238,7 @@ export default {
       ],
       expanded:[],
       datepicker: false,
+      vergangeneAusblenden: true,
       vpDatum: new Date(),
       vpDatumsgrenze: 0 // Grenze für "neue" Einträge
     };
@@ -268,10 +288,8 @@ export default {
       const paRes = await fetch(this.paUrl)
       // Text extrahieren und Feldnamen hinzufügen
       const paText = paHeader + await paRes.text()
-      console.log(paText)
       // Parsen und Array in Daten ablegen
       this.pa = this.$papa.parse(paText, {'header': 'true', 'skipEmptyLines': 'greedy'}).data 
-      console.log(this.pa)
 
       // VERTRETUNGPLAN
       // Feldnamen definieren
@@ -288,14 +306,13 @@ export default {
     vertretungsart (code) {
       return vertretungsarten[code]
     },
+    // Klassen aufsplitten und als Array zurückgeben
     klassen (klassenString) {
       return klassenString.split('~')
     },
     // Ort zu einer Pausenaufsicht ermitteln
     paOrt (tag, vor_stunde, lehrkraft) {
-      console.log(tag + ', ' + vor_stunde + ', ' + lehrkraft)
       var regAufsicht = this.pa.filter(aufsicht => parseInt(aufsicht.tag) === parseInt(tag) && parseInt(aufsicht.vor_stunde) === parseInt(vor_stunde) && aufsicht.lehrkraft === lehrkraft)[0];
-      console.log(regAufsicht)
       if (typeof regAufsicht != 'undefined') {
         return regAufsicht.ort
       } else {