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/>.
  15. /**
  16. * The process motnitor's process reactive component.
  17. *
  18. * @module core/local/process_monitor/process
  19. * @class core/local/process_monitor/process
  20. * @copyright 2022 Ferran Recio <ferran@moodle.com>
  21. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22. */
  23. import {BaseComponent} from 'core/reactive';
  24. import {manager} from 'core/local/process_monitor/manager';
  25. export default class extends BaseComponent {
  26. /**
  27. * Constructor hook.
  28. */
  29. create() {
  30. // Optional component name for debugging.
  31. this.name = 'process_monitor_process';
  32. // Default query selectors.
  33. this.selectors = {
  34. CLOSE: `[data-action="closeProcess"]`,
  35. ERROR: `[data-for="error"]`,
  36. PROGRESSBAR: `progress`,
  37. NAME: `[data-for="name"]`,
  38. };
  39. // Default classes to toggle on refresh.
  40. this.classes = {
  41. HIDE: `d-none`,
  42. };
  43. this.id = this.element.dataset.id;
  44. }
  45. /**
  46. * Static method to create a component instance form the mustache template.
  47. *
  48. * @param {string} query the DOM main element query selector
  49. * @param {object} selectors optional css selector overrides
  50. * @return {this}
  51. */
  52. static init(query, selectors) {
  53. return new this({
  54. element: document.querySelector(query),
  55. reactive: manager,
  56. selectors,
  57. });
  58. }
  59. /**
  60. * Initial state ready method.
  61. *
  62. * @param {Object} state the initial state
  63. */
  64. stateReady(state) {
  65. this._refreshItem({state, element: state.queue.get(this.id)});
  66. this.addEventListener(this.getElement(this.selectors.CLOSE), 'click', this._removeProcess);
  67. }
  68. /**
  69. * Return the component watchers.
  70. *
  71. * @returns {Array} of watchers
  72. */
  73. getWatchers() {
  74. return [
  75. {watch: `queue[${this.id}]:updated`, handler: this._refreshItem},
  76. {watch: `queue[${this.id}]:deleted`, handler: this.remove},
  77. ];
  78. }
  79. /**
  80. * Create a monitor item.
  81. *
  82. * @param {object} args the watcher arguments
  83. * @param {object} args.element the item state data
  84. */
  85. async _refreshItem({element}) {
  86. const name = this.getElement(this.selectors.NAME);
  87. name.innerHTML = element.name;
  88. const progressbar = this.getElement(this.selectors.PROGRESSBAR);
  89. progressbar.classList.toggle(this.classes.HIDE, element.finished);
  90. progressbar.value = element.percentage;
  91. const close = this.getElement(this.selectors.CLOSE);
  92. close.classList.toggle(this.classes.HIDE, !element.error);
  93. const error = this.getElement(this.selectors.ERROR);
  94. error.innerHTML = element.error;
  95. error.classList.toggle(this.classes.HIDE, !element.error);
  96. }
  97. /**
  98. * Close the process.
  99. */
  100. _removeProcess() {
  101. this.reactive.dispatch('removeProcess', this.id);
  102. }
  103. }