Visual console improvements - Edit Signes for builder, main creator / Main help modal window #110

pandora_console/general/alert_enterprise.php

@@ -42,6 +42,9 @@ switch ($tipo) {
     case "infomodal":
       echo "icono_info.png";
       break;
+    case "helpmodal":
+      echo "icono_info.png";
+	break;
     case "modulemodal":
       echo "icono_popup.png";
         break;
@@ -88,6 +91,13 @@ echo "'>
 
 switch ($tipo) {
 	
+	case "helpmodal":
+	
+	echo __("This is the online help for Pandora FMS console. This help is -in best cases- just a brief contextual help, not intented to teach you how to use Pandora FMS. Official documentation of Pandora FMS is about 900 pages, and you probably don't need to read it entirely, but sure, you should download it and take a look.<br><br>
+	<a href='https://pandorafms.org/en/docs/monitoring-documentation/' target='_blanck'>Download the official documentation</a>");
+	
+	break;
+	
 	case "noaccess":
 	
 	echo __('Access to this page is restricted to authorized users only, please contact system administrator if you need assistance. <br/> <br/>

pandora_console/general/header.php

@@ -273,7 +273,7 @@ config_check();
 				$table->data[0][3] = $maintenance_img;
 				
 				// Main help icon
-				$table->data[0][4] = ui_print_help_icon ("main_help", true, '', 'images/header_help.png');
+				$table->data[0][4] = '<a href="#" class="modalpopup" id="helpmodal"><img src="images/header_help.png""></a>';
 				
 				// Logout
 				$table->data[0][5] = '<a class="white" href="' . ui_get_full_url('index.php?bye=bye') . '">';

pandora_console/godmode/reporting/visual_console_builder.data.php

@@ -169,7 +169,7 @@ html_print_table($table);
 
 	echo '<div class="action-buttons" style="width: '.$table->width.'">';
 	if($action == 'new'){
-		html_print_submit_button ($textButtonSubmit, 'update_layout', true,
+		html_print_submit_button ($textButtonSubmit, 'update_layout', false,
 			'class="' . $classButtonSubmit . '"');
 	}
 	else{

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -195,8 +195,10 @@ function update_button_palette_callback() {
 			else {
 				$("#image_" + idItem).removeAttr('width');
 				$("#image_" + idItem).removeAttr('height');
-				$("#" + idItem).css('width', '');
-				$("#" + idItem).css('height', '');
+				$("#" + idItem +" img").css('width', '70px');
+				$("#" + idItem +" img").css('height', '70px');
+				$("#" + idItem).css('width', '70px');
+				$("#" + idItem).css('height', '70px');
 			}
 			break;
 		case 'percentile_bar':
@@ -237,8 +239,11 @@ function update_button_palette_callback() {
 			else {
 				$("#image_" + idItem).removeAttr('width');
 				$("#image_" + idItem).removeAttr('height');
-				$("#" + idItem).css('width', '');
-				$("#" + idItem).css('height', '');
+				$("#" + idItem).css('width', '70px');
+				$("#" + idItem).css('height', '70px');
+				
+				$("#" + idItem +" img").css('width', '70px');
+				$("#" + idItem +" img").css('height', '70px');
 			}
 			var image = values['image'] + ".png";
 			set_image("image", idItem, image);
@@ -1253,8 +1258,8 @@ function setModuleGraph(id_data) {
 			id_agente_modulo = data['id_agente_modulo'];
 			id_custom_graph = data['id_custom_graph'];
 			label = data['label'];
-			height = (data['height'] + 60);
-			width = (data['width'] + 60);
+			height = (data['height']);
+			width = (data['width']);
 			period = data['period'];
 			background_color = data['image'];
 
@@ -1291,7 +1296,15 @@ function setModuleGraph(id_data) {
 						$('#' + id_data).html(data['url']);
 					}
 					else {
-						$("#image_" + id_data).attr('src', data['url']);
+						if($("#module_row").css('display')!='none'){
+							$("#" + id_data + " img").attr('src', 'images/console/signes/module_graph.png');
+							$("#" + id_data + " img").css('width', $('#text-width_module_graph').val()+'px');
+							$("#" + id_data + " img").css('height', $('#text-height_module_graph').val()+'px');
+						}else{
+							$("#" + id_data + " img").attr('src', 'images/console/signes/custom_graph.png');
+							$("#" + id_data + " img").css('width', $('#text-width_module_graph').val()+'px');
+							$("#" + id_data + " img").css('height', $('#text-height_module_graph').val()+'px');	
+						}
 					}
 				}
 			});
@@ -1320,7 +1333,7 @@ function setModuleValue(id_data, process_simple_value, period) {
 		success: function (data) {
 			var currentValue = $("#text_" + id_data).html();
 			currentValue = currentValue.replace(/_VALUE_/gi, data.value);
-			$("#text_" + id_data).html(currentValue);
+			$("#text_" + id_data).html('Data value');
 		}
 	});
 }
@@ -1377,7 +1390,11 @@ function setPercentileBar(id_data, values) {
 				'width=' + width_percentile + '&mode=1&progress=' + percentile +
 				'&font=' + font + '&value_text=' + value_text + '&colorRGB=' + colorRGB;
 
-			$("#image_" + id_data).attr('src', img);
+			$("#"+  id_data).attr('src', img);
+			
+			$("#" + id_data + " img").attr('src', 'images/console/signes/percentil.png');
+			$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
+			$("#" + id_data + " img").css('height', '30px');
 		}
 	});
 }
@@ -1432,6 +1449,11 @@ function setPercentileBubble(id_data, values) {
 				'&font=' + font + '&value_text=' + value_text + '&colorRGB=' + colorRGB;
 
 			$("#image_" + id_data).attr('src', img);
+			
+			$("#" + id_data + " img").attr('src', 'images/console/signes/percentil_bubble.png');
+			$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
+			$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
+			
 		}
 	});
 }
