feat: added the print operation to acessible UI

js/accessibleUI/compiler.js

@@ -37,29 +37,32 @@ function generateCode () {
     code += `    funcao vazio inicio () {\n`;
 
     for (let i = 0; i < operations.length; i++) {
-        code += `        ${operations[i].assignedVariable.name} <- `;
-
-        for (let j = 0; j < operations[i].operators.length; j++) {
-            switch (operations[i].operators[j].type.value) {
-                case 'VARIABLE':
-                    code += operations[i].operators[j].variable.name;
-                    break;
-                case 'VALUE':
-                    code += operations[i].operators[j].value;
-                    break;
-                case 'OPERATOR':
-                    code += operations[i].operators[j].operator.name;
-                    break;
-            }
+        switch (operations[i].type) {
+            case 'ASSIGN':
+                code += `        ${operations[i].assignedVariable.name} <- `;
+
+                for (let j = 0; j < operations[i].operators.length; j++) {
+                    switch (operations[i].operators[j].type.value) {
+                        case 'VARIABLE':
+                            code += operations[i].operators[j].variable.name;
+                            break;
+                        case 'VALUE':
+                            code += operations[i].operators[j].value;
+                            break;
+                        case 'OPERATOR':
+                            code += operations[i].operators[j].operator.name;
+                            break;
+                    }
+                }
+                break;
+            case 'PRINT':
+                code += `        escreva ("${operations[i].assignedVariable.name}: " + ${operations[i].assignedVariable.name} + "\\n")`;
+                break;
         }
 
         code += `\n`;
     }
 
-    for (let i = 0; i < variables.length; i++) {
-        code += `        escreva ("${variables[i].name}: " + ${variables[i].name} + "\\n")\n`;
-    }
-
     code += `    }\n`;
 
     code += `}`;

js/accessibleUI/main.js

@@ -1,6 +1,6 @@
 // Imports
 import {createVariable, deleteAllVariable} from './modules/variables/variables';
-import {createOperation, deleteAllOperation} from './modules/operations/operations';
+import {createOperation, createPrintOperation, deleteAllOperation} from './modules/operations/operations';
 import {runCode} from "./compiler";
 // Imports
 
@@ -16,8 +16,10 @@ export const terminal = document.getElementById('terminal');
 // Accessible UI buttons references
 const createVariableButton = document.getElementById('createVariableButton');
 const assignVariableButton = document.getElementById('assignVariableButton');
+const printButton = document.getElementById('printButton');
 const runCodeButton = document.getElementById('runCodeButton');
 const cleanCommands = document.getElementById('cleanCommands');
+const ivprogConsoleClearbtn = document.getElementById('ivprog-console-clearbtn');
 
 export function initAccessibleUI () {
 
@@ -41,7 +43,12 @@ export function initAccessibleUI () {
         createOperation();
     });
 
+    printButton.addEventListener('click', ev => {
+        createPrintOperation();
+    });
+
     runCodeButton.addEventListener('click', ev => {
+        ivprogConsoleClearbtn.click();
         runCode();
     });
 

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

@@ -11,6 +11,7 @@ import {operations} from "./operations";
 export const operationScheme = {
     hash: 'UUID for the operation',
     assignedVariable: 'Reference to the assigned variable',
+    type: 'ASSIGN',
     operators: []
 }
 
@@ -247,6 +248,45 @@ export function htmlOperationTypeSelect (operation, operator) {
             </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-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
 // *********************************************************************************

js/accessibleUI/modules/operations/operations.js

@@ -6,7 +6,7 @@ import {
     htmlAssignVariableScheme,
     htmlOperationKindScheme, htmlOperationTypeSelect, htmlOperatorValueInputScheme,
     htmlOperatorVariablesSelectScheme,
-    operationScheme, Operators, operatorScheme
+    operationScheme, Operators, operatorScheme, printOperationScheme
 } from "./operations-schemes";
 import {getVariableByHash, variables} from "../variables/variables";
 // Imports
@@ -278,26 +278,73 @@ function updateResume (hash) {
 function generateResume (hash) {
     const operation = getOperationByHash(hash);
 
-    let resume = `${operation.assignedVariable.name} recebe `;
-
-    for (const i in operation.operators) {
-        console.log(operation.operators[i]);
-        switch (operation.operators[i].type.value) {
-            case Operators.OPERATOR:
-                resume += `${operation.operators[i].operator.friendlyName} `;
-                break;
-            case Operators.VALUE:
-                resume += `${operation.operators[i].value} `;
-                break;
-            case Operators.VARIABLE:
-                resume += `${operation.operators[i].variable.name} `;
-                break;
-        }
+    let resume;
+    switch (operation.type) {
+        case 'ASSIGN':
+            resume = `${operation.assignedVariable.name} recebe `;
+
+            for (const i in operation.operators) {
+                console.log(operation.operators[i]);
+                switch (operation.operators[i].type.value) {
+                    case Operators.OPERATOR:
+                        resume += `${operation.operators[i].operator.friendlyName} `;
+                        break;
+                    case Operators.VALUE:
+                        resume += `${operation.operators[i].value} `;
+                        break;
+                    case Operators.VARIABLE:
+                        resume += `${operation.operators[i].variable.name} `;
+                        break;
+                }
+            }
+            break;
+        case 'PRINT':
+            resume = `Escreva ${operation.assignedVariable.name}`
     }
 
     return resume;
 }
 
+// ***********************************************************************
+// Print
+// ***********************************************************************
+
+export function createPrintOperation () {
+    const operation = Object.assign({}, operationScheme);
+    operation.hash = generateUUID().replaceAll('-', '');
+    operation.assignedVariable = variables.length > 0 ? variables[0] : null;
+    operation.type = 'PRINT';
+
+    operations.push(operation);
+
+    const printOperation = printOperationScheme(operation);
+    htmlOlCommandsOperations.insertAdjacentHTML('beforeend', printOperation);
+
+    updateResume(operation.hash);
+
+    // Changing focus to the variable type after creation for screen readers
+    document.getElementById(`operation${operation.hash}VariableSelectLabel`).focus();
+
+    document.getElementById(`operation${operation.hash}VariableSelect`).addEventListener('change', ev => {
+        updatePrintOperation(ev.target.getAttribute('operation-id'), ev.target.value);
+    });
+
+    document.getElementById(`operation${operation.hash}Delete`).addEventListener('click', ev => {
+        deleteOperation(ev.target.getAttribute('operation-id'));
+    });
+}
+
+// TODO: 
+// terminal => basico
+function updatePrintOperation (hash, newValue) {
+    const operation = getOperationByHash(hash);
+    const  variable = getVariableByHash(newValue);
+
+    operation.assignedVariable = variable;
+    updateResume(operation.hash);
+}
+
+
 // ***********************************************************************
 // Util
 // ***********************************************************************

templates/index.html

@@ -189,6 +189,9 @@
                                     <a class="dropdown-item" href="#" id="assignVariableButton">
                                         Atribuição e Operações
                                     </a>
+                                    <a class="dropdown-item" href="#" id="printButton">
+                                        Escreva
+                                    </a>
                                 </div>
                             </div>
                             <button class="btn btn-success" id="runCodeButton" type="button">