Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Manager for the accessreview block.
 *
 * @module block_accessreview/module
 * @author      Max Larkin <max@brickfieldlabs.ie>
 * @copyright   2020 Brickfield Education Labs <max@brickfieldlabs.ie>
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import {call as fetchMany} from 'core/ajax';
import * as Templates from 'core/templates';
import {exception as displayError} from 'core/notification';

/**
 * The number of colours used to represent the heatmap. (Indexed on 0.)
 * @type {number}
 */
const numColours = 2;

/**
 * The toggle state of the heatmap.
 * @type {boolean}
 */
let toggleState = true;

/**
 * Renders the HTML template onto a particular HTML element.
 * @param {HTMLElement} element The element to attach the HTML to.
 * @param {number} errorCount The number of errors on this module/section.
 * @param {number} checkCount The number of checks triggered on this module/section.
 * @param {String} displayFormat
 * @param {Number} minViews
 * @param {Number} viewDelta
 * @returns {Promise}
 */
const renderTemplate = (element, errorCount, checkCount, displayFormat, minViews, viewDelta) => {
    // Calculate a weight?
    const weight = parseInt((errorCount - minViews) / viewDelta * numColours);

    const context = {
        resultPassed: !errorCount,
        classList: '',
        passRate: {
            errorCount,
            checkCount,
            failureRate: Math.round(errorCount / checkCount * 100),
        },
    };

    if (!element) {
        return Promise.resolve();
    }

    const elementClassList = ['block_accessreview'];
    if (context.resultPassed) {
        elementClassList.push('block_accessreview_success');
    } else if (weight) {
        elementClassList.push('block_accessreview_danger');
    } else {
        elementClassList.push('block_accessreview_warning');
    }

    const showIcons = (displayFormat == 'showicons') || (displayFormat == 'showboth');
    const showBackground = (displayFormat == 'showbackground') || (displayFormat == 'showboth');

    if (showBackground && !showIcons) {
        // Only the background is displayed.
        // No need to display the template.
        // Note: The case where both the background and icons are shown is handled later to avoid jankiness.
        element.classList.add(...elementClassList, 'alert');

        return Promise.resolve();
    }

    if (showIcons && !showBackground) {
        context.classList = elementClassList.join(' ');
    }

    // The icons are displayed either with, or without, the background.
    return Templates.renderForPromise('block_accessreview/status', context)
    .then(({html, js}) => {
        Templates.appendNodeContents(element, html, js);

        if (showBackground) {
            element.classList.add(...elementClassList, 'alert');
        }

        return;
    })
    .catch();
};

/**
 * Applies the template to all sections and modules on the course page.
 *
 * @param {Number} courseId
 * @param {String} displayFormat
 * @param {Boolean} updatePreference
 * @returns {Promise}
 */
const showAccessMap = (courseId, displayFormat, updatePreference = false) => {
    // Get error data.
    return Promise.all(fetchReviewData(courseId, updatePreference))
    .then(([sectionData, moduleData]) => {
        // Get total data.
        const {minViews, viewDelta} = getErrorTotals(sectionData, moduleData);

        sectionData.forEach(section => {
            const element = document.querySelector(`#section-${section.section} .summary`);
            if (!element) {
                return;
            }

            renderTemplate(element, section.numerrors, section.numchecks, displayFormat, minViews, viewDelta);
        });

        moduleData.forEach(module => {
            const element = document.getElementById(`module-${module.cmid}`);
            if (!element) {
                return;
            }

            renderTemplate(element, module.numerrors, module.numchecks, displayFormat, minViews, viewDelta);
        });

        // Change the icon display.
        document.querySelector('.icon-accessmap').classList.remove(...['fa-eye-slash']);
        document.querySelector('.icon-accessmap').classList.add(...['fa-eye']);

        return {
            sectionData,
            moduleData,
        };
    })
    .catch(displayError);
};


