iVProg/js/visualUI/commands/repeatNtimes.js

import * as Models from '../ivprog_elements';
import { LocalizedStrings } from '../../services/localizedStringsService';
import * as CommandsManagement from '../commands';
import * as ConditionalExpressionManagement from './conditional_expression';
import * as VariableValueMenu from './variable_value_menu';
import * as ContextualizedMenu from './contextualized_menu';
import * as GenericExpressionManagement from './generic_expression';
import * as CodeGenerator from '../code_generator';

export function createFloatingCommand () {
	return $('<div class="ui repeatNtimes created_element"> <i class="ui icon small sync"></i> <span> repita_para i de 0 ate 10 passo 1 <br> </span></div>');
}

export function renderCommand (command, function_obj) {
	let ret = `<div class="ui repeatNtimes command_container"> 
		<i class="ui icon small sync command_drag"></i>
		<i class="ui icon times red button_remove_command"></i>
		<button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button>
		<span class="span_command_spec"> ${LocalizedStrings.getUI('text_for')}
		</span>  <div class="ui attribution_expression">
		<div class="ui variable_attribution"></div>
		<span class="text_receives span_command_spec" style="margin-left: 10px;margin-right: 20px;"></span>
		<div class="ui var_value_expression div_expression_st"></div>
		</div>
		<span class="span_command_spec separator_character" style="margin-left: 25px; margin-right: 15px;">
		${LocalizedStrings.getUI("text_for_to")} </span>
		<div class="conditional_expression"></div> <div class="pass_button"></div> 
		<div class="ui incrementation_field"><span class="text_inc_receives span_command_spec"></span>
		<div class="ui first_operand"></div><div class="ui operator"></div>
		<div class="ui second_operand"></div></div>  <span class="span_command_spec"> </span>
		<span class="textual_expression"></span> <i class="ui icon unlock button_alternate_expression"></i>
		<div class="ui context_menu"></div>`;
	ret += '<div class="ui block_commands">';
	ret += '</div>';
	ret += '<span> </span>';
	ret += '</div>';
	
	var el = $(ret);
	el.data('command', command);
	el.find('.block_commands').data('command', command);

	addHandlers(command, function_obj, el);

	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), 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'));

	VariableValueMenu.renderMenu(command, command.expression2, el.find('.conditional_expression'), function_obj);	
	//GenericExpressionManagement.renderExpression(command, function_obj, el.find('.conditional_expression'), command.expression2);

	//VariableValueMenu.renderMenu(command, command.var_incrementation, el.find('.incrementation_variable'), function_obj);	
	//angle double right
	if (!command.expression1) {
		command.expression1 = new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, "0", null, null, true);
	}

	el.find('.text_receives').text(LocalizedStrings.getUI("text_for_from"));
	VariableValueMenu.renderMenu(command, command.expression1, el.find('.var_value_expression'), function_obj);

	if (!command.expression3) {
		el.find('.pass_button').html('<button class="ui">' + LocalizedStrings.getUI("text_for_pass") + '<i class="ui icon angle double right"></i></button>');
		el.find('.pass_button').find('button').on('click', function() {
			togglePasso(command);
		});
		/*var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, 
			[command.var_attribution,
     		Models.ARITHMETIC_TYPES.plus, 
			new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, "1", null, null, true)]);

		command.expression3 = exp;
		command.var_incrementation = command.var_attribution;*/
	} else {
		el.find('.pass_button').html('<button class="ui">' + LocalizedStrings.getUI("text_for_pass") + '<i class="ui icon angle double left"></i></button>');
		el.find('.pass_button').find('button').on('click', function() {
			togglePasso(command);
		});

		renderOperator(command, function_obj, el.find('.operator'), command.expression3, 1);
		VariableValueMenu.renderMenu(command, command.expression3.itens[2], el.find('.second_operand'), function_obj);
	}

	if (command.commands_block) {
		for (var j = 0; j < command.commands_block.length; j++) {
		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.block_commands')[0]), 3, function_obj);
		}
	}

	if (command.lockexpression) {
		try {
			var text = CodeGenerator.repeatNtimesHeader(command);
			if (text) {
				$(el.find('.textual_expression')[0]).html(text);
				$(el.find('.textual_expression')[0]).toggle();

				$(el.find('.attribution_expression')[0]).toggle();
				$(el.find('.span_command_spec.separator_character')[0]).toggle();
				$(el.find('.conditional_expression')[0]).toggle();
				$(el.find('.pass_button')[0]).toggle();
				$(el.find('.incrementation_field')[0]).toggle();

				$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
			}
		} catch (e) {
			command.lockexpression = false;
		}
	}

	return el;
}

