From f2ad2b5ed07a66ab592790bdf116f1db00389d2c Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Tue, 21 Feb 2012 14:05:57 +0000
Subject: [PATCH] 2012-02-21  Miguel de Dios  <miguel.dedios@artica.es>

	* include/functions_agents.php,
	godmode/agentes/module_manager_editor_common.php: cleaned source code style.

	* include/styles/dialog.css: fixed the bad comment lines.

	* include/styles/pandora.css: fixed the bad comment lines and added the
	style for the button to save in visual console editor.

	* images/file.disabled.png: added image file for the button save in the
	visual console editor.

	* images/config.disabled.png: fixed the image, now the side is equal to
	enabled image.

	* include/functions_visual_map.php,
	include/ajax/visual_console_builder.ajax.php,
	godmode/reporting/visual_console_builder.editor.js,
	godmode/reporting/visual_console_builder.editor.php: added feature the save
	the movements of items when user want, and added feature the snap to grid
	the items in visual map, fixed the resize background (in some oldcases
	didn't run fine).



git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@5627 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
---
 pandora_console/ChangeLog                     |  24 +
 .../agentes/module_manager_editor_common.php  |   4 +-
 .../visual_console_builder.editor.js          | 457 +++++++++++-------
 .../visual_console_builder.editor.php         |  23 +-
 pandora_console/images/config.disabled.png    | Bin 314 -> 418 bytes
 pandora_console/images/file.disabled.png      | Bin 0 -> 422 bytes
 .../ajax/visual_console_builder.ajax.php      |  16 +-
 pandora_console/include/functions_agents.php  |   2 +-
 .../include/functions_visual_map.php          |  40 +-
 pandora_console/include/styles/dialog.css     |   2 +-
 pandora_console/include/styles/pandora.css    |  17 +-
 11 files changed, 376 insertions(+), 209 deletions(-)
 create mode 100644 pandora_console/images/file.disabled.png

diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog
index bc8394e852..e27fabbac2 100644
--- a/pandora_console/ChangeLog
+++ b/pandora_console/ChangeLog
@@ -1,3 +1,27 @@
+2012-02-21  Miguel de Dios  <miguel.dedios@artica.es>
+
+	* include/functions_agents.php,
+	godmode/agentes/module_manager_editor_common.php: cleaned source code style.
+
+	* include/styles/dialog.css: fixed the bad comment lines.
+	
+	* include/styles/pandora.css: fixed the bad comment lines and added the
+	style for the button to save in visual console editor.
+	
+	* images/file.disabled.png: added image file for the button save in the
+	visual console editor.
+	
+	* images/config.disabled.png: fixed the image, now the side is equal to
+	enabled image.
+	
+	* include/functions_visual_map.php,
+	include/ajax/visual_console_builder.ajax.php,
+	godmode/reporting/visual_console_builder.editor.js,
+	godmode/reporting/visual_console_builder.editor.php: added feature the save
+	the movements of items when user want, and added feature the snap to grid
+	the items in visual map, fixed the resize background (in some oldcases
+	didn't run fine).
+
 2012-02-21  Junichi Satoh  <junichi@rworks.jp>
 
 	* mobile/operation/agents/view_alerts.php: Fixed sql query error.
diff --git a/pandora_console/godmode/agentes/module_manager_editor_common.php b/pandora_console/godmode/agentes/module_manager_editor_common.php
index 89eb7cd7f0..d4795ba010 100644
--- a/pandora_console/godmode/agentes/module_manager_editor_common.php
+++ b/pandora_console/godmode/agentes/module_manager_editor_common.php
@@ -293,7 +293,7 @@ $(document).ready (function () {
 	$("#right").click (function () {
 		jQuery.each($("select[name='id_tag_available[]'] option:selected"), function (key, value) {
 			tag_name = $(value).html();
-			if (tag_name != <?php echo "'".__('None')."'"; ?>){
+			if (tag_name != <?php echo "'".__('None')."'"; ?>) {
 				id_tag = $(value).attr('value');
 				$("select[name='id_tag_selected[]']").append($("<option></option>").val(id_tag).html('<i>' + tag_name + '</i>'));
 				$("#id_tag_available").find("option[value='" + id_tag + "']").remove();
@@ -303,7 +303,7 @@ $(document).ready (function () {
 	$("#left").click (function () {
 		jQuery.each($("select[name='id_tag_selected[]'] option:selected"), function (key, value) {
 				tag_name = $(value).html();
-				if (tag_name != <?php echo "'".__('None')."'"; ?>){
+				if (tag_name != <?php echo "'".__('None')."'"; ?>) {
 					id_tag = $(value).attr('value');
 					$("select[name='id_tag_available[]']").append($("<option>").val(id_tag).html('<i>' + tag_name + '</i>'));
 					$("#id_tag_selected").find("option[value='" + id_tag + "']").remove();
diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js
index 567ce80002..1ecb2b7b1b 100644
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.js
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js
@@ -16,7 +16,12 @@ var openPropertiesPanel = false;
 var idItem = 0;
 var selectedItem = null;
 var lines = Array();
-var toolbuttonActive = null
+var toolbuttonActive = null;
+var autosave = true;
+var list_actions_pending_save = [];
+var temp_id_item = 0;
+
+var SIZE_GRID = 16; //Const the size (for width and height) of grid.
 
 function showAdvanceOptions(close) {
 	if ($("#advance_options").css('display') == 'none') {
@@ -141,9 +146,9 @@ function updateAction() {
 				success: function (data) {
 					$("#background_img").attr('src', data);
 				}
-			});	
-		
-			var idElement = 0;
+			});
+			
+			idElement = 0;
 			break;
 		case 'static_graph':
 			$("#text_" + idItem).html(values['label']);
@@ -400,7 +405,6 @@ function actionClick() {
 	
 	if (creationItem != null) {
 		//Create a item
-		
 		activeToolboxButton(creationItem, true);
 		item = creationItem;
 		$("#button_update_row").css('display', 'none');
@@ -410,7 +414,6 @@ function actionClick() {
 	}
 	else if (selectedItem != null) {
 		//Edit a item
-		
 		item = selectedItem;
 		toolbuttonActive = item;
 		$("#button_create_row").css('display', 'none');
@@ -484,40 +487,25 @@ function loadFieldsFromDB(item) {
 		});	
 }
 
-function setOriginalSizeBackground() {
-	$.ajax({
-		type: "POST",
-		url: "ajax.php",
-		data: "page=godmode/reporting/visual_console_builder.editor&get_original_size_background=1&background=" + $("#background_img").attr('src'),
-		async: false,
-		dataType: "json",
-		success: function(data) {
-			var values = {};
-			values['width'] = data[0];
-			values['height'] = data[1];
-			
-			updateDB('background', 0, values);
-		}
-	});
-	
-	actionClick();
-}
-
 function setAspectRatioBackground(side) {
-	$.ajax({
-		type: "POST",
-		url: "ajax.php",
-		data: "page=godmode/reporting/visual_console_builder.editor&get_original_size_background=1&background=" + $("#background_img").attr('src'),
+	parameter = Array();
+	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
+	parameter.push ({name: "action", value: "get_original_size_background"});
+	parameter.push ({name: "background", value: $("#background_img").attr('src')});
+	
+	jQuery.ajax({
 		async: false,
-		dataType: "json",
-		success: function(data){
+		url: "ajax.php",
+		data: parameter,
+		type: "POST",
+		dataType: 'json',
+		success: function (data) {
 			old_width = parseInt($("#background").css('width').replace('px', ''));
 			old_height = parseInt($("#background").css('height').replace('px', ''));
 			
 			img_width = data[0];
 			img_height = data[1];
 			
-			
 			if (side == 'width') {
 				ratio = old_width / img_width;
 				
@@ -530,14 +518,18 @@ function setAspectRatioBackground(side) {
 				width = img_width * ratio;
 				height = old_height;
 			}
+			else if (side == 'original') {
+				width = img_width;
+				height = img_height;
+			}
 			
 			var values = {};
 			values['width'] = width;
 			values['height'] = height;
 			
-			
-			
 			updateDB('background', 0, values);
+			
+			move_elements_resize(old_width, old_height, width, height);
 		}
 	});
 	
@@ -707,6 +699,7 @@ function getModuleValue(id_data) {
 
 function getPercentileBar(id_data) {
 	var parameter = Array();
+	var percentile = 0;
 	
 	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
 	parameter.push ({name: "action", value: "get_module_value"});
@@ -745,9 +738,9 @@ function getPercentileBar(id_data) {
 	
 	
 	if ( max_percentile > 0)
-		var percentile = module_value / max_percentile * 100;
+		percentile = module_value / max_percentile * 100;
 	else
-		var percentile = 100;
+		percentile = 100;
 	
 	var img = 'include/graphs/fgraph.php?homeurl=../../&graph_type=progressbar&height=15&' + 
 		'width=' + width_percentile + '&mode=1&progress=' + percentile + '&font=' + font;
@@ -802,15 +795,19 @@ function visual_map_get_color_line_status(id) {
 }
 
 function createItem(type, values, id_data) {
+	var sizeStyle = '';
+	var imageSize = '';
+	var item = null;
+	
 	switch (type) {
 		case 'static_graph':
 			if ((values['width'] == 0) && (values['height'] == 0)) {
-				var sizeStyle = '';
-				var imageSize = '';
+				sizeStyle = '';
+				imageSize = '';
 			}
 			else {
-				var sizeStyle = 'width: ' + values['width']  + 'px; height: ' + values['height'] + 'px;';
-				var imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
+				sizeStyle = 'width: ' + values['width']  + 'px; height: ' + values['height'] + 'px;';
+				imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
 			}
 
 			var element_status= null;
@@ -848,56 +845,58 @@ function createItem(type, values, id_data) {
 				}
 			});
 			
-			var item = $('<div id="' + id_data + '" class="item static_graph" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data
+				+ '" class="item static_graph" '
+				+ 'style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 				'<img id="image_' + id_data + '" class="image" src="' + img_src + '" ' + imageSize + ' /><br />' +
 				'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span>' + 
 				'</div><input id="hidden-status_' + id_data + '" type="hidden" value="' + element_status + '" name="status_' + id_data + '">'
 			);
 			break;
 		case 'percentile_bar':
-			var sizeStyle = '';
-			var imageSize = '';
+			sizeStyle = '';
+			imageSize = '';
 			
-			var item = $('<div id="' + id_data + '" class="item percentile_bar" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data + '" class="item percentile_bar" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 					'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span><br />' + 
 					'<img class="image" id="image_' + id_data + '" src="' + getPercentileBar(id_data)  + '" />' +
 					'</div>'
 			);
 			break;
 		case 'module_graph':
-			var sizeStyle = '';
-			var imageSize = '';
+			sizeStyle = '';
+			imageSize = '';
 			
-			var item = $('<div id="' + id_data + '" class="item module_graph" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data + '" class="item module_graph" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 					'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span><br />' +
 					'<img class="image" id="image_' + id_data + '" src="' + getModuleGraph(id_data)  + '" style="border:1px solid #808080;" />' +
 				'</div>'
 			);
 			break;
 		case 'simple_value':
-			var sizeStyle = '';
-			var imageSize = '';
+			sizeStyle = '';
+			imageSize = '';
 			
-			var item = $('<div id="' + id_data + '" class="item simple_value" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data + '" class="item simple_value" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 					'<span id="text_' + id_data + '" class="text"> ' + values['label'] + '</span>' +
 					'<strong>' + getModuleValue(id_data) + '</strong>' +
 				'</div>'
 			);
 			break;
 		case 'label':
-			var item = $('<div id="' + id_data + '" class="item label" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data + '" class="item label" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 					'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span>' + 
 					'</div>'
 				);
 			break;
 		case 'icon':
 			if ((values['width'] == 0) && (values['height'] == 0)) {
-				var sizeStyle = '';
-				var imageSize = '';
+				sizeStyle = '';
+				imageSize = '';
 			}
 			else {
-				var sizeStyle = 'width: ' + values['width']  + 'px; height: ' + values['height'] + 'px;';
-				var imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
+				sizeStyle = 'width: ' + values['width']  + 'px; height: ' + values['height'] + 'px;';
+				imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
 			}
 			
 			var img_src= null;
@@ -917,8 +916,8 @@ function createItem(type, values, id_data) {
 					img_src = data;
 				}
 			});
-			
-			var item = $('<div id="' + id_data + '" class="item icon" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+
+			item = $('<div id="' + id_data + '" class="item icon" style="left: 0px; top: 0px; color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
 				'<img id="image_' + id_data + '" class="image" src="' + img_src + '" ' + imageSize + ' /><br />' + 
 				'</div>'
 			);
@@ -944,6 +943,8 @@ function addItemSelectParents(id_data, text) {
 }
 
 function insertDB(type, values) {
+	var id = null;
+	
 	parameter = Array();
 	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
 	parameter.push ({name: "action", value: "insert"});
@@ -962,8 +963,9 @@ function insertDB(type, values) {
 		success: function (data)
 			{
 				if (data['correct']) {
-					createItem(type, values, data['id_data']);
-					addItemSelectParents(data['id_data'], data['text']);
+					id = data['id_data'];
+					createItem(type, values, id);
+					addItemSelectParents(id, data['text']);
 					eventsItems();
 				}
 				else {
@@ -973,7 +975,71 @@ function insertDB(type, values) {
 		});
 }
 
+function updateDB_visual(type, idElement , values, event, top, left) {
+	switch (type) {
+		case 'module_graph':
+			$("#image_" + idElement).attr("src", getModuleGraph(idElement));
+		case 'static_graph':
+		case 'percentile_bar':
+		case 'simple_value':
+		case 'label':
+		case 'icon':
+			if ((typeof(values['mov_left']) != 'undefined') &&
+					(typeof(values['mov_top']) != 'undefined')) {
+				$("#" + idElement).css('top', '0px').css('margin-top', top + 'px');
+				$("#" + idElement).css('left', '0px').css('margin-left', left + 'px');
+			}
+			else if ((typeof(values['absolute_left']) != 'undefined') &&
+					(typeof(values['absolute_top']) != 'undefined')) {
+				$("#" + idElement).css('top', '0px').css('margin-top', top + 'px');
+				$("#" + idElement).css('left', '0px').css('margin-left', left + 'px');
+			}
+			$("#" + idElement).css('color', values['label_color']);
+			found = false;
+			jQuery.each(lines, function(i, line) {
+				if (lines[i]['id'] == idElement) {
+					found = true;
+					if (values['parent'] == 0) {
+						lines.splice(i);
+					}
+					else {
+						if ((typeof(values['mov_left']) == 'undefined') &&
+							(typeof(values['mov_top']) == 'undefined') && 
+							(typeof(values['absolute_left']) == 'undefined') &&
+							(typeof(values['absolute_top']) == 'undefined')) {
+							lines[i]['node_begin'] = values['parent'];
+						}
+					}
+				}
+			});
+			
+			if (!found) {
+				var line = {"id": idElement,
+					"node_begin":  values['parent'],
+					"node_end": idElement,
+					"color": visual_map_get_color_line_status(idElement) };
+				lines.push(line);
+			}
+			
+			refresh_lines(lines, 'background');
+			break;
+		case 'background':
+			if(values['width'] == '0' || values['height'] == '0'){
+				$("#background").css('width', $("#hidden-background_width").val() + 'px');
+				$("#background").css('height', $("#hidden-background_height").val() + 'px');
+			}
+			else {
+				$("#background").css('width', values['width'] + 'px');
+				$("#background").css('height', values['height'] + 'px');
+			}
+			break;
+	}
+}
+
 function updateDB(type, idElement , values, event) {
+	var top = 0;
+	var left = 0;
+	
 	action = "update";
 	
 	//Check if the event parameter in function is passed in the call.
@@ -1001,16 +1067,16 @@ function updateDB(type, idElement , values, event) {
 	
 	if ((typeof(values['mov_left']) != 'undefined') &&
 		(typeof(values['mov_top']) != 'undefined')) {
-		var top = parseInt($("#" + idElement).css('margin-top').replace('px', ''));
-		var left = parseInt($("#" + idElement).css('margin-left').replace('px', ''));
+		top = parseInt($("#" + idElement).css('margin-top').replace('px', ''));
+		left = parseInt($("#" + idElement).css('margin-left').replace('px', ''));
 		
 		top = top + parseInt(values['mov_top']);
 		left = left + parseInt(values['mov_left']);
 	}
 	else if ((typeof(values['absolute_left']) != 'undefined') &&
 		(typeof(values['absolute_top']) != 'undefined')) {
-		var top = values['absolute_top'];
-		var left = values['absolute_left'];
+		top = values['absolute_top'];
+		left = values['absolute_left'];
 	}
 	
 	if ((typeof(top) != 'undefined') && (typeof(left) != 'undefined')) {
@@ -1018,73 +1084,24 @@ function updateDB(type, idElement , values, event) {
 		parameter.push ({name: 'left', value: left});
 	}
 	
-	jQuery.ajax({
-		url: "ajax.php",
-		data: parameter,
-		type: "POST",
-		dataType: 'text',
-		success: function (data)
-			{
-				switch (type) {
-					case 'module_graph':
-						$("#image_" + idElement).attr("src", getModuleGraph(idElement));
-					case 'static_graph':
-					case 'percentile_bar':
-					case 'simple_value':
-					case 'label':
-					case 'icon':
-						if ((typeof(values['mov_left']) != 'undefined') &&
-								(typeof(values['mov_top']) != 'undefined')) {
-							$("#" + idElement).css('top', '0px').css('margin-top', top + 'px');
-							$("#" + idElement).css('left', '0px').css('margin-left', left + 'px');
-						}
-						else if ((typeof(values['absolute_left']) != 'undefined') &&
-								(typeof(values['absolute_top']) != 'undefined')) {
-							$("#" + idElement).css('top', '0px').css('margin-top', top + 'px');
-							$("#" + idElement).css('left', '0px').css('margin-left', left + 'px');
-						}
-						$("#" + idElement).css('color', values['label_color']);
-						found = false;
-						jQuery.each(lines, function(i, line) {
-							if (lines[i]['id'] == idElement) {
-								found = true;
-								if (values['parent'] == 0) {
-									lines.splice(i);
-								}
-								else {
-									if ((typeof(values['mov_left']) == 'undefined') &&
-										(typeof(values['mov_top']) == 'undefined') && 
-										(typeof(values['absolute_left']) == 'undefined') &&
-										(typeof(values['absolute_top']) == 'undefined')) {
-										lines[i]['node_begin'] = values['parent'];
-									}
-								}
-							}
-						});
-						
-						if (!found) {
-							var line = {"id": idElement,
-									"node_begin":  values['parent'],
-									"node_end": idElement,
-									"color": visual_map_get_color_line_status(idElement) };
-							lines.push(line);
-						}
-						
-						refresh_lines(lines, 'background');
-						break;
-					case 'background':
-						if(values['width'] == '0' || values['height'] == '0'){
-							$("#background").css('width', $("#hidden-background_width").val() + 'px');
-							$("#background").css('height', $("#hidden-background_height").val() + 'px');
-						}
-						else {
-							$("#background").css('width', values['width'] + 'px');
-							$("#background").css('height', values['height'] + 'px');
-						}
-						break;
+	success_update = false;
+	if (!autosave) {
+		list_actions_pending_save.push(parameter);
+		//At the moment for to show correctly.
+		updateDB_visual(type, idElement , values, event, top, left);
+	}
+	else {
+		jQuery.ajax({
+			url: "ajax.php",
+			data: parameter,
+			type: "POST",
+			dataType: 'text',
+			success: function (data)
+				{
+					updateDB_visual(type, idElement , values, event, top, left);
 				}
-			}
-		});
+			});
+	}
 }
 
 function deleteDB(idElement) {
@@ -1125,13 +1142,9 @@ function deleteDB(idElement) {
 function activeToolboxButton(id, active) {
 	if (active) {
 		$("input." + id + "[name=button_toolbox2]").removeAttr('disabled');
-//		$("#" + id).attr('class', 'button_toolbox');
-//		$(".label", $("#" + id)).css('color','#000000');
 	}
 	else {
 		$("input." + id + "[name=button_toolbox2]").attr('disabled', 'disabled');
-//		$("#" + id).attr('class', 'button_toolbox disabled');
-//		$(".label", $("#" + id)).css('color','#aaaaaa');
 	}
 }
 
@@ -1143,10 +1156,15 @@ function deleteItem() {
 }
 
 /**
- * All events in the visual map, resize map, click item, double click, drag and
+ * Events in the visual map, click item, double click, drag and
  * drop.
  */
-function eventsItems() {
+function eventsItems(drag) {
+	if (typeof(drag) == 'undefined') {
+		drag = false;
+	}
+	
+	
 	$('.item').unbind('click');
 	$('.item').unbind('dragstop');
 	$('.item').unbind('dragstart');
@@ -1215,12 +1233,12 @@ function eventsItems() {
 	//Double click in the item
 	$('.item').bind('dblclick', function(event, ui) {
 		event.stopPropagation();
-		if (!openPropertiesPanel) {
+		if ((!openPropertiesPanel) && (autosave)) {
 			actionClick();
 		}
 	});
 	
-	$(".item").draggable();
+	$(".item").draggable({grid: drag});
 	
 	$('.item').bind('dragstart', function(event, ui) {
 		event.stopPropagation();
@@ -1279,41 +1297,16 @@ function eventsItems() {
 		
 		var values = {};
 		
-		values['mov_left'] = ui.position.left; 
+		values['mov_left'] = ui.position.left;
 		values['mov_top'] = ui.position.top; 
 		
 		updateDB(selectedItem, idItem, values, 'dragstop');
 	});
 }
 
-function move_elements_resize(original_width, original_height, width, height) {
-	jQuery.each($(".item"), function(key, value) {
-		item = value;
-		idItem = $(item).attr('id');
-		classItem = $(item).attr('class').replace('item', '')
-			.replace('ui-draggable', '').replace(/^\s+/g,'').replace(/\s+$/g,'')
-		
-		old_height = parseInt($(item).css('margin-top').replace('px', ''));
-		old_width = parseInt($(item).css('margin-left').replace('px', ''));
-		
-		ratio_width =  width / original_width;
-		ratio_height =  height / original_height;
-		
-		new_height = old_height * ratio_height;
-		new_width = old_width * ratio_width;
-		
-		//$(item).css('margin-top', new_height);
-		//$(item).css('margin-left', new_width);
-		
-		var values = {};
-		
-		values['absolute_left'] = new_width; 
-		values['absolute_top'] = new_height; 
-		
-		updateDB(classItem, idItem, values, "resizestop");
-	});
-}
-
+/**
+ * Events for the background (click, resize and doubleclick).
+ */
 function eventsBackground() {
 	$("#background").resizable();
 	
@@ -1364,18 +1357,44 @@ function eventsBackground() {
 	
 	$('#background').bind('dblclick', function(event, ui) {
 		event.stopPropagation();
-		if (!openPropertiesPanel) {
+		if ((!openPropertiesPanel) && (autosave)) {
 			actionClick();
 		}
 	});
 }
 
+function move_elements_resize(original_width, original_height, width, height) {
+	jQuery.each($(".item"), function(key, value) {
+		item = value;
+		idItem = $(item).attr('id');
+		classItem = $(item).attr('class').replace('item', '')
+			.replace('ui-draggable', '').replace('ui-draggable-disabled', '')
+			.replace(/^\s+/g,'').replace(/\s+$/g,'');
+		
+		old_height = parseInt($(item).css('margin-top').replace('px', ''));
+		old_width = parseInt($(item).css('margin-left').replace('px', ''));
+		
+		ratio_width =  width / original_width;
+		ratio_height =  height / original_height;
+		
+		new_height = old_height * ratio_height;
+		new_width = old_width * ratio_width;
+		
+		var values = {};
+		
+		values['absolute_left'] = new_width; 
+		values['absolute_top'] = new_height; 
+		
+		updateDB(classItem, idItem, values);
+	});
+}
+
 function unselectAll() {
 	$("#background").css('border', '2px black solid');
 	$(".item").css('border', '');
 }
 
-function click2(id) {
+function click_button_toolbox(id) {
 	switch (id) {
 		case 'static_graph':
 			toolbuttonActive = creationItem = 'static_graph';
@@ -1411,6 +1430,78 @@ function click2(id) {
 		case 'show_grid':
 			showGrid();
 			break;
+		case 'auto_save':
+			if (autosave) {
+				activeToolboxButton('save', true);
+				autosave = false;
+				
+				//Disable all toolbox buttons.
+				//Because when it is not autosave only trace the movements
+				//the other actions need to contant with the apache server.
+				//And it is necesary to re-code more parts of code to change
+				//this method.
+				activeToolboxButton('static_graph', false);
+				activeToolboxButton('percentile_bar', false);
+				activeToolboxButton('module_graph', false);
+				activeToolboxButton('simple_value', false);
+				activeToolboxButton('label', false);
+				activeToolboxButton('icon', false);
+				
+				activeToolboxButton('edit_item', false);
+				activeToolboxButton('delete_item', false);
+				activeToolboxButton('show_grid', false);
+			}
+			else {
+				activeToolboxButton('save', false);
+				autosave = true;
+				
+				//Reactive the buttons.
+				
+				if ((selectedItem != 'background') && (selectedItem != null)) {
+					activeToolboxButton('delete_item', true);
+				}
+				if (selectedItem == 'background') {
+					activeToolboxButton('show_grid', true);
+				}
+				if (selectedItem != null) {
+					activeToolboxButton('edit_item', true);
+				}
+				
+				activeToolboxButton('static_graph', true);
+				activeToolboxButton('percentile_bar', true);
+				activeToolboxButton('module_graph', true);
+				activeToolboxButton('simple_value', true);
+				activeToolboxButton('label', true);
+				activeToolboxButton('icon', true);
+			}
+			break;
+		case 'save':
+			status = true;
+			activeToolboxButton('save', false);
+			jQuery.each(list_actions_pending_save, function(key, action_pending_save) {
+				jQuery.ajax ({
+					type: 'POST',
+					url: action="ajax.php",
+					data: action_pending_save,
+					async: false,
+					dataType: 'json',
+					timeout: 10000,
+					success: function (data) {
+						if (data == '0') {
+							status = false;
+						}
+					}
+				});
+			});
+			
+			if (status) {
+				alert($('#hack_translation_correct_save').html());
+			}
+			else {
+				alert($('#hack_translation_incorrect_save').html());	
+			}
+			activeToolboxButton('save', true);
+			break;
 	}
 }
 
@@ -1432,7 +1523,6 @@ function showPreviewStaticGraph(staticGraph) {
 	if (staticGraph != '') {
 		imgBase = "images/console/icons/" + staticGraph;
 		
-		var img_src= null;
 		var parameter = Array();
 		parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
 		parameter.push ({name: "get_image_path_status", value: "1"});
@@ -1485,9 +1575,36 @@ function showGrid() {
 		$("#background_img").css('opacity', '0.55');
 		$("#background_img").css('filter', 'alpha(opacity=55)');		
 		$("#background_grid").css('background', 'url("images/console/background/white_boxed.jpg")');
-	}else{
+		
+		//Snap to grid all elements.
+		jQuery.each($(".item"), function(key, value) {
+			item = value;
+			idItem = $(item).attr('id');
+			classItem = $(item).attr('class').replace('item', '')
+				.replace('ui-draggable', '').replace('ui-draggable-disabled', '')
+				.replace(/^\s+/g,'').replace(/\s+$/g,'');
+			
+			pos_y = parseInt($(item).css('margin-top').replace('px', ''));
+			pos_x = parseInt($(item).css('margin-left').replace('px', ''));
+			
+			pos_y = Math.floor(pos_y / SIZE_GRID) * SIZE_GRID;
+			pos_x = Math.floor(pos_x / SIZE_GRID) * SIZE_GRID;
+			
+			var values = {};
+			
+			values['absolute_left'] = pos_x; 
+			values['absolute_top'] = pos_y; 
+			
+			updateDB(classItem, idItem, values);
+		});
+		
+		eventsItems([SIZE_GRID, SIZE_GRID]);
+	}
+	else{
 		$("#background_grid").css('display', 'none');	
 		$("#background_img").css('opacity', '1');
 		$("#background_img").css('filter', 'alpha(opacity=100)');
+		
+		eventsItems();
 	}
 }
diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.php b/pandora_console/godmode/reporting/visual_console_builder.editor.php
index 6931d1a28c..47d79ad617 100644
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.php
@@ -27,21 +27,6 @@ if (! check_acl ($config['id_user'], 0, "IW")) {
 require_once('godmode/reporting/visual_console_builder.constans.php');
 require_once ('include/functions_visual_map.php');
 
-if (is_ajax ()) {
-	$get_original_size_background = get_parameter('get_original_size_background', false);
-	
-	if ($get_original_size_background) {
-		$background = get_parameter('background', '');
-		$replace = strlen($config["homeurl"] . '/');
-		if (substr($background, 0, $replace) == $config["homeurl"] . '/')
-			$size = getimagesize(substr($background, $replace));
-		else
-			$size = getimagesize($background);
-		echo json_encode($size);
-		return;
-	}
-}
-
 //Arrays for select box.
 $backgrounds_list = list_files('images/console/background/', "jpg", 1, 0);
 $backgrounds_list = array_merge($backgrounds_list, list_files ('images/console/background/', "png", 1, 0));
@@ -68,6 +53,9 @@ echo '<div id="editor" style="margin-top: -10px;">';
 		visual_map_print_button_editor('label', __('Label'), 'left', false, 'label_min', true);
 		visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
 		
+		visual_map_print_button_editor('save', __('Save'), 'right', true, 'save_min', true);
+		$text_autosave = __('Auto Save') . html_print_checkbox('auto_save', 0, true, true, false, "click_button_toolbox('auto_save');");
+		visual_map_print_item_toolbox('auto_save', $text_autosave, 'right');
 		visual_map_print_button_editor('show_grid', __('Show grid'), 'right', true, 'grid_min', true);
 		visual_map_print_button_editor('edit_item', __('Edit item'), 'right', true, 'config_min', true);
 		visual_map_print_button_editor('delete_item', __('Delete item'), 'right', true, 'delete_min', true);
@@ -149,7 +137,7 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 		</tr>
 		<tr id="background_row_2" class="background datos">
 			<td><?php echo __('Original Size');?></td>
-			<td><?php html_print_button(__('Apply'), 'original_false', false, 'setOriginalSizeBackground()', 'class="sub"');?></td>
+			<td><?php html_print_button(__('Apply'), 'original_false', false, "setAspectRatioBackground('original')", 'class="sub"');?></td>
 		</tr>
 		<tr id="background_row_3" class="background datos">
 			<td><?php echo __('Aspect ratio');?></td>
@@ -305,6 +293,9 @@ echo '<span style="display: none" id="message_alert_no_period">' . __('No period
 echo '<span style="display: none" id="message_alert_no_agent">' . __('No agent defined.') .'</span>';
 echo '<span style="display: none" id="message_alert_no_module">' . __('No module defined.') .'</span>';
 
+echo '<span style="display: none" id="hack_translation_correct_save">' . __('Successfully save the changes.') .'</span>';
+echo '<span style="display: none" id="hack_translation_incorrect_save">' . __('Could not be save') .'</span>';
+
 ui_require_css_file ('color-picker');
 
 ui_require_jquery_file('ui.core');
diff --git a/pandora_console/images/config.disabled.png b/pandora_console/images/config.disabled.png
index 7cd7f3c87b8337a41454ba46d1d220f787de0a81..17bd0b737a25ed4a022db2420e8f47b0ed524093 100755
GIT binary patch
delta 372
zcmV-)0gL{+0-^&UiBL{Q4GJ0x0000DNk~Le0000G0000G2m}BC0JZuz>X9Kif7}8U
z3LiSM?$E;k00AaRL_t(2&ux&gO9EjShoA2>D2p_xz_tpS%As7_n}iU-wjcsq`U{-f
zI{ODAh(L%Ym*9vXqAi1n5W=gBatPwG?(*=%z6R+!&))I<J^XmyS11JjIav5EMJ6JA
z(7qAND`vPWWpAnfIKe1w9IA6Ke^o>Pa7#%9=Quck0)jwalnMjX*h~Vf2Z0ufC>kv&
zcQyf_X}d#V6pL&rMTi~;DVs<Ji8I3+`wb9(XYL%jnN^-Jxg<^lyIfdP*It8OoXw1L
zi=<rNP66=Ao#&tz6WK9LBqqD5UqMe&FV1I2un^dAVqN*I!caJxO2@FVN_nSl<Tp@$
zK!f4*BoYUUXCt5EzWXi>1R=h7rDo)FJU|anKf9p9<LQ5K=MU4w04rDyp!flV{AiIP
SKYf<~0000<MNUMnLSTZkWSJfS

delta 267
zcmV+m0rdW&1G)ksiBL{Q4GJ0x0000DNk~Le0000F0000F2m}BC0FmEa!I2?3f7%BZ
z3OO5z>E~Yn006#8L_t&-({+%m3c_#{#(!sJ6NX^12)=^JVp{M41heR?E!kFlftgpt
zTQVpp12KtA5%d^#;qRQ^Y2W4CM1hk6KuajWGU?oA$SL*DVCB?r<D&U`uxnEZS!oT&
zATD&oOow+8p1gPi3yws_d{Nd)VTflx9A}x44SG_@Iec{?8`PvLB^jpb@Ww_8gJtgN
z$u)*Fa3<1H8bS{07Wr3Tec$OZmRtNx0Ji)3Otj(|e)`9tKSV2QKG}>E<pUbZOPgrJ
Rmcsx5002ovPDHLkV1fdsZruO?

diff --git a/pandora_console/images/file.disabled.png b/pandora_console/images/file.disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..39f3c9e220eeb0ef0373c4584aa051d6a98f10e7
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq000mG000mO1ONa4wfZ;e00001b5ch_0Itp)
z=>Px#0%A)?L;(MXkIcUS000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyV_3pyA!
z15A<t00AmVL_t(2&u!5?YZOr!#qr;rz4H?C0fGx+sVG>aUVFjT#xAW*QX3)!1hEl2
zQ;6R{Sx9ANCF~~<7Hr&PF;)7_&dj|QvxbPC?s+&I{)ZC|j`FKc@~;X}cxgXh<VF6U
z7WpFY=OW`BmX?;zESx)cw)tj}&J6DbcO_4}bzib)rbA?HtaB)DNM6Wjjjd6zvMYOS
zDthD8)W}q_Yc(XaN~L2-c8n~0rV_P?L8~@*Prgwxm}|7c0NMEJi|*PIM3v?bWUtnH
zXmTUro4JvGFeD`=eu{!tFPQkDl!g{bC0g6@!JZwZ=t`-QhJ>t=^|s7BwzauRl{~Z<
z*%lQTsnMXYtu_+G%ahN~la<?&J5N7)^yvz<Q;ovqNpQ>f8vZ*T{I&V7-zNcl6$Oe;
Q761SM07*qoM6N<$f(o#&F#rGn

literal 0
HcmV?d00001

diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php
index 36ac03bddc..eef12bf34b 100644
--- a/pandora_console/include/ajax/visual_console_builder.ajax.php
+++ b/pandora_console/include/ajax/visual_console_builder.ajax.php
@@ -146,7 +146,8 @@ switch ($action) {
 					$values['width'] = $width;
 				if ($height !== null)
 					$values['height'] = $height;
-				db_process_sql_update('tlayout', $values, array('id' => $id_visual_console));
+				$result = db_process_sql_update('tlayout', $values, array('id' => $id_visual_console));
+				echo (int)$result;
 				break;
 			case 'simple_value':
 			case 'percentile_bar':
@@ -161,7 +162,7 @@ switch ($action) {
 				if ($left !== null) {
 					$values['pos_x'] = $left;
 				}
-				if ($top !== null) { 
+				if ($top !== null) {
 					$values['pos_y'] = $top;
 				}
 				if ($agent !== null) {
@@ -220,6 +221,7 @@ switch ($action) {
 				}
 				
 				$result = db_process_sql_update('tlayout_data', $values, array('id' => $id_element));
+				echo (int)$result;
 				break;
 		}
 		break;
@@ -367,6 +369,16 @@ switch ($action) {
 		
 		echo json_encode($return);
 		break;
+	case 'get_original_size_background':
+		$replace = strlen($config["homeurl"] . '/');
+		
+		if (substr($background, 0, $replace) == $config["homeurl"] . '/')
+			$size = getimagesize(substr($background, $replace));
+		else
+			$size = getimagesize($background);
+		
+		echo json_encode($size);
+		break;
 }
 
 /* visual map element status check  */
diff --git a/pandora_console/include/functions_agents.php b/pandora_console/include/functions_agents.php
index 2e5ace2b9a..d77c65abfb 100644
--- a/pandora_console/include/functions_agents.php
+++ b/pandora_console/include/functions_agents.php
@@ -173,7 +173,7 @@ function agents_get_alerts_simple ($id_agent = false, $filter = '', $options = f
 		
 		if (empty ($id_modules))
 			return array ();
-			
+		
 		$subQuery = implode (",", $id_modules);
 	}
 
diff --git a/pandora_console/include/functions_visual_map.php b/pandora_console/include/functions_visual_map.php
index 921b2ec9eb..4714189f48 100644
--- a/pandora_console/include/functions_visual_map.php
+++ b/pandora_console/include/functions_visual_map.php
@@ -31,6 +31,22 @@ require_once ($config['homedir'].'/include/functions_agents.php');
 require_once ($config['homedir'].'/include/functions_modules.php');
 require_once ($config['homedir'].'/include/functions_users.php');
 
+function visual_map_print_item_toolbox($idDiv, $text, $float) {
+	if ($float == 'left') {
+		$margin = 'margin-right';
+	}
+	else {
+		$margin = 'margin-left';
+	}
+	
+	echo '<div class="button_toolbox" id="' . $idDiv . '"
+		style="font-weight: bolder; text-align: center; float: ' . $float . ';'
+		. $margin . ': 5px;">';
+	echo $text;
+	echo '</span>';
+	echo '</div>';
+}
+
 function visual_map_print_button_editor($idDiv, $label, $float = 'left', $disabled = false, $class= '', $imageButton = false) {
 	if ($float == 'left') {
 		$margin = 'margin-right';
@@ -39,7 +55,7 @@ function visual_map_print_button_editor($idDiv, $label, $float = 'left', $disabl
 		$margin = 'margin-left';
 	}
 	
-	html_print_button($label, 'button_toolbox2', $disabled, "click2('" . $idDiv . "');", 'class="sub ' . $idDiv . ' ' . $class . '" style="float: ' . $float . ';"', false, $imageButton);
+	html_print_button($label, 'button_toolbox2', $disabled, "click_button_toolbox('" . $idDiv . "');", 'class="sub ' . $idDiv . ' ' . $class . '" style="float: ' . $float . ';"', false, $imageButton);
 	return;
 	
 	if (!$disabled) $disableClass = '';
@@ -47,7 +63,7 @@ function visual_map_print_button_editor($idDiv, $label, $float = 'left', $disabl
 	
 	echo '<div class="button_toolbox ' . $disableClass . '" id="' . $idDiv . '"
 		style="font-weight: bolder; text-align: center; float: ' . $float . ';' .
-			'width: 80px; height: 50px; background: #e5e5e5; border: 4px outset black; ' . $margin . ': 5px;">';
+		'width: 80px; height: 50px; background: #e5e5e5; border: 4px outset black; ' . $margin . ': 5px;">';
 	if ($disabled) {
 		echo '<span class="label" style="color: #aaaaaa;">';
 	}
@@ -949,16 +965,18 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
 					}
 
 					if ($resizedMap) {
-						$layout_data['width'] = ((integer)($proportion * $layout_data['width']));
-						$layout_data['height'] = ((integer)($proportion * $layout_data['height']));
+						// ATTENTION: DO NOT USE &amp; here because is bad-translated and doesnt work
+						// resulting fault image links :(
+
+						echo grafico_modulo_sparse ($layout_data['id_agente_modulo'], $layout_data['period'],
+							false, ((integer)($proportion * $layout_data['width'])), ((integer)($proportion * $layout_data['height'])),
+							'', null, false, 1, false, 0, '', 0, 0, true, true);
+					}
+					else {
+						echo grafico_modulo_sparse ($layout_data['id_agente_modulo'], $layout_data['period'],
+							false, $layout_data['width'], $layout_data['height'],
+							'', null, false, 1, false, 0, '', 0, 0, true, true);
 					}
-					
-					// ATTENTION: DO NOT USE &amp; here because is bad-translated and doesnt work
-					// resulting fault image links :(
-					echo grafico_modulo_sparse ($layout_data['id_agente_modulo'], $layout_data['period'],
-						false, $layout_data['width'], $layout_data['height'],
-						'', null, false, 1, false, 0, '', 0, 0, true, true, '', 2);
-					
 					echo "</a>";
 					echo "</div>";
 					break;
diff --git a/pandora_console/include/styles/dialog.css b/pandora_console/include/styles/dialog.css
index fcb4830516..57fd925d9f 100644
--- a/pandora_console/include/styles/dialog.css
+++ b/pandora_console/include/styles/dialog.css
@@ -36,7 +36,7 @@
 	background: url(images/dialog-titlebar-close.png) no-repeat;
 	position:absolute;
 	top: 6px;
-	#top: 10px;
+	/*top: 10px;*/
 	right: 17px;
 	cursor: default;
 }
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 7ce49189e9..588b8f79b7 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -142,15 +142,14 @@ div#login {
 }
 div#login_in, #login_f {
 	padding-top: 40px;
-	#padding-top: 20px;
+	/*padding-top: 20px;*/
 	margin: 0 auto;
 	width: 400px;
 }
 div#error_login {
 	margin-top:-35px; 
-	#margin-top:0px; 	
-	position: float;
-	#margin-left:120px;
+	/*margin-top:0px;*/
+	/*margin-left:120px;*/
 }
 div#login_f {
 	margin-top: 10px;
@@ -251,7 +250,7 @@ div#foot {
 }
 #ip {
 	margin-top: 20px;
-	#margin-top: 3px;
+	/*margin-top: 3px;*/
 	margin-bottom: 5px;
 	margin-left: 280px;
 }
@@ -305,7 +304,7 @@ input.camera, input.config, input.cancel {
 	padding-right: 21px;
 }
 input.delete_min, input.graph_min, input.percentile_min, input.binary_min,
-input.camera_min, input.config_min, input.label_min, input.icon_min, input.grid_min {
+input.camera_min, input.config_min, input.label_min, input.icon_min, input.grid_min, input.save {
 	padding-right: 25px;
 }
 input.next {
@@ -407,6 +406,12 @@ input.icon_min[disabled] {
 input.grid_min {
 	background: #e5e5e5 url(../../images/grid.png) no-repeat center;
 }
+input.save_min {
+	background: #e5e5e5 url(../../images/file.png) no-repeat center;
+}
+input.save_min[disabled] {
+	background: #e5e5e5 url(../../images/file.disabled.png) no-repeat center;
+}
 input.grid_min[disabled] {
 	background: #e5e5e5 url(../../images/grid.disabled.png) no-repeat center;
 }