2013-10-28 Miguel de Dios <miguel.dedios@artica.es>

* godmode/reporting/reporting_builder.list_items.php,
	godmode/reporting/visual_console_builder.editor.js,
	godmode/reporting/visual_console_builder.elements.php,
	godmode/reporting/visual_console_builder.editor.php,
	include/help/en/help_visual_console_editor_editor_tab.php,
	include/javascript/jquery.pandora.js,
	include/functions_visual_map.php,
	include/ajax/visual_console_builder.ajax.php,
	include/functions_visual_map_editor.php: added rich labels for all
	items in the visualmap and the simple value has the new macro
	(_VALUE_) for to set the value with html style into the rich labels.




git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@8965 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
This commit is contained in:
mdtrooper 2013-10-28 10:27:10 +00:00
parent 253300aaf9
commit 8af9d39c73
10 changed files with 180 additions and 77 deletions

View File

@ -1,3 +1,17 @@
2013-10-28 Miguel de Dios <miguel.dedios@artica.es>
* godmode/reporting/reporting_builder.list_items.php,
godmode/reporting/visual_console_builder.editor.js,
godmode/reporting/visual_console_builder.elements.php,
godmode/reporting/visual_console_builder.editor.php,
include/help/en/help_visual_console_editor_editor_tab.php,
include/javascript/jquery.pandora.js,
include/functions_visual_map.php,
include/ajax/visual_console_builder.ajax.php,
include/functions_visual_map_editor.php: added rich labels for all
items in the visualmap and the simple value has the new macro
(_VALUE_) for to set the value with html style into the rich labels.
2013-10-28 Vanessa Gil <vanessa.gil@artica.es>
* include/languages/ar.mo

View File

