Merge branch '1313-Poder-elegir-posición-en-consola-visual-4517-2' into 'develop'

Add show on top option to all visual console elements - #1313

See merge request artica/pandorafms!954

pandora_console/extras/pandoradb_migrate_6.0_to_7.0.mysql.sql

@@ -1242,6 +1242,7 @@ ALTER TABLE tlayout_data ADD `label_position` varchar(50) NOT NULL default 'down
 ALTER TABLE tlayout_data ADD COLUMN `show_statistics` tinyint(2) NOT NULL default '0';
 ALTER TABLE tlayout_data ADD COLUMN `element_group` int(10) NOT NULL default '0';
 ALTER TABLE tlayout_data ADD COLUMN `id_layout_linked_weight` int(10) NOT NULL default '0';
+ALTER TABLE tlayout_data ADD COLUMN `show_on_top` tinyint(1) NOT NULL default '0';
 
 -- ---------------------------------------------------------------------
 -- Table `tagent_custom_fields`

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -855,6 +855,7 @@ function readFields() {
 	values['line_color'] = $("input[name='line_color']").val();
 	values['label_position'] = $(".labelpos[sel=yes]").attr('position');
 	values['show_statistics'] = $("input[name=show_statistics]").is(':checked') ? 1 : 0;
+	values['show_on_top'] = $("input[name=show_on_top]").is(':checked') ? 1 : 0;
 	
 	if (is_metaconsole()) {
 		values['metaconsole'] = 1;
@@ -1295,6 +1296,9 @@ function toggle_item_palette() {
 		}
 
 		hiddenFields(item);
+		
+		$("#show_on_top_row").css('display', 'table-row');
+		$("#show_on_top." + item).css('display', 'block');
 
 		$("#properties_panel").show("fast");
 		
@@ -1424,6 +1428,17 @@ function loadFieldsFromDB(item) {
 					}
 				}
 				
+				if (key == 'show_on_top') {
+					if (val == "1") {
+						$("input[name=show_on_top]")
+							.prop("checked", true);
+					}
+					else {
+						$("input[name=show_on_top]")
+							.prop("checked", false);
+					}
+				}
+				
 				if (key == 'type_graph') {
 					$("select[name=type_graph]").val(val);
 				}
@@ -1901,6 +1916,7 @@ function cleanFields(item) {
 	$("input[name=percentile_label_color]").val('');
 	$("input[name=percentile_label]").val('');
 	$(".ColorPickerDivSample").css('background-color', '#FFF');
+	$("input[name=show_on_top]").prop("checked", false);
 
 
 	$("#preview").empty();
@@ -3464,8 +3480,6 @@ function createItem(type, values, id_data) {
 	}
 
 	$("#background").append(item);
-	$(".item").css('z-index', '2');
-	$(".box_item").css('z-index', '1');
 
 	if (values['parent'] != 0) {
 		var line = {"id": id_data,
@@ -3488,6 +3502,14 @@ function createItem(type, values, id_data) {
 		$('#text_'+id_data).css({'display':'block','float':'left'});
 	}
 	
+	if(values['show_on_top'] == 1){
+		$("#" + id_data).css('z-index', '10');
+	}
+	
+	if(values['show_on_top'] == 0){
+		$("#" + id_data).css('z-index', '5');
+	}
+	
 }
 
 function addItemSelectParents(id_data, text) {
@@ -3690,6 +3712,15 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 	
 	refresh_lines(lines, 'background', true);
 	draw_user_lines("", 0, 0, 0 , 0, 0, true);
+	
+	if(values['show_on_top'] == 1){
+		$("#" + idElement).css('z-index',10);
+	}
+	
+	if(values['show_on_top'] == 0){
+		$("#" + idElement).css('z-index',5);
+	}
+
 }
 
 function updateDB(type, idElement , values, event) {
@@ -4525,6 +4556,8 @@ function eventsBackground() {
 		if ((!is_opened_palette) && (autosave)) {
 			toggle_item_palette();
 		}
+		$("#show_on_top_row").css('display', 'none');
+		$("#show_on_top." + item).css('display', '');
 	});
 }
 

pandora_console/godmode/reporting/visual_console_builder.php

@@ -413,6 +413,8 @@ switch ($activeTab) {
 				$value_show = get_parameter ("value_show", 'percent');
 				$label_type = get_parameter ("label_type", 'agent_module');
 				$enable_link = get_parameter ("enable_link", 'enable_link');
+				$show_on_top = get_parameter ("show_on_top", 0);
+				
 				// This var switch between creation of items, item_per_agent = 0 => item per module; item_per_agent <> 0  => item per agent
 				$item_per_agent = get_parameter ("item_per_agent", 0);
 				$id_server = (int)get_parameter('servers', 0);

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -140,6 +140,7 @@ $line_color = get_parameter('line_color', '');
 $get_element_status = get_parameter('get_element_status', 0);
 
 $enable_link = get_parameter('enable_link', 1);
+$show_on_top = get_parameter('show_on_top', 0);
 $type_graph = get_parameter('type_graph', 'area');
 $label_position = get_parameter('label_position', 'down');
 $show_statistics = get_parameter('show_statistics', 0);
@@ -492,6 +493,7 @@ switch ($action) {
 		$values = array();
 		
 		$values['label_position'] = $label_position;
+		$values['show_on_top'] = $show_on_top;
 		
 		// In Graphs, background color is stored in column image (sorry)
 		if ($type == 'module_graph') {
@@ -531,6 +533,9 @@ switch ($action) {
 				if ($enable_link !== null) {
 					$values['enable_link'] = $enable_link;
 				}
+				if ($show_on_top !== null) {
+					$values['show_on_top'] = $show_on_top;
+				}
 				if ($label !== null) {
 					$values['label'] = $label;
 				}
@@ -745,6 +750,7 @@ switch ($action) {
 					// Don't change the label because only change the positions
 					unset($values['label']);
 					unset($values['label_position']);
+					unset($values['show_on_top']);
 					// Don't change background color in graphs when move
 					
 					switch ($type) {
@@ -1034,6 +1040,7 @@ switch ($action) {
 		$values['id_layout_linked_weight'] = $map_linked_weight;
 		$values['parent_item'] = $parent;
 		$values['enable_link'] = $enable_link;
+		$values['show_on_top'] = $show_on_top;
 		$values['image'] = $background_color;
 		$values['type_graph'] = $type_graph;
 		

pandora_console/include/functions_visual_map.php

@@ -111,6 +111,14 @@ function visual_map_print_item($mode = "read", $layoutData,
 	$border_color = $layoutData['border_color'];
 	$fill_color = $layoutData['fill_color'];
 	$label_position = $layoutData['label_position'];
+	$show_on_top = $layoutData['show_on_top'];
+
+	if($show_on_top){
+		$show_on_top_index = 10;
+	}
+	else{
+		$show_on_top_index = '';
+	}
 
 	$sizeStyle = '';
 	$borderStyle = '';
@@ -961,14 +969,14 @@ function visual_map_print_item($mode = "read", $layoutData,
 				else {
 					if ($width == 0 || $height == 0) {
 						if ($layoutData['label_position']=='left') {
-							$img = '<div style="float:right;height:'.$himg.'px;">'.custom_graphs_print(
+							$img = '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">'.custom_graphs_print(
 							$layoutData['id_custom_graph'], 180, 480,
 							$period, null, true, 0, $only_image, $layoutData['image'],
 							array(), '', array(), array(), true,
 							false, false, true, 1, false, true).'</div>';
 						}
 						elseif ($layoutData['label_position']=='right') {
-						$img = '<div style="float:left;height:'.$himg.'px;">'.custom_graphs_print(
+						$img = '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">'.custom_graphs_print(
 							$layoutData['id_custom_graph'], 180, 480,
 							$period, null, true, 0, $only_image, $layoutData['image'],
 							array(), '', array(), array(), true,
@@ -988,14 +996,14 @@ function visual_map_print_item($mode = "read", $layoutData,
 						}
 						else {
 							if ($layoutData['label_position']=='left') {
-								$img = '<div style="float:right;height:'.$himg.'px;">'.custom_graphs_print(
+								$img = '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">'.custom_graphs_print(
 								$layoutData['id_custom_graph'], $height, $width,
 								$period, null, true, 0, $only_image, $layoutData['image'],
 								array(), '', array(), array(), true,
 								false, false, true, 1, false, true).'</div>';
 							}
 							elseif($layoutData['label_position']=='right') {
-								$img = '<div style="float:left;height:'.$himg.'px;">'.custom_graphs_print(
+								$img = '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">'.custom_graphs_print(
 								$layoutData['id_custom_graph'], $height, $width,
 								$period, null, true, 0, $only_image, $layoutData['image'],
 								array(), '', array(), array(), true,
@@ -1041,7 +1049,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 					if ($width == 0 || $height == 0) {
 						
 						if ($layoutData['label_position']=='left') {
-							$img =  '<div style="float:right;height:'.$himg.'px;">'.
+							$img =  '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">'.
 							grafico_modulo_sparse($id_module, $period, 
 							0, 300, 180, modules_get_agentmodule_name($id_module),null, false, 1, false, 0, 
 							modules_get_unit($id_module), 0, 0, true, $only_image, '', 1, false, '', 
@@ -1049,7 +1057,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 							null, true, false, $type_graph) . '</div>';
 						}
 						elseif($layoutData['label_position']=='right') {
-							$img =  '<div style="float:left;height:'.$himg.'px;">' . 
+							$img =  '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' . 
 								grafico_modulo_sparse($id_module, 
 								$period, 0, 300, 180, modules_get_agentmodule_name($id_module),null, false, 
 								1, false, 0, modules_get_unit($id_module), 0, 0, true, $only_image, '', 
@@ -1067,7 +1075,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 					}
 					else{
 						if ($layoutData['label_position']=='left') {
-							$img =  '<div style="float:right;height:'.$himg.'px;">' . 
+							$img =  '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' . 
 								grafico_modulo_sparse($id_module, $period, 
 							0, $width, $height, modules_get_agentmodule_name($id_module), null, false, 1, 
 							false, 0, modules_get_unit($id_module), 0, 0, true, $only_image, '', 
@@ -1076,7 +1084,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 							false, $type_graph) . '</div>';
 						}
 						elseif ($layoutData['label_position']=='right') {
-							$img =  '<div style="float:left;height:'.$himg.'px;">' . 
+							$img =  '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' . 
 								grafico_modulo_sparse($id_module, $period, 
 								0, $width, $height, modules_get_agentmodule_name($id_module), null, false, 1, 
 								false, 0, modules_get_unit($id_module), 0, 0, true, $only_image, 
@@ -1436,10 +1444,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 			else {
 				if ($width == 0 || $height == 0) {
 					if ($layoutData['label_position']=='left') {
-						$img = '<div style="float:left;height:'.$himg.'px;">' .graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], 500, 50, $layoutData['period'], '', true).'</div>';
+						$img = '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' .graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], 500, 50, $layoutData['period'], '', true).'</div>';
 					}
 					elseif ($layoutData['label_position']=='right') {
-						$img = '<div style="float:right;height:'.$himg.'px;">' . graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], 500, 50, $layoutData['period'], '', true).'</div>';
+						$img = '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' . graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], 500, 50, $layoutData['period'], '', true).'</div>';
 					}
 					else {
 						$img = graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], 500, 50, $layoutData['period'], '', true);
@@ -1447,10 +1455,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 				}
 				else{
 					if ($layoutData['label_position']=='left') {
-						$img = '<div style="float:left;height:'.$himg.'px;">' . graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], $width, $height, $layoutData['period'], '', true).'</div>';
+						$img = '<div style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' . graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], $width, $height, $layoutData['period'], '', true).'</div>';
 					}
 					elseif ($layoutData['label_position']=='right') {
-						$img = '<div style="float:right;height:'.$himg.'px;">' .graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], $width, $height, $layoutData['period'], '', true).'</div>';
+						$img = '<div style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' .graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], $width, $height, $layoutData['period'], '', true).'</div>';
 					}
 					else {
 						$img = graph_graphic_moduleevents ($layoutData['id_agent'], $layoutData['id_agente_modulo'], $width, $height, $layoutData['period'], '', true);
@@ -1515,6 +1523,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 			break;
 	}
 	
+	if($show_on_top){
+		$z_index = 10;
+	}
+	
 	echo '<div id="' . $id . '" class="' . $class . '" ' .
 		'style="z-index: ' .$z_index . ';' .
 			'position: absolute; ' .
@@ -1536,7 +1548,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$style .= "border-width: " . $border_width . "px; ";
 				$style .= "border-color: " . $border_color . "; ";
 				$style .= "background-color: " . $fill_color . "; ";
-				echo "<div style='" . $style . "'></div>";
+				echo "<div style='z-index:".$show_on_top_index.";" . $style . "'></div>";
 			}
 			else {
 				if (!empty($proportion)) {
@@ -1547,7 +1559,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$style .= "border-width: " . $border_width . "px; ";
 					$style .= "border-color: " . $border_color . "; ";
 					$style .= "background-color: " . $fill_color . "; ";
-					echo "<div style='" . $style . "'></div>";
+					echo "<div style='z-index:".$show_on_top_index.";" . $style . "'></div>";
 				}
 				else {
 					$style = "";
@@ -1557,7 +1569,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$style .= "border-width: " . $border_width . "px; ";
 					$style .= "border-color: " . $border_color . "; ";
 					$style .= "background-color: " . $fill_color . "; ";
-					echo "<div style='" . $style . "'></div>";
+					echo "<div style='z-index:".$show_on_top_index.";" . $style . "'></div>";
 				}
 			}
 			break;

pandora_console/include/functions_visual_map_editor.php

@@ -542,7 +542,13 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'<td align="left" style="">' . __('Show statistics') . '</td>
 				<td align="left" style="">' .
 				html_print_checkbox('show_statistics', 1, '', true) . '</td>';
-			
+				
+			$form_items['show_on_top_row'] = array();
+			$form_items['show_on_top_row']['items'] = array('group_item');
+			$form_items['show_on_top_row']['html'] = 
+				'<td align="left" style="">' . __('Always show on top') . '</td>
+				<td align="left" style="">' .
+				html_print_checkbox('show_on_top', 1, '', true) . '</td>';
 			
 			$form_items['module_graph_size_row'] = array();
 			$form_items['module_graph_size_row']['items'] = array('module_graph', 'datos');

pandora_console/pandoradb.sql

@@ -1365,6 +1365,7 @@ CREATE TABLE IF NOT EXISTS `tlayout_data` (
 	`show_statistics` tinyint(2) NOT NULL default '0',
 	`id_layout_linked_weight` int(10) NOT NULL default '0',
 	`element_group` int(10) NOT NULL default '0',
+	`show_on_top` tinyint(1) NOT NULL default '0',
 	PRIMARY KEY(`id`)
 ) ENGINE = InnoDB DEFAULT CHARSET=utf8;