Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 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
/**
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
 */
24
 
25
import {BaseComponent} from 'core/reactive';
26
import {manager} from 'core/local/process_monitor/manager';
27
 
28
export default class extends BaseComponent {
29
 
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
    }
49
 
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
    }
64
 
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
    }
74
 
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
    }
86
 
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;
96
 
97
        const progressbar = this.getElement(this.selectors.PROGRESSBAR);
98
        progressbar.classList.toggle(this.classes.HIDE, element.finished);
99
        progressbar.value = element.percentage;
100
 
101
        const close = this.getElement(this.selectors.CLOSE);
102
        close.classList.toggle(this.classes.HIDE, !element.error);
103
 
104
        const error = this.getElement(this.selectors.ERROR);
105
        error.innerHTML = element.error;
106
        error.classList.toggle(this.classes.HIDE, !element.error);
107
    }
108
 
109
    /**
110
     * Close the process.
111
     */
112
    _removeProcess() {
113
        this.reactive.dispatch('removeProcess', this.id);
114
    }
115
}