lib/amd/src/local/process_monitor/process.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * The process motnitor's process reactive component.
  18.  *
  19.  * @module     core/local/process_monitor/process
  20.  * @class      core/local/process_monitor/process
  21.  * @copyright  2022 Ferran Recio <ferran@moodle.com>
  22.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23.  */
  25. import {BaseComponent} from 'core/reactive';
  26. import {manager} from 'core/local/process_monitor/manager';
  28. export default class extends BaseComponent {
  30.     /**
  31.      * Constructor hook.
  32.      */
  33.     create() {
  34.         // Optional component name for debugging.
  35.         this.name = 'process_monitor_process';
  36.         // Default query selectors.
  37.         this.selectors = {
  38.             CLOSE: `[data-action="closeProcess"]`,
  39.             ERROR: `[data-for="error"]`,
  40.             PROGRESSBAR: `progress`,
  41.             NAME: `[data-for="name"]`,
  42.         };
  43.         // Default classes to toggle on refresh.
  44.         this.classes = {
  45.             HIDE: `d-none`,
  46.         };
  47.         this.id = this.element.dataset.id;
  48.     }
  50.     /**
  51.      * Static method to create a component instance form the mustache template.
  52.      *
  53.      * @param {string} query the DOM main element query selector
  54.      * @param {object} selectors optional css selector overrides
  55.      * @return {this}
  56.      */
  57.     static init(query, selectors) {
  58.         return new this({
  59.             element: document.querySelector(query),
  60.             reactive: manager,
  61.             selectors,
  62.         });
  63.     }
  65.     /**
  66.      * Initial state ready method.
  67.      *
  68.      * @param {Object} state the initial state
  69.      */
  70.     stateReady(state) {
  71.         this._refreshItem({state, element: state.queue.get(this.id)});
  72.         this.addEventListener(this.getElement(this.selectors.CLOSE), 'click', this._removeProcess);
  73.     }
  75.     /**
  76.      * Return the component watchers.
  77.      *
  78.      * @returns {Array} of watchers
  79.      */
  80.     getWatchers() {
  81.         return [
  82.             {watch: `queue[${this.id}]:updated`, handler: this._refreshItem},
  83.             {watch: `queue[${this.id}]:deleted`, handler: this.remove},
  84.         ];
  85.     }
  87.     /**
  88.      * Create a monitor item.
  89.      *
  90.      * @param {object} args the watcher arguments
  91.      * @param {object} args.element the item state data
  92.      */
  93.     async _refreshItem({element}) {
  94.         const name = this.getElement(this.selectors.NAME);
  95.         name.innerHTML = element.name;
  97.         const progressbar = this.getElement(this.selectors.PROGRESSBAR);
  98.         progressbar.classList.toggle(this.classes.HIDE, element.finished);
  99.         progressbar.value = element.percentage;
  101.         const close = this.getElement(this.selectors.CLOSE);
  102.         close.classList.toggle(this.classes.HIDE, !element.error);
  104.         const error = this.getElement(this.selectors.ERROR);
  105.         error.innerHTML = element.error;
  106.         error.classList.toggle(this.classes.HIDE, !element.error);
  107.     }
  109.     /**
  110.      * Close the process.
  111.      */
  112.     _removeProcess() {
  113.         this.reactive.dispatch('removeProcess', this.id);
  114.     }
  115. }