@@ -2775,6 +2797,7 @@ function showPreviewStaticGraph(staticGraph) {
 
 				jQuery.each(data, function(i, line) {
 					$("#preview").append(line);
+					$('#preview > img').css({'max-width':'70px','max-height':'70px'});
 				});
 			}
 		});
@@ -2816,6 +2839,7 @@ function showPreviewIcon(icon) {
 				$("#preview")
 					.empty()
 					.append(data);
+				$('#preview > img').css({'max-width':'70px','max-height':'70px'});
 			}
 		});
 	}

pandora_console/godmode/reporting/visual_console_builder.wizard.php

@@ -137,7 +137,23 @@ $table->data["staticgraph_modulegraph"][1] .= '   ' .
 	__('Height') . ': ' .
 	html_print_input_text('height', 0, '', 5, 5, true);
 	
-	$fontf = array('comic sans ms' => 'comic sans ms');
+	  $fontf = array('andale mono,times' => 'Andale Mono',
+			 'arial,helvetica,sans-serif' => 'Arial',
+			 'arial black,avant garde' => 'Arial Black',
+			 'comic sans ms,sans-serif' => 'Comic Sans MS',
+			 'courier new,courier' => 'Courier New',
+			 'georgia,palatino' => 'Georgia',
+			 'helvetica,impact' => 'Helvetica',
+			 'impact,chicago' => 'Impact',
+			 'symbol' => 'Symbol',
+			 'tahoma,arial,helvetica,sans-serif' => 'Tahoma',
+			 'terminal,monaco' => 'Terminal',
+			 'times new roman,times' => 'Times New Roman',
+			 'trebuchet ms,geneva' => 'Trebuchet MS',
+			 'verdana,geneva' => 'Verdana',
+			 'Webdings' => 'Webdings',
+			 'Wingdings'  => 'Wingdings' 
+	 	 );
 	
 	$table->rowstyle['all_9'] = 'display: none;';
 	$table->data['all_9'][0] = __('Font');

pandora_console/include/functions_visual_map.php

@@ -750,8 +750,6 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$percentile = 100;
 			break;
 		case MODULE_GRAPH:
