iVProg/js/accessibleUI/modules/operations/operations.js

// Imports
import {generateUUID, htmlOlCommandsOperations} from './../../main';
import {
    getOperationTypeByValue, getOperatorByHash,
    getOperatorTypeByValue,
    htmlAssignVariableScheme,
    htmlOperationKindScheme, htmlOperationTypeSelect, htmlOperatorValueInputScheme,
    htmlOperatorVariablesSelectScheme,
    operationScheme, operatorScheme, operatorTypes
} from "./operations-schemes";
import {getVariableByHash, variables} from "../variables/variables";
// Imports

export const operations = [];

// Creating operation
export function createOperation () {
    let operation = Object.assign({}, operationScheme);

    operation.hash = generateUUID().replaceAll('-', '');
    // TODO: Fix
    operation.assignedVariable = variables[0];
    operation.operators = [];

    operations.push(operation);

    let htmlOperation = htmlAssignVariableScheme();

    htmlOperation = htmlOperation.replaceAll('<operationId>', operation.hash);

    htmlOlCommandsOperations.insertAdjacentHTML('beforeend', htmlOperation);

    document.getElementById(`operation${operation.hash}AssignVariableSelect`).addEventListener('change', ev => {
        updateOperationAssignValue(ev.target.getAttribute('operation-id'), ev.target.value);
    });

    addOperatorKind(operation.hash);
}

// Add operator kind to the operation
export function addOperatorKind (hash) {
    let operation = getOperationByHash(hash);

    console.log(operation);

    let htmlOperationKind = htmlOperationKindScheme(operation);

    document.getElementById(`operation${operation.hash}OperatorsDiv`).insertAdjacentHTML('beforeend', htmlOperationKind);

    document.getElementById(`operation${operation.hash}KindSelect`).addEventListener('change', ev => {
        selectedOperationKind(ev.target.getAttribute('operation-id'));
    });
}

// Function to be trigger when the operator kind is selected
export function selectedOperationKind (operationHash) {
    let operation = getOperationByHash(operationHash);

    console.log(operation);

    let kindSelect = document.getElementById(`operation${operation.hash}KindSelect`);

    // TODO: think into an way to make this dynamic
    if (kindSelect.value === 'VARIABLE') {
        insertVariableAfterOperationKind(kindSelect, operation);
    } else if (kindSelect.value === 'VALUE') {
        insertValueAfterOperationKind(kindSelect, operation);
    }
}

// Insert variable after operator kind select
export function insertVariableAfterOperationKind (kindSelect, operation) {
    let operator = Object.assign({}, operatorScheme);

    operator.hash = generateUUID().replaceAll('-', '');
    // TODO: Fix ?
    operator.variable = variables[0];
    operator.type = getOperatorTypeByValue('VARIABLE');

    let operatorVariableSelect = htmlOperatorVariablesSelectScheme(operation, operator);

    operation.operators.push(operator);

    kindSelect.insertAdjacentHTML('afterend', operatorVariableSelect);
    kindSelect.remove();

    insertOperationTypeAtEndOfOperation(operation, operator);

    document.getElementById(`operation${operation.hash}Operator${operator.hash}VariableSelect`).addEventListener('change', ev => {
        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
    });
}

// Insert value after operator kind select
export function insertValueAfterOperationKind (kindSelect, operation) {
    let operator = Object.assign({}, operatorScheme);

    operator.hash = generateUUID().replaceAll('-', '');
    operator.type = getOperatorTypeByValue('VALUE');

    let operatorValueInput = htmlOperatorValueInputScheme(operation, operator);

    operation.operators.push(operator);

    kindSelect.insertAdjacentHTML('afterend', operatorValueInput);
    kindSelect.remove();

    insertOperationTypeAtEndOfOperation(operation, operator);

    document.getElementById(`operation${operation.hash}Operator${operator.hash}ValueInput`).addEventListener('change', ev => {
        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
    });
}

// Add final operation typt end of the operation
export function insertOperationTypeAtEndOfOperation (operation, afterOperator) {
    let operator = Object.assign({}, operatorScheme);

    operator.hash = generateUUID().replaceAll('-', '');
    operator.type = getOperatorTypeByValue('OPERATOR');
    operator.operator = getOperationTypeByValue('SEMICOLON');

    let operationTypeInput = htmlOperationTypeSelect(operation, operator);

    operationTypeInput.replaceAll('<operatorId>', operator.hash);
    operation.operators.push(operator);

    if (afterOperator.type.value === 'VARIABLE') {
        document.querySelector(`select[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
    } else if (afterOperator.type.value === 'VALUE') {
        document.querySelector(`input[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
    }


    document.getElementById(`operation${operation.hash}Operator${operator.hash}OperationTypeSelect`).addEventListener('change', ev => {
        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
    });
}

// ***********************************************************************
// Listeners
// ***********************************************************************

export function updateOperationAssignValue (operationHash, newVariable) {
    let operation = getOperationByHash(operationHash);
    let variable = getVariableByHash(newVariable);

    operation.assignedVariable = variable;
}

export function updateOperationOperator (operationHash, operatorHash, newValue) {
    let operation = getOperationByHash(operationHash);
    let operator = getOperatorByHash(operation, operatorHash);

    switch (operator.type.value) {
        case 'VARIABLE':
            let variable = getVariableByHash(newValue);
            operator.variable = variable;
            break;
        case 'VALUE':
            operator.value = newValue;
            break;
        case 'OPERATOR':
            operator.operator = getOperationTypeByValue(newValue);
            if (operator.operator.name !== ';')
                addOperatorKind(operation.hash);
            break;
    }
}

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

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

    return null;
}

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