Trabalhando expressões condicionais

css/ivprog-visual-1.0.css

@@ -130,7 +130,7 @@ body {
 
 .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
 .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
-.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element {
+.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression {
 	display: inline;
 }
 

i18n/en/ui.json

@@ -32,6 +32,10 @@
   "text_command_write":"write",
   "text_comment": "Comment",
   "text_attribution": "Attribution",
+  "text_if":"if",
+  "text_else":"else",
+  "text_logic_expression": "Logic Expression",
+  "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",
   "text_receives": "receives",
   "text_repeatNtimes": "Repeat N times",

i18n/es/ui.json

@@ -32,6 +32,10 @@
   "text_command_write":"write",
   "text_comment": "Comment",
   "text_attribution": "Attribution",
+  "text_if":"if",
+  "text_else":"else",
+  "text_logic_expression": "Logic Expression",
+  "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",
   "text_repeatNtimes": "Repeat N times",
   "text_receives": "receives",

i18n/pt/ui.json

@@ -33,6 +33,10 @@
   "text_comment": "Comentário",
   "join_or": "ou",
   "text_attribution": "Atribuição",
+  "text_if":"se",
+  "text_else":"senão",
+  "text_logic_expression": "Expressão Lógica",
+  "text_arithmetic_expression": "Expressão Aritmética",
   "text_iftrue": "Se verdadeiro então",
   "text_repeatNtimes": "Repita N vezes",
   "text_receives": "recebe",

js/visualUI/commands.js

@@ -175,16 +175,16 @@ export function genericCreateCommand (command_type) {
 			return new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false), null);
 
 		case Models.COMMAND_TYPES.iftrue:
-			return new Models.IfTrue(null, null, null);
+			return new Models.IfTrue(new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.repeatNtimes:
-			return new Models.RepeatNTimes(null, null, null, null);
+			return new Models.RepeatNTimes(null, new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.whiletrue:
-			return new Models.WhileTrue(null, null);
+			return new Models.WhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.dowhiletrue:
-			return new Models.DoWhileTrue(null, null);
+			return new Models.DoWhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.switch:
 			return new Models.Switch(null, null, null);

js/visualUI/commands/conditional_expression.js

@@ -0,0 +1,149 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenuManagement from './variable_value_menu';
+
+
+export function renderExpression (command, expression, function_obj, initial_el_to_render) {
+
+	console.log("Rendered! :)");
+
+
+	if (expression.expression == null || expression.expression.length < 1) {
+
+		renderStartMenu(command, expression, function_obj, initial_el_to_render);
+
+	} else {
+		
+		var main_div = $('<div class="expression_elements"></div>');
+
+		switch (expression.expression.type) {
+			case Models.EXPRESSION_TYPES.exp_logic:
+				renderLogicExpression(command, expression, expression.expression, function_obj, main_div);
+				break;
+			case Models.EXPRESSION_TYPES.exp_arithmetic:
+				renderArithmeticExpression(command, expression, expression.expression, function_obj, main_div);
+				break;
+		}
+
+		initial_el_to_render.append(main_div);	
+	}
+}
+
+function renderArithmeticOperator () {
+
+}
+
+function renderLogicOperator (command, all_expression, expression_logic, logic_operator, function_obj, element_to_append) {
+
+//export const ARITHMETIC_COMPARISON = Object.freeze({greater_than:"greater_than", less_than:"less_than", equals_to:"equals_to", not_equals_to:"not_equals_to", greater_than_or_equals_to:"greater_than_or_equals_to", less_than_or_equals_to:"less_than_or_equals_to"});
+
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '==',
+	        value    : Models.LOGIC_COMPARISON.equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.LOGIC_COMPARISON.not_equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '&&',
+	        value    : Models.LOGIC_COMPARISON.and,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.and)
+	      },
+	      {
+	        name     : '||',
+	        value    : Models.LOGIC_COMPARISON.or,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.or)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	expression_logic.operator = value;
+	    }
+	  })
+	;
+
+	element_to_append.append(menu_operator);
+
+}
+
+function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append) {
+
+	var exp_el_par_1 = $('<div class="expression_element"> ( </div>');
+	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
+	var exp_el_expr_operand = $('<div class="expression_element"></div>');
+	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
+	var exp_el_par_2 = $('<div class="expression_element"> ) </div>');
+
+	if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else { // var_value:
+		VariableValueMenuManagement.renderMenu(command, expression_logic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+	} else if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+	} else { // var_value: 
+		VariableValueMenuManagement.renderMenu(command, expression_logic.second_operand, exp_el_expr_el_2, function_obj);
+	}
+
+	renderLogicOperator(command, all_expression, expression_logic, expression_logic.operator, function_obj, exp_el_expr_operand);
+
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+	element_to_append.append(exp_el_expr_operand);
+	element_to_append.append(exp_el_expr_el_2);
+	element_to_append.append(exp_el_par_2);
+
+}
+
+function renderArithmeticExpression (command, all_expression, expression_arithmetic, function_obj, element_to_append) {}
+
+function renderStartMenu (command, expression, function_obj, initial_el_to_render) {
+	var start_menu = '';
+	start_menu += '<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_logic+'">'+LocalizedStrings.getUI('text_logic_expression')+'</div>';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_arithmetic+'">'+LocalizedStrings.getUI('text_arithmetic_expression')+'</div>';
+	start_menu += '</div></div>';
+	start_menu = $(start_menu);
+
+	start_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+			switch ($selectedItem.data('exp')) {
+				case Models.EXPRESSION_TYPES.exp_logic:
+					expression.expression = 
+						new Models.LogicExpression(false, 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							Models.LOGIC_COMPARISON.equals_to);
+					break;
+				case Models.EXPRESSION_TYPES.exp_arithmetic:
+					expression.expression = 
+						new Models.ArithmeticExpression(
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							Models.ARITHMETIC_COMPARISON.less_than);
+					break;
+			}
+
+			initial_el_to_render.html('');
+
+			renderExpression(command, expression, function_obj, initial_el_to_render);
+
+    	}
+	});
+
+	initial_el_to_render.append(start_menu);
+}

