Add data image option to simple data visual console element - #412
This commit is contained in:
parent
a690187365
commit
2ede057298
|
@ -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;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
|
|
@ -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 |
|
@ -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;
|
||||
|
|
|
@ -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',' ',$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',' ',$value);
|
||||
|
||||
}
|
||||
if (!empty($unit_text)) {
|
||||
$value .= " " . $unit_text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$value = preg_replace ('/\n/i','<br>',$value);
|
||||
$value = preg_replace ('/\s/i',' ',$value);
|
||||
|
||||
return $value;
|
||||
break;
|
||||
case SIMPLE_VALUE_MAX:
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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','');
|
||||
|
|
Loading…
Reference in New Issue