Adapt mobile app code to Ionic 5 (#535)

classes/output/mobile.php

@@ -54,6 +54,7 @@ class mobile {
 
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
+        $versionname = $args['appversioncode'] >= 3950 ? 'latest' : 'ionic3';
         $cmid = $args['cmid'];
         $courseid = $args['courseid'];
         $takenstatus = empty($args['status']) ? '' : $args['status'];
@@ -252,7 +253,7 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('mod_attendance/mobile_view_page', $data),
+                    'html' => $OUTPUT->render_from_template("mod_attendance/mobile_view_page_$versionname", $data),
                 ],
             ],
             'javascript' => '',
@@ -272,6 +273,7 @@ class mobile {
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
         $args = (object) $args;
+        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
         $cmid = $args->cmid;
         $courseid = $args->courseid;
         $sessid = $args->sessid;
@@ -352,7 +354,7 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('mod_attendance/mobile_user_form', $data),
+                    'html' => $OUTPUT->render_from_template("mod_attendance/mobile_user_form_$versionname", $data),
                     'cache-view' => false
                 ],
             ],
@@ -373,6 +375,7 @@ class mobile {
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
         $args = (object) $args;
+        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
         $cmid = $args->cmid;
         $courseid = $args->courseid;
         $sessid = $args->sessid;
@@ -414,10 +417,11 @@ class mobile {
 
         foreach ($statuses as $status) {
             $data['statuses'][] = array('stid' => $status->id, 'acronym' => $status->acronym,
-                'description' => $status->description, 'selectall' => '');
+                'description' => $status->description);
         }
 
         $data['users'] = array();
+        $data['selectall'] = '';
         $users = $att->get_users($att->get_session_info($sessid)->groupid, 0);
         foreach ($users as $user) {
             $userpicture = new \user_picture($user);
@@ -427,13 +431,7 @@ class mobile {
             // Generate args to use in submission button here.
             $data['btnargs'] .= ', status'. $user->id. ': CONTENT_OTHERDATA.status'. $user->id;
             // Really Hacky way to do a select-all. This really needs to be moved into a JS function within the app.
-            foreach ($statuses as $status) {
+            $data['selectall'] .= "CONTENT_OTHERDATA.status".$user->id."=CONTENT_OTHERDATA.statusall;";
-                foreach ($data['statuses'] as $id => $st) { // Statuses not ordered by statusid.
-                    if ($st['stid'] == $status->id) { // Find the item that we need to add to.
-                        $data['statuses'][$id]['selectall'] .= "CONTENT_OTHERDATA.status".$user->id."=".$status->id.";";
-                    }
-                }
-            }
         }
         if (!empty($data['messages'])) {
             $data['showmessage'] = true;
@@ -443,7 +441,7 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('mod_attendance/mobile_teacher_form', $data),
+                    'html' => $OUTPUT->render_from_template("mod_attendance/mobile_teacher_form_$versionname", $data),
                     'cache-view' => false
                 ],
             ],

templates/mobile_teacher_form.mustache → templates/mobile_teacher_form_ionic3.mustache

@@ -62,13 +62,13 @@
                 <ion-item>
                     {{ 'plugin.mod_attendance.setallstatuses' | translate }}
                 </ion-item>
-    <ion-list radio-group>
+    <ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.statusall" (ionChange)="<% selectall %>">
         <%#statuses%>
 
         <span class="radiolabel">
                 <ion-item>
                     <ion-label><% acronym %></ion-label>
-                    <ion-radio (ionSelect)="<% selectall %>" value="<% stid %>"></ion-radio>
+                    <ion-radio value="<% stid %>"></ion-radio>
                 </ion-item>
             </span>
         <%/statuses%>
@@ -82,7 +82,6 @@
             <img src="<% profileimageurl %>" core-external-content role="presentation" onError="this.src='assets/img/user-avatar.png'">
         </ion-avatar>
         <h2><% fullname %></h2>
-        <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
     </span>
     <ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.status<% userid %>">
         <%#statuses%>

templates/mobile_teacher_form_latest.mustache

@@ -0,0 +1,104 @@
+{{!
+    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 mod_attendance/mobile_user_form
+
+    The page to take attendance
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * attendance
+    * summary
+    * cmid
+
+    Example context (json):
+    {
+        "attendance": {
+            "id": "1",
+            "course": "2",
+            "name": "Class Attendance",
+            "intro": "Intro"
+        },
+        "cmid": "25",
+        "courseid": "4",
+        "sessid": "43",
+        "btnargs" : ""
+    }
+}}
+{{=<% %>=}}
+<div class="attendance_mobile_teacher_form">
+    <span class="description">
+    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+    </span>
+    <%#showmessage%>
+        <%#messages%>
+            <span class="messages">
+                <ion-item class="ion-text-wrap">
+                    <ion-label>{{ 'plugin.mod_attendance.<% string %>' | translate }}</ion-label>
+                </ion-item>
+            </span>
+        <%/messages%>
+    <%/showmessage%>
+    <span class="attendance_selectall">
+        <ion-item class="ion-text-wrap">
+            <ion-label>{{ 'plugin.mod_attendance.setallstatuses' | translate }}</ion-label>
+        </ion-item>
+        <ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.statusall" (ionChange)="<% selectall %>">
+        <%#statuses%>
+
+            <span class="radiolabel">
+                <ion-item class="ion-text-wrap">
+                    <ion-label><% acronym %></ion-label>
+                    <ion-radio value="<% stid %>"></ion-radio>
+                </ion-item>
+            </span>
+        <%/statuses%>
+        </ion-radio-group>
+    </span>
+    <%#users%>
+    <span class="attendance_user_row">
+    <!-- User and status of the submission. -->
+    <ion-item class="ion-text-wrap" title="<% fullname %>">
+        <ion-avatar slot="start">
+            <img src="<% profileimageurl %>" core-external-content role="presentation" onError="this.src='assets/img/user-avatar.png'">
+        </ion-avatar>
+        <ion-label>
+            <h2><% fullname %></h2>
+        </ion-label>
+    </ion-item>
+    <ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.status<% userid %>">
+        <%#statuses%>
+        <span class="radiolabel">
+            <ion-item class="ion-text-wrap">
+                <ion-label><% acronym %></ion-label>
+                <ion-radio value="<% stid %>"></ion-radio>
+            </ion-item>
+        </span>
+        <%/statuses%>
+    </ion-radio-group>
+    </span>
+    <%/users%>
+    <ion-button class="ion-margin" expand="block" core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %><% btnargs %>}">
+        {{ 'plugin.mod_attendance.submitattendance' | translate }}
+    </ion-button>
+
+</div>

