Pläne: Pausenaufsichten implementiert

src/components/PlanPausen.vue

@@ -0,0 +1,185 @@
+<template>
+  <div id='pp'>
+  <v-toolbar
+    color="primary lighten-5"
+    dense
+  >
+    Lehrkraft hervorheben
+    <v-flex
+      shrink
+      class="align-self-start pa-2">
+      <v-select
+        :items="paLehrkraefte"
+        v-model="aktuelleLehrkraft"
+        class="align-self-center"
+        dense
+        width="10"
+      ></v-select>
+    </v-flex>
+
+    <v-spacer></v-spacer>
+  </v-toolbar>
+  <v-row
+    no-gutters
+  >
+  <v-card
+    v-for="tag, tagID in paTage"
+    :key="tagID"
+    rounded="lg"
+    :color="(today(tagID)) ? 'primary lighten-2' : 'primary lighten-3'"
+    class="ma-auto"
+  >
+    <v-card-title>{{ tag }}</v-card-title>
+    
+    <v-simple-table dense>
+      <template v-slot:default>
+        <thead>
+          <tr>
+            <th class="text-left">
+            </th>
+            <th 
+              class="text-left"
+              v-for="pause in paPausen"
+              :key="pause"
+            >
+               {{ pause }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            class="text-left"
+            v-for="ort in paOrte"
+            :key="ort"
+          >
+            <th class="text-left">
+              {{ ort }}
+            </th>
+            <td 
+              class="text-left" 
+              v-for="pause2, pause2ID in paPausen"
+              :key="pause2ID"
+              :class="(aktuelleLehrkraft === '') ? '' : ((gibAufsicht(tagID, pause2ID, ort) === aktuelleLehrkraft) ? 'red--text font-weight-bold' : 'grey--text')"
+            >
+               {{ gibAufsicht(tagID, pause2ID, ort) }}
+            </td>
+          </tr>
+        </tbody>
+      </template>
+    </v-simple-table>
+    
+  </v-card>
+
+  </v-row>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PlanPausen',
+
+  data() {
+    return {
+      pa: [],
+      paAufsichten: {1: {1: {'Hof': 'TLK'}}},
+      // zeitraster: new Zeitraster(),
+      paTage: {
+        1: 'Montag',
+        2: 'Dienstag',
+        3: 'Mittwoch',
+        4: 'Donnerstag',
+        5: 'Freitag',
+      },
+      paPausen: {
+        1: 'Frühaufsicht',
+        3: 'Erste Pause',
+        5: 'Zweite Pause',
+        // 8: 'Mittagspause'
+      },
+      paOrte: ['Hof'],
+      paLehrkraefte: ['TLK'],
+      aktuelleLehrkraft: ''
+    }
+  },
+
+  props: {
+    paUrl: String, // URL der GPU009
+  },
+
+  methods: {
+    async reload () {
+
+      // PAUSENAUFSICHTEN
+      const paHeader  = 'ort,lehrkraft,tag,vor_stunde,dauer,extra\n'
+      // Vertretungsplan abrufen
+      const paRes = await fetch(this.paUrl)
+      // Text extrahieren und Feldnamen hinzufügen
+      const paText = paHeader + await paRes.text()
+      // Parsen und Array in Daten ablegen
+      this.pa = this.$papa.parse(paText, {'header': 'true', 'skipEmptyLines': 'greedy'}).data 
+
+      // Orte ermitteln und Aufsichten in multidimensionales Array legen
+      var ergebnisOrte = []
+      var ergebnisLehrkraefte = ['']
+      var ergebnisAufsichten = {}
+      this.pa.forEach(function(item){
+        // Aufsicht in Array legen
+        if (item.tag in ergebnisAufsichten == false) {
+          ergebnisAufsichten[item.tag] = {}
+        }
+
+        if (item.vor_stunde in ergebnisAufsichten[item.tag] == false) {
+          ergebnisAufsichten[item.tag][item.vor_stunde] = {}
+        }
+
+        ergebnisAufsichten[item.tag][item.vor_stunde][item.ort] = item.lehrkraft
+
+        // Wenn Ort noch nicht erfasst, merke den Ort
+        var i = ergebnisOrte.findIndex(x => x == item.ort);
+        if (i <= -1) {
+          ergebnisOrte.push(item.ort);
+        }
+
+        // Wenn Lehrkraft noch nicht erfasst, merke Lehrkraft
+        i = ergebnisLehrkraefte.findIndex(x => x == item.lehrkraft);
+        if (i <= -1) {
+          ergebnisLehrkraefte.push(item.lehrkraft);
+        }
+      });
+      this.paOrte = ergebnisOrte.sort()
+      this.paAufsichten = ergebnisAufsichten
+      this.paLehrkraefte = ergebnisLehrkraefte.sort()
+    },
+
+    today (wochentag) {
+      const d = new Date()
+      var wt = d.getDay()
+      // Wochenende überspringen
+      if (wt === 0 || wt === 6) wt = 1
+      return (wt == wochentag)
+    },
+
+    gibAufsicht(tagID, pauseID, ort) {
+      if (typeof this.paAufsichten[tagID] !== 'undefined') {
+        if (typeof this.paAufsichten[tagID][pauseID] !== 'undefined') {
+          if (typeof this.paAufsichten[tagID][pauseID][ort] !== 'undefined') {
+            return this.paAufsichten[tagID][pauseID][ort]
+          } else {
+            return ''
+          }
+        } else {
+          return ''
+        }
+      } else {
+        return ''
+      }
+    }
+  },
+
+  created () {
+    // Vertretungsplan neu laden
+    this.reload()
+  }
+}
+</script>