js/visualUI/commands/dowhiletrue.js

@@ -5,6 +5,7 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> faça {<br>} enquanto(x < 10) </span></div>');
@@ -15,7 +16,7 @@ export function renderCommand (command, function_obj) {
 	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> faça  { </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += '<span> } enquanto (x < 10); </span>';
+	ret += '<span> } enquanto (</span> <div class="conditional_expression"></div> <span> ); </span>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -23,6 +24,8 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
 	return el;
 }
 

js/visualUI/commands/iftrue.js

@@ -5,6 +5,7 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
@@ -12,7 +13,10 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> if (x < 1) { </span>';
+	ret += '<div class="ui iftrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <i class="ui icon redo alternate blue button_refresh_attribution"></i>';
+	ret += ' <span> ' + LocalizedStrings.getUI('text_if') + '</span>';
+	ret += ' <div class="conditional_expression"></div>';
+	ret += '<span> { </span> ';
 	ret += '<div class="ui block_commands" data-if="true">';
 
 	/*if ((writer_obj.commands_block == null)
@@ -24,7 +28,7 @@ export function renderCommand (command, function_obj) {
 	}*/
 
 	ret += '</div>';
-	ret += '<span> } else { </span>';
+	ret += '<span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
 
 	ret += '<div class="ui block_commands" data-else="true">';
 
@@ -46,6 +50,13 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
+	el.find('.button_refresh_attribution').on('click', function() {
+		el.find('.conditional_expression').text('');
+		ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));		
+	});
+
 	return el;
 }
 

js/visualUI/commands/repeatNtimes.js

@@ -5,13 +5,14 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui repeatNtimes created_element"> <i class="ui icon small sync"></i> <span> para (x = 0; x < 10; x ++) { } </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	var ret = '<div class="ui repeatNtimes command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> para (x = 0; x < 10; x ++) { </span>';
+	var ret = '<div class="ui repeatNtimes command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> para  ( </span> ??? ; <div class="conditional_expression"></div> ;  ??? ) { </span>';
 	ret += '<div class="ui block_commands">';
 
 	ret += '</div>';
@@ -23,6 +24,8 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ConditionalExpressionManagement.renderExpression(command, command.expression2, function_obj, el.find('.conditional_expression'));
+
 	return el;
 }
 

js/visualUI/commands/whiletrue.js

@@ -5,6 +5,7 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> enquanto(x < 10) { } </span></div>');
@@ -12,7 +13,9 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> enquanto (x < 10) { </span>';
+	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> enquanto ( </span>';
+	ret += ' <div class="conditional_expression"></div>';
+	ret += ' ) { </span>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> }</span>';
@@ -23,6 +26,8 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
 	return el;
 }
 
@@ -33,4 +38,4 @@ function addHandlers (command, function_obj, whiletrue_dom) {
 			whiletrue_dom.remove();
 		}
 	});
-}
+}

js/visualUI/ivprog_elements.js

@@ -8,6 +8,12 @@ export const ARITHMETIC_TYPES = Object.freeze({plus:"plus", minus:"minus", multi
 
 export const EXPRESSION_ELEMENTS = Object.freeze({exp_op_exp:"exp_op_exp", op_exp:"op_exp", par_exp_par:"par_exp_par", start_point:"start_point"});
 
+export const EXPRESSION_TYPES = Object.freeze({exp_conditional:"exp_conditional", exp_logic:"exp_logic", exp_arithmetic:"exp_arithmetic"});
+
+export const ARITHMETIC_COMPARISON = Object.freeze({greater_than:"greater_than", less_than:"less_than", equals_to:"equals_to", not_equals_to:"not_equals_to", greater_than_or_equals_to:"greater_than_or_equals_to", less_than_or_equals_to:"less_than_or_equals_to"});
+
+export const LOGIC_COMPARISON = Object.freeze({equals_to:"equals_to", not_equals_to:"not_equals_to", and:"and", or:"or"});
+
 export class Variable {
 
   constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
@@ -78,17 +84,34 @@ export class ExpressionElement {
   }
 }
 
-/*
+export class ConditionalExpression {
+
+  constructor (expression) {
+    this.type = EXPRESSION_TYPES.exp_conditional;
+    this.expression = expression;
+  }
+}
+
+export class LogicExpression {
+
+  constructor (has_neg, first_operand, second_operand, operator) {
+    this.type = EXPRESSION_TYPES.exp_logic;
+    this.has_neg = has_neg;
+    this.first_operand = first_operand;
+    this.second_operand = second_operand;
+    this.operator = operator;
+  }
+}
 
-export class Expression {
+export class ArithmeticExpression {
 
-  constructor (operand1, operand2, operator) {
-    this.operand1 = operand1;
-    this.operand2 = operand2;
+  constructor (first_operand, second_operand, operator) {
+    this.type = EXPRESSION_TYPES.exp_arithmetic;
+    this.first_operand = first_operand;
+    this.second_operand = second_operand;
     this.operator = operator;
   }
 }
-*/
 
 export class IfTrue {