feat: now is possible to delete operations and if a variable is delete the operation where it was used is deleted as well

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

@@ -30,18 +30,24 @@ export const operatorScheme = {
 // Operator types
 // *********************************************************************************
 
+export const Operators = {
+    VARIABLE: 'VARIABLE',
+    VALUE: 'VALUE',
+    OPERATOR: 'OPERATOR'
+}
+
 export const operatorTypes = [
     {
         name: 'Variável',
-        value: 'VARIABLE'
+        value: Operators.VARIABLE
     },
     {
         name: 'Valor',
-        value: 'VALUE'
+        value: Operators.VALUE
     },
     {
         name: 'Operator',
-        value: 'OPERATOR'
+        value: Operators.OPERATOR
     }
 ]
 
@@ -106,10 +112,12 @@ export function htmlOperationTypeScheme () {
         operationTypesSelect += `<option value="${operationTypes[i].value}">${operationTypes[i].name}</option>`;
     }
 
-    return `<select  id="operation<operationKindId>Select" title="selecione o tipo da operação" >
-    <option > selecione</option>
-    ${operationTypesSelect}
-</select>`;
+    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>
+            </div>`;
 }
 
 // *********************************************************************************
@@ -123,10 +131,12 @@ export function htmlOperationKindScheme (operation) {
         operatorKindsSelect += `<option value="${operatorKinds[i].value}">${operatorKinds[i].name}</option>`;
     }
 
-    return `<select  id="operation${operation.hash}KindSelect" title="selecione o tipo de atrabuição" operation-id="${operation.hash}">
-    <option > selecione</option>
-    ${operatorKindsSelect}
-</select>`;
+    return `<div class="col-3">
+                <select id="operation${operation.hash}KindSelect" class="form-control" title="Selecione o tipo de atrabuição" operation-id="${operation.hash}">
+                    <option >Selecione</option>
+                    ${operatorKindsSelect}
+                </select>
+            </div>`;
 }
 
 // *********************************************************************************
@@ -135,20 +145,28 @@ export function htmlOperationKindScheme (operation) {
 
 export function htmlAssignVariableScheme () {
 
-    let variablesSelect = htmlVariablesSelectScheme();
+    const variablesSelect = htmlVariablesSelectScheme();
 
     return `<li id="operation<operationId>Li">
-    <div class="row">
-        <form id="operation<operationId>Form">
-            <select title="selecione a variável" id="operation<operationId>AssignVariableSelect" name="variableSelect" operation-id="<operationId>"> 
-                ${variablesSelect}
-            </select> 
-            <label id="recebe">recebe </label> 
-            <operators id="operation<operationId>OperatorsDiv"></operators>
-            <button id="operation<operationId>Delete" type="button" class="btn btn-danger" >Excluir</button>
-        </form>
-    </div>
-</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" style="margin-bottom: 0px !important">
+                            <label id="recebe">recebe</label>
+                        </div>
+                        <div class="col">
+                            <div class="row" id="operation<operationId>OperatorsDiv"></div>
+                        </div>
+                        <div class="col-1 my-auto" style="text-align: end;">
+                            <a id="operation<operationId>Delete" href="javascript:void(0)" class="text-danger" operation-id="<operationId>">X</a>
+                        </div>     
+                    </div>
+                </form>
+            </li>`;
 }
 
 // *********************************************************************************
@@ -178,9 +196,11 @@ export function htmlOperatorVariablesSelectScheme (operation, operator) {
         variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`
     }
 
