Added schedule manager

2019-11-20 19:28:06 +01:00
parent 7ed00ab870
commit 77379f5520
5 changed files with 395 additions and 125 deletions
--- a/view-schedule.html
+++ b/view-schedule.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- development version, includes helpful console warnings -->
+
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- production version, optimized for size and speed -->
+  <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
+  <title>Stundenplan Generator</title>
+  <style>
+
+    body {
+      color: white;
+      background-color: #996861;
+      font-family: sans-serif;
+      font-size: large;
+    }
+
+    #heading {
+      font-size: x-large;
+      padding-left: 30px;
+    }
+
+    table {
+      border:none;
+      border-collapse: collapse;
+      background-color: #996861;
+    }
+    table th {
+      border-bottom: 4px solid white;
+      border-left: 4px solid white;
+      border-right: 4px solid white;
+      padding: 15px;
+    }
+    table td {
+      border-left: 4px solid white;
+      border-right: 4px solid white;
+      padding-left: 15px;
+      padding-right: 15px;
+      text-align: center;
+    }
+    table th:first-child {
+      border-left: none;
+    }
+    table th:last-child {
+      border-right: none;
+    }
+    table td:first-child {
+      border-left: none;
+    }
+    table td:last-child {
+      border-right: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <p id="heading">{{heading}}</p>
+    <table id="table"
+           ref="table">
+      <tr>
+        <th v-for="day in Object.keys(scheduleData)">{{ day }}</th>
+      </tr>
+      <tr v-for="slot in amountSlots">
+        <td v-for="day in Object.keys(scheduleData)">
+          <div v-if="getSchuduleItem(day, slot).to">
+            <p id="item-time"><span>{{getSchuduleItem(day, slot).from}}</span> - <span>{{getSchuduleItem(day, slot).to}}</span></p>
+            <p id="item-title"><span style="white-space: pre-line;">{{getSchuduleItem(day, slot).title}}</span></p>
+          </div>
+        </td>
+      </tr>
+    </table>
+    <p style="text-align: center"><span style="white-space: pre-line;">{{caption}}</span></p>
+  </div>
+  <script>
+    var app = new Vue({
+    el: '#app',
+    data: () => {
+      return {
+      amountSlots: 6,
+      caption: "* mit Stillberaterin und Kinderkrankenschwester Rhianon Grill\nf\u00fcr mehr Angebote rund um Mama/Baby www.stillberatungimrottal.de",
+      heading: "Stundenplan 2019",
+      scheduleData:{"Montag": [{"from": "09:00", "to": "10:15", "title": "Hatha Joga"}, {"from": "10:30", "to": "11:45", "title": "Joga f\u00fcr \nSchwangere"}, {}, {"title": ""}, {"from": "", "to": "", "title": ""}, {}], "Dienstag": [{}, {}, {"from": "15:30", "to": "16:30", "title": "Musikgarten"}, {"from": "18:00", "to": "19:30", "title": "Hatha/Vinjasa Yoga"}, {}, {}], "Mittwoch": [{"from": "09:00", "to": "10:15", "title": "R\u00fcckbildung"}, {"from": "10:30", "to": "11:30", "title": "Fit f\u00fcr Dich"}, {}, {}, {}, {}], "Donnerstag": [{"from": "09:00", "to": "10:00", "title": "Babymassage"}, {"from": "10:00", "to": "11:15", "title": "R\u00fcckbildung"}, {}, {}, {}, {}], "Freitag": [{"from": "09:00", "to": "10:30", "title": "Stilltreff * 2 w\u00f6chentlich"}, {}, {"from": "16:00", "to": "19:00", "title": "Geburtsvorbereitung"}, {}, {}, {}], "Samstag": [{"from": "09:00", "to": "12:00", "title": "Geburtsvorbereitung"}, {}, {}, {}, {}, {}]}
+    }
+  },
+    methods: {
+      getSchuduleItem: function(day, slot) {
+        return this.scheduleData[day][slot-1];
+      }
+    }
+  })
+  </script>
+</body>
+</html>