Huge improvements on the visual console fullscreen view

This commit is contained in:
Alejandro Gallardo Escobar 2016-05-25 13:36:21 +02:00
parent 72ff758d49
commit f68f1823f3
2 changed files with 131 additions and 157 deletions

View File

@ -137,32 +137,27 @@ ui_require_javascript_file('wz_jsgraphics');
ui_require_javascript_file('pandora_visual_console'); ui_require_javascript_file('pandora_visual_console');
?> ?>
<style type="text/css">
div#vc-controls {
position: fixed;
top: 30px;
right: 20px;
}
div#vc-controls div.vc-title, div#vc-controls div.vc-refr {
margin-top: 6px;
margin-left: 3px;
margin-right: 3px;
}
div#vc-controls div.vc-refr>div {
display: inline;
}
div#vc-controls img.vc-qr {
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
}
</style>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
var refr = <?php echo (int) $refr; ?>; var refr = <?php echo (int) $refr; ?>;
var startCountDown = function (duration, cb) {
$('div.vc-countdown').countdown('destroy');
if (!duration) return;
var t = new Date();
t.setTime(t.getTime() + duration * 1000);
$('div.vc-countdown').countdown({
until: t,
format: 'MS',
layout: '(%M%nn%M:%S%nn%S <?php echo __('Until refresh'); ?>) ',
alwaysExpire: true,
onExpiry: function () {
$('div.vc-countdown').countdown('destroy');
cb();
}
});
}
var fetchMap = function () { var fetchMap = function () {
$.ajax({ $.ajax({
url: 'public_console.php', url: 'public_console.php',
@ -184,23 +179,6 @@ ui_require_javascript_file('pandora_visual_console');
}); });
} }
var startCountDown = function (duration, cb) {
$('div.vc-countdown').countdown('destroy');
if (!duration) return;
var t = new Date();
t.setTime(t.getTime() + duration * 1000);
$('div.vc-countdown').countdown({
until: t,
format: 'MS',
layout: '(%M%nn%M:%S%nn%S <?php echo __('Until refresh'); ?>) ',
alwaysExpire: true,
onExpiry: function () {
$('div.vc-countdown').countdown('destroy');
cb();
}
});
}
// Auto hide controls // Auto hide controls
var controls = document.getElementById('vc-controls'); var controls = document.getElementById('vc-controls');
autoHideElement(controls, 1000); autoHideElement(controls, 1000);
@ -213,7 +191,6 @@ ui_require_javascript_file('pandora_visual_console');
$('select#refr').change(function (event) { $('select#refr').change(function (event) {
refr = Number.parseInt(event.target.value, 10); refr = Number.parseInt(event.target.value, 10);
startCountDown(refr, fetchMap); startCountDown(refr, fetchMap);
}); });
// Start the map fetch // Start the map fetch

View File

