iVProg/js/accessibleUI/modules/operations/operations-schemes.js

// Imports
import {variables} from "../variables/variables";
import {eltP} from "codemirror/src/util/dom";
import {operations} from "./operations";
// Imports

// *********************************************************************************
// Scheme for the operations list
// *********************************************************************************

export const operationScheme = {
    hash: 'UUID for the operation',
    assignedVariable: 'Reference to the assigned variable',
    type: 'ASSIGN',
    operators: [],
    editing: true
}

// *********************************************************************************
// Scheme for the operators
// *********************************************************************************

export const operatorScheme = {
    hash: 'UUID for the operator',
    type: 'Operator type',
    value: 'Operator value',
    variable: 'Reference to the variable',
    operator: 'Reference to operator'
}

// *********************************************************************************
// Operator types
// *********************************************************************************

export const Operators = {
    VARIABLE: 'VARIABLE',
    VALUE: 'VALUE',
    OPERATOR: 'OPERATOR'
}

export const OperatorType = [
    {
        name: 'Variável',
        value: Operators.VARIABLE
    },
    {
        name: 'Valor',
        value: Operators.VALUE
    },
    {
        name: 'Operator',
        value: Operators.OPERATOR
    }
]

// *********************************************************************************
// Operation types
// *********************************************************************************

export const OperationType = [
    {
        name: ';',
        friendlyName: 'Fim',
        value: 'SEMICOLON'
    },
    {
        name: '+',
        friendlyName: 'Soma',
        value: 'PLUS'
    },
    {
        name: '-',
        friendlyName: 'Subtração',
        value: 'MINUS'
    },
    {
        name: '*',
        friendlyName: 'Multiplicação',
        value: 'MULTIPLICATION'
    },
    {
        name: '/',
        friendlyName: 'Divisão',
        value: 'DIVISION'
    },
    {
        name: '(',
        friendlyName: 'Abre parenteses',
        value: 'OPEN_PARENTHESES'
    },
    {
        name: ')',
        friendlyName: 'Fecha parenteses',
        value: 'CLOSE_PARENTHESES'
    },
]

// *********************************************************************************
// Operator kinds
// *********************************************************************************

export const OperatorKind = [
    {
        name: 'Variável',
        value: 'VARIABLE'
    },
    {
        name: 'Valor',
        value: 'VALUE'
    }
]

// *********************************************************************************
// Operation type html schemes
// *********************************************************************************

export function htmlOperationTypeScheme () {
    let operationTypesSelect = ``;

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

    return `<div class="col-2">
                <select id="operation<operationKindId>Select" class="form-control" title="selecione o tipo da operação" >
                    <option > selecione</option>
                    ${operationTypesSelect}
                </select>
                <span tabindex="0"></span>
            </div>`;
}

// *********************************************************************************
// Assign variable operation kind html schemes
// *********************************************************************************

export function htmlOperationKindScheme (operation) {
    let operatorKindsSelect = ``;

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

    return `<div class="col-3">
                <select id="operation${operation.hash}KindSelect" class="form-control" title="Selecione o tipo de atribuição" operation-id="${operation.hash}">
                    <option >Selecione</option>
                    ${operatorKindsSelect}
                </select>
            </div>`;
}

// *********************************************************************************
// Assign variable html schemes
// *********************************************************************************

export function htmlAssignVariableScheme () {

    const variablesSelect = htmlVariablesSelectScheme();

    return `<li id="operation<operationId>Li">
                <form id="operation<operationId>Form">
                    <div class="row p-2 w-100 variable-item" style="background-color: aliceblue;">
                        <div class="col-2 my-auto">
                            <select title="Selecione a variável" id="operation<operationId>AssignVariableSelect" class="form-control" name="variableSelect" operation-id="<operationId>"> 
                                ${variablesSelect}
                            </select>
                        </div> 
                        <div class="col-1 my-auto">
                            <label for="operation<operationId>AssignVariableSelect" style="margin-bottom: 0px !important" tabindex="0" title="Recebe">recebe</label>
                        </div>
                        <div class="col">
                            <div class="row" id="operation<operationId>OperatorsDiv"></div>
                        </div>
                        <div class="col-11 my-auto" style="display: none;" id="operation<operationId>Display" tabindex="0" operation-id="<operationId>" title="Precione 'Enter' para editar">
                            <code id="operation<operationId>DisplayCode">
                            </code>                  
                        </div>
                        <div class="col-1 my-auto" style="text-align: end;">
                            <div class="row justify-content-end">
                                <div class="col-1" style="margin-right: 4px;">
                                    <a id="operation<operationId>Resume" href="javascript:void(0)" class="text-info" operation-id="<operationId>">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                                <div class="col-1">
                                    <a id="operation<operationId>Delete" href="javascript:void(0)" class="text-danger" operation-id="<operationId>" title="Excluir">X</a>
                                </div>
                            </div>
                        </div>     
                    </div>
                </form>
            </li>`;
}