-    return `<select id="operation${operation.hash}Operator${operator.hash}VariableSelect" name="variableSelect" title="selecione a variável" operation-id="${operation.hash}" operator-id="${operator.hash}">
-    ${variablesSelect}
-</select>`;
+    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>`;
 }
 
 // *********************************************************************************
@@ -188,7 +208,9 @@ export function htmlOperatorVariablesSelectScheme (operation, operator) {
 // *********************************************************************************
 
 export function htmlOperatorValueInputScheme (operation, operator) {
-    return `<input type="number" id="operation${operation.hash}Operator${operator.hash}ValueInput" name="" title="valor" operation-id="${operation.hash}" operator-id="${operator.hash}">`;
+    return `<div class="col-2">
+                <input type="number" id="operation${operation.hash}Operator${operator.hash}ValueInput" class="form-control" name="" title="valor" operation-id="${operation.hash}" operator-id="${operator.hash}">
+            </div>`;
 }
 
 // *********************************************************************************
@@ -202,9 +224,11 @@ export function htmlOperationTypeSelect (operation, operator) {
         operationTypesSelect += `<option value="${operationTypes[i].value}">${operationTypes[i].name}</option>`;
     }
 
-    return `<select  id="operation${operation.hash}Operator${operator.hash}OperationTypeSelect" title="selecione o tipo da operação" operation-id="${operation.hash}" operator-id="${operator.hash}">
-    ${operationTypesSelect}
-</select>`;
+    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>`;
 }
 
 // *********************************************************************************

js/accessibleUI/modules/operations/operations.js

@@ -6,7 +6,7 @@ import {
     htmlAssignVariableScheme,
     htmlOperationKindScheme, htmlOperationTypeSelect, htmlOperatorValueInputScheme,
     htmlOperatorVariablesSelectScheme,
-    operationScheme, operatorScheme, operatorTypes
+    operationScheme, Operators, operatorScheme, operatorTypes
 } from "./operations-schemes";
 import {getVariableByHash, variables} from "../variables/variables";
 // Imports
@@ -34,6 +34,10 @@ export function createOperation () {
         updateOperationAssignValue(ev.target.getAttribute('operation-id'), ev.target.value);
     });
 
+    document.getElementById(`operation${operation.hash}Delete`).addEventListener('click', ev => {
+        deleteOperation(ev.target.getAttribute('operation-id'));
+    });
+
     addOperatorKind(operation.hash);
 }
 