src/components/Vertretungsplan.vue

@@ -11,6 +11,7 @@
       sort-by="stunde"
       group-by="lehrkraft_vertretung"
       flat
+      rounded
       hide-default-footer
       :expanded.sync="expanded"
       :single-expand="true"
@@ -145,6 +146,7 @@ export default {
       vp: [],
       pa: [],
       zeitraster: new Zeitraster(),
+      // Felddefinitionen für die Datatable
       headers: [
         {
           text: 'Datum',
@@ -327,9 +329,3 @@ export default {
 }
 </script>
 
-<style>
-  div.news-text {
-    height: calc(100% - 6px);
-    overflow-y: auto;
-  }
-</style>

src/plugins/vuetify.js

@@ -1,6 +1,7 @@
 import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib/framework';
+import colors from 'vuetify/lib/util/colors';
 
 Vue.use(Vuetify);
 
@@ -8,4 +9,15 @@ export default new Vuetify({
   icons: {
     iconfont: 'mdi'
   },
+  theme: {
+    dark: false,
+    themes: {
+      light: {
+
+        primary: colors.indigo,
+        
+        'primary--text': colors.white
+      }
+    }
+  }
 });

src/views/InfodisplayLehrer.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="ids">
+  <div class="ids fill-height">
     <AboutDialog ref="ad" />
     <v-app-bar
       app
-      color="indigo"
+      color="primary"
       dark
     >
       <v-img
@@ -18,19 +18,25 @@
 
       <v-spacer></v-spacer>
 
-      <v-tabs>
-        <v-tab
-          v-for="link in links"
-          :key="link"
+      <v-tabs
+        v-model="aktuelleSeite"
       >
-          {{ link }}
+        <v-tab
+          v-for="seite in seiten"
+          :key="seite"
+        >
+          {{ seite }}
         </v-tab>
       </v-tabs>
 
     </v-app-bar>
 
-    <v-main>
-      <v-container fluid>
+    <v-main class="fill-height">
+      <v-tabs-items v-model="aktuelleSeite" class="fill-height grey lighten-3">
+        <v-tab-item
+          key="0"
+          fluid
+        >
           <v-row dense>
 
             <v-col
@@ -72,7 +78,16 @@
               </v-sheet> -->
             </v-col>
           </v-row>
-      </v-container>
+        </v-tab-item>
+        <v-tab-item
+          key="1"
+          fluid
+        >
+          <Plaene ref="p" />
+        </v-tab-item>
+      </v-tabs-items>
+
+      
     </v-main>
   </div>
 </template>
@@ -81,22 +96,25 @@
 import Newsreader from '@/components/Newsreader'
 import Vertretungsplan from '@/components/Vertretungsplan'
 import AboutDialog from '@/components/AboutDialog'
+import Plaene from '@/views/Plaene'
 
 export default {
   name: 'InfodisplayLehrer',
 
   data: () => ({
-    links: [
+    seiten: [
       'Vertretungsplan',
-      'Stundenpläne'
+      'Pläne',
     ],
+    aktuelleSeite: 0,
     reloadTime: 600000
   }),
 
   components: {
     Newsreader,
     Vertretungsplan,
-    AboutDialog
+    AboutDialog,
+    Plaene
   },
 
   created() {
@@ -108,6 +126,7 @@ export default {
       // Reload-Event einrichten
       this.$refs.nr.reload()
       this.$refs.vp.reload()
+      this.$refs.p.reload()
       setTimeout(this.onTimeout, this.reloadTime)
     }
   }

src/views/Plaene.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="plaene fill-height">
+    <v-toolbar
+      color="primary lighten-4"
+      dense
+    >
+      <v-tabs
+        v-model="aktuellerPlan"
+      >
+        <v-tab
+          v-for="plan in plaene"
+          :key="plan"
+        >
+          {{ plan }}
+        </v-tab>
+      </v-tabs>
+
+    </v-toolbar>
+
+      <v-tabs-items v-model="aktuellerPlan" class="fill-height grey lighten-3">
+        <v-tab-item
+          key="0"
+          fluid
+        >
+          y
+        </v-tab-item>
+        <v-tab-item
+          key="1"
+          fluid
+        >
+          z
+        </v-tab-item>
+        <v-tab-item
+          key="2"
+          fluid
+        >
+          z
+        </v-tab-item>
+        <v-tab-item
+          key="3"
+          fluid
+        >
+          <PlanPausen
+            ref="pp"
+            paUrl="/stundenplan/proxy.php?file=G009"
+          />
+        </v-tab-item>
+      </v-tabs-items>
+  </div>
+</template>
+
+<script>
+import PlanPausen from '@/components/PlanPausen'
+
+export default {
+  name: 'Home',
+
+  data: () => ({
+    plaene: [
+      'Lehrkräfte',
+      'Klassen',
+      'Räume',
+      'Pausen',
+    ],
+    aktuellerPlan: 0,
+  }),
+
+  components: {
+    PlanPausen,
+  },
+
+  methods: {
+    async reload () {
+      
+      this.$refs.pp.reload()
+
+    },
+  },
+}
+</script>