Add data image option to simple data visual console element - #412

This commit is contained in:
enriquecd 2017-06-13 16:49:25 +02:00
parent a690187365
commit 2ede057298
7 changed files with 190 additions and 26 deletions

View File

@ -0,0 +1,25 @@
<?php
include_once ('include/config.php');
include_once ('include/functions.php');
include_once ('include/functions_db.php');
include_once ('include/auth/mysql.php');
$id = get_parameter('get_image');
$sql = 'SELECT datos FROM tagente_estado WHERE id_agente_modulo = '.$id;
$result = db_get_sql($sql);
$image = strpos($result, 'data:image');
if($image === false){
echo 0;
}
else{
echo 1;
}
?>

View File

@ -84,6 +84,45 @@ function visual_map_main() {
//Fixed to wait the load of images.
$(window).load(function() {
$('#module').change(function(){
var txt = $("#module").val();
if(selectedItem == 'simple_value' || creationItem == 'simple_value'){
$.ajax({
async:false,
type: "POST",
url: "ajax.php",
data: {"page" : "general/check_image_module",
"get_image" : txt,
},
success: function(data) {
if(data == 0){
$("#data_image_check").html('Off');
$('#data_image_container').css('display','none');
$('#data_image_check').css('display','none');
$('#data_image_check_label').css('display','none');
$('.block_tinymce').remove();
$('#process_value_row').css('display','table-row');
if($('#process_value').val() != '0'){
$('#period_row').css('display','table-row');
}
}
else{
$('#data_image_container').css('display','inline');
$('#data_image_check').css('display','inline');
$('#data_image_check_label').css('display','inline');
$("#data_image_check").html('On');
$('#process_value_row').css('display','none');
$('#period_row').css('display','none');
$('#text-label_ifr').contents().find('#tinymce').html('_VALUE_');
$('.block_tinymce').remove();
$('#label_row').append('<div class="block_tinymce" style="background-color:#fbfbfb;position:absolute;left:0px;height:230px;width:100%;opacity:0.7;z-index:5;"></div>');
}
}
});
}
});
$('#radiobtn0001').click(function(){
$("#custom_graph option[value=0]").prop("selected", true);
});
@ -338,10 +377,32 @@ function update_button_palette_callback() {
setModuleGraph(idItem);
break;
case 'simple_value':
$("#text_" + idItem).html(values['label']);
//checkpoint
if(($('#text-label_ifr').contents().find('#tinymce p').html() == '_VALUE_' ||
$('#text-label_ifr').contents().find('#tinymce').html() == '_VALUE_')
&& $('#data_image_check').html() != 'On'){
alert('_VALUE_ exactly value is only enable for data image. Please change label text or select a data image module.');
return;
}
$("#" + idItem).html(values['label']);
if(values['label'].replace( /<.*?>/g, '' ) == '_VALUE_'){
$("#text_" + idItem).html('<img style="width:'+values['width_data_image']+'px;" src="images/console/signes/data_image.png">');
$("#" + idItem).html('<img style="width:'+values['width_data_image']+'px;" src="images/console/signes/data_image.png">');
}
else{
$("#text_" + idItem).html(
'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
)
$("#" + idItem).html(
'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
)
}
//$("#simplevalue_" + idItem)
//.html($('<img></img>').attr('src', "images/spinner.gif"));
setModuleValue(idItem,values['process_simple_value'], values['period']);
setModuleValue(idItem,values['process_simple_value'], values['period'],values['width']);
break;
case 'label':
$("#text_" + idItem).html(values['label']);
@ -489,6 +550,10 @@ function readFields() {
values['background'] = $("#background_image").val();
values['period'] = undefined != $("#hidden-period").val() ? $("#hidden-period").val() : $("#period").val();
values['width'] = $("input[name=width]").val();
values['width_data_image'] = $("#data_image_width").val();
if(values['width_data_image'] != 0){
values['width'] = values['width_data_image'];
}
values['height'] = $("input[name=height]").val();
values['parent'] = $("select[name=parent]").val();
values['map_linked'] = $("select[name=map_linked]").val();
@ -656,6 +721,7 @@ function create_button_palette_callback() {
create_line('step_1', values);
break;
default:
insertDB(creationItem, values);
break;
}
@ -933,6 +999,14 @@ function toggle_item_palette() {
$( "#text-label_ifr" ).contents().find( "span" ).css("line-height",$('#lineheight').val());
}
if(creationItem != 'simple_value'){
$("#data_image_check").html('Off');
$("#data_image_check").css('display','none');
$("#data_image_check_label").css('display','none');
$("#data_image_container").css('display','none');
$('.block_tinymce').remove();
}
}
function fill_parent_select(id_item) {
@ -1655,12 +1729,13 @@ function setModuleGraph(id_data) {
}
function setModuleValue(id_data, process_simple_value, period) {
function setModuleValue(id_data, process_simple_value, period,width_data_image) {
var parameter = Array();
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
parameter.push ({name: "action", value: "get_module_value"});
parameter.push ({name: "id_element", value: id_data});
parameter.push ({name: "period", value: period});
parameter.push ({name: "width", value: width_data_image});
parameter.push ({name: "id_visual_console", value: id_visual_console});
if (process_simple_value != undefined) {
parameter.push ({name: "process_simple_value", value: process_simple_value});
@ -1672,7 +1747,9 @@ function setModuleValue(id_data, process_simple_value, period) {
type: "POST",
dataType: 'json',
success: function (data) {
var currentValue = $("#text_" + id_data).html();
var currentValue = $("#text_" + id_data).html();
//currentValue = currentValue.replace(/_VALUE_/gi, data.value);
$("#text_" + id_data).html(currentValue);
//$("#text_" + id_data).html('Data value');
@ -2183,10 +2260,14 @@ function createItem(type, values, id_data) {
case 'simple_value':
sizeStyle = '';
imageSize = '';
if($('#data_image_check').html() == 'On'){
values['label'] = '<img style="width:'+$('#data_image_width').val()+'px;" src="images/console/signes/data_image.png">';
}
item = $('<div id="' + id_data + '" class="item simple_value" style="position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<span id="text_' + id_data + '" class="text"> ' + values['label'] + '</span> ' + '</div>'
);
setModuleValue(id_data,values.process_simple_value,values.period);
setModuleValue(id_data,values.process_simple_value,values.period,values.width_data_image);
break;
case 'label':
item = $('<div id="' + id_data + '" ' +
@ -2266,6 +2347,7 @@ function addItemSelectParents(id_data, text) {
}
function insertDB(type, values) {
metaconsole = $("input[name='metaconsole']").val();
$("#saving_in_progress_dialog").dialog({
@ -2398,7 +2480,7 @@ function updateDB_visual(type, idElement , values, event, top, left) {
if (type == 'simple_value') {
setModuleValue(idElement,
values.process_simple_value,
values.period);
values.period,values.width_data_image);
}
@ -2877,6 +2959,39 @@ function eventsItems(drag) {
if ((!is_opened_palette) && (autosave)) {
toggle_item_palette();
}
if(selectedItem == 'simple_value'){
var found = $('#'+idItem).find("img");
if(found.length > 0){
$("#data_image_check").css('display','inline');
$("#data_image_check_label").css('display','inline');
$('#data_image_container').css('display','inline');
$("#data_image_check").html('On');
$('.block_tinymce').remove();
$('#label_row').append('<div class="block_tinymce" style="background-color:#fbfbfb;position:absolute;left:0px;height:230px;width:100%;opacity:0.7;z-index:5;"></div>');
$('#process_value_row').css('display','none');
$('#period_row').css('display','none');
}
else{
$("#data_image_check").html('Off');
$("#data_image_check").css('display','none');
$("#data_image_check_label").css('display','none');
$('#data_image_container').css('display','none');
$('.block_tinymce').remove();
$('#process_value_row').css('display','table-row');
if($('#process_value').val() != 0){
$('#period_row').css('display','table-row');
}
}
}
else{
$("#data_image_check").css('display','none');
$("#data_image_check_label").css('display','none');
$('#data_image_container').css('display','none');
}
});
//Set the limit of draggable in the div with id "background" and set drag

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -422,6 +422,7 @@ switch ($action) {
$values['type'] = visual_map_get_simple_value_type(
$process_simple_value);
$values['period'] = $period;
$values['width'] = $width;
}
case 'percentile_bar':
case 'percentile_item':
@ -897,6 +898,7 @@ switch ($action) {
//This allows min, max and avg process in a simple value
$values['type'] = visual_map_get_simple_value_type($process_simple_value);
$values['period'] = $period;
$values['width'] = $width;
break;
case 'label':
$values['type'] = LABEL;

View File

@ -1438,17 +1438,25 @@ function visual_map_print_item($mode = "read", $layoutData,
if(get_parameter('action') == 'edit'){
//echo 'Data value';
echo $io_safe_output_text;
//html_debug($layoutData);
//echo 'Data value';
if(strip_tags($io_safe_output_text) != '_VALUE_'){
echo $io_safe_output_text;
}
else{
echo "<img style='width:".$layoutData['width']."px;' src='images/console/signes/data_image.png'>";
}
}
else{
echo str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
if(strip_tags($io_safe_output_text) != '_VALUE_'){
echo str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
}
else{
echo str_replace('>', ' style="width:'.$layoutData['width'].'px">',$value);
}
}
//Restore db connection
@ -1575,6 +1583,8 @@ function visual_map_get_simple_value_type($process_simple_value) {
function visual_map_get_simple_value($type, $id_module, $period = SECONDS_1DAY) {
global $config;
$unit_text = db_get_sql ('SELECT unit
FROM tagente_modulo WHERE id_agente_modulo = ' . $id_module);
$unit_text = trim(io_safe_output($unit_text));
@ -1583,23 +1593,35 @@ function visual_map_get_simple_value($type, $id_module, $period = SECONDS_1DAY)
case SIMPLE_VALUE:
$value = db_get_value ('datos', 'tagente_estado',
'id_agente_modulo', $id_module);
if ($value === false) {
$value = __('Unknown');
$value = preg_replace ('/\n/i','<br>',$value);
$value = preg_replace ('/\s/i','&nbsp;',$value);
}
else {
if ( is_numeric($value) ) {
if ($config['simple_module_value']) {
$value = remove_right_zeros(number_format($value, $config['graph_precision']));
if(strpos($value, 'data:image') !== false){
$value = '<img class="b64img" src="'.$value.'">';
}
else{
if ( is_numeric($value) ) {
if ($config['simple_module_value']) {
$value = remove_right_zeros(number_format($value, $config['graph_precision']));
}
}
if (!empty($unit_text)) {
$value .= " " . $unit_text;
}
$value = preg_replace ('/\n/i','<br>',$value);
$value = preg_replace ('/\s/i','&nbsp;',$value);
}
if (!empty($unit_text)) {
$value .= " " . $unit_text;
}
}
$value = preg_replace ('/\n/i','<br>',$value);
$value = preg_replace ('/\s/i','&nbsp;',$value);
return $value;
break;
case SIMPLE_VALUE_MAX:

View File

@ -310,8 +310,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items['module_row']['html'] = '<td align="left">' .
__('Module') . '</td>
<td align="left">' .
html_print_select(array(), 'module', '', '', __('Any'), 0, true) .
'</td>';
html_print_select(array(), 'module', '', '', __('Any'), 0, true). '<div id="data_image_container" style="display:none;"><span id="data_image_check_label" style="margin-left:20px;">'.__("Data image").': </span><span id="data_image_check">Off</span><span id="data_image_width_label"> - Width: </span><input style="margin-left:5px;width:40px;" type="number" id="data_image_width" value="100"></input></div>
</td>';
$form_items['type_graph'] = array();

View File

@ -278,7 +278,7 @@ $ignored_params['refr'] = '';
$(".overlay").removeClass("overlay").addClass("overlaydisabled");
$('.item:not(.icon) img').each( function() {
$('.item:not(.icon) img:not(.b64img)').each( function() {
if ($(this).css('float')=='left' || $(this).css('float')=='right') {
$(this).css('margin-top',(parseInt($(this).parent().parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
$(this).css('margin-left','');