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 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
 */
24
 
25
import Templates from 'core/templates';
26
import {BaseComponent} from 'core/reactive';
27
import {manager} from 'core/local/process_monitor/manager';
28
 
29
export default class extends BaseComponent {
30
 
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
    }
47
 
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
    }
62
 
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
    }
75
 
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
    }
88
 
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
    }
103
 
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
    }
113
 
114
    /**
115
     * Close the monitor.
116
     */
117
    _closeMonitor() {
118
        this.reactive.dispatch('setShow', false);
119
    }
120
}