Skip to content

Commit

Permalink
MDL-57447 block_myoverview: add templates for courses view
Browse files Browse the repository at this point in the history
Part of MDL-55611 epic.
  • Loading branch information
lameze authored and Damyon Wiese committed Apr 3, 2017
1 parent 6922c9a commit 0fc7dbc
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 8 deletions.
53 changes: 53 additions & 0 deletions blocks/myoverview/templates/courses-view-course-item.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{{!
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>
44 changes: 44 additions & 0 deletions blocks/myoverview/templates/courses-view-future.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{{!
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}}
44 changes: 44 additions & 0 deletions blocks/myoverview/templates/courses-view-in-progress.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{{!
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}}
44 changes: 44 additions & 0 deletions blocks/myoverview/templates/courses-view-past.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{{!
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}}
34 changes: 26 additions & 8 deletions blocks/myoverview/templates/courses-view.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,36 @@
}}
<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}}

0 comments on commit 0fc7dbc

Please sign in to comment.