diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js index e058d9120a..7b93785caa 100755 --- a/pandora_console/godmode/reporting/visual_console_builder.editor.js +++ b/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; diff --git a/pandora_console/images/line_item.disabled.png b/pandora_console/images/line_item.disabled.png new file mode 100755 index 0000000000..3dc5c57f5b Binary files /dev/null and b/pandora_console/images/line_item.disabled.png differ diff --git a/pandora_console/images/line_item.png b/pandora_console/images/line_item.png new file mode 100755 index 0000000000..bedbc2ad07 Binary files /dev/null and b/pandora_console/images/line_item.png differ diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php index cdf07eb622..f6b6e905c9 100755 --- a/pandora_console/include/ajax/visual_console_builder.ajax.php +++ b/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; diff --git a/pandora_console/include/constants.php b/pandora_console/include/constants.php index 16772c968e..3be630f662 100644 --- a/pandora_console/include/constants.php +++ b/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); diff --git a/pandora_console/include/functions_visual_map.php b/pandora_console/include/functions_visual_map.php index a245d6d826..afe423d3f6 100755 --- a/pandora_console/include/functions_visual_map.php +++ b/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; } } diff --git a/pandora_console/include/functions_visual_map_editor.php b/pandora_console/include/functions_visual_map_editor.php index 93ea97646d..48ddd63b2c 100755 --- a/pandora_console/include/functions_visual_map_editor.php +++ b/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) { ' . __('Width') . ' + ' . + html_print_input_text('line_width', 3, '', 3, 5, true) . + ''; + + + $form_items['line_color_row'] = array(); + $form_items['line_color_row']['items'] = array('datos', 'line_item'); + $form_items['line_color_row']['html'] = + '' . + __('Border color') . + '' . + '' . + html_print_input_text_extended ('line_color', + '#000000', 'text-line_color', '', 7, 7, false, + '', 'class="line_color"', true) . + ''; + + $form_items['box_size_row'] = array(); - $form_items['box_size_row']['items'] = array('box_item'); - $form_items['box_size_row']['html'] = '' . __('Size') . ' + $form_items['box_size_row']['items'] = array('datos', 'box_item'); + $form_items['box_size_row']['html'] = + '' . __('Size') . ' ' . html_print_input_text('width_box', 300, '', 3, 5, true) . ' X ' . html_print_input_text('height_box', 180, '', 3, 5, true) . ''; + $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'] = - '' . __('Border color') . '' . + '' . + __('Border color') . + '' . '' . - html_print_input_text_extended ('border_color', - '#000000', 'text-border_color', '', 7, 7, false, '', - 'class="border_color"', true) . + html_print_input_text_extended ('border_color', + '#000000', 'text-border_color', '', 7, 7, false, + '', 'class="border_color"', true) . ''; + $form_items['border_width_row'] = array(); - $form_items['border_width_row']['items'] = array('box_item'); - $form_items['border_width_row']['html'] = '' . __('Border width') . ' + $form_items['border_width_row']['items'] = array('datos', 'box_item'); + $form_items['border_width_row']['html'] = + '' . __('Border width') . ' ' . html_print_input_text('border_width', 3, '', 3, 5, true) . ''; $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'] = '' . __('Fill color') . '' . '' . @@ -466,8 +494,23 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) { '; + echo ''; + + echo ''; + 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(); });