lib/amd/src/local/process_monitor/monitor.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 file upload monitor component.
  18.  *
  19.  * @module     core/local/process_monitor/monitor
  20.  * @class      core/local/process_monitor/monitor
  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 Templates from 'core/templates';
  26. import {BaseComponent} from 'core/reactive';
  27. import {manager} from 'core/local/process_monitor/manager';
  29. export default class extends BaseComponent {
  31.     /**
  32.      * Constructor hook.
  33.      */
  34.     create() {
  35.         // Optional component name for debugging.
  36.         this.name = 'process_monitor';
  37.         // Default query selectors.
  38.         this.selectors = {
  39.             QUEUELIST: `[data-for="process-list"]`,
  40.             CLOSE: `[data-action="hide"]`,
  41.         };
  42.         // Default classes to toggle on refresh.
  43.         this.classes = {
  44.             HIDE: `d-none`,
  45.         };
  46.     }
  48.     /**
  49.      * Static method to create a component instance form the mustache template.
  50.      *
  51.      * @param {string} query the DOM main element query selector
  52.      * @param {object} selectors optional css selector overrides
  53.      * @return {this}
  54.      */
  55.     static init(query, selectors) {
  56.         return new this({
  57.             element: document.querySelector(query),
  58.             reactive: manager,
  59.             selectors,
  60.         });
  61.     }
  63.     /**
  64.      * Initial state ready method.
  65.      *
  66.      * @param {Object} state the initial state
  67.      */
  68.     stateReady(state) {
  69.         this._updateMonitor({state, element: state.display});
  70.         this.addEventListener(this.getElement(this.selectors.CLOSE), 'click', this._closeMonitor);
  71.         state.queue.forEach((element) => {
  72.             this._createListItem({state, element});
  73.         });
  74.     }
  76.     /**
  77.      * Return the component watchers.
  78.      *
  79.      * @returns {Array} of watchers
  80.      */
  81.     getWatchers() {
  82.         return [
  83.             // State changes that require to reload some course modules.
  84.             {watch: `queue:created`, handler: this._createListItem},
  85.             {watch: `display:updated`, handler: this._updateMonitor},
  86.         ];
  87.     }
  89.     /**
  90.      * Create a monitor item.
  91.      *
  92.      * @param {object} args the watcher arguments
  93.      * @param {object} args.element the item state data
  94.      */
  95.     async _createListItem({element}) {
  96.         const {html, js} = await Templates.renderForPromise(
  97.             'core/local/process_monitor/process',
  98.             {...element}
  99.         );
  100.         const target = this.getElement(this.selectors.QUEUELIST);
  101.         Templates.appendNodeContents(target, html, js);
  102.     }
  104.     /**
  105.      * Create a monitor item.
  106.      *
  107.      * @param {object} args the watcher arguments
  108.      * @param {object} args.element the display state data
  109.      */
  110.     _updateMonitor({element}) {
  111.         this.element.classList.toggle(this.classes.HIDE, element.show !== true);
  112.     }
  114.     /**
  115.      * Close the monitor.
  116.      */
  117.     _closeMonitor() {
  118.         this.reactive.dispatch('setShow', false);
  119.     }
  120. }