polyfill added
[knw_133/.git] / 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">
9       if(!Object.observe){
10         var polyfilScript = document.createElement("script");
11         polyfilScript.addEventListener("load",function(){window.initMVSync&&initMVSync(false);});
12         polyfilScript.async = "async";
13         polyfilScript.src = "js/Object.observe/Object.observe.poly.js";
14         document.head.appendChild(polyfilScript);
15       }
16     </script>
17     <script type="text/javascript" src="js/MVSync/MVSync.js" async="async"></script>
18     <link rel="stylesheet" href="css/bootstrap.css" />
19   <body class="container">
20
21     <div class="form-group" data-template="jobSelection">
22       <label for="jobList">Berufsgruppe</label>
23       <select class="form-control" id="jobList" data-bind="onchange:loadClasses" data-map="list:jobItem">
24         <option disabled="disabled">Bitte wählen sie eine Berufsgruppe aus...</option>
25         <option data-template="jobItem" data-bind="value:beruf_id" data-content="beruf_name"></option>
26       </select>
27     </div>
28
29     <div class="form-group" data-template="classSelection">
30       <label for="classList">Klasse</label>
31       <select class="form-control" id="classList" data-bind="onchange:loadCalendar" data-map="list:classItem">
32         <option disabled="disabled">Bitte wählen sie eine Klasse aus...</option>
33         <option data-template="classItem" data-bind="value:klasse_id" data-content="klasse_name"></option>
34       </select>
35     </div>
36
37     <div class="form-group" data-template="calendar">
38       <table class="table">
39         <thead>
40           <tr>
41             <th>Datum</th>
42             <th>Wochentag</th>
43             <th>Von</th>
44             <th>Bis</th>
45             <th>Lehrer</th>
46             <th>Fach</th>
47             <th>Raum</th>
48           </tr>
49         </thead>
50         <tbody data-map="events:calendar_row">
51           <tr data-template="calendar_row">
52             <td data-content="tafel_datum"></td>
53             <td data-content="tafel_wochentag"></td>
54             <td data-content="tafel_von"></td>
55             <td data-content="tafel_bis"></td>
56             <td data-content="tafel_lehrer"></td>
57             <td data-content="tafel_fach"></td>
58             <td data-content="tafel_raum"></td>
59           </tr>
60         </tbody>
61       </table>
62     </div>
63
64     <h1>Kalender</h1>
65     <form>
66       <div data-map="jobs:jobSelection"></div>
67       <div data-map="classes:classSelection"></div>
68       <center>
69         <ul class="pagination">
70           <li><a data-bind="onclick:lastWeek">&lt;</a></li>
71           <li><a data-content="week"></a></li>
72           <li><a data-bind="onclick:nextWeek">&gt;</a></li>
73         </ul>
74       </center>
75       <div data-map="calendar:calendar"></div>
76       <div class="alert alert-info" data-bind="@display:displayInfo">
77         Es gibt keine Termine in dieser Woche
78       </div>
79     </form>
80   </body>
81 </html>