mod_timetable/templates/timetable.mustache

<div class="timetable" id="{{id}}">
<div class="timetable_head">
<span class="timetable_description">{{description}}</span>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'><a href="javascript:;" title="Stundenplan schließen">{{#pix}}e/cancel, core, Stundenplan schließen{{/pix}}</a></span>
</div>
<div class="minicalendar generaltable" style="padding-top:0rem; padding-bottom:0rem">
<table>
    <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 ssstyle="text-align:center">
<td></td><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th>{{#saturday}}<th>Sa</th>{{/saturday}}
</tr>
</thead>
{{#periods}}
<tr sstyle="border:1px black; padding-top:0rem; padding-bottom:0rem">
<td>
<a href="javascript:;" style="color: black;" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="{{number}}. Stunde<br/>Beginn: {{starttime}} Uhr<br/>Ende: {{endtime}} Uhr" title="{{starttime}}-{{endtime}}">
{{number}}
<div class="time" id="{{id}}">{{starttime}}-{{endtime}}</div>
</a></td>
{{#days}}
<td style="padding-top:0rem; padding-bottom:0rem; vertical-align:middle; border-left:1px black;">
{{#lessons}}
<div class="lesson {{#substitution}}substitution{{/substitution}} {{cancel4me}} {{#subtype}}subtype_{{.}} {{/subtype}}">
<a href="javascript:;" data-container="body" data-toggle="popover" data-placement="top" data-html="true" 
   data-content="Fach: {{subject}}
   		  {{#subjectchanged}}
   		    {{#cancel}}{{#subjectb}} wird ersetzt durch {{subjectb}}{{/subjectb}}{{^subjectb}} entfällt{{/subjectb}}{{/cancel}}
		    {{^cancel}}{{#subjecta}} statt {{subjecta}}{{/subjecta}}{{/cancel}}
		  {{/subjectchanged}},<br/>
                 Lehrer: {{teacher}}
		  {{#teacherchanged}}
   		    {{#cancel}}{{#teacherb}} wird ersetzt durch {{teacherb}}{{/teacherb}}{{^teacherb}} entfällt{{/teacherb}}{{/cancel}}
		    {{^cancel}}{{#teachera}} statt {{teachera}}{{/teachera}}{{/cancel}}
		  {{/teacherchanged}},<br/>
		 Klasse: {{class}}
		  {{#classchanged}}
   		    {{#cancel}}{{#classb}} wird ersetzt durch {{classb}}{{/classb}}{{^classb}} entfällt{{/classb}}{{/cancel}}
		    {{^cancel}}{{#classa}} statt {{classa}}{{/classa}}{{/cancel}}
		  {{/classchanged}},<br/>
		 Raum: {{room}}
		  {{#roomchanged}}
   		    {{#cancel}}{{#roomb}} wird ersetzt durch {{roomb}}{{/roomb}}{{^roomb}} entfällt{{/roomb}}{{/cancel}}
		    {{^cancel}}{{#rooma}} statt {{rooma}}{{/rooma}}{{/cancel}}
		  {{/roomchanged}},<br/>
<!--                 {{#cancel}} entfällt.
		   {{^subjectb}}<br>{{subject}} entfällt{{/subjectb}}
		   {{^teacherb}}<br>{{teacher}} entfällt{{/teacherb}}
		   {{^roomb}}<br>{{room}} entfällt{{/roomb}}
		   {{^classb}}<br>{{class}} entfällt{{/classb}}
		 {{/cancel}}
		 {{^cancel}}
		 {{#substitution}} statt: 
		   {{#subjecta}}{{subjecta}}, {{/subjecta}}
		   {{#teachera}}{{teachera}}, {{/teachera}}
		   {{#classa}}{{classa}}, {{/classa}}
		   {{#rooma}}{{rooma}} {{/rooma}}
		 {{/substitution}}
		 {{/cancel}}
-->
		 {{#text}}
		 <br><b>Hinweis: {{text}}</b>
		 {{/text}}" 
   title="{{#cancel}}Stunde entfällt / {{/cancel}}{{#substitution}}Stundenänderung{{/substitution}}{{#event}} Event / Sonderplan{{/event}}">
{{#viewteacher}}
<div class="lesson_main {{#subjectchanged}}changed{{/subjectchanged}} {{#cancel}}canceled{{/cancel}}">{{subject}}</div>
<div class="lesson_details {{#cancel}}canceled{{/cancel}} {{#substitution}}substitution{{/substitution}}" id="{{id}}">
<span class="lesson_detail {{#classchanged}}changed{{/classchanged}}" id="class">{{class}}</span>
<span class="lesson_detail {{#roomchanged}}changed{{/roomchanged}}" id="room">{{room}}</span>
</div>
{{/viewteacher}}
{{#viewclass}}
<div class="lesson_main {{#subjectchanged}}changed{{/subjectchanged}} {{#cancel}}canceled{{/cancel}}">{{subject}}</div>
<div class="lesson_details {{#cancel}}canceled{{/cancel}} {{#substitution}}substitution{{/substitution}}" id="{{id}}">
<span class="lesson_detail {{#teacherchanged}}changed{{/teacherchanged}}" id="teacher">{{teacher}}</span>
<span class="lesson_detail {{#roomchanged}}changed{{/roomchanged}}" id="room">{{room}}</span>
</div>
{{/viewclass}}
{{#viewroom}}
<div class="lesson_main {{#classa}}changed{{/classa}} {{#cancel}}canceled{{/cancel}}">{{class}}</div>
<div class="lesson_details {{#cancel}}canceled{{/cancel}} {{#substitution}}substitution{{/substitution}}" id="{{id}}">
<span class="lesson_detail {{#teacherchanged}}changed{{/teacherchanged}}" id="teacher">{{teacher}}</span>
<span class="lesson_detail {{#roomchanged}}changed{{/roomchanged}}" id="room">{{room}}</span>
</div>
{{/viewroom}}
{{#text}}<div class="lesson_txt">{{text}}</div>{{/text}}
</a>
</div>
{{/lessons}}
</td>
{{/days}}
</tr>
{{/periods}}
</table>
<br>
<a href="javascript:;" class="block_timetable_detail_show" id="{{id}}">{{#pix}}i/show, core, Details anzeigen{{/pix}}Details anzeigen</a>
<a href="javascript:;" class="block_timetable_detail_hide" id="{{id}}" style="display:none;">{{#pix}}i/hide, core, Details verbergen{{/pix}}Details verbergen</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('mod_timetable/get is' + response);
                 templates.render('mod_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'));
     });
    $(".block_timetable_detail_show").click(function(event) {
       //$(".lesson_detail").show();
       var id = event.currentTarget.id;
       $("#"+id+".lesson_details").css({"display":"inline"});
       $("#"+id+".time").css({"display":"block"});
       //$("#"+id+".lesson_details").show();
       $("#"+id+".block_timetable_detail_show").hide();
       $("#"+id+".block_timetable_detail_hide").show();
     });
    $(".block_timetable_detail_hide").click(function(event) {
       //$(".lesson_detail").hide();
       var id = event.currentTarget.id;
       $("#"+id+".lesson_details").css({"display":"none"});
       $("#"+id+".time").css({"display":"none"});
       //$("#"+id+".lesson_details").hide();
       $("#"+id+".block_timetable_detail_show").show();
       $("#"+id+".block_timetable_detail_hide").hide();
     });

    if (typeof block_timetable_type !== 'undefined') {
         console.log("block_timetable_type found:"+block_timetable_type);
         select_type(block_timetable_type);
    } else {
         select_type('subject');
    }

});
{{/ js }}