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;
}

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