iVProg/js/accessibleUI/modules/variables/variables.js

// Imports
import {htmlOlCommandsVariables, generateUUID} from './../../main';
import {
    getVariableTypeByValue,
    htmlVariableScheme,
    variableScheme,
    VariableType
} from "./variables-schemes";
import {deleteOperationByVariable} from "../operations/operations";
// Imports

export const variables = [];
let variablesIndex = 0;

// Creating variable
export function createVariable () {
    const variable = Object.assign({}, variableScheme);

    variable.hash = generateUUID().replaceAll('-', '');
    variable.name = 'var' + variablesIndex;
    variable.type = VariableType[0];
    variable.value = variable.type.defaultValue;

    variables.push(variable);

    variablesIndex++;

    let htmlVariable = htmlVariableScheme();

    htmlVariable = htmlVariable.replaceAll('<variableId>', variable.hash);
    htmlVariable = htmlVariable.replaceAll('<variableName>', variable.name);

    htmlOlCommandsVariables.insertAdjacentHTML('beforeend', htmlVariable);

    document.getElementById(`variable${variable.hash}Type`).addEventListener('change', ev => {
        const variableHash = ev.target.getAttribute('variable-id');

        updateVariable(variableHash);
    });

    document.getElementById(`variable${variable.hash}Name`).addEventListener('change', ev => {
        const variableHash = ev.target.getAttribute('variable-id');

        updateVariable(variableHash);
    });

    document.getElementById(`variable${variable.hash}Value`).addEventListener('change', ev => {
        const variableHash = ev.target.getAttribute('variable-id');

        updateVariable(variableHash);
    });

    document.getElementById(`variable${variable.hash}Delete`).addEventListener('click', ev => {
        const variableHash = ev.target.getAttribute('variable-id');

        deleteVariable(variableHash);
    });

    updateResume(variable.hash);
    updateAllVariableSelect();

    // Changing focus to the variable type after creation for screen readers
    document.getElementById(`variable${variable.hash}Type`).focus();
}

// *********************************************************************************
// Updating variable
// *********************************************************************************

let variableName;
let variableType;
let variableValue;

function updateVariable (hash) {
    const variable = getVariableByHash(hash);

    variableName = document.getElementById(`variable${hash}Name`).value;
    if (variable.name !== variableName) {
        variable.name = variableName;
    }

    variableType = getVariableTypeByValue(document.getElementById(`variable${hash}Type`).value);
    if (variable.type !== variableType) {
        variable.type = variableType;

        document.getElementById(`variable${hash}Value`).type = variable.type.htmlType;
        document.getElementById(`variable${hash}Value`).value = variable.type.defaultValue;
    }

    variableValue = document.getElementById(`variable${hash}Value`).value;
    if (variable.value !== variableValue) {
        variable.value = variableValue;
    }

    updateResume(hash);
}

// *********************************************************************************

// Deleting variable
export function deleteVariable (hash) {
    const variable = getVariableByHash(hash);

    document.getElementById(`variable${hash}Li`).remove();

    deleteOperationByVariable(variable);
    variables.splice(variables.indexOf(variable), 1);

    updateAllVariableSelect();
}

// Deleting all variable
export function deleteAllVariable () {
    for (let i = 0; i < variables.length; i++) {
        document.getElementById(`variable${variables[i].hash}Li`).remove();
    }

    variables.length = 0
}

// ***********************************************************************
// Updating variable resume
// ***********************************************************************

function updateResume (hash) {
    document.getElementById(`variable${hash}Resume`).setAttribute('title', generateResume(hash));
}

function generateResume (hash) {
    const variable = getVariableByHash(hash);

    return `${variable.type.name} ${variable.name} recebe ${variable.value}`;
}

// ***********************************************************************
// Update all variable select
// **********************************************************************

function updateAllVariableSelect () {
    const variableSelects = document.getElementsByName('variableSelect');

    let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;

    for (let i = 0; i < variables.length; i++) {
        variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`
    }

    for (let i = 0; i < variableSelects.length; i++) {
        const selectedOption = variableSelects[i].value;
        variableSelects[i].innerHTML = variablesSelect;
        variableSelects[i].value = selectedOption;
    }
}

// *********************************************************************************
// Util
// *********************************************************************************

export function getVariableByHash (hash) {
    for (let i = 0; i < variables.length; i++) {
        if (variables[i].hash === hash)
            return variables[i];
    }

    return null;
}

// *********************************************************************************