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

// Imports
import {htmlOlCommandsVariables, generateUUID} from './../../main';
import {getVariableTypeByValue, htmlVariableScheme, variableScheme, variableTypes} from "./variables-schemes";
// 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 = variableTypes[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 => {
    let variableHash = ev.target.getAttribute('variable-id');

    updateVariable(variableHash);
  });

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

    updateVariable(variableHash);
  });

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

    updateVariable(variableHash);
  });
}

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

let variableName;
let variableType;
let variableValue;

function updateVariable(hash) {
  let 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;
  }
}

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

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

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

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

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

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

  return null;
}

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