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

This commit is contained in:
enriquecd 2017-10-23 18:54:57 +02:00
parent 906201a34c
commit ea51df8b20
7 changed files with 80 additions and 18 deletions

View File

@ -1231,6 +1231,7 @@ ALTER TABLE tlayout ADD `background_color` varchar(50) NOT NULL default '#FFF';
ALTER TABLE tlayout_data ADD `type_graph` varchar(50) NOT NULL default 'area';
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 `show_on_top` tinyint(1) NOT NULL default '0';
-- ---------------------------------------------------------------------
-- Table `tagent_custom_fields`

View File

@ -642,6 +642,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;
@ -1047,6 +1048,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");
@ -1176,6 +1180,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);
}
@ -1601,6 +1616,7 @@ function cleanFields(item) {
$("input[name='fill_color']").val('#ffffff');
$("input[name='line_width']").val(3);
$("input[name='line_color']").val('#000000');
$("input[name=show_on_top]").prop("checked", false);
$("#preview").empty();
@ -2517,8 +2533,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,
@ -2541,6 +2555,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) {
@ -2747,6 +2769,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) {
@ -3544,6 +3575,8 @@ function eventsBackground() {
if ((!is_opened_palette) && (autosave)) {
toggle_item_palette();
}
$("#show_on_top_row").css('display', 'none');
$("#show_on_top." + item).css('display', '');
});
}

View File

@ -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);

View File

@ -130,6 +130,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);
@ -431,6 +432,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') {
@ -474,6 +476,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;
}
@ -639,6 +644,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) {
@ -867,6 +873,7 @@ switch ($action) {
$values['id_layout_linked'] = $map_linked;
$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;

View File

@ -110,6 +110,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 = '';
@ -925,14 +933,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,
@ -952,14 +960,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,
@ -1005,7 +1013,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, '',
@ -1013,7 +1021,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, '',
@ -1031,7 +1039,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, '',
@ -1040,7 +1048,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,
@ -1094,10 +1102,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);
@ -1105,10 +1113,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);
@ -1165,6 +1173,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; ' .
@ -1186,7 +1198,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)) {
@ -1197,7 +1209,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 = "";
@ -1207,7 +1219,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;

View File

@ -459,7 +459,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');

View File

@ -1356,6 +1356,7 @@ CREATE TABLE IF NOT EXISTS `tlayout_data` (
`border_color` varchar(200) DEFAULT "",
`fill_color` varchar(200) DEFAULT "",
`show_statistics` tinyint(2) NOT NULL default '0',
`show_on_top` tinyint(1) NOT NULL default '0',
PRIMARY KEY(`id`)
) ENGINE = InnoDB DEFAULT CHARSET=utf8;