Merge branch 'ent-8295-Meter-spinner-en-visualizador-de-graficas-combinadas' into 'develop'

Ent 8295 meter spinner en visualizador de graficas combinadas

See merge request artica/pandorafms!4563
This commit is contained in:
Daniel Rodriguez 2021-12-23 12:13:05 +00:00
commit 7c09ce1a6d

View File

@ -246,25 +246,27 @@ if ($view_graph) {
]; ];
} }
// Header. if (!is_ajax()) {
ui_print_standard_header( // Header.
$graph['name'], ui_print_standard_header(
'images/chart.png', $graph['name'],
false, 'images/chart.png',
'', false,
false, '',
$options, false,
[ $options,
[ [
'link' => '', [
'label' => __('Reporting'), 'link' => '',
], 'label' => __('Reporting'),
[ ],
'link' => '', [
'label' => __('Custom graphs'), 'link' => '',
], 'label' => __('Custom graphs'),
] ],
); ]
);
}
$width = null; $width = null;
$height = null; $height = null;
@ -294,16 +296,32 @@ if ($view_graph) {
$params_combined $params_combined
); );
if (is_ajax()) {
echo $graph_return;
return;
}
if ($graph_return) { if ($graph_return) {
echo "<table class='databox filters' cellpadding='0' cellspacing='0' width='100%'>"; echo "<table id='graph-container' class='databox filters' cellpadding='0' cellspacing='0' width='100%'>";
echo '<tr><td>'; echo '<tr><td>';
if (!is_ajax()) {
echo '<div id="spinner_loading" class="loading invisible" style="display:flex;flex-direction:column-reverse;justify-content:center;align-items:center">';
echo html_print_image('images/spinner.gif', true, ['width' => '20px']);
echo __('Loading').'&hellip;';
echo '</div>';
}
if ($stacked == CUSTOM_GRAPH_VBARS) { if ($stacked == CUSTOM_GRAPH_VBARS) {
echo '<div class="w100p height_600px">'; echo '<div class="w100p height_600px">';
echo '<div id="div-container" class="w100p height_600px">';
} else {
echo '<div id="div-container">';
} }
echo $graph_return; echo $graph_return;
echo '</div>';
if ($stacked == CUSTOM_GRAPH_VBARS) { if ($stacked == CUSTOM_GRAPH_VBARS) {
echo '<div>'; echo '</div>';
} }
echo '</td></tr></table>'; echo '</td></tr></table>';
@ -316,12 +334,12 @@ if ($view_graph) {
} }
$period_label = human_time_description_raw($period); $period_label = human_time_description_raw($period);
echo "<form method='POST' action='index.php?sec=reporting&sec2=operation/reporting/graph_viewer&view_graph=1&id=$id_graph'>"; echo '<form method="POST" action="index.php?sec=reporting&sec2=operation/reporting/graph_viewer&view_graph=1&id=$id_graph">';
echo "<table class='databox filters w100p' cellpadding='4' cellspacing='4'>"; echo "<table class='databox filters w100p' cellpadding='4' cellspacing='4'>";
echo '<tr>'; echo '<tr>';
echo '<td>'; echo '<td>';
echo '<b>'.__('Date').'</b>'.' '; echo '<b>'.__('Date').'</b>';
echo '</td>'; echo '</td>';
echo '<td>'; echo '<td>';
@ -372,23 +390,26 @@ if ($view_graph) {
echo '</td>'; echo '</td>';
echo "<td class='datos'>"; echo "<td class='datos'>";
echo "<input type=submit value='".__('Refresh')."' class='sub upd'>"; echo "<input id='submit-refresh' type=submit value='".__('Refresh')."' class='sub upd'>";
echo '</td>'; echo '</td>';
echo '</tr>'; echo '</tr>';
echo '</table>'; echo '</table>';
echo '</form>'; echo '</form>';
/* /*
We must add javascript here. Otherwise, the date picker won't We must add javascript here. Otherwise, the date picker won't
work if the date is not correct because php is returning. */ work if the date is not correct because php is returning.
*/
ui_include_time_picker(); ui_include_time_picker();
ui_require_jquery_file('ui.datepicker-'.get_user_language(), 'include/javascript/i18n/'); ui_require_jquery_file('ui.datepicker-'.get_user_language(), 'include/javascript/i18n/');
ui_require_jquery_file(''); ui_require_jquery_file('');
?> ?>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
$(document).ready (function () { $(document).ready (function () {
$("#spinner_loading").hide();
$("#loading").slideUp (); $("#loading").slideUp ();
$("#text-time").timepicker({ $("#text-time").timepicker({
showSecond: true, showSecond: true,
@ -400,9 +421,9 @@ if ($view_graph) {
secondText: '<?php echo __('Second'); ?>', secondText: '<?php echo __('Second'); ?>',
currentText: '<?php echo __('Now'); ?>', currentText: '<?php echo __('Now'); ?>',
closeText: '<?php echo __('Close'); ?>'}); closeText: '<?php echo __('Close'); ?>'});
$.datepicker.setDefaults($.datepicker.regional[ "<?php echo get_user_language(); ?>"]); $.datepicker.setDefaults($.datepicker.regional[ "<?php echo get_user_language(); ?>"]);
$("#text-date").datepicker({ $("#text-date").datepicker({
dateFormat: "<?php echo DATE_FORMAT_JS; ?>", dateFormat: "<?php echo DATE_FORMAT_JS; ?>",
changeMonth: true, changeMonth: true,
@ -415,6 +436,40 @@ if ($view_graph) {
$("#thresholdDiv").hide(); $("#thresholdDiv").hide();
} }
$("#submit-refresh").click(function(e) {
e.preventDefault();
$("#spinner_loading").show();
var data = {
page: "operation/reporting/graph_viewer",
view_graph: 1,
id: '<?php echo $id_graph; ?>',
zoom: $('#zoom').val(),
date: $('#text-date').val(),
time: $('#text-time').val(),
period: $('select[id^=period][id$=select]').val(),
stacked: $('#stacked').val(),
}
if (data['stacked'] == 4 && $('#checkbox-threshold').is(':checked')) {
data['threshold'] = 1;
}
$.ajax({
type: "POST",
url: "ajax.php",
dataType: "html",
data: data,
success: function (data) {
document.getElementById("div-container").innerHTML = "";
$("#spinner_loading").hide();
$("#div-container").append(data);
},
error: function (data) {
console.error("Fatal error")
}
});
});
}); });
@ -429,7 +484,7 @@ if ($view_graph) {
} }
}); });
</script> </script>
<?php <?php
$datetime = strtotime($date.' '.$time); $datetime = strtotime($date.' '.$time);
$report['datetime'] = $datetime; $report['datetime'] = $datetime;
@ -442,7 +497,7 @@ if ($view_graph) {
return; return;
} }
// Header // Header.
ui_print_page_header(__('Reporting').' &raquo; '.__('Custom graph viewer'), 'images/op_reporting.png', false, '', false, ''); ui_print_page_header(__('Reporting').' &raquo; '.__('Custom graph viewer'), 'images/op_reporting.png', false, '', false, '');