MDL-57445 block_myoverview: Add timeline by date templates
authorCameron Ball <cameron@moodle.com>
Sun, 1 Jan 2017 16:53:29 +0000 (00:53 +0800)
committerDamyon Wiese <damyon@moodle.com>
Mon, 3 Apr 2017 03:35:37 +0000 (11:35 +0800)
Part of MDL-55611 epic.

blocks/myoverview/lang/en/block_myoverview.php
blocks/myoverview/templates/event-list-item.mustache [new file with mode: 0644]
blocks/myoverview/templates/event-list.mustache [new file with mode: 0644]
blocks/myoverview/templates/main.mustache [new file with mode: 0644]
blocks/myoverview/templates/timeline-view-dates.mustache [new file with mode: 0644]
blocks/myoverview/templates/timeline-view.mustache [new file with mode: 0644]

index 4af1ecc..a9bba66 100644 (file)
@@ -24,4 +24,9 @@
 
 $string['myoverview:addinstance'] = 'Add a new my overview block';
 $string['myoverview:myaddinstance'] = 'Add a new my overview block to Dashboard';
+$string['next7days'] = 'Next 7 days';
+$string['next30days'] = 'Next 30 days';
 $string['pluginname'] = 'My overview';
+$string['sortbycourses'] = 'Sort by courses';
+$string['sortbydates'] = 'Sort by dates';
+$string['timeline'] = 'Timeline';
diff --git a/blocks/myoverview/templates/event-list-item.mustache b/blocks/myoverview/templates/event-list-item.mustache
new file mode 100644 (file)
index 0000000..6450ce8
--- /dev/null
@@ -0,0 +1,48 @@
+{{!
+    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/event-list-item
+
+    This template renders an event list item for the myoverview block.
+}}
+<li class="list-group-item" data-region="event-list-item">
+    <div class="container-fluid">
+        <div class="row">
+            {{#itemcount}}
+                <div class="pull-xs-right hidden-sm-down m-l-1">
+                    <span class="tag tag-pill tag-default">{{.}}</span>
+                </div>
+            {{/itemcount}}
+            <div class="d-inline-block pull-xs-right hidden-sm-down m-l-1"><a href="{{{actionurl}}}">{{actionname}}</a></div>
+            <div class="d-inline-block pull-xs-right hidden-sm-down">{{enddate}}</div>
+            <div class="d-inline-block">
+                {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
+            </div>
+            <div class="d-inline-block m-l-1">
+                <div class="container">
+                    <div class="row">
+                        <a href="{{{contexturl}}}">{{contextname}}</a>
+                    </div>
+                    <div class="row text-muted">
+                        {{coursename}}
+                    </div>
+                </div>
+            </div>
+            <div class="d-block text-xs-right hidden-md-up">{{enddate}}</div>
+        </div>
+    </div>
+</li>
diff --git a/blocks/myoverview/templates/event-list.mustache b/blocks/myoverview/templates/event-list.mustache
new file mode 100644 (file)
index 0000000..b8ea9f5
--- /dev/null
@@ -0,0 +1,34 @@
+{{!
+    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/event-list
+
+    This template renders a list of events for the myoverview block.
+}}
+<div data-region="event-list-container">
+    <h5>{{$title}}{{/title}}</h5>
+    <ul class="list-group event-list"
+        data-region="event-list"
+        data-start-day="{{$startday}}0{{/startday}}"
+        data-end-day="{{$endday}}7{{/endday}}"
+        data-limit="{{$limit}}10{{/limit}}"
+        data-offset="{{$offset}}0{{/offset}}">
+
+        {{> block_myoverview/event-list-items }}
+    </ul>
+    {{> core/loading }}
+</div>
diff --git a/blocks/myoverview/templates/main.mustache b/blocks/myoverview/templates/main.mustache
new file mode 100644 (file)
index 0000000..f7178f4
--- /dev/null
@@ -0,0 +1,47 @@
+{{!
+    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/main
+
+    This template renders the main content area for the myoverview block.
+}}
+
+<div id="block-myoverview-{{uniqid}}" class="block-myoverview container-fluid" data-region="myoverview">
+    <div class="row">
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" href="#myoverview_timeline_view" role="tab" data-toggle="tab">
+                    {{#str}} timeline, block_myoverview {{/str}}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#myoverview_courses_view" role="tab" data-toggle="tab">
+                    {{#str}} courses {{/str}}
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="tab-content">
+        <div role="tabpanel" class="tab-pane fade in active" id="myoverview_timeline_view">
+            {{> block_myoverview/timeline-view }}
+        </div>
+        <div role="tabpanel" class="tab-pane fade" id="myoverview_courses_view">
+            {{> block_myoverview/courses-view }}
+        </div>
+    </div>
+</div>
diff --git a/blocks/myoverview/templates/timeline-view-dates.mustache b/blocks/myoverview/templates/timeline-view-dates.mustache
new file mode 100644 (file)
index 0000000..1304ac5
--- /dev/null
@@ -0,0 +1,46 @@
+{{!
+    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/timeline-view-dates
+
+    This template renders the timeline view by dates for the myoverview block.
+}}
+<div id="timeline-view-dates-{{uniqid}}" data-region="timeline-view-dates">
+    <div data-region="view-dates">
+        <div data-region="next-7-days">
+            {{< block_myoverview/event-list }}
+            {{$startday}}0{{/startday}}
+            {{$endday}}7{{/endday}}
+            {{$limit}}10{{/limit}}
+            {{$offset}}0{{/offset}}
+            {{$title}}{{#str}} next7days, block_myoverview {{/str}}{{/title}}
+        {{/ block_myoverview/event-list }}
+        </div>
+        <div class="m-t-2" data-region="next-30-days">
+            {{< block_myoverview/event-list }}
+            {{$startday}}8{{/startday}}
+            {{$endday}}30{{/endday}}
+            {{$limit}}10{{/limit}}
+            {{$offset}}0{{/offset}}
+            {{$title}}{{#str}} next30days, block_myoverview {{/str}}{{/title}}
+        {{/ block_myoverview/event-list }}
+        </div>
+        <div class="text-xs-center m-y-2">
+            <button type="button" class="btn btn-secondary" data-action="view-more">{{#str}} viewmore {{/str}}</button>
+        </div>
+    </div>
+</div>
diff --git a/blocks/myoverview/templates/timeline-view.mustache b/blocks/myoverview/templates/timeline-view.mustache
new file mode 100644 (file)
index 0000000..3fb6633
--- /dev/null
@@ -0,0 +1,50 @@
+{{!
+    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/timeline-view
+
+    This template renders the timeline view for the myoverview block.
+}}
+<div id="timeline-view-{{uniqid}}" data-region="timeline-view">
+    <div class="row text-xs-center">
+        <div class="btn-group m-y-2" role="group" data-toggle="btns">
+            <a class="btn btn-default active" href="#myoverview_timeline_dates" data-toggle="tab">
+                {{#str}} sortbydates, block_myoverview {{/str}}
+            </a>
+            <a class="btn btn-default" href="#myoverview_timeline_courses" data-toggle="tab">
+                {{#str}} sortbycourses, block_myoverview {{/str}}
+            </a>
+        </div>
+    </div>
+
+    <div class="tab-content">
+        <div class="tab-pane active fade in" id="myoverview_timeline_dates">
+            {{> block_myoverview/timeline-view-dates }}
+        </div>
+        <div class="tab-pane fade" id="myoverview_timeline_courses">
+        </div>
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
+    var root = $('#timeline-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}}