templates/mobile_user_form_latest.mustache

@@ -0,0 +1,82 @@
+{{!
+    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 mod_attendance/mobile_user_form
+
+    The page to take attendance
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * attendance
+    * summary
+    * cmid
+
+    Example context (json):
+    {
+        "attendance": {
+            "id": "1",
+            "course": "2",
+            "name": "Class Attendance",
+            "intro": "Intro"
+        },
+        "cmid": "25",
+        "courseid": "4",
+        "sessid": "43"
+    }
+}}
+{{=<% %>=}}
+<div class="attendance_mobile_user_form">
+    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+    <%#showmessage%>
+        <%#messages%>
+            <span class="messages">
+                <ion-item class="ion-text-wrap">
+                    <ion-label>{{ 'plugin.mod_attendance.<% string %>' | translate }}</ion-label>
+                </ion-item>
+            </span>
+        <%/messages%>
+    <%/showmessage%>
+    <%#showpassword%>
+    <ion-item>
+        <ion-label>{{ 'plugin.mod_attendance.enterpassword' | translate }}:</ion-label>
+        <ion-input type="text" name="studentpass" [(ngModel)]="studentpass"></ion-input>
+    </ion-item>
+    <%/showpassword%>
+    <%#showstatuses%>
+    <ion-radio-group [(ngModel)]="status" name="status">
+        <%#statuses%>
+        <ion-item class="ion-text-wrap">
+            <ion-label><% description %></ion-label>
+            <ion-radio slot="end" value="<% stid %>"></ion-radio>
+        </ion-item>
+        <%/statuses%>
+    </ion-radio-group>
+    <ion-button class="ion-margin" expand="block" core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %>, status: status, studentpass: studentpass}">
+        {{ 'plugin.mod_attendance.submitattendance' | translate }}
+    </ion-button>
+    <%/showstatuses%>
+    <%#disabledduetotime%>
+    <ion-item>
+        <ion-label>{{ 'plugin.mod_attendance.somedisabledstatus' | translate }}</ion-label>
+    </ion-item>
+    <%/disabledduetotime%>
+</div>

templates/mobile_view_page_latest.mustache

@@ -0,0 +1,148 @@
+{{!
+    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 mod_attendance/mobile_view_page
+
+    The main page to view the attendance activity
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * attendance
+    * summary
+    * cmid
+
+    Example context (json):
+    {
+        "attendance": {
+            "id": "1",
+            "course": "2",
+            "name": "Class Attendance",
+            "intro": "Intro"
+        },
+        "summary": {
+            "numtakensessions": "1",
+            "pointssessionscompleted": "2",
+            "percentagesessionscompleted": "2"
+        },
+        "cmid": "25",
+        "timestamp": "1234"
+    }
+}}
+{{=<% %>=}}
+<div class="attendance_mobile_view_page">
+    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+    <%#showmessage%>
+    <%#messages%>
+    <span class="messages">
+        <ion-item class="ion-text-wrap">
+            <ion-label>{{ 'plugin.mod_attendance.<% string %>' | translate }}</ion-label>
+        </ion-item>
+    </span>
+    <%/messages%>
+    <%/showmessage%>
+    <%#sessions%>
+    <ion-item>
+        <ion-label>
+            <h2><% time %></h2>
+            <h3><% groupname %></h3>
+            <h3><% currentstatus %></h3>
+            <%#sessid%>
+            <ion-button core-site-plugins-new-content component="mod_attendance" method="<% attendancefunction %>" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %>, timestamp: <% timestamp %>}">
+                {{ 'plugin.mod_attendance.submitattendance' | translate }}
+            </ion-button>
+            <%/sessid%>
+        </ion-label>
+    </ion-item>
+    <%/sessions%>
+    <ion-item>
+    <ion-label>
+    <ion-grid>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.sessionscompleted' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.numtakensessions %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.pointssessionscompleted' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.pointssessionscompleted %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.percentagesessionscompleted' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.percentagesessionscompleted %>
+            </ion-col>
+        </ion-row>
+
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.sessionstotal' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.numallsessions %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.pointsallsessions' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.percentagesessionscompleted %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.percentageallsessions' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.allsessionspercentage %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.maxpossiblepoints' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.maxpossiblepoints %>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col size="9" class="text-left ion-text-wrap">
+                {{ 'plugin.mod_attendance.maxpossiblepercentage' | translate }}
+            </ion-col>
+            <ion-col size="2" class="text-left">
+                <% summary.maxpossiblepercentage %>
+            </ion-col>
+        </ion-row>
+
+    </ion-grid>
+    </ion-label>
+    </ion-item>
+</div>