Continuando os comandos

css/ivprog-visual-1.0.css

@@ -130,10 +130,14 @@ 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, .conditional_expression {
+.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression {
 	display: inline;
 }
 
+.conditional_comands_block {
+	min-height: 10px;
+}
+
 .div_comment_text {
 	min-width: 100px;
 	font-style: italic;

i18n/en/ui.json

@@ -34,6 +34,9 @@
   "text_attribution": "Attribution",
   "text_if":"if",
   "text_else":"else",
+  "text_for":"for",
+  "text_code_while":"while",
+  "text_code_do":"do",
   "text_logic_expression": "Logic Expression",
   "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",

i18n/es/ui.json

@@ -34,6 +34,9 @@
   "text_attribution": "Attribution",
   "text_if":"if",
   "text_else":"else",
+  "text_for":"for",
+  "text_code_while":"while",
+  "text_code_do":"do",
   "text_logic_expression": "Logic Expression",
   "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",

i18n/pt/ui.json

@@ -35,6 +35,9 @@
   "text_attribution": "Atribuição",
   "text_if":"se",
   "text_else":"senão",
+  "text_for":"para",
+  "text_code_while":"enquanto",
+  "text_code_do":"faça",
   "text_logic_expression": "Expressão Lógica",
   "text_arithmetic_expression": "Expressão Aritmética",
   "text_iftrue": "Se verdadeiro então",

js/visualUI/code_generator.js

@@ -114,27 +114,248 @@ function functionsCode (function_obj) {
 	}
 }
 
-function commandsCode (command_obj) {
+function commandsCode (command_obj, indentation = 2) {
 	switch (command_obj.type) {
 		case Models.COMMAND_TYPES.comment:
-			return commentsCode(command_obj);
+			return commentsCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.reader:
-			return readersCode(command_obj);
+			return readersCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.writer:
-			return writersCode(command_obj);
+			return writersCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.functioncall:
-			return functioncallsCode(command_obj);
+			return functioncallsCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.attribution:
-			return attributionsCode(command_obj);
+			return attributionsCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.whiletrue:
+			return whiletruesCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			return doWhilesCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.iftrue:
+			return iftruesCode(command_obj, indentation);
+	}
+}
+
+function iftruesCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_if');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	ret += ' { ';
+
+	if (command_obj.commands_block) {
+		for (var i = 0; i < command_obj.commands_block.length; i++) {
+			ret += commandsCode(command_obj.commands_block[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '} ' + LocalizedStrings.getUI('text_else') + ' {';
+
+	if (command_obj.commands_else) {
+		for (var i = 0; i < command_obj.commands_else.length; i++) {
+			ret += commandsCode(command_obj.commands_else[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '}';
+
+	return ret;
+}
+
+
+function doWhilesCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_do') + ' { ';
+
+	if (command_obj.commands_block) {
+		for (var i = 0; i < command_obj.commands_block.length; i++) {
+			ret += commandsCode(command_obj.commands_block[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '} ' + LocalizedStrings.getUI('text_code_while');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	return ret;
+}
+
+
+function whiletruesCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_while');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	ret += ' { ';
+
+	if (command_obj.commands_block) {
+		for (var i = 0; i < command_obj.commands_block.length; i++) {
+			ret += commandsCode(command_obj.commands_block[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '}';
+
+	return ret;
+}
+
+function logicExpressionCode (expression) {
+	var ret = ' ( ';
+
+	if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.first_operand);
+	} else if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.first_operand);
+	} else {
+		ret += variableValueMenuCode(expression.first_operand);
+	}
+
+	if (expression.operator) {
+		switch (expression.operator) {
+	        case Models.LOGIC_COMPARISON.equals_to:
+	        	ret += ' == ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.not_equals_to:
+	        	ret += ' != ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.and:
+	        	ret += ' && ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.or:
+	        	ret += ' || ';
+	        	break;
+		}
+
+		if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+			ret += logicExpressionCode(expression.second_operand);
+		} else if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+			ret += arithmeticExpressionCode(expression.second_operand);
+		} else {
+			ret += variableValueMenuCode(expression.second_operand);
+		}
+
+	}
+
+	ret += ' ) ';
+
+	return ret;
+}
+
+function arithmeticExpressionCode (expression) {
+	var ret = ' ( ';
+
+	if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.first_operand);
+	} else if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.first_operand);
+	} else {
+		ret += variableValueMenuCode(expression.first_operand);
+	}
+
+	switch (expression.operator) {
+        case Models.ARITHMETIC_COMPARISON.greater_than:
+        	ret += ' > ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.less_than:
+        	ret += ' < ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.equals_to:
+        	ret += ' == ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.not_equals_to:
+        	ret += ' != ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to:
+        	ret += ' >= ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.less_than_or_equals_to:
+        	ret += ' <= ';
+        	break;
+	}
+
+	if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.second_operand);
+	} else if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.second_operand);
+	} else {
+		ret += variableValueMenuCode(expression.second_operand);
 	}
+
+	ret += ' ) ';
+
+	return ret;
 }
 
-function attributionsCode (command_obj) {
-	var ret = '\n\t\t';
+function attributionsCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
 
 	ret += variableValueMenuCode(command_obj.variable) + ' = ';
 
@@ -196,18 +417,28 @@ function elementExpressionCode (expression_obj) {
 
 }
 
-function functioncallsCode (command_obj) {
+function functioncallsCode (command_obj, indentation) {
+
+	var ret = '\n';
 
-	var ret = '\n\t\t';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
 	
 	ret += variableValueMenuCode(command_obj.function_called);
 
 	return ret;
 }
 
-function readersCode (command_obj) {
-	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_read') + ' ( ';
+function readersCode (command_obj, indentation) {
+	var ret = '\n';
 	
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_command_read') + ' ( ';
+
 	ret += variableValueMenuCode(command_obj.variable_value_menu);
 
 	ret += ' ) ';
@@ -256,9 +487,15 @@ function variableValueMenuCode (variable_obj) {
 
 }
 
-function writersCode (command_obj) {
-	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_write') + ' ( ';
+function writersCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
 	
+	ret += LocalizedStrings.getUI('text_command_write') + ' ( ';
+
 	for (var i = 0; i < command_obj.content.length; i++) {
 		ret += variableValueMenuCode(command_obj.content[i]);
 
@@ -271,8 +508,15 @@ function writersCode (command_obj) {
 	return ret;
 }
 
-function commentsCode (command_obj) {
-	var ret = '\n\t\t// ';
+function commentsCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '// ';
+
 	ret += command_obj.comment_text.content;
 	return ret;
 }

js/visualUI/commands.js

@@ -178,7 +178,8 @@ export function genericCreateCommand (command_type) {
 			return new Models.IfTrue(new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.repeatNtimes:
-			return new Models.RepeatNTimes(null, new Models.ConditionalExpression(null), null, null);
+			return new Models.RepeatNTimes(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
+												null, new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.whiletrue:
 			return new Models.WhileTrue(new Models.ConditionalExpression(null), null);
@@ -275,26 +276,33 @@ function manageCommand (function_obj, function_container, event, command_type) {
 
 		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos: 
 		if (hierarquia_bottom_up.length == 1) {
+			console.log('QQ1');
 			var sub_elemento = false;
 			for (var i = 0; i < hier_find.length; i++) {
 				if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+					console.log('QQ2');
 					findBeforeOrAfterCommandToAdd(hier_find[i], event, function_obj, command_type);
 					sub_elemento = true;
 					break;
 				}
 			}
 			if (!sub_elemento) {
+				console.log('QQ3');
 				findBeforeOrAfterCommandToAdd(el[0], event, function_obj, command_type);
 			}
 		} else {
+			console.log('QQ4');
 			// caso exista mais de um elemento na hierarquia:
 			if (typeof $(el).data('command') !== 'undefined') {
+				console.log('QQ5');
 				console.log("PPP1");
 				insertCommandInBlockHierar(el[0], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 			} else {
+				console.log('QQ6');
 				var sub_elemento = false;
 				for (var i = 0; i < hier_find.length; i++) {
 					if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+						console.log('QQ7');
 						insertCommandInBlockHierar(hier_find[i], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 						sub_elemento = true;
 						break;
@@ -316,13 +324,16 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 	if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ||
-		(el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.switch) ) {
 
+		console.log('QQ17');
+
 		if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
 			(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 			(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ) {
 
+			console.log('QQ18');
+
 			// Se não tiver outro comando ainda no bloco, só adiciona: 
 			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 				command_parent.commands_block = [];
@@ -337,9 +348,12 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 
 		} else {
 			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
+			console.log("que situação foi essa? quando o if no qual ele soltou, já está em outro bloco de comandos");
+
 		}
 
 	} else {
+		console.log('QQ19');
 		// entra neste bloco, se soltou o comando sobre outro comando dentro de um subbloco:
 		findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, command_type);
 	}
@@ -402,6 +416,42 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 	var command_parent = $(el.parentNode.parentNode).data('command');
 	var command_target = el_jq.data('command');
 
+	var is_in_else = false;
+
+	if (!command_parent) {
+		var hier = el_jq.parentsUntil(".command_container");
+
+		for (var i = 0; i < hier.length; i++) {
+			var temp = $(hier[i]);
+			if (typeof temp.data('else') !== 'undefined') {
+				is_in_else = true;
+			}
+			if (typeof temp.data('command') !== 'undefined') {
+				command_parent = temp.data('command');
+			}
+		}
+	}
+
+	if (command_parent == command_target) {
+		var hier = el_jq.parentsUntil(".command_container");
+
+		for (var i = 0; i < hier.length; i++) {
+			var temp = $(hier[i]);
+			if (typeof temp.data('else') !== 'undefined') {
+				is_in_else = true;
+				break;
+			}
+		}
+	}
+
+	console.log('debugging:');
+	console.log('el_jq');
+	console.log(el_jq);
+	console.log('command_parent');
+	console.log(command_parent);
+	console.log('command_target');
+	console.log(command_target);
+
 	var menor_distancia = 999999999;
 	var antes = true;
 
@@ -420,24 +470,128 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		console.log('MMM1');
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
+		if (is_in_else) {
+
+			console.log('MMM2');
+
+			if (command_parent == command_target) {
+				console.log('MMM3');
+				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+					command_parent.commands_else = [];
+
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_else.push(recentComand);
+
+					renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
+				} else { // Se já tem algum comando no bloco:
+					findInBlockCorrectPlace(el_jq.find('.commands_else'), event, function_obj, command_type, true);
+				}
+				return;
+			}
+			console.log('MMM7');
+			var index = command_parent.commands_else.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 1, function_obj);
+		} else {
+			console.log('MMM4');
+			if (command_parent == command_target) {
+				console.log('Nxxxx5');
+				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+					command_parent.commands_block = [];
+					console.log('SSS4');
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_block.push(recentComand);
+
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else {
+					console.log('SSS5');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
+				}
+				
+				
+				return;
+			}
+			console.log('MMM6');
+
+			var index = command_parent.commands_block.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 1, function_obj);
 		}
 
-		renderCommand(recentComand, el, 1, function_obj);
+		
 
 	} else {
+		console.log('XXX1');
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		if (is_in_else) {
 
-		if (index > -1) {
-		    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			if (command_parent == command_target) {
+				console.log('MMM3');
+				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+					command_parent.commands_else = [];
+					console.log('SSS1');
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_else.push(recentComand);
+
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else { // Se já tem algum comando no bloco:
+					console.log('SSS2');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
+				}
+				return;
+			}
+
+			console.log('XXX2');
+			var index = command_parent.commands_else.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_else.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
+
+		} else {
+
+			if (command_parent == command_target) {
+				console.log('Nxxxx78');
+				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+					command_parent.commands_block = [];
+
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_block.push(recentComand);
+					console.log('SSS6');
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else {
+					console.log('SSS7');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
+				}
+				
+				
+				return;
+			}
+
+			console.log('XXX3');
+			var index = command_parent.commands_block.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
 		}
 
-		renderCommand(recentComand, el, 2, function_obj);
+		
 	}
 }
 
@@ -461,12 +615,64 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 			findInBlockCorrectPlace(el, event, function_obj, command_type);
 		}
 
-	} else {
-		console.log("PPP2");
+	} else if (el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) {
+
+		console.log('QQ9');
+		
+		// no if ou no else?
+		var correct_div = $(document.elementFromPoint(event.pageX, event.pageY));
+		var is_in_if = true;
+		if (correct_div.data('if')) {
+			is_in_if = true;
+		} else if (correct_div.data('else')) {
+			is_in_if = false;
+		} else {
+			var hier = correct_div.parentsUntil(".command_container");
+			for (var i = 0; i < hier.length; i++) {
+				var temp = $(hier[i]);
+				if (typeof temp.data('if') !== 'undefined') {
+					is_in_if = true;
+					break;
+				}
+				if (typeof temp.data('else') !== 'undefined') {
+					is_in_if = false;
+					break;
+				}
+			}
+		}
+
+		if (is_in_if) {
+			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+				command_parent.commands_block = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_block.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_if'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_if'), event, function_obj, command_type);
+			}
+
+		} else {
+			if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+				command_parent.commands_else = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_else.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_else'), event, function_obj, command_type, true);
+			}
+
+		}
+
+	} else { // é do tipo switch
+
 	}
 }
 
-function findInBlockCorrectPlace (el, event, function_obj, command_type) {
+function findInBlockCorrectPlace (el, event, function_obj, command_type, is_in_else = false) {
 	var el_jq = $(el);
 	var all_sub = el_jq.find('div.command_container');
 
@@ -490,30 +696,63 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type) {
 	}
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
+
+	console.log("menor_distancia: ");
+	console.log(elemento_menor_distancia);
 	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
+
+		console.log('QQ11');
 		
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
-		
-		command_parent.commands_block.push(recentComand);
 
-		renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+		if (is_in_else) {
+			console.log('QQ15');
+			command_parent.commands_else.push(recentComand);
+			console.log('el_jq');
+			console.log(el_jq);
+			console.log("$(el_jq.find('.commands_else')[0]):: ");
+			console.log($(el_jq.find('.commands_else')[0]));
+
+			renderCommand(recentComand, el_jq, 3, function_obj);
+
+		} else {
+			console.log('QQ16');
+			command_parent.commands_block.push(recentComand);
+
+			renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+		}
 
 	} else {
 
+		console.log('QQ12');
+
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
-		
-		var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
-		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+		if (is_in_else) {
+
+			var index = command_parent.commands_else.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
+
+		} else {
+			var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
+
 		}
+		
 	}
 }
 

js/visualUI/commands/attribution.js

@@ -75,11 +75,15 @@ function renderExpressionElements (command, function_obj, el) {
 	var command_container;
 
 	if (el.hasClass("command_container") == false) {
-		var hier = el.parentsUntil(".commands_list_div");
-
+		var hier = el.parentsUntil(".command_container");
 		for (var i = 0; i < hier.length; i++) {
 			if ($(hier[i]).hasClass("command_container")) {
 				command_container = $(hier[i]);
+				break;
+			}
+			if ($(hier[i]).hasClass("expression_elements")) {
+				expression_div = $(hier[i]);
+				break;
 			}
 		}
 	}
@@ -100,12 +104,6 @@ function renderExpressionElements (command, function_obj, el) {
 
 		renderElement(command, function_obj, temp, command.expression[i]);
 	}
-
-	/*if (command_container) {
-		renderMenuAddExpression(command, function_obj, command_container, expression_div, command.expression);
-	} else {
-		renderMenuAddExpression(command, function_obj, el, expression_div, command.expression);
-	}*/
 }
 
 function renderOperator (command, function_obj, temp_op, expression_element, index_op) {

js/visualUI/commands/conditional_expression.js

@@ -9,9 +9,6 @@ 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);
@@ -22,7 +19,7 @@ export function renderExpression (command, expression, function_obj, initial_el_
 
 		switch (expression.expression.type) {
 			case Models.EXPRESSION_TYPES.exp_logic:
-				renderLogicExpression(command, expression, expression.expression, function_obj, main_div);
+				renderLogicExpression(command, expression, expression.expression, function_obj, main_div, initial_el_to_render);
 				break;
 			case Models.EXPRESSION_TYPES.exp_arithmetic:
 				renderArithmeticExpression(command, expression, expression.expression, function_obj, main_div);
@@ -33,13 +30,52 @@ export function renderExpression (command, expression, function_obj, initial_el_
 	}
 }
 
-function renderArithmeticOperator () {
+function renderArithmeticOperator (command, all_expression, expression_arithmetic, arithmetic_operator, function_obj, element_to_append) {
 
-}
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '>',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than)
+	      },
+	      {
+	        name     : '<',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than)
+	      },
+	      {
+	        name     : '==',
+	        value    : Models.ARITHMETIC_COMPARISON.equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.ARITHMETIC_COMPARISON.not_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '>=',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to)
+	      },
+	      {
+	        name     : '<=',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than_or_equals_to)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	expression_arithmetic.operator = value;
+	    }
+	  })
+	;
 
-function renderLogicOperator (command, all_expression, expression_logic, logic_operator, function_obj, element_to_append) {
+	element_to_append.append(menu_operator);
+}
 
-//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"});
+function renderLogicOperator (command, all_expression, expression_logic, logic_operator, function_obj, element_to_append, initial_el_to_render) {
 
 	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
 	menu_operator.dropdown({
@@ -66,16 +102,23 @@ function renderLogicOperator (command, all_expression, expression_logic, logic_o
 	      }
 	    ],
 	    onChange: function(value, text, $selectedItem) {
-	    	expression_logic.operator = value;
+	    	if ($selectedItem) {
+		    	expression_logic.operator = value;
+		    	if (expression_logic.second_operand == null) {
+		    		expression_logic.second_operand = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		    		initial_el_to_render.empty();
+		    		renderExpression(command, all_expression, function_obj, initial_el_to_render);
+		    	}
+	    	}
 	    }
-	  })
-	;
+	  });
 
 	element_to_append.append(menu_operator);
 
 }
 
