index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Kalender</title>
   5     <meta charset="utf-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1">
   7     <script type="text/javascript" src="js/main.js" async="async"></script>
   8     <script type="text/javascript" src="js/MVSync/MVSync.js" async="async"></script>
   9     <link rel="stylesheet" href="css/bootstrap.css" />
  10   <body class="container">
  11
  12     <div class="form-group" data-template="jobSelection">
  13       <label for="jobList">Berufsgruppe</label>
  14       <select class="form-control" id="jobList" data-bind="onchange:loadClasses" data-map="list:jobItem">
  15         <option disabled="disabled">Bitte wählen sie eine Berufsgruppe aus...</option>
  16         <option data-template="jobItem" data-bind="value:beruf_id" data-content="beruf_name"></option>
  17       </select>
  18     </div>
  19
  20     <div class="form-group" data-template="classSelection">
  21       <label for="classList">Klasse</label>
  22       <select class="form-control" id="classList" data-bind="onchange:loadCalendar" data-map="list:classItem">
  23         <option disabled="disabled">Bitte wählen sie eine Klasse aus...</option>
  24         <option data-template="classItem" data-bind="value:klasse_id" data-content="klasse_name"></option>
  25       </select>
  26     </div>
  27
  28     <div class="form-group" data-template="calendar">
  29       <table class="table">
  30         <thead>
  31           <tr>
  32             <th>Datum</th>
  33             <th>Wochentag</th>
  34             <th>Von</th>
  35             <th>Bis</th>
  36             <th>Lehrer</th>
  37             <th>Fach</th>
  38             <th>Raum</th>
  39           </tr>
  40         </thead>
  41         <tbody data-map="events:calendar_row">
  42           <tr data-template="calendar_row">
  43             <td data-content="tafel_datum"></td>
  44             <td data-content="tafel_wochentag"></td>
  45             <td data-content="tafel_von"></td>
  46             <td data-content="tafel_bis"></td>
  47             <td data-content="tafel_lehrer"></td>
  48             <td data-content="tafel_fach"></td>
  49             <td data-content="tafel_raum"></td>
  50           </tr>
  51         </tbody>
  52       </table>
  53     </div>
  54
  55     <h1>Kalender</h1>
  56     <form>
  57       <div data-map="jobs:jobSelection"></div>
  58       <div data-map="classes:classSelection"></div>
  59       <div data-map="calendar:calendar"></div>
  60     </form>
  61   </body>
  62 </html>