@ -126,151 +126,148 @@ if ($vconsole_write || $vconsole_manage) {
array ("title" => __('Builder'))) .'</a>'; array ("title" => __('Builder'))) .'</a>';
} }
$options['view']['text'] = '<a href="index.php?sec=reporting&sec2=operation/visual_console/render_view&id=' . $id_layout . '&refr=' . $view_refresh . '">' . html_print_image ("images/operation.png", true, array ("title" => __('View'))) .'</a>'; $options['view']['text'] = '<a href="index.php?sec=reporting&sec2=operation/visual_console/render_view&id=' . $id_layout . '&refr=' . $view_refresh . '">'
. html_print_image("images/operation.png", true, array ("title" => __('View'))) .'</a>';
$options['view']['active'] = true; $options['view']['active'] = true;
if (! defined('METACONSOLE')) { if (! defined('METACONSOLE')) {
if ($config["pure"] == 0) { if (!$config['pure']) {
$options['pure']['text'] = '<a href="index.php?sec=reporting&amp;sec2=operation/visual_console/render_view&amp;id='.$id_layout.'&amp;refr='.((int)get_parameter('refr', 0)).'&amp;pure=1">' . html_print_image ("images/full_screen.png", true, array ("title" => __('Full screen mode'))) $options['pure']['text'] = '<a href="index.php?sec=reporting&sec2=operation/visual_console/render_view&id='.$id_layout.'&refr='.$refr.'&pure=1">'
. html_print_image('images/full_screen.png', true, array('title' => __('Full screen mode')))
. "</a>"; . "</a>";
ui_print_page_header($layout_name, 'images/visual_console.png', false, '', false, $options);
} }
else {
$options['pure']['text'] = '<a href="index.php?sec=reporting&amp;sec2=operation/visual_console/render_view&amp;id='.$id_layout.'&amp;refr='.((int)get_parameter('refr', 0)).'">'
. html_print_image ("images/normal_screen.png", true,
array ("title" => __('Back to normal mode')))
. "</a>";
// In full screen, the manage options are not available
$options = array('view' => $options['view'], 'pure' => $options['pure']);
}
$options['pure']['active'] = false;
//Set the hidden value for the javascript //Set the hidden value for the javascript
html_print_input_hidden('metaconsole', 0); html_print_input_hidden('metaconsole', 0);
ui_print_page_header ($layout_name, "images/visual_console.png", false, '', false, $options);
} }
else { else {
//Set the hidden value for the javascript //Set the hidden value for the javascript
html_print_input_hidden('metaconsole', 1); html_print_input_hidden('metaconsole', 1);
} }
visual_map_print_visual_map ($id_layout, true, true, null, null, '', false, $graph_javascript); if ($config['pure']) {
// Container of the visual map (ajax loaded)
echo '<div id="vc-container"></div>';
// Floating menu - Start
echo '<div id="vc-controls">';
echo '<div id="menu_tab">';
echo '<ul class="mn">';
if ($config["pure"]) { // Quit fullscreen
$values = array (); echo '<li class="nomn">';
$values[5] = human_time_description_raw (5); echo '<a href="index.php?sec=reporting&sec2=operation/visual_console/render_view&id='.$id_layout.'&refr='.$refr.'">';
$values[30] = human_time_description_raw (30); echo html_print_image('images/normal_screen.png', true, array('title' => __('Back to normal mode')));
$values[SECONDS_1MINUTE] = human_time_description_raw(SECONDS_1MINUTE); echo '</a>';
$values[SECONDS_2MINUTES] = human_time_description_raw(SECONDS_2MINUTES); echo '</li>';
$values[SECONDS_5MINUTES] = human_time_description_raw(SECONDS_5MINUTES);
$values[SECONDS_10MINUTES] = human_time_description_raw(SECONDS_10MINUTES);
$values[SECONDS_30MINUTES] = human_time_description_raw(SECONDS_30MINUTES);
$table->width = '90%'; // Countdown
$table->data = array (); echo '<li class="nomn">';
$table->style = array (); echo '<div class="vc-refr">';
$table->style[2] = 'text-align: center'; echo '<div class="vc-countdown"></div>';
$table->data[0][0] = __('Autorefresh time'); echo '<div id="vc-refr-form">';
echo __('Refresh') . ':';
echo html_print_select(get_refresh_time_array(), 'refr', $refr, '', '', 0, true, false, false);
echo '</div>';
echo '</div>';
echo '</li>';
$table->data[0][1] = html_print_select ($values, 'refr', $refr, '', // Console name
'N/A', 0, true, false, false); echo '<li class="nomn">';
$table->data[0][2] = html_print_submit_button (__('Refresh'), '', echo '<div class="vc-title">' . $layout_name . '</div>';
false, 'class="sub next"', true); echo '</li>';
$table->data[0][2] .= html_print_input_hidden ('vc_refr',
$config["vc_refr"], true);
echo '<div style="height:30px">&nbsp;</div>'; echo '</ul>';
if ($refr > 0) {
echo '<div id="countdown"><br /></div>';
}
echo '<div style="height:30px">&nbsp;</div>';
echo '<form method="post">';
html_print_input_hidden ('pure', $config["pure"]);
html_print_input_hidden ('id', $id_layout);
html_print_table ($table);
echo '</form>';
echo '</div>'; echo '</div>';
echo '</div>';
// Floating menu - End
ui_require_jquery_file('countdown');
ui_require_css_file('countdown');
ui_require_jquery_file ('countdown');
ui_require_css_file ('countdown');
?> ?>
<script language="javascript" type="text/javascript"> <style type="text/css">
/* <![CDATA[ */ /* Avoid the main_pure container 1000px height */
$(document).ready (function () { body.pure {
$("#refr").change(function () { min-height: 100px;
$("#hidden-vc_refr").val($("#refr option:selected").val());
});
<?php
if ($refr > 0) {
?>
t = new Date();
t.setTime (t.getTime() + <?php echo $refr * 1000; ?>);
$("#countdown").countdown({
until: t,
format: 'MS',
description: '<?php echo __('Until refresh'); ?>',
onExpiry: function () {
href = "<?php
$url = ui_get_full_url();
$url = preg_replace("/&refr=.*&/", "&", $url);
echo $url;
?>";
href = href + "&refr=<?php echo $refr;?>";
$(document).attr ("location", href);
}
}
);
<?php
} }
?> div#main_pure {
}); height: 100%;
/* ]]> */ margin: 0px;
</script> }
</style>
<?php <?php
} }
else {
visual_map_print_visual_map ($id_layout, true, true, null, null, '', false, $graph_javascript);
if ($config["pure"] && ((int)get_parameter('refr', 0)) != 0) {
ui_require_jquery_file ('countdown');
ui_require_css_file ('countdown');
} }
ui_require_javascript_file ('wz_jsgraphics');
ui_require_javascript_file ('pandora_visual_console'); ui_require_javascript_file('wz_jsgraphics');
ui_require_javascript_file('pandora_visual_console');
?> ?>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
/* <![CDATA[ */
$(document).ready (function () { $(document).ready (function () {
$("#refr").change(function () { var refr = <?php echo $refr; ?>;
$("#hidden-vc_refr").val($("#refr option:selected").val()); var pure = <?php echo (int) $config['pure']; ?>;
});
<?php if (pure) {
if ($config["pure"] && ((int)get_parameter('refr', 0)) > 0) { var startCountDown = function (duration, cb) {
?> $('div.vc-countdown').countdown('destroy');
t = new Date(); if (!duration) return;
t.setTime (t.getTime() + <?php var t = new Date();
echo ((int)get_parameter('refr', 0)) * 1000; t.setTime(t.getTime() + duration * 1000);
?>); $('div.vc-countdown').countdown({
$("#countdown").countdown({ until: t,
until: t, format: 'MS',
format: 'MS', layout: '(%M%nn%M:%S%nn%S <?php echo __('Until refresh'); ?>) ',
description: '<?php echo __('Until refresh'); ?>' alwaysExpire: true,
onExpiry: function () {
$('div.vc-countdown').countdown('destroy');
cb();
}
}); });
}
<?php var fetchMap = function () {
$.ajax({
url: 'ajax.php',
type: 'GET',
dataType: 'html',
data: {
page: 'include/ajax/visual_console.ajax',
render_map: true,
keep_aspect_ratio: true,
id_visual_console: <?php echo $id_layout; ?>,
graph_javascript: <?php echo (int) $graph_javascript; ?>,
width: $(window).width(),
height: $(window).height()
}
})
.done(function (data, textStatus, xhr) {
$('div#vc-container').html(data);
startCountDown(refr, fetchMap);
});
}
// Auto hide controls
var controls = document.getElementById('vc-controls');
autoHideElement(controls, 1000);
$('select#refr').change(function (event) {
refr = Number.parseInt(event.target.value, 10);
startCountDown(refr, fetchMap);
});
// Start the map fetch
fetchMap();
}
else {
$('#refr').change(function () {
$('#hidden-vc_refr').val($('#refr option:selected').val());
});
} }
?>
}); });
/* ]]> */
</script> </script>