/**
 * Hides or removes the templates from the HTML of the current page.
 *
 * @param {Boolean} updatePreference
 */
const hideAccessMap = (updatePreference = false) => {
    // Removes the added elements.
    document.querySelectorAll('.block_accessreview_view').forEach(node => node.remove());

    const classList = [
        'block_accessreview',
        'block_accessreview_success',
        'block_accessreview_warning',
        'block_accessreview_danger',
        'block_accessreview_view',
        'alert',
    ];

    // Removes the added classes.
    document.querySelectorAll('.block_accessreview').forEach(node => node.classList.remove(...classList));

    if (updatePreference) {
        setToggleStatePreference(false);
    }

    // Change the icon display.
    document.querySelector('.icon-accessmap').classList.remove(...['fa-eye']);
    document.querySelector('.icon-accessmap').classList.add(...['fa-eye-slash']);
};


/**
 * Toggles the heatmap on/off.
 *
 * @param {Number} courseId
 * @param {String} displayFormat
 */
const toggleAccessMap = (courseId, displayFormat) => {
    toggleState = !toggleState;
    if (!toggleState) {
        hideAccessMap(true);
    } else {
        showAccessMap(courseId, displayFormat, true);
    }
};

/**
 * Parses information on the errors, generating the min, max and totals.
 *
 * @param {Object[]} sectionData The error data for course sections.
 * @param {Object[]} moduleData The error data for course modules.
 * @returns {Object} An object representing the extra error information.
 */
const getErrorTotals = (sectionData, moduleData) => {
    const totals = {
        totalErrors: 0,
        totalUsers: 0,
        minViews: 0,
        maxViews: 0,
        viewDelta: 0,
    };

    [].concat(sectionData, moduleData).forEach(item => {
        totals.totalErrors += item.numerrors;
        if (item.numerrors < totals.minViews) {
            totals.minViews = item.numerrors;
        }

        if (item.numerrors > totals.maxViews) {
            totals.maxViews = item.numerrors;
        }
        totals.totalUsers += item.numchecks;
    });

    totals.viewDelta = totals.maxViews - totals.minViews + 1;

    return totals;
};

const registerEventListeners = (courseId, displayFormat) => {
    document.addEventListener('click', e => {
        if (e.target.closest('#toggle-accessmap')) {
            e.preventDefault();
            toggleAccessMap(courseId, displayFormat);
        }
    });
};

/**
 * Set the user preference for the toggle value.
 *
 * @param   {Boolean} toggleState
 * @returns {Promise}
 */
const getTogglePreferenceParams = toggleState => {
    return {
        methodname: 'core_user_update_user_preferences',
        args: {
            preferences: [{
                type: 'block_accessreviewtogglestate',
                value: toggleState,
            }],
        }
    };
};

const setToggleStatePreference = toggleState => fetchMany([getTogglePreferenceParams(toggleState)]);

/**
 * Fetch the review data.
 *
 * @param   {Number} courseid
 * @param {Boolean} updatePreference
 * @returns {Promise[]}
 */
const fetchReviewData = (courseid, updatePreference = false) => {
    const calls = [
        {
            methodname: 'block_accessreview_get_section_data',
            args: {courseid}
        },
        {
            methodname: 'block_accessreview_get_module_data',
            args: {courseid}
        },
    ];

    if (updatePreference) {
        calls.push(getTogglePreferenceParams(true));
    }

    return fetchMany(calls);
};

/**
 * Setting up the access review module.
 * @param {number} toggled A number represnting the state of the review toggle.
 * @param {string} displayFormat A string representing the display format for icons.
 * @param {number} courseId The course ID.
 */
export const init = (toggled, displayFormat, courseId) => {
    // Settings consts.
    toggleState = toggled == 1;

    if (toggleState) {
        showAccessMap(courseId, displayFormat);
    }

    registerEventListeners(courseId, displayFormat);
};