-function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append) {
+
+function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append, initial_el_to_render) {
 
 	var exp_el_par_1 = $('<div class="expression_element"> ( </div>');
 	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
@@ -87,30 +130,67 @@ function renderLogicExpression (command, all_expression, expression_logic, funct
 		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:
+	} else {
 		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);
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+
+	renderLogicOperator(command, all_expression, expression_logic, expression_logic.operator, function_obj, exp_el_expr_operand, initial_el_to_render);
+
+	element_to_append.append(exp_el_expr_operand);
+
+	if (expression_logic.second_operand) {
+		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 {
+			VariableValueMenuManagement.renderMenu(command, expression_logic.second_operand, exp_el_expr_el_2, function_obj);
+		}
+
+		element_to_append.append(exp_el_expr_el_2);
 	}
 
-	renderLogicOperator(command, all_expression, expression_logic, expression_logic.operator, function_obj, exp_el_expr_operand);
+	element_to_append.append(exp_el_par_2);
+
+}
+
+function renderArithmeticExpression (command, all_expression, expression_arithmetic, 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_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.second_operand, exp_el_expr_el_2, function_obj);
+	}
+
+	renderArithmeticOperator(command, all_expression, expression_arithmetic, expression_arithmetic.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">';
@@ -125,9 +205,7 @@ function renderStartMenu (command, expression, function_obj, initial_el_to_rende
 				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);
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
 					break;
 				case Models.EXPRESSION_TYPES.exp_arithmetic:
 					expression.expression = 
@@ -145,5 +223,9 @@ function renderStartMenu (command, expression, function_obj, initial_el_to_rende
     	}
 	});
 
