moodle/lib/templates/progress_bar.mustache
Conn Warwicker b92886ad59
MDL-70854 core: Add stored progress bars.
- Alters existing progress_bar class to support extension
    - Adds stored_progress_bar class as child of progress_bar
    - Adds webservice to poll stored progress
    - Updates database tables
    - Bumps version
    - Adds unit/behat tests
2024-07-23 17:58:53 +08:00

86 lines
3.3 KiB
Plaintext

{{!
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 core/progress_bar
Progress bar.
Example context (json):
{
"id": "progressbar_test",
"width": "500"
}
}}
<div id="{{idnumber}}" class="progressbar_container mb-3 {{class}}" data-recordid="{{id}}">
<div class="progress">
<div id="{{idnumber}}_bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-value="{{value}}" aria-valuemin="0" aria-valuemax="100" style="width: {{value}}%"></div>
</div>
<div class="d-flex">
<div style="flex: 1 1 0; min-width: 0;">
<div id="{{idnumber}}_status" class="text-truncate">&nbsp;</div>
</div>
<div class="text-right pl-3" style="flex: 0 0 content">
<span id="{{idnumber}}_estimate" class="">&nbsp;</span>
<span id="{{idnumber}}_percentage" class="d-inline-block" style="width: 3em">{{value}}%</span>
</div>
</div>
</div>
{{! We must not use the JS helper otherwise this gets executed too late. }}
<script>
(function() {
let el = document.getElementById('{{idnumber}}');
let progressBar = document.getElementById('{{idnumber}}_bar');
let statusIndicator = document.getElementById('{{idnumber}}_status');
let estimateIndicator = document.getElementById('{{idnumber}}_estimate');
let percentageIndicator = document.getElementById('{{idnumber}}_percentage');
// Change background colour to red if there was an error.
if ({{error}} == 1) {
el.querySelector('.progress-bar').style.background = 'red';
}
el.addEventListener('update', function(e) {
var msg = e.detail.message,
percent = e.detail.percent,
estimate = e.detail.estimate
error = e.detail.error;
statusIndicator.textContent = msg;
progressBar.style.width = percent.toFixed(1) + '%';
progressBar.setAttribute('value', percent.toFixed(1));
if (error) {
progressBar.classList.add('bg-danger');
progressBar.classList.remove('bg-success');
estimateIndicator.textContent = '';
} else if (percent === 100) {
progressBar.classList.add('bg-success');
progressBar.classList.remove('progress-bar-striped');
progressBar.classList.remove('progress-bar-animated');
percentageIndicator.textContent = '100%';
estimateIndicator.textContent = '';
} else {
estimateIndicator.textContent = estimate;
percentageIndicator.textContent = percent.toFixed(1) + '%';
progressBar.classList.remove('bg-success');
}
});
})();
</script>