<!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>
