diff --git a/web/skins/classic/views/js/frame.js b/web/skins/classic/views/js/frame.js
index 13c7bcac8..a1f05c4fa 100644
--- a/web/skins/classic/views/js/frame.js
+++ b/web/skins/classic/views/js/frame.js
@@ -1,4 +1,6 @@
+var table = $j('#frameStatsTable');
var backBtn = $j('#backBtn');
+var statsBtn = $j('#statsBtn');
function changeScale() {
var scale = $j('#scale').val();
@@ -32,6 +34,20 @@ function changeScale() {
anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&'));
}
});
+
+ // After a resize, check if we still have room to display the event stats table
+ onStatsResize(newWidth);
+}
+
+function getFrmStatsCookie() {
+ var cookie = 'zmFrameStats';
+ var stats = getCookie(cookie);
+
+ if ( !stats ) {
+ stats = 'on';
+ setCookie(cookie, stats, 10*365);
+ }
+ return stats;
}
function getStat(params) {
@@ -42,8 +58,20 @@ function getStat(params) {
$j('#frameStatsTable').empty().append('
');
$j.each( statHeaderStrings, function( key ) {
var th = $j('').addClass('text-right').text(statHeaderStrings[key]);
- var tdString = ( stat ) ? stat[key] : 'n/a';
- var td = $j(' | ').text(tdString);
+ var tdString;
+
+ switch (stat ? key : 'n/a') {
+ case 'FrameId':
+ tdString = '' + stat[key] + '';
+ break;
+ case 'n/a':
+ tdString = 'n/a';
+ break;
+ default:
+ tdString = stat[key];
+ }
+
+ var td = $j(' | ').html(tdString);
var row = $j(' | ').append(th, td);
$j('#frameStatsTable tbody').append(row);
@@ -52,6 +80,27 @@ function getStat(params) {
.fail(logAjaxFail);
}
+function onStatsResize(vidwidth) {
+ var minWidth = 300; // An arbitrary value in pixels used to hide the stats table
+ var width = $j(window).width() - vidwidth;
+
+ // Hide the stats table if we have run out of room to show it properly
+ if ( width < minWidth ) {
+ statsBtn.prop('disabled', true);
+ if ( table.is(':visible') ) {
+ table.toggle(false);
+ wasHidden = true;
+ }
+ // Show the stats table if we hid it previously and sufficient room becomes available
+ } else if ( width >= minWidth ) {
+ statsBtn.prop('disabled', false);
+ if ( !table.is(':visible') && wasHidden ) {
+ table.toggle(true);
+ wasHidden = false;
+ }
+ }
+}
+
function initPage() {
if ( scale == '0' || scale == 'auto' ) changeScale();
@@ -70,14 +119,29 @@ function initPage() {
window.location.reload(true);
});
- // Manage the STATS button
- document.getElementById("statsBtn").addEventListener("click", function onViewClick(evt) {
+ // Manage the Frame STATISTICS Button
+ document.getElementById("statsBtn").addEventListener("click", function onStatsClick(evt) {
evt.preventDefault();
- window.location.href = thisUrl+'?view=stats&eid='+eid+'&fid='+fid;
+ var cookie = 'zmFrameStats';
+
+ // Toggle the visiblity of the stats table and write an appropriate cookie
+ if ( table.is(':visible') ) {
+ setCookie(cookie, 'off', 10*365);
+ table.toggle(false);
+ } else {
+ setCookie(cookie, 'on', 10*365);
+ table.toggle(true);
+ }
});
// Load the frame stats
getStat({eid: eid, fid: fid});
+
+ if ( getFrmStatsCookie() != 'on' ) {
+ table.toggle(false);
+ } else {
+ onStatsResize($j('#base_width').val() * scale / SCALE_BASE);
+ }
}
// Kick everything off
diff --git a/web/skins/classic/views/js/frame.js.php b/web/skins/classic/views/js/frame.js.php
index bf1c237c7..9e705d188 100644
--- a/web/skins/classic/views/js/frame.js.php
+++ b/web/skins/classic/views/js/frame.js.php
@@ -14,14 +14,16 @@ var fid = ;
var record_event_stats = ;
var alarmFrame = ;
-var statHeaderStrings = {};
-statHeaderStrings.ZoneName = "";
-statHeaderStrings.PixelDiff = "";
-statHeaderStrings.AlarmPixels = "";
-statHeaderStrings.FilterPixels = "";
-statHeaderStrings.BlobPixels = "";
-statHeaderStrings.Blobs = "";
-statHeaderStrings.BlobSizes = "";
-statHeaderStrings.AlarmLimits = "";
-statHeaderStrings.Score = "";
-
+var statHeaderStrings = {
+ Id: '',
+ FrameId: '',
+ ZoneName: '',
+ PixelDiff: '',
+ AlarmPixels: '',
+ FilterPixels: '',
+ BlobPixels: '',
+ Blobs: '',
+ BlobSizes: '',
+ AlarmLimits: '',
+ Score: ''
+};