// *********************************************************************************
// Variable select html schemes
// *********************************************************************************

export function htmlVariablesSelectScheme () {
    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>`
    }

    return variablesSelect;
}

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

// *********************************************************************************
// Operator variable select
// *********************************************************************************

export function htmlOperatorVariablesSelectScheme (operation, operator) {
    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>`
    }

    return `<div class="col-2">
                <select id="operation${operation.hash}Operator${operator.hash}VariableSelect" class="form-control" name="variableSelect" title="Selecione a variável" operation-id="${operation.hash}" operator-id="${operator.hash}">
                    ${variablesSelect}
                </select>
            </div>`;
}

// *********************************************************************************
// Operator value input
// *********************************************************************************

export function htmlOperatorValueInputScheme (operation, operator) {
    return `<div class="col-2">
                <input type="number" id="operation${operation.hash}Operator${operator.hash}ValueInput" class="form-control" name="" title="Insira um valor" operation-id="${operation.hash}" operator-id="${operator.hash}">
            </div>`;
}

// *********************************************************************************
// Operation type select
// *********************************************************************************

export function htmlOperationTypeSelect (operation, operator) {
    let operationTypesSelect = ``;

    for (let i = 0; i < OperationType.length; i++) {
        operationTypesSelect += `<option value="${OperationType[i].value}" title="${OperationType[i].friendlyName}">${OperationType[i].name}</option>`;
    }

    return `<div class="col-2">
                <select id="operation${operation.hash}Operator${operator.hash}OperationTypeSelect" class="form-control" title="selecione o tipo da operação" operation-id="${operation.hash}" operator-id="${operator.hash}">
                    ${operationTypesSelect}
                </select>
            </div>`;
}

// *********************************************************************************
// Print operation
// *********************************************************************************

export function printOperationScheme (operation) {
    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>`
    }

    return `<li id="operation${operation.hash}Li">
                <form id="operation${operation.hash}Form">
                    <div class="row p-2 w-100 variable-item" style="background-color: aliceblue;">
                        <div class="col-1 my-auto">
                            <label id="operation${operation.hash}VariableSelectLabel" for="operation${operation.hash}VariableSelect" style="margin-bottom: 0px !important" tabindex="0" title="Escreva">Escreva</label>
                        </div>
                        <div class="col-10">
                            <select id="operation${operation.hash}VariableSelect" class="form-control" name="variableSelect" title="Selecione a variável" operation-id="${operation.hash}">
                                ${variablesSelect}
                            </select>
                        </div>
                        <div class="col-11 my-auto" style="display: none;" id="operation${operation.hash}Display" tabindex="0" operation-id="${operation.hash}" title="Precione 'Enter' para editar">
                            <code id="operation${operation.hash}DisplayCode">
                            </code>                  
                        </div>
                        <div class="col-1 my-auto" style="text-align: end;">
                            <div class="row justify-content-end">
                                <div class="col-1" style="margin-right: 4px;">
                                    <a id="operation${operation.hash}Resume" href="javascript:void(0)" class="text-info" operation-id="${operation.hash}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                                <div class="col-1">
                                    <a id="operation${operation.hash}Delete" href="javascript:void(0)" class="text-danger" operation-id="${operation.hash}" title="Excluir">X</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </li>`;
}

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

export function getOperatorTypeByValue (value) {
    for (let i = 0; i < OperatorType.length; i++) {
        if (OperatorType[i].value === value)
            return OperatorType[i];
    }

    return null;
}

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

export function getOperationTypeByValue (value) {
    for (let i = 0; i < OperationType.length; i++) {
        if (OperationType[i].value === value)
            return OperationType[i];
    }

    return null;
}

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

export function getOperatorByHash (operation, operatorHash) {
    for (let i = 0; i < operation.operators.length; i++) {
        if (operation.operators[i].hash === operatorHash)
            return operation.operators[i];
    }

    return null;
}

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