function togglePasso (command) {
	if (!command.expression3) {
		var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, 
			[command.var_attribution,
     		Models.ARITHMETIC_TYPES.plus, 
			new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, "1", null, null, true)]);

		command.expression3 = exp;
		command.var_incrementation = command.var_attribution;
	} else {
		command.expression3 = null;
	}
	renderAlgorithm();
}

export function manageExpressionElements (command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element) {

	if (dom_object.hasClass('variable_attribution')) {
		if (!command.expression3) {
			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, 
				[command.var_attribution,
	     		Models.ARITHMETIC_TYPES.plus, 
				new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, "1", null, null, true)]);

			command.expression3 = exp;
			command.var_incrementation = command.var_attribution;

			var cond_exp = 
						new Models.ArithmeticExpression(
							command.var_attribution, 
							new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
							Models.ARITHMETIC_COMPARISON.less_than);

			command.expression2.expression = cond_exp;
		}

		dom_object.parent().find('.text_receives').text('de');

		command.expression1 = new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, "0", null, null, true);

		dom_object.parent().find('.var_value_expression').empty();
		
		VariableValueMenu.renderMenu(command, command.expression1, dom_object.parent().find('.var_value_expression'), function_obj);

		renderAlgorithm();
	}

	if (dom_object.hasClass('incrementation_variable')) {
		dom_object.parent().find('.text_inc_receives').text('de');
		
		var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, 
				[new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true),
	     		Models.ARITHMETIC_TYPES.plus, 
				new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);

		command.expression3 = exp;

		VariableValueMenu.renderMenu(command, command.expression3.itens[0], dom_object.parent().find('.first_operand'), function_obj);

		renderOperator(command, function_obj, dom_object.parent().find('.operator'), command.expression3, 1);

		VariableValueMenu.renderMenu(command, command.expression3.itens[2], dom_object.parent().find('.second_operand'), function_obj);		

	}

}

export function manageClearExpressionElements (command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element) {
	if (dom_object.hasClass('variable_attribution')) {
		$(dom_object).parent().find('.text_receives').text('');
		command.expression1 = null;
		$(dom_object).parent().find('.var_value_expression').empty();
	}

	if (dom_object.hasClass('incrementation_variable')) {
		$(dom_object).parent().find('.text_inc_receives').text('');
		command.expression3 = null;
		$(dom_object).parent().find('.first_operand').empty();
		$(dom_object).parent().find('.operator').empty();
		$(dom_object).parent().find('.second_operand').empty();
	}
}

function addHandlers (command, function_obj, repeatNtimes_dom) {

	repeatNtimes_dom.find('.minimize_block_button').on('click', function(evt){
		repeatNtimes_dom.children('.ui.block_commands').toggle();
		command.collapsed = !command.collapsed;
	});

	$(repeatNtimes_dom.find('.textual_expression')[0]).toggle();
	
	repeatNtimes_dom.find('.button_alternate_expression').on('click', function() {
		var text = CodeGenerator.repeatNtimesHeader(command);
		if (text) {
			$(repeatNtimes_dom.find('.textual_expression')[0]).html(text);
			$(repeatNtimes_dom.find('.textual_expression')[0]).toggle();

			$(repeatNtimes_dom.find('.attribution_expression')[0]).toggle();
			$(repeatNtimes_dom.find('.span_command_spec.separator_character')[0]).toggle();
			$(repeatNtimes_dom.find('.conditional_expression')[0]).toggle();
			$(repeatNtimes_dom.find('.pass_button')[0]).toggle();
			$(repeatNtimes_dom.find('.incrementation_field')[0]).toggle();

			$(repeatNtimes_dom.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');

			command.lockexpression = !command.lockexpression;
		}
	});

	repeatNtimes_dom.find('.button_remove_command').on('click', function() {
		if (CommandsManagement.removeCommand(command, function_obj, repeatNtimes_dom)) {
			repeatNtimes_dom.fadeOut(400, function() {
				repeatNtimes_dom.remove();
			});
		}
	});
}

function renderOperator (command, function_obj, temp_op, expression_element, index_op) {

	var menu_operator = $('<div class="ui dropdown"><div class="text"></div></div>');
	menu_operator.dropdown({
	    values: [
	      {
	        name     : '+',
	        value    : Models.ARITHMETIC_TYPES.plus,
	        selected : (expression_element.itens[index_op] == Models.ARITHMETIC_TYPES.plus)
	      },
	      {
	        name     : '-',
	        value    : Models.ARITHMETIC_TYPES.minus,
	        selected : (expression_element.itens[index_op] == Models.ARITHMETIC_TYPES.minus)
	      }
	    ],
	    onChange: function(value, text, $selectedItem) {
	    	expression_element.itens[index_op] = value;
	    }
	  });
	temp_op.append(menu_operator);
}