Part of MDL-55611 epic.
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template block_myoverview/course-summary
+
+ This template renders the course summary (view by courses) for the myoverview block.
+
+ Example context (json):
+ {
+ "shortname": "course 3",
+ "viewurl": "https://www.google.com",
+ "startdate": "Nov 1th, 10am",
+ "enddate": "Nov 4th, 10am",
+ "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
+ }
+}}
+<li class="list-group-item col-md-4 m-b-1">
+ <div class="d-inline-block">
+ <div class="d-inline-block m-x-1">
+ <div class="course-info-container" id="course-info-container-{{id}}">
+ <div class="row m-b-1">
+ <div class="col-md-6">
+ <!-- Will be replaced by the chart after course completion changes are done. -->
+ <img height="100px" src="https://conceptdraw.com/a3039c3/p1/preview/640/pict--1-sector-donut-chart-management-indicators---vector-stencils-library.png--diagram-flowchart-example.png">
+ </div>
+ <div class="col-md-6">
+ <h3 class="align-text-bottom"><a href="{{viewurl}}">{{shortname}}</a></h3>
+ </div>
+ </div>
+ <div class="row text-muted m-b-1">
+ {{startdate}} - {{enddate}}
+ </div>
+ <div class="row text-muted">
+ {{{summary}}}
+ </div>
+ </div>
+ </div>
+ </div>
+</li>
\ No newline at end of file
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template block_myoverview/courses-view
+
+ This template renders the courses view for the myoverview block.
+
+ Example context (json):
+ {}
+}}
+<ul class="list-group unstyled" id="courses-view-future-{{uniqid}}">
+ <span class="hidden" data-region="loading-icon-container">
+ {{> core/loading }}
+ </span>
+ <div id="courses-future-container"
+ data-limit="{{$limit}}6{{/limit}}"
+ data-offset="{{$offset}}0{{/offset}}"
+ data-status="future"
+ data-region="courses-future-container">
+ </div>
+</ul>
+<div class="text-xs-center text-center" data-region="courses-future-paging-bar" id="courses-future-paging-bar-{{uniqid}}"></div>
+{{#js}}
+require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
+ var root = $("#courses-future-container"),
+ pagingRoot = $("#courses-future-paging-bar-{{uniqid}}");
+
+ CoursesView.init(root, pagingRoot);
+});
+{{/js}}
\ No newline at end of file
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template block_myoverview/courses-view
+
+ This template renders the courses view for the myoverview block.
+
+ Example context (json):
+ {}
+}}
+<ul class="list-group unstyled" id="courses-view-in-progress-{{uniqid}}">
+ <span class="hidden" data-region="loading-icon-container">
+ {{> core/loading }}
+ </span>
+ <div id="courses-in-progress-container"
+ data-limit="{{$limit}}6{{/limit}}"
+ data-offset="{{$offset}}0{{/offset}}"
+ data-status="inprogress"
+ data-region="courses-in-progress-container">
+ </div>
+</ul>
+<div class="text-xs-center text-center" data-region="courses-in-progress-paging-bar" id="courses-in-progress-paging-bar-{{uniqid}}"></div>
+{{#js}}
+require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
+ var root = $("#courses-in-progress-container"),
+ pagingRoot = $("#courses-in-progress-paging-bar-{{uniqid}}");
+
+ CoursesView.init(root, pagingRoot);
+});
+{{/js}}
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template block_myoverview/courses-view
+
+ This template renders the courses view for the myoverview block.
+
+ Example context (json):
+ {}
+}}
+<ul class="list-group unstyled" id="courses-view-past-{{uniqid}}">
+ <span class="hidden" data-region="loading-icon-container">
+ {{> core/loading }}
+ </span>
+ <div id="courses-past-container"
+ data-limit="{{$limit}}6{{/limit}}"
+ data-offset="{{$offset}}0{{/offset}}"
+ data-status="past"
+ data-region="courses-past-container">
+ </div>
+</ul>
+<div class="text-xs-center text-center" data-region="courses-view-past-paging-bar" id="courses-past-paging-bar-{{uniqid}}"></div>
+{{#js}}
+require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
+ var root = $("#courses-past-container"),
+ pagingRoot = $("#courses-past-paging-bar-{{uniqid}}");
+
+ CoursesView.init(root, pagingRoot);
+});
+{{/js}}
\ No newline at end of file
}}
<div id="courses-view-{{uniqid}}" data-region="courses-view">
<div class="row text-xs-center text-center">
- <div class="btn-group m-y-2" role="group">
- <button type="button" class="btn btn-secondary active" data-action="view-in-progress">
+ <div class="btn-group m-y-2" role="group" data-toggle="btns">
+ <a class="btn btn-default active" href="#myoverview_courses_view_in_progress" data-toggle="tab">
{{#str}} inprogress, block_myoverview {{/str}}
- </button>
- <button type="button" class="btn btn-secondary" data-action="view-future">
+ </a>
+ <a class="btn btn-default" href="#myoverview_courses_view_future" data-toggle="tab">
{{#str}} future, block_myoverview {{/str}}
- </button>
- <button type="button" class="btn btn-secondary" data-action="view-past">
+ </a>
+ <a class="btn btn-default" href="#myoverview_courses_view_past" data-toggle="tab">
{{#str}} past, block_myoverview {{/str}}
- </button>
+ </a>
</div>
</div>
- <div class="row">
+ <div class="tab-content">
+ <div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
+ {{> block_myoverview/courses-view-in-progress }}
+ </div>
+ <div class="tab-pane fade" id="myoverview_courses_view_future">
+ {{> block_myoverview/courses-view-future }}
+ </div>
+ <div class="tab-pane fade" id="myoverview_courses_view_past">
+ {{> block_myoverview/courses-view-past }}
+ </div>
</div>
</div>
+{{#js}}
+require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
+ var root = $('#courses-view-{{uniqid}}');
+ customEvents.define(root, [customEvents.events.activate]);
+ root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() {
+ root.find('.btn.active').removeClass('active');
+ });
+});
+{{/js}}
\ No newline at end of file