@ -143,7 +143,7 @@ function update_button_palette_callback() {
case 'label':
$("#" + idItem).css('color', values['label_color']);
$("#text_" + idItem).html(values['label2']);
$("#text_" + idItem).html(values['label']);
break;
case 'icon':
var params = [];
@ -196,8 +196,8 @@ function readFields() {
values['label'] = $("input[name=label]").val();
var text = tinymce.get('text-label2').getContent();
values['label2'] = text;
var text = tinymce.get('text-label').getContent();
values['label'] = text;
values['image'] = $("select[name=image]").val();
values['left'] = $("input[name=left]").val();
@ -252,7 +252,7 @@ function create_button_palette_callback() {
}
break;
case 'label':
if ((values['label2'] == '')) {
if ((values['label'] == '')) {
alert($("#message_alert_no_label").html());
validate = false;
}
@ -371,7 +371,7 @@ function toggle_item_palette() {
item = creationItem;
$("#button_update_row").css('display', 'none');
$("#button_create_row").css('display', '');
cleanFields();
cleanFields(item);
unselectAll();
}
else if (selectedItem != null) {
@ -423,7 +423,6 @@ function loadFieldsFromDB(item) {
parameter.push ({name: "type", value: item});
parameter.push ({name: "id_element", value: idItem});
is_label = false;
set_label = false;
jQuery.ajax({
@ -443,26 +442,13 @@ function loadFieldsFromDB(item) {
if (key == 'width') $("input[name=width]").val(val);
if (key == 'height') $("input[name=height]").val(val);
if (key == 'type')
if (val == 4) { //Label
is_label = true;
//Sometimes is set previous to know the
//type
if (set_label) {
tinymce.get('text-label2')
.setContent(set_label);
$("input[name=label]").val("");
}
}
if (key == 'label') {
if (is_label)
tinymce.get('text-label2').setContent(val);
else
tinymce.get('text-label')
.setContent("");
$("input[name=label]").val("");
tinymce.get('text-label').setContent(val);
$("input[name=label]").val(val);
set_label = val;
}
if (key == 'enable_link') $("input[name=enable_link]").val(val);
@ -491,7 +477,9 @@ function loadFieldsFromDB(item) {
if (key == 'period') {
var anySelected = false;
var periodId = $('#hidden-period').attr('class');
$('#'+periodId+'_select option').each(function() {
$('#' + periodId + '_select option')
.each(function() {
if($(this).val() == val) {
$(this).attr('selected',true);
$(this).trigger('change');
@ -499,8 +487,10 @@ function loadFieldsFromDB(item) {
}
});
if (anySelected == false) {
$('#'+periodId+'_select option').eq(0).attr('selected',true);
$('#'+periodId+'_units option').eq(0).attr('selected',true);
$('#' + periodId + '_select option')
.eq(0).attr('selected',true);
$('#' + periodId + '_units option')
.eq(0).attr('selected',true);
$('#hidden-period').val(val);
$('#text-' + periodId + '_text').val(val);
adjustTextUnits(periodId);
@ -618,9 +608,6 @@ function hiddenFields(item) {
$(".title_panel_span").css('display', 'none');
$("#title_panel_span_" + item).css('display', 'inline');
$("#label2_row").css('display', 'none');
$("#label2_row." + item).css('display', '');
$("#label_row").css('display', 'none');
$("#label_row." + item).css('display', '');
@ -692,9 +679,9 @@ function hiddenFields(item) {
}
}
function cleanFields() {
function cleanFields(item) {
$("input[name=label]").val('');
tinymce.get('text-label2').setContent("");
tinymce.get('text-label').setContent("");
$("select[name=image]").val('');
$("input[name=left]").val(0);
$("input[name=top]").val(0);
@ -714,6 +701,12 @@ function cleanFields() {
$("input[name=height_module_graph]").val(180);
$("#preview").empty();
if (item == "simple_value") {
$("input[name=label]").val('(_VALUE_)');
tinymce.get('text-label').setContent("(_VALUE_)");
}
fill_parent_select();
var anyText = $("#any_text").html(); //Trick for catch the translate text.
@ -1139,8 +1132,13 @@ function createItem(type, values, id_data) {
);
break;
case 'label':
item = $('<div id="' + id_data + '" class="item label" style="color: ' + values['label_color'] + '; text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<span id="text_' + id_data + '" class="text">' + values['label2'] + '</span>' +
item = $('<div id="' + id_data + '" ' +
'class="item label" ' +
'style="color: ' + values['label_color'] + '; text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;"' +
'>' +
'<span id="text_' + id_data + '" class="text">' +
values['label'] +
'</span>' +
'</div>'
);
break;

View File

@ -126,7 +126,7 @@ ui_require_javascript_file ('encode_decode_base64');
tinyMCE.init({
mode : "exact",
elements: "text-label2",
elements: "text-label",
theme : "advanced",
<?php
if ($config['style'] == 'pandora_legacy') {

View File

@ -148,7 +148,8 @@ foreach ($layoutDatas as $layoutData) {
//Label and color label
if ($layoutData['type'] != ICON) {
$table->data[$i + 1][0] = '<span style="width: 150px; display: block;">' .
html_print_input_text ('label_' . $idLayoutData, $layoutData['label'], '', 10, 200, true) .
html_print_input_hidden('label_' . $idLayoutData, $layoutData['label'], true) .
'<a href="javascript: show_dialog_label_editor(' . $idLayoutData . ');">' . __('Edit label') .'</a>' .
html_print_input_text_extended ('label_color_' . $idLayoutData, $layoutData['label_color'], 'text-'.'label_color_' . $idLayoutData, '', 7, 7, false, '', 'style="visibility: hidden; width: 0px;" class="label_color"', true) .
'</span>';
}
@ -339,7 +340,12 @@ echo '</form>';
//Trick for it have a traduct text for javascript.
echo '<span id="ip_text" style="display: none;">' . __('IP') . '</span>';
?>
<div id="dialog_label_editor">
<input id="active_id_layout_data" type="hidden" />
<textarea id="tinyMCE_editor" name="tinyMCE_editor"></textarea>
</div>
<?php
ui_require_css_file ('color-picker');
ui_require_jquery_file ('colorpicker');
@ -348,13 +354,69 @@ ui_require_javascript_file ('wz_jsgraphics');
ui_require_javascript_file ('pandora_visual_console');
ui_require_jquery_file('ajaxqueue');
ui_require_jquery_file('bgiframe');
ui_require_javascript_file('tiny_mce', 'include/javascript/tiny_mce/');
?>
<script type="text/javascript">
$(document).ready (function () {
$(".label_color").attachColorPicker();
//$(".ColorPickerDivSample").css('float', 'right');
tinymce.init({
selector: "#tinyMCE_editor",
theme : "advanced",
<?php
if ($config['style'] == 'pandora_legacy') {
echo 'content_css: "' . ui_get_full_url('include/styles/pandora_legacy.css', false, false, false) . '",' . "\n";
}
else {
echo 'content_css: "' . ui_get_full_url('include/styles/pandora.css', false, false, false) . '",' . "\n";
}
?>
theme_advanced_font_sizes : "8pt=.visual_font_size_8pt, 14pt=.visual_font_size_14pt, 24pt=.visual_font_size_24pt, 36pt=.visual_font_size_36pt, 72pt=.visual_font_size_72pt",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic, |, image, link, |, forecolor, fontsizeselect",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_statusbar_location : "none",
width: "400",
height: "200",
nowrap: true
});
$("#dialog_label_editor").hide ()
.dialog ({
title: "<?php echo __("Edit label");?>",
resizable: false,
draggable: true,
modal: true,
overlay: {
opacity: 0.5,
background: "black"
},
width: 450,
height: 300,
autoOpen: false,
beforeClose: function() {
var id_layout_data = $("#active_id_layout_data").val();
var label = tinyMCE.activeEditor.getContent();
$("#hidden-label_" + id_layout_data).val(label);
}
});
});
var idText = $("#ip_text").html();
function show_dialog_label_editor(id_layout_data) {
var label = $("#hidden-label_" + id_layout_data).val();
$("#active_id_layout_data").val(id_layout_data);
$("#tinyMCE_editor").val(label);
tinyMCE.activeEditor.setContent(label);
$("#dialog_label_editor").dialog("open");
}
</script>

View File

@ -44,7 +44,6 @@ $id_element = get_parameter('id_element', null);
$image = get_parameter('image', null);
$background = get_parameter('background', null);
$label = get_parameter('label', '');
$label2 = get_parameter('label2', '');
$left = get_parameter('left', null);
$top = get_parameter('top', null);
$agent = get_parameter('agent', null);
@ -319,8 +318,7 @@ switch ($action) {
default:
if ($type == 'label') {
$values['type'] = LABEL;
$values['label'] = $label2;
$label = $label2;
$values['label'] = $label;
}
if ($enable_link !== null) {
@ -611,8 +609,7 @@ switch ($action) {
break;
case 'label':
$values['type'] = LABEL;
$values['label'] = $label2;
$label = $label2;
$values['label'] = $label;
break;
case 'icon':
$values['type'] = ICON;

View File

@ -118,7 +118,7 @@ function visual_map_print_item($layoutData) {
echo html_print_image($img, true, array("class" => "image", "id" => "image_" . $id, "style" => $borderStyle));
echo '<br />';
}
echo $text;
echo io_safe_output($text);
echo "</div>";
break;
@ -163,7 +163,7 @@ function visual_map_print_item($layoutData) {
$percentile = 100;
echo '<div id="' . $id . '" class="item percentile_item" style="z-index: 1; color: ' . $color . '; text-align: center; position: absolute; display: inline-block; ' . $sizeStyle . ' top: ' . $top . 'px; left: ' . $left . 'px;">';
echo $text . '<br />';
echo io_safe_output($text) . '<br />';
ob_start();
if ($type == PERCENTILE_BUBBLE) {
@ -201,7 +201,7 @@ function visual_map_print_item($layoutData) {
$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
echo '<div id="' . $id . '" class="item module_graph" style="z-index: 1; color: ' . $color . '; text-align: center; position: absolute; display: inline-block; ' . $sizeStyle . ' top: ' . $top . 'px; left: ' . $left . 'px;">';
echo $text . '<br />';
echo io_safe_output($text) . '<br />';
echo $img;
echo '</div>';
break;
@ -210,7 +210,7 @@ function visual_map_print_item($layoutData) {
case SIMPLE_VALUE_MIN:
case SIMPLE_VALUE_AVG:
echo '<div id="' . $id . '" class="item simple_value" style="z-index: 1; left: 0px; top: 0px; color: ' . $color . '; text-align: center; position: absolute; ' . $sizeStyle . ' margin-top: ' . $top . 'px; margin-left: ' . $left . 'px;">';
echo $text;
echo io_safe_output($text);
//Metaconsole db connection
if ($layoutData['id_metaconsole'] != 0) {
@ -1125,7 +1125,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
}
$img_style = array ();
$img_style["title"] = $layout_data["label"];
$img_style["title"] = strip_tags($layout_data["label"]);
if (!empty ($layout_data["width"])) {
$img_style["width"] = $layout_data["width"];
@ -1191,7 +1191,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
// Print label if valid label_color (only testing for starting with #) otherwise print nothing
if ($layout_data['label_color'][0] == '#') {
echo "<br />";
echo $layout_data['label'];
echo io_safe_output($layout_data['label']);
}
echo "</div>";
@ -1217,7 +1217,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
}
if ($layout_data['label_color'][0] == '#') {
echo "<br />";
echo $layout_data['label'];
echo io_safe_output($layout_data['label']);
}
if ($endTagA) echo "</a>";
echo "</div>";
@ -1374,7 +1374,16 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
}
}
echo '<strong>' . $layout_data['label']. ' ';
$label_simple_value = io_safe_output($layout_data['label']);
if (strstr($label_simple_value, '(_VALUE_)') === false) {
//OLD MODE
$label_simple_value = '<strong>' . $label_simple_value . ' ';
}
else {
//NEW MODE WITH MACRO (_VALUE_)
}
//TODO: change interface to add a period parameter, now is set to 1 day
switch ($layout_data['type']) {
case SIMPLE_VALUE:
@ -1402,7 +1411,6 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
$value = format_for_graph($value, 2);
if (!empty($unit_text))
$value .= " " . $unit_text;
echo $value;
break;
case SIMPLE_VALUE_MAX:
@ -1435,7 +1443,6 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
if (!empty($unit_text))
$value .= " " . $unit_text;
}
echo $value;
break;
case SIMPLE_VALUE_MIN:
@ -1468,7 +1475,6 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
if (!empty($unit_text))
$value .= " " . $unit_text;
}
echo $value;
break;
case SIMPLE_VALUE_AVG:
@ -1502,10 +1508,21 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
if (!empty($unit_text))
$value .= " " . $unit_text;
}
echo $value;
break;
}
echo '</strong>';
if (strstr($label_simple_value, '(_VALUE_)') === false) {
//OLD MODE
$label_simple_value .= '</strong>';
}
else {
//NEW MODE WITH MACRO (_VALUE_)
$label_simple_value = str_replace('(_VALUE_)',
$value, $label_simple_value);
}
echo $label_simple_value;
if ($endTagA) echo '</a>';
@ -1558,7 +1575,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
$endTagA = false;
echo $layout_data['label'];
echo io_safe_output($layout_data['label']);
echo "<br>";
if ($show_links) {
@ -1697,7 +1714,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true, $draw_line
echo '<div style="left: 0px; top: 0px; text-align: center; z-index: 1; color: '.$layout_data['label_color'].'; position: absolute; margin-left: '.$layout_data['pos_x'].'px; margin-top:'.$layout_data['pos_y'].'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
echo $layout_data['label'];
echo io_safe_output($layout_data['label']);
echo "<br>";
$endTagA = false;

View File

@ -75,18 +75,19 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
<?php
$form_items = array();
/*
$form_items['label_row'] = array();
$form_items['label_row']['items'] = array('static_graph',
'percentile_bar', 'percentile_item', 'module_graph',
'simple_value', 'datos', 'icon');
$form_items['label_row']['items'] = array();
$form_items['label_row']['html'] = '<td align="left" style="">' . __('Label') .'</td>
<td align="left" style="">'. html_print_input_text ('label', '', '', 20, 200, true) .'</td>';
*/
$form_items['label2_row'] = array();
$form_items['label2_row']['items'] = array('label');
$form_items['label2_row']['html'] = '<td align="left" valign="top" style="">' . __('Label') .'</td>
<td align="left" style="">'. html_print_input_text ('label2', '', '', 20, 200, true) .'</td>';
$form_items['label_row'] = array();
$form_items['label_row']['items'] = array('label', 'static_graph',
'percentile_bar', 'percentile_item', 'module_graph',
'simple_value', 'datos', 'icon');
$form_items['label_row']['html'] = '<td align="left" valign="top" style="">' . __('Label') .'</td>
<td align="left" style="">'. html_print_input_text ('label', '', '', 20, 200, true) .'</td>';
$form_items['image_row'] = array();

View File

@ -6,4 +6,18 @@
<h1>Editor</h1>
<p>This tab has most of the part of the functionality of the visual console editor, because is where you could create the elements, edit and place them. It is a dynamic page, so it will be necessary that your browser support correctly the javascript languaje. As you can see in the screen shot, the screen is divided in two areas that are well defined: the button box, the work area (where you will "draw" the visual console) and the option palette ( that is not visible in this screen shot).</p>
<p>This tab has most of the part of the functionality of the
visual console editor, because is where you could create the elements,
edit and place them. It is a dynamic page, so it will be necessary that
your browser support correctly the javascript languaje. As you can see
in the screen shot, the screen is divided in two areas that are well
defined:
<ul style="list-style-type: disc; margin-left: 20px;">
<li>the button box</li>
<li>the work area (where you will "draw" the visual console)</li>
<li>the option palette ( that is not visible in this screen shot)</li>
</ul>
In the version Pandora 5.0.1 you can set the label with a rich text.
And the item "Simple value" you can use the macros to set inner the text
with (_VALUE_).
</p>