@@ -81,8 +85,8 @@ export function insertVariableAfterOperationKind (kindSelect, operation) {
 
     operation.operators.push(operator);
 
-    kindSelect.insertAdjacentHTML('afterend', operatorVariableSelect);
-    kindSelect.remove();
+    kindSelect.parentElement.parentElement.insertAdjacentHTML('beforeend', operatorVariableSelect);
+    kindSelect.parentElement.remove();
 
     insertOperationTypeAtEndOfOperation(operation, operator);
 
@@ -102,8 +106,8 @@ export function insertValueAfterOperationKind (kindSelect, operation) {
 
     operation.operators.push(operator);
 
-    kindSelect.insertAdjacentHTML('afterend', operatorValueInput);
-    kindSelect.remove();
+    kindSelect.parentElement.parentElement.insertAdjacentHTML('beforeend', operatorValueInput);
+    kindSelect.parentElement.remove();
 
     insertOperationTypeAtEndOfOperation(operation, operator);
 
@@ -126,9 +130,9 @@ export function insertOperationTypeAtEndOfOperation (operation, afterOperator) {
     operation.operators.push(operator);
 
     if (afterOperator.type.value === 'VARIABLE') {
-        document.querySelector(`select[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
+        document.querySelector(`select[operator-id='${afterOperator.hash}']`).parentElement.insertAdjacentHTML('afterend', operationTypeInput);
     } else if (afterOperator.type.value === 'VALUE') {
-        document.querySelector(`input[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
+        document.querySelector(`input[operator-id='${afterOperator.hash}']`).parentElement.insertAdjacentHTML('afterend', operationTypeInput);
     }
 
 
@@ -162,12 +166,57 @@ export function updateOperationOperator (operationHash, operatorHash, newValue)
             break;
         case 'OPERATOR':
             operator.operator = getOperationTypeByValue(newValue);
-            if (operator.operator.name !== ';')
+            if (operator.operator.name !== ';' && (operation.operators.indexOf(operator) === (operation.operators.length - 1)))
                 addOperatorKind(operation.hash);
             break;
     }
 }
 
+// Here we remove all operation that include the variable received as parameter
+export function deleteOperationByVariable (variable) {
+    const operationsToRemove = [];
+
+    for (const i in operations) {
+
+        console.log(operations[i]);
+
+        if (operations[i].assignedVariable.hash === variable.hash) {
+            document.getElementById(`operation${operations[i].hash}Li`).remove();
+            operationsToRemove.push(operations[i]);
+            continue;
+        }
+
+        for (const j in operations[i].operators) {
+            console.log(j);
+            console.log(operations[i].operators[j]);
+            if (operations[i].operators[j].type.value === Operators.VARIABLE) {
+                if (operations[i].operators[j].variable.hash === variable.hash) {
+                    document.getElementById(`operation${operations[i].hash}Li`).remove();
+                    operationsToRemove.push(operations[i]);
+                    // if (operation.operators.length > 2) {
+                    //
+                    // } else {
+                    //
+                    // }
+                }
+            }
+        }
+    }
+
+    for (const i in operationsToRemove) {
+        operations.splice(operations.indexOf(operationsToRemove[i]), 1);
+    }
+}
+
+// Here we remove all operation that include the variable received as parameter
+export function deleteOperation (hash) {
+    const operation = getOperationByHash(hash);
+
+    document.getElementById(`operation${hash}Li`).remove();
+
+    operations.splice(operations.indexOf(operation), 1);
+}
+
 // ***********************************************************************
 // Util
 // ***********************************************************************

js/accessibleUI/modules/variables/variables-schemes.js

@@ -88,7 +88,7 @@ export function htmlVariableScheme () {
                         <!-- <div class="col-1 text-center my-auto">
                            <h5>${variables.length}</h5>
                         </div> -->
-                        <div class="col-3">
+                        <div class="col-2">
                             <select name="tipo" class="form-control" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
                                 ${variableTypesHtml}
                             </select>
@@ -102,8 +102,8 @@ export function htmlVariableScheme () {
                         <div class="col-2">
                             <input type="${variableTypes[0].htmlType}" class="form-control" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
                         </div>
-                        <div class="col-1 text-center my-auto">
-                            <a id="variable<variableId>Delete" href="javascript:void(0)" class="text-danger">X</a>
+                        <div class="col my-auto" style="text-align: end;">
+                            <a id="variable<variableId>Delete" href="javascript:void(0)" class="text-danger" variable-id="<variableId>">X</a>
                         </div>
                     </div>
                 </form> 

js/accessibleUI/modules/variables/variables.js

@@ -1,6 +1,7 @@
 // Imports
 import {htmlOlCommandsVariables, generateUUID} from './../../main';
 import {getVariableTypeByValue, htmlVariableScheme, variableScheme, variableTypes} from "./variables-schemes";
+import {deleteOperationByVariable} from "../operations/operations";
 // Imports
 
 export const variables = [];
@@ -27,22 +28,28 @@ export function createVariable () {
     htmlOlCommandsVariables.insertAdjacentHTML('beforeend', htmlVariable);
 
     document.getElementById(`variable${variable.hash}Type`).addEventListener('change', ev => {
-        let variableHash = ev.target.getAttribute('variable-id');
+        const variableHash = ev.target.getAttribute('variable-id');
 
         updateVariable(variableHash);
     });
 
     document.getElementById(`variable${variable.hash}Name`).addEventListener('change', ev => {
-        let variableHash = ev.target.getAttribute('variable-id');
+        const variableHash = ev.target.getAttribute('variable-id');
 
         updateVariable(variableHash);
     });
 
     document.getElementById(`variable${variable.hash}Value`).addEventListener('change', ev => {
-        let variableHash = ev.target.getAttribute('variable-id');
+        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);
+    });
 }
 
 // *********************************************************************************
@@ -54,7 +61,7 @@ let variableType;
 let variableValue;
 
 function updateVariable (hash) {
-    let variable = getVariableByHash(hash);
+    const variable = getVariableByHash(hash);
 
     variableName = document.getElementById(`variable${hash}Name`).value;
     if (variable.name !== variableName) {
@@ -79,10 +86,11 @@ function updateVariable (hash) {
 
 // Deleting variable
 export function deleteVariable (hash) {
-    let variable = getVariableByHash(hash);
+    const variable = getVariableByHash(hash);
 
     document.getElementById(`variable${hash}Li`).remove();
 
+    deleteOperationByVariable(variable);
     variables.splice(variables.indexOf(variable), 1);
 }