-			$width	+= 60;
-			$height	+= 60;
 			if (!empty($proportion)) {
 				$width =
 					((integer)($proportion['proportion_width'] * $width));
@@ -771,11 +769,23 @@ function visual_map_print_item($mode = "read", $layoutData,
 			$only_image = !$graph_javascript || $isExternalLink;
 			if ($layoutData['id_custom_graph'] != 0) {
 				// Show only avg on the visual console
-				$img = custom_graphs_print(
+				if(get_parameter('action') == 'edit'){
+								
+				$img =  '<img src="images/console/signes/custom_graph.png" style="width:'.$width.'px;height:'.$height.'px;">';
+									
+					}
+				else{
+			
+					$img = custom_graphs_print(
 					$layoutData['id_custom_graph'], $height, $width,
 					$period, null, true, 0, false, $layoutData['image'],
 					array(), '', array(), array(), true,
 					false, false, true, 1, false, true);
+					
+					}
+				
+				
+				
 			}
 			else {
 				if ($isExternalLink)
@@ -783,11 +793,20 @@ function visual_map_print_item($mode = "read", $layoutData,
 				else
 					$homeurl = '';
 				
+				if(get_parameter('action') == 'edit'){
+								
+				$img =  '<img src="images/console/signes/module_graph.png" style="width:'.$width.'px;height:'.$height.'px;">';
+									
+			 		}
+			else{
+			
 				$img =  grafico_modulo_sparse($id_module, $period, 0,$width,$height,
 									'',null,
 									false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
 									'', false, false, false, $layoutData['image'], null, true, false,$type_graph);
-			}
+					
+					}
+		      }
 			
 			//Restore db connection
 			if ($layoutData['id_metaconsole'] != 0) {
@@ -903,6 +922,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 						$img_style_title .= " <br>" . __("Last value: ") .
 							$value;
 					}
+					
+					if(get_parameter('action') == 'edit'){
+					$img_style_title = '';
+					}
 				}
 				
 				if (!empty($proportion)) {
@@ -937,6 +960,8 @@ function visual_map_print_item($mode = "read", $layoutData,
 					echo html_print_image($img, true,
 						array("class" => "image",
 							"id" => "image_" . $id,
+							"width" => "70px",
+							"height" => "70px",
 							"title" => $img_style_title,
 							"style" => $borderStyle), false,
 							false, false, $isExternalLink);
@@ -947,6 +972,50 @@ function visual_map_print_item($mode = "read", $layoutData,
 			break;
 		
 		case PERCENTILE_BAR:
+		$progress_bar_heigh = 15;
+		if (!empty($proportion)) {
+			if ($width != 0) {
+				$width = (integer)($proportion['proportion_width'] * $width);
+			}
+			else {
+				$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
+			}
+
+			if ($height != 0) {
+				$height = (integer)($proportion['proportion_height'] * $height);
+				$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
+			}
+			else {
+				$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
+			}
+		}
+		echo io_safe_output($text) . '<br />';
+		
+		ob_start();
+		if ($type == PERCENTILE_BUBBLE) {
+			echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus);
+		}
+		else {
+			echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
+		}
+		$img = ob_get_clean();
+		
+		
+		if(get_parameter('action') == 'edit'){
+		
+		$img =  '<img src="images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;">';
+			
+		}
+		else{
+			
+		$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
+		
+		}
+		
+		echo $img;			
+		
+		break;
+		
 		case PERCENTILE_BUBBLE:
 		 	$progress_bar_heigh = 15;
 			if (!empty($proportion)) {
@@ -975,8 +1044,21 @@ function visual_map_print_item($mode = "read", $layoutData,
 				echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
 			}
 			$img = ob_get_clean();
+			
+			
+			if(get_parameter('action') == 'edit'){
+			
+			$img =  '<img src="images/console/signes/percentil_bubble.png" style="width:'.$width.'px;height:'.$width.'px;">';
+				
+			}
+			else{
+				
 			$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
-			echo $img;
+			
+			}
+			
+			echo $img;			
+			
 			break;
 		
 		case MODULE_GRAPH:
@@ -1032,7 +1114,18 @@ function visual_map_print_item($mode = "read", $layoutData,
 			
 			$io_safe_output_text = str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
 			
+			
+			
+			if(get_parameter('action') == 'edit'){
+							
+			echo 'Data value';
+								
+				}
+			else{
+		
 			echo $io_safe_output_text;
+				
+				}
 			
 			
 			//Restore db connection
@@ -1078,7 +1171,8 @@ function visual_map_print_item($mode = "read", $layoutData,
 							false, false, $isExternalLink);
 				else
 					echo html_print_image($img, true,
-						array("class" => "image", "id" => "image_" . $id),
+						array("class" => "image", "id" => "image_" . $id,"width" => "70px",
+						"70px" => "$height"),
 						false, false, false, $isExternalLink);
 				echo '<br />';
 			}

pandora_console/include/javascript/jquery.pandora.js

@@ -72,6 +72,22 @@ $(document).ready (function () {
 			);
 		return false;
 	});
+	
+	$("a.modalpopup").click (function () {
+		$('body').append( "<div id='opacidad' style='position:fixed;background:black;opacity:0.6;z-index:1'></div>" );
+			jQuery.get ("ajax.php",
+			{"page": "general/alert_enterprise",
+			 "message":$(this).attr("id")},
+				function (data, status) {
+					$("#alert_messages").hide ()
+						.empty ()
+						.append (data)
+						.show ();
+				},
+				"html"
+			);
+		return false;
+	});
 
 // Creacion de ventana modal y botones
 

pandora_console/operation/visual_console/render_view.php

@@ -276,5 +276,12 @@ $ignored_params['refr'] = '';
 				$('#hidden-vc_refr').val($('#refr option:selected').val());
 			});
 		}
+		
+		
+		$(".module_graph").each(function(){
+		left =	parseInt($(this).css("left")) + 150;
+				$(this).css('left', left);
+		});
+		
 	});
 </script>