block_timetable/templates/timetable.mustache

<div class="timetable" style="bbbborder-width:1px; bbbborder-style: solid; bbbborder-spacing:5px;" id="{{id}}">
<div class="timetable_head" style="padding-left:5px; padding-right:5px">
<span class="description" style="display:block; float: left; width:95%; text-align: center; font-weight: bold;">{{description}}</span>
<!--<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;' style="display:block; float:right"><a href="javascript:;" title="Stundenplan schließen">{{# pix}} e/cancel, core, Stundenplan schließen {{/ pix}}</a></span>-->
</div>
<div class="minicalendar calendar generaltable" style="fffont-size:8pt; padding-top:0rem; padding-bottom:0rem; max-width:280px; width:100%; padding:2px;">
<table style="xxwidth:100%; text-align:center; spacing:0rem; padding-top:0rem; padding-bottom:0rem; bbbborder: 1px dotted">
    <caption style="padding-top:0pt; padding-bottom:0pt">
        <div style="display: block; font-size: 10pt">
            <span style="display: block; float: left; width:10%; text-align: left;"><a href="javascript:;" class="prevweek" data-type='{{type}}' data-id='{{id}}' data-name='{{name}}' data-week='{{prevweek}}' title="vorherige Woche">◄</a></span>
            <span class="date" style="display: block; float: left; width:80%; text-align: center;">{{date}}</span>
            <span style="display:block; float:right; width:10%; text-align: right"><a href="javascript:;" class="nextweek" data-type='{{type}}' data-id='{{id}}' data-name='{{name}}' data-week='{{nextweek}}' title="nächste Woche">►</a></span>
        </div>
    </caption>
<thead>
<tr style="text-align:center">
<th></th>
<th style="width:4rem">Mo</th>
<th style="width:4rem">Di</th>
<th style="width:4rem">Mi</th>
<th style="width:4rem">Do</th>
<th style="width:4rem">Fr</th>
{{#saturday}}
<th style="width:4rem">Samstag</th>
{{/saturday}}
</tr>
</thead>
{{#periods}}
<tr style="border:1px black; padding-top:0rem; padding-bottom:0rem">
<th>{{number}}</th>
{{#days}}
<td style="padding-top:0rem; padding-bottom:0rem; vertical-alig:middle; border-left:1px black;" {{#substitution}}bgcolor="pink" data-toggle='tooltip' title='{{substitution}}'{{/substitution}}>
{{#lessons}}
{{#status}}
<div class="lesson" style="padding:2pt; {{#flag}}background-color:red;{{/flag}}">
<div class="omission">---</div>
</div>
{{/status}}
{{^status}}
<div class="lesson" style="padding:2pt; {{#flag}}background-color:red;{{/flag}}">
<div class="subject">{{subject}}</div>
<div class="class">{{class}}</div>
<div class="teacher">{{teacher}}</div>
<div class="room">{{room}}</div>
</div>
{{/status}}
{{/lessons}}
</td>
{{/days}}
</tr>
{{/periods}}
</table>
</div>

<div class="timetable_legend" style="text-align:center; width:100%; align:center;">
  <a href="javascript:;" class="block_timetable_select" data-type="class">Klassen</a>  -
  <a href="javascript:;" class="block_timetable_select" data-type="teacher">Lehrer</a>  -
  <a href="javascript:;" class="block_timetable_select" data-type="subject">Fächer</a>  -
  <a href="javascript:;" class="block_timetable_select" data-type="room">Räume</a>
</div>

</div>
{{# js }}
require([
     'jquery','core/ajax','core/templates', 'core/notification'
      ]  , function($, ajax, templates, notification) {


    function load_timetable(type, name, week, id) {
        //alert($("#"+id));
        //alert("type: "+type);
        //alert("Week: "+week);
        var promises = ajax.call([
             { methodname: 'mod_timetable_get', args: { type: type, name: name, week: week } },
            ]);

            promises[0].done(function(response) {
                 console.log('block_timetable/get is' + response);
                 templates.render('block_timetable/timetable',response).done(function(html, js) {
                      $("#"+id).replaceWith(html);
                      templates.runTemplateJS(js);
                 }).fail(notification.exception);
            }).fail(function(ex) {
                 // do something with the exception
            });
    }

    function select_type(type) {
         $(".subject").hide();
         $(".class").hide();
         $(".teacher").hide();
         $(".room").hide();
         $("."+type).show();
         block_timetable_type = type;
    }

    //alert("Hi, this is a test");
    $(".nextweek").click(function() {
       load_timetable($(event.target).data('type'), $(event.target).data('name'), $(event.target).data('week'), $(event.target).data('id')); //.parentNode.parentNode.parentNode.parentNode);
     });
    $(".prevweek").click(function() {
       load_timetable($(event.target).data('type'), $(event.target).data('name'), $(event.target).data('week'), $(event.target).data('id')); //.parentNode.parentNode.parentNode);
     });
    $(".block_timetable_select").click(function() {
       select_type($(event.target).data('type'));
     });
    if (block_timetable_type) {
         console.log("block_timetable_type found:"+block_timetable_type);
         select_type(block_timetable_type);
    } else {
         select_type('subject');
    }

});
{{/ js }}