mod/lti/templates/tool_card.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   4     Moodle is free software: you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation, either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     Moodle is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16 }}
  17 {{!
  18     @template mod_lti/tool_card
  19
  20     This template provides the layout for a single tool card on the tool
  21     configuration page.
  22
  23     Classes required for JS:
  24     * none
  25
  26     Data attributes required for JS:
  27     * none
  28
  29     Context variables required for this template:
  30     * id
  31     * hascapabilitygroups
  32     * state
  33     ** pending|configured|rejected|unknown
  34     ** text
  35     * courseid
  36     * urls
  37     ** course - optional, required if courseid > 0
  38     ** icon
  39     ** edit
  40     ** publickeyset
  41     ** accesstoken
  42     ** authrequest
  43     * name
  44     * description
  45     * platformid
  46     * clientid
  47     * deploymentid
  48     * instancecount
  49
  50     Example context (json):
  51     {
  52         "id": 1,
  53         "name": "Example Tool",
  54         "description": "This is an example tool",
  55         "platformid": "https:\/\/moodle.example.com",
  56         "courseid": 0,
  57         "hascapabilitygroups": false,
  58         "state": {
  59             "text": "Active",
  60             "pending": false,
  61             "configured": true,
  62             "rejected": false,
  63             "unknown": false
  64         },
  65         "urls": {
  66             "icon": "https://www.example.com/icon1.png",
  67             "edit": "https://www.example.com/mod/lti/typessettings.php",
  68             "publickeyset": "https:\/\/moodle.example.com\/mod\/lti\/certs.php",
  69             "accesstoken": "https:\/\/moodle.example.com\/mod\/lti\/token.php",
  70             "authrequest": "https:\/\/moodle.example.com\/mod\/lti\/auth.php"
  71         },
  72         "clientid": null,
  73         "deploymentid": 1,
  74         "instancecount": 0
  75     }
  76
  77 }}
  78 <div class="tool-card" data-type-id="{{id}}" data-uniqid="{{uniqid}}"
  79     data-modaltitle="{{#str}} tooldetailsmodaltitle, mod_lti {{/str}}"
  80     data-mailtosubject="{{#str}} tooldetailsmailtosubject, mod_lti {{/str}}"
  81     data-platformidstr="{{#str}} tooldetailsplatformid, mod_lti {{/str}}"
  82     data-clientidstr="{{#str}} tooldetailsclientid, mod_lti {{/str}}"
  83     data-deploymentidstr="{{#str}} tooldetailsdeploymentid, mod_lti {{/str}}"
  84     data-publickeyseturlstr="{{#str}} tooldetailspublickeyseturl, mod_lti {{/str}}"
  85     data-accesstokenurlstr="{{#str}} tooldetailsaccesstokenurl, mod_lti {{/str}}"
  86     data-authrequesturlstr="{{#str}} tooldetailsauthrequesturl, mod_lti {{/str}}"
  87     data-platformid="{{platformid}}" data-clientid="{{clientid}}" data-deploymentid="{{deploymentid}}"
  88     data-publickeyseturl="{{urls.publickeyset}}" data-accesstokenurl="{{urls.accesstoken}}" data-authrequesturl="{{urls.authrequest}}">
  89     <div class="overlay-container">
  90         <div class="img-container">
  91             {{> mod_lti/loader }}
  92             <div class="success-icon-container">{{#pix}} i/valid, core, {{#str}} success {{/str}}{{/pix}}</div>
  93             <div class="fail-icon-container">{{#pix}} i/invalid, core, {{#str}} error {{/str}}{{/pix}}</div>
  94         </div>
  95         {{#hascapabilitygroups}}
  96             {{> mod_lti/tool_type_capabilities_agree }}
  97         {{/hascapabilitygroups}}
  98     </div>
  99     <div class="tool-card-content">
 100         <div class="tool-card-header">
 101             <div class="tool-card-subheader">
 102                 <div class="badge
 103                             {{#state.pending}}badge-info{{/state.pending}}
 104                             {{#state.configured}}badge-success{{/state.configured}}
 105                             {{#state.rejected}}badge-danger{{/state.rejected}}
 106                             {{#state.unknown}}badge-warning{{/state.unknown}}">
 107                     {{state.text}}
 108                 </div>
 109                 <div class="tool-card-actions float-sm-right">
 110                     {{#courseid}}
 111                         <a href="{{{urls.course}}}" title="{{#str}} courselink, mod_lti {{/str}}">{{#pix}} i/course, core, {{#str}} courselink, mod_lti {{/str}}{{/pix}}</a>
 112                     {{/courseid}}
 113                     {{#clientid}}
 114                     <a class="viewdetails" id="{{uniqid}}-{{deploymentid}}" href="#" title="{{#str}} tooldetailsmodallink, mod_lti {{/str}}">{{#pix}} t/viewdetails, core, {{#str}} tooldetailsmodallink, mod_lti {{/str}}{{/pix}}</a>
 115                     {{/clientid}}
 116                     <a class="edit" href="{{{urls.edit}}}" title="{{#str}} edit {{/str}}">{{#pix}} t/edit, core, {{#str}} edit {{/str}}{{/pix}}</a>
 117                     <a class="delete" href="#" title="{{#str}} delete {{/str}}">{{#pix}} t/delete, core, {{#str}} delete {{/str}}{{/pix}}</a>
 118                 </div>
 119             </div>
 120             <img class="tool-card-icon" src="{{{urls.icon}}}" alt="{{name}}">
 121             <div class="contenteditable-container">
 122                 <h4 class="name" contenteditable="true">{{name}}</h4>
 123                 <div class="overlay-container">{{> mod_lti/loader }}</div>
 124             </div>
 125         </div>
 126         <div class="tool-card-body">
 127             <div class="contenteditable-container">
 128                 <p class="description" contenteditable="true">{{description}}</p>
 129                 <div class="overlay-container">{{> mod_lti/loader }}</div>
 130             </div>
 131         </div>
 132         <div class="tool-card-footer">
 133             {{#state.pending}}
 134                 <a class="activate btn btn-success" href="#">{{#str}} activate, mod_lti {{/str}}</a>
 135             {{/state.pending}}
 136             {{^state.pending}}
 137                 {{#instancecount}}
 138                     <p>{{#str}} toolisbeingused, mod_lti, {{instancecount}} {{/str}}</p>
 139                 {{/instancecount}}
 140                 {{^instancecount}}
 141                     <p>{{#str}} toolisnotbeingused, mod_lti{{/str}}</p>
 142                 {{/instancecount}}
 143             {{/state.pending}}
 144         </div>
 145     </div>
 146 </div>
 147 {{#js}}
 148     require(['jquery', 'mod_lti/tool_card_controller'], function($, controller) {
 149         var cardElement = $('[data-type-id={{id}}]');
 150         controller.init(cardElement);
 151     });
 152 {{/js}}