Working in the new elements for the visualmap. Ticket #1478

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -16,12 +16,16 @@ var is_opened_palette = false;
 var idItem = 0;
 var selectedItem = null;
 var lines = Array();
+var user_lines = Array();
 var toolbuttonActive = null;
 var autosave = true;
 var list_actions_pending_save = [];
 var temp_id_item = 0;
 var parents = {};
 
+var obj_js_user_lines = null;
+
+
 var SIZE_GRID = 16; //Const the size (for width and height) of grid.
 
 function toggle_advance_options_palette(close) {
@@ -53,6 +57,8 @@ function visual_map_main() {
 		}
 	);
 	
+	obj_js_user_lines = new jsGraphics("background");
+	
 	$("input[name='radio_choice']").on('change', function() {
 		var radio_value = $("input[name='radio_choice']:checked").val();
 		
@@ -260,6 +266,9 @@ function readFields() {
 	values['border_width'] = parseInt(
 		$("input[name='border_width']").val());
 	values['fill_color'] = $("input[name='fill_color']").val();
+	values['line_width'] = parseInt(
+		$("input[name='line_width']").val());
+	values['line_color'] = $("input[name='line_color']").val();
 	
 	if (metaconsole != 0) {
 		values['metaconsole'] = 1;
@@ -361,11 +370,133 @@ function create_button_palette_callback() {
 	}
 	
 	if (validate) {
-		insertDB(creationItem, values);
+		switch (creationItem) {
+			case 'line_item':
+				create_line('step_1', values);
+				break;
+			default:
+				insertDB(creationItem, values);
+				break;
+		}
+		
+		
 		toggle_item_palette();
 	}
 }
 
+function draw_user_lines(color, thickness, start_x, start_y , end_x, end_y) {
+	
+	obj_js_user_lines.clear();
+	
+	// Draw the previous lines
+	for (iterator = 0; iterator < user_lines.length; iterator++) {
+		
+		obj_js_user_lines.setStroke(user_lines[iterator]['line_width']);
+		obj_js_user_lines.setColor(user_lines[iterator]['line_color']);
+		obj_js_user_lines.drawLine(
+			user_lines[iterator]['start_x'],
+			user_lines[iterator]['start_y'],
+			user_lines[iterator]['end_x'],
+			user_lines[iterator]['end_y']);
+		
+	}
+	
+	obj_js_user_lines.setStroke(thickness);
+	obj_js_user_lines.setColor(color);
+	obj_js_user_lines.drawLine(start_x, start_y, end_x, end_y);
+	
+	obj_js_user_lines.paint();
+}
+
+function create_line(step, values) {
+	
+	$('.item').unbind('click');
+	$('.item').unbind('dblclick');
+	$('.item').unbind('dragstop');
+	$('.item').unbind('dragstart');
+	
+	$('#background').unbind('click');
+	$('#background').unbind('dblclick');
+	
+	
+	switch (step) {
+		case 'step_1':
+			$("#background *").css("cursor", "crosshair");
+			
+			
+			
+			$("#background *")
+				.on('mousemove', function(e) {
+					$('#div_step_1').css({
+						left:	e.pageX,
+						top:	e.pageY
+					});
+					$('#div_step_1').show();
+					
+					// 2 for the black border of background
+					values['line_start_x'] =
+						e.pageX - $("#background").position().left - 2;
+					values['line_start_y'] =
+						e.pageY - $("#background").position().top - 2;
+					
+				});
+			
+			
+			$("#background *")
+				.on('click', function(e) {
+					create_line('step_2', values);
+				});
+			
+			break;
+		case 'step_2':
+			$('#div_step_1').hide();
+			$("#background *").off('mousemove');
+			$("#background *").off('click');
+			
+			
+			$("#background *")
+				.on('mousemove', function(e) {
+					$('#div_step_2').css({
+						left:	e.pageX,
+						top:	e.pageY
+					});
+					$('#div_step_2').show();
+					
+					// 2 for the black border of background
+					values['line_end_x'] =
+						e.pageX - $("#background").position().left - 2;
+					values['line_end_y'] =
+						e.pageY - $("#background").position().top - 2;
+					
+					draw_user_lines(
+						values['line_color'],
+						values['line_width'],
+						values['line_start_x'],
+						values['line_start_y'],
+						values['line_end_x'] - 3,
+						values['line_end_y'] - 3);
+				});
+			
+			$("#background *")
+				.on('click', function(e) {
+					create_line('step_3', values);
+				});
+			break;
+		case 'step_3':
+			$('#div_step_2').hide();
+			$("#background *").off('mousemove');
+			$("#background *").off('click');
+			
+			$("#background *").css("cursor", "");
+			
+			insertDB("line_item", values);
+			
+			eventsItems();
+			eventsBackground();
+			break;
+	}
+}
+
 function toggle_item_palette() {
 	var item = null;
 	
@@ -641,6 +772,14 @@ function loadFieldsFromDB(item) {
 						$("#fill_color_row .ColorPickerDivSample")
 							.css('background-color', val);
 					}
+					if (key == 'line_width')
+						$("input[name='line_width']").val(val);
+					if (key == 'line_color') {
+						$("input[name='line_color']").val(val);
+						$("#line_color_row .ColorPickerDivSample")
+							.css('background-color', val);
+					}
+					
 				});
 				
 				if (data.type == 1) {
@@ -813,6 +952,16 @@ function hiddenFields(item) {
 	$("#fill_color_row").css('display', 'none');
 	$("#fill_color_row."  + item).css('display', '');
 	
+	$("#line_color_row").css('display', 'none');
+	$("#line_color_row."  + item).css('display', '');
+	
+	$("#line_width_row").css('display', 'none');
+	$("#line_width_row."  + item).css('display', '');
+	
+	
+	
+	
+	
 	$("input[name='radio_choice']").trigger('change');
 	
 	if (typeof(enterprise_hiddenFields) == 'function') {
@@ -852,6 +1001,8 @@ function cleanFields(item) {
 	$("input[name='border_color']").val('#000000');
 	$("input[name='border_width']").val(3);
 	$("input[name='fill_color']").val('#ffffff');
+	$("input[name='line_width']").val(3);
+	$("input[name='line_color']").val('#000000');
 	
 	
 	$("#preview").empty();
@@ -1447,6 +1598,21 @@ function insertDB(type, values) {
 					addItemSelectParents(id, data['text']);
 					//Reload all events for the item and new item.
 					eventsItems();
+					
+					switch (type) {
+						case 'line_item':
+							var line = {
+								"id": id,
+								"start_x":		values['line_start_x'],
+								"start_y":		values['line_start_y'],
+								"end_x":		values['line_end_x'],
+								"end_y":		values['line_end_y'],
+								"line_width":	values['line_width'],
+								"line_color":	values['line_color']};
+							
+							user_lines.push(line);
+							break;
+					}
 				}
 				else {
 					//TODO
@@ -1822,6 +1988,7 @@ function eventsItems(drag) {
 	//$(".item").resizable(); //Disable but run in ff and in the waste (aka micro$oft IE) show ungly borders
 	
 	$('.item').bind('click', function(event, ui) {
+		
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			var divParent = $(event.target);
@@ -1913,6 +2080,7 @@ function eventsItems(drag) {
 	
 	//Double click in the item
 	$('.item').bind('dblclick', function(event, ui) {
+		
 		event.stopPropagation();
 		if ((!is_opened_palette) && (autosave)) {
 			toggle_item_palette();
@@ -1924,6 +2092,7 @@ function eventsItems(drag) {
 	$(".item").draggable({containment: "#background", grid: drag});
 	
 	$('.item').bind('dragstart', function(event, ui) {
+		
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			unselectAll();
@@ -1973,6 +2142,7 @@ function eventsItems(drag) {
 	});
 	
 	$('.item').bind('dragstop', function(event, ui) {
+		
 		event.stopPropagation();
 		
 		var values = {};
@@ -2109,6 +2279,10 @@ function click_button_toolbox(id) {
 			toolbuttonActive = creationItem = 'box_item';
 			toggle_item_palette();
 			break;
+		case 'line_item':
+			toolbuttonActive = creationItem = 'line_item';
+			toggle_item_palette();
+			break;
 		
 		
 		

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -78,6 +78,12 @@ $border_color = get_parameter('border_color', '');
 $fill_color = get_parameter('fill_color', '');
 $width_box = get_parameter('width_box', 0);
 $height_box = get_parameter('height_box', 0);
+$line_start_x = (int)get_parameter('line_start_x', 0);
+$line_start_y = (int)get_parameter('line_start_y', 0);
+$line_end_x = (int)get_parameter('line_end_x', 0);
+$line_end_y = (int)get_parameter('line_end_y', 0);
+$line_width = (int)get_parameter('line_width', 0);
+$line_color = get_parameter('line_color', '');
 
 $get_element_status = get_parameter('get_element_status', 0);
 $get_image_path_status = get_parameter('get_image_path_status', 0);
@@ -648,6 +654,15 @@ switch ($action) {
 		$values['id_custom_graph'] = $id_custom_graph;
 		
 		switch ($type) {
+			case 'line_item':
+				$values['type'] = LINE_ITEM;
+				$values['border_width'] = $line_width;
+				$values['border_color'] = $line_color;
+				$values['pos_x'] = $line_start_x;
+				$values['pos_y'] = $line_start_y;
+				$values['width'] = $line_end_x;
+				$values['height'] = $line_end_y;
+				break;
 			case 'box_item':
 				$values['type'] = BOX_ITEM;
 				$values['border_width'] = $border_width;

pandora_console/include/constants.php

@@ -191,6 +191,7 @@ define('PERCENTILE_BUBBLE',	9);
 define('SERVICE',			10); //Enterprise Item.
 define('GROUP_ITEM',		11);
 define('BOX_ITEM',			12);
+define('LINE_ITEM',			13);
 //Some styles
 define('MIN_WIDTH',			300);
 define('MIN_HEIGHT',		120);

pandora_console/include/functions_visual_map.php

@@ -1902,6 +1902,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
 	if (empty($label))
 	{
 		switch ($type) {
+			case 'box_item':
+			case BOX_ITEM:
+				$text = __('Box');
+				break;
 			case 'module_graph':
 			case MODULE_GRAPH:
 				$text = __('Module graph');
@@ -2029,10 +2033,13 @@ function visual_map_type_in_js($type) {
 			break;
 		case GROUP_ITEM:
 			return 'group_item';
-		break;
+			break;
 		case BOX_ITEM:
 			return 'box_item';
-		break;
+			break;
+		case LINE_ITEM:
+			return 'line_item';
+			break;
 	}
 }
 

pandora_console/include/functions_visual_map_editor.php

@@ -58,7 +58,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'label' => __('Label'),
 				'icon' => __('Icon'),
 				'group_item' => __('Group'),
-				'box_item' => __('Box'));
+				'box_item' => __('Box'),
+				'line_item' => __('Line'));
 			
 			if (enterprise_installed()) {
 				enterprise_visual_map_editor_add_title_palette($titles);
@@ -76,35 +77,62 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			<?php
 			$form_items = array();
 			
+			$form_items['line_width_row'] = array();
+			$form_items['line_width_row']['items'] = array('datos', 'line_item');
+			$form_items['line_width_row']['html'] = '<td align="left">' . __('Width') . '</td>
+				<td align="left">' .
+				html_print_input_text('line_width', 3, '', 3, 5, true) .
+				'</td>';
+			
+			
+			$form_items['line_color_row'] = array();
+			$form_items['line_color_row']['items'] = array('datos', 'line_item');
+			$form_items['line_color_row']['html'] = 
+				'<td align="left" valign="top" style="">' .
+					__('Border color') .
+				'</td>' .
+				'<td align="left" style="">' .
+					html_print_input_text_extended ('line_color',
+						'#000000', 'text-line_color', '', 7, 7, false,
+						'', 'class="line_color"', true) .
+				'</td>';
+			
+			
 			$form_items['box_size_row'] = array();
-			$form_items['box_size_row']['items'] = array('box_item');
+			$form_items['box_size_row']['items'] = array('datos', 'box_item');
-			$form_items['box_size_row']['html'] = '<td align="left">' . __('Size') . '</td>
+			$form_items['box_size_row']['html'] =
+				'<td align="left">' . __('Size') . '</td>
 				<td align="left">' .
 				html_print_input_text('width_box', 300, '', 3, 5, true) . 
 				' X ' .
 				html_print_input_text('height_box', 180, '', 3, 5, true) .
 				'</td>';
 			
+			
 			$form_items['border_color_row'] = array();
-			$form_items['border_color_row']['items'] = array('box_item');
+			$form_items['border_color_row']['items'] = array('datos', 'box_item');
 			$form_items['border_color_row']['html'] = 
-				'<td align="left" valign="top" style="">' . __('Border color') . '</td>' .
+				'<td align="left" valign="top" style="">' .
+					__('Border color') .
+				'</td>' .
 				'<td align="left" style="">' .
-				html_print_input_text_extended ('border_color',
+					html_print_input_text_extended ('border_color',
-					'#000000', 'text-border_color', '', 7, 7, false, '',
+						'#000000', 'text-border_color', '', 7, 7, false,
-					'class="border_color"', true) .
+						'', 'class="border_color"', true) .
 				'</td>';
 			
+			
 			$form_items['border_width_row'] = array();
-			$form_items['border_width_row']['items'] = array('box_item');
+			$form_items['border_width_row']['items'] = array('datos', 'box_item');
-			$form_items['border_width_row']['html'] = '<td align="left">' . __('Border width') . '</td>
+			$form_items['border_width_row']['html'] =
+				'<td align="left">' . __('Border width') . '</td>
 				<td align="left">' .
 				html_print_input_text('border_width', 3, '', 3, 5, true) . 
 				'</td>';
 			
 			
 			$form_items['fill_color_row'] = array();
-			$form_items['fill_color_row']['items'] = array('box_item');
+			$form_items['fill_color_row']['items'] = array('datos', 'box_item');
 			$form_items['fill_color_row']['html'] = 
 				'<td align="left" valign="top" style="">' . __('Fill color') . '</td>' .
 				'<td align="left" style="">' .
@@ -466,8 +494,23 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 	</table>
 	<?php
 	//------------------------------------------------------------------------------
+	
+	
+	
+	
+	
 	echo '</div>';
 	
+	echo '<div id="div_step_1" class="forced_title_layer"
+		style="display: none; position: absolute; z-index: 99;">' .
+			__('Click start point<br />of the line') .
+		'</div>';
+	
+	echo '<div id="div_step_2" class="forced_title_layer"
+		style="display: none; position: absolute; z-index: 99;">' .
+			__('Click end point<br />of the line') .
+		'</div>';
+	
 	ui_require_css_file ('color-picker');
 	
 	ui_require_jquery_file ('colorpicker');
@@ -476,6 +519,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 		$(document).ready (function () {
 			$(".border_color").attachColorPicker();
 			$(".fill_color").attachColorPicker();
+			$(".line_color").attachColorPicker();
 		});
 	</script>
 	<?php
@@ -494,6 +538,7 @@ function visual_map_editor_print_toolbox() {
 		visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
 		visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
 		visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
+		visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
 		
 		enterprise_hook("enterprise_visual_map_editor_print_toolbox");
 		

pandora_console/include/styles/pandora.css

@@ -764,6 +764,12 @@ input.box_item {
 input.box_item[disabled] {
 	background: #fefefe url(../../images/box_item.disabled.png) no-repeat center !important;
 }
+input.line_item {
+	background: #fefefe url(../../images/line_item.png) no-repeat center !important;
+}
+input.line_item[disabled] {
+	background: #fefefe url(../../images/line_item.disabled.png) no-repeat center !important;
+}
 input.copy_item {
 	background: #fefefe url(../../images/copy_visualmap.png) no-repeat center !important;
 }