+	initial_el_to_render.append('<div class="expression_element"> ( </div>');
+	
 	initial_el_to_render.append(start_menu);
+
+	initial_el_to_render.append('<div class="expression_element"> ) </div>');
 }

js/visualUI/commands/dowhiletrue.js

@@ -13,10 +13,10 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	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 dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> ' + LocalizedStrings.getUI('text_code_do') + '  { </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += '<span> } enquanto (</span> <div class="conditional_expression"></div> <span> ); </span>';
+	ret += '<span> } ' + LocalizedStrings.getUI('text_code_while') + ' </span> <div class="conditional_expression"></div>';
 	ret += '</div>';
 
 	var el = $(ret);

js/visualUI/commands/iftrue.js

@@ -13,11 +13,11 @@ 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> <i class="ui icon redo alternate blue button_refresh_attribution"></i>';
-	ret += ' <span> ' + LocalizedStrings.getUI('text_if') + '</span>';
+	ret += '<div class="ui iftrue command_container"><div class="ui" data-if="true">  <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">';
+	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
 
 	/*if ((writer_obj.commands_block == null)
 			|| (writer_obj.commands_block.length == 0)) {
@@ -27,10 +27,10 @@ export function renderCommand (command, function_obj) {
 		}
 	}*/
 
-	ret += '</div>';
-	ret += '<span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
+	ret += '</div></div>';
+	ret += '<div class="ui" data-else="true"> <span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
 
-	ret += '<div class="ui block_commands" data-else="true">';
+	ret += '<div class="ui block_commands commands_else conditional_comands_block" data-else="true">';
 
 	/*if ((writer_obj.commands_else == null)
 			|| (writer_obj.commands_else.length == 0)) {
@@ -42,18 +42,19 @@ export function renderCommand (command, function_obj) {
 
 	ret += '</div>';
 
-	ret += '<span> }</span>';
+	ret += '<span> }</span></div>';
 	ret += '</div>';
 
 	var el = $(ret);
 	el.data('command', command);
+	el.find('.block_commands').data('command', command);
 
 	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('');
+		el.find('.conditional_expression').empty();
 		ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));		
 	});
 

js/visualUI/commands/repeatNtimes.js

@@ -6,13 +6,14 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
 import * as ConditionalExpressionManagement from './conditional_expression';
+import * as VariableValueMenu from './variable_value_menu';
 
 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  ( </span> ??? ; <div class="conditional_expression"></div> ;  ??? ) { </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> ' + LocalizedStrings.getUI('text_for') + ' ( </span>  <div class="ui attribution_expression"><div class="ui variable_attribution"></div> <span class="text_receives"></span> <div class="ui var_value_expression"></div> </div> ; <div class="conditional_expression"></div> ;  ??? ) { </span>';
 	ret += '<div class="ui block_commands">';
 
 	ret += '</div>';
@@ -24,12 +25,39 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	VariableValueMenu.renderMenu(command, command.var_attribution, $(el).find('.variable_attribution'), function_obj);
+
 	ConditionalExpressionManagement.renderExpression(command, command.expression2, function_obj, el.find('.conditional_expression'));
 
 	return el;
 }
 
+export function manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element) {
+	console.log("debugging: ");
+	console.log("command");
+	console.log(command);
+	console.log("ref_object");
+	console.log(ref_object);
+	console.log("dom_object");
+	console.log(dom_object);
+	console.log("menu_var_or_value");
+	console.log(menu_var_or_value);
+	console.log("function_obj");
+	console.log(function_obj);
+	console.log("$selectedItem");
+	console.log($selectedItem);
+	console.log("expression_element");
+	console.log(expression_element);
+
+	if (dom_object.hasClass('variable_attribution')) {
+		$(dom_object).parent().find('.text_receives').text(LocalizedStrings.getUI('text_receives'));
+
+		command.expression1 = new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 
+		VariableValueMenu.renderMenu(command, command.expression1, $(dom_object).parent().find('.var_value_expression'), function_obj);
+	}
+
+}
 
 function addHandlers (command, function_obj, repeatNtimes_dom) {
 

js/visualUI/commands/variable_value_menu.js

@@ -6,6 +6,7 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as AttribuitionsManagement from './attribution';
 import * as WritersManagement from './writer';
+import * as RepeatNTimesManagement from './repeatNtimes';
 
 export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2, only_function: 3, variable_and_function: 4, variable_and_value_opt: 5,
 	value_and_function: 6, all: 7});
@@ -518,7 +519,6 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
 		  	dom_object.find('.var_name').remove();
-
 		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
 		     		openInputToFunction(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('function_reference'), expression_element);
@@ -536,6 +536,10 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 		     if ($selectedItem.data('exp')) {
 		     	AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 		     }
+
+		     if (command.type == Models.COMMAND_TYPES.repeatNtimes) {
+		     	RepeatNTimesManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
+		     }
 	      }
 	    });
 	}

js/visualUI/commands/whiletrue.js

@@ -13,9 +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 ( </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> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
 	ret += ' <div class="conditional_expression"></div>';
-	ret += ' ) { </span>';
+	ret += ' { </span>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> }</span>';

js/visualUI/ivprog_elements.js

@@ -125,8 +125,9 @@ export class IfTrue {
 
 export class RepeatNTimes {
 
-  constructor (expression1, expression2, expression3, commands_block) {
+  constructor (var_attribution, expression1, expression2, expression3, commands_block) {
     this.type = COMMAND_TYPES.repeatNtimes;
+    this.var_attribution = var_attribution;
     this.expression1 = expression1;
     this.expression2 = expression2;
     this.expression3 = expression3;