rough new frames view

This commit is contained in:
Andrew Bauer 2020-08-19 12:04:08 -05:00
parent ad9b9d91cc
commit e38a532b78
4 changed files with 91 additions and 92 deletions

View File

@ -202,7 +202,6 @@ while ( $event_row = dbFetchNext($results) ) {
<td class="text-center"><?php echo ( $event->Archived() ) ? 'Yes' : 'No' ?></td> <td class="text-center"><?php echo ( $event->Archived() ) ? 'Yes' : 'No' ?></td>
<td class="text-center"><?php echo ( $event->Emailed() ) ? 'Yes' : 'No' ?></td> <td class="text-center"><?php echo ( $event->Emailed() ) ? 'Yes' : 'No' ?></td>
<td><?php echo makePopupLink( '?view=monitor&amp;mid='.$event->MonitorId(), 'zmMonitor'.$event->MonitorId(), 'monitor', $event->MonitorName(), canEdit( 'Monitors' ) ) ?></td> <td><?php echo makePopupLink( '?view=monitor&amp;mid='.$event->MonitorId(), 'zmMonitor'.$event->MonitorId(), 'monitor', $event->MonitorName(), canEdit( 'Monitors' ) ) ?></td>
<td><?php echo makePopupLink( '?view=eventdetail&amp;eid='.$event->Id(), 'zmEventDetail', 'eventdetail', validHtmlStr($event->Cause()), canEdit( 'Events' ), 'title="'.htmlspecialchars($event->Notes()).'"' ) ?> <td><?php echo makePopupLink( '?view=eventdetail&amp;eid='.$event->Id(), 'zmEventDetail', 'eventdetail', validHtmlStr($event->Cause()), canEdit( 'Events' ), 'title="'.htmlspecialchars($event->Notes()).'"' ) ?>
<?php <?php
# display notes as small text # display notes as small text
@ -223,12 +222,8 @@ while ( $event_row = dbFetchNext($results) ) {
<td><?php echo strftime(STRF_FMT_DATETIME_SHORTER, strtotime($event->StartTime())) ?></td> <td><?php echo strftime(STRF_FMT_DATETIME_SHORTER, strtotime($event->StartTime())) ?></td>
<td><?php echo strftime(STRF_FMT_DATETIME_SHORTER, strtotime($event->EndTime()) ) ?></td> <td><?php echo strftime(STRF_FMT_DATETIME_SHORTER, strtotime($event->EndTime()) ) ?></td>
<td><?php echo gmdate("H:i:s", $event->Length() ) ?></td> <td><?php echo gmdate("H:i:s", $event->Length() ) ?></td>
<td><?php echo makePopupLink( '?view=frames&amp;eid='.$event->Id(), 'zmFrames', <td><a href="?view=frames&amp;eid=<?php echo $event->Id() ?>"><?php echo $event->Frames() ?></a></td>
( ZM_WEB_LIST_THUMBS ? array('frames', ZM_WEB_LIST_THUMB_WIDTH, ZM_WEB_LIST_THUMB_HEIGHT) : 'frames'), <td><a href="?view=frames&amp;eid=<?php echo $event->Id() ?>"><?php echo $event->AlarmFrames() ?></a></td>
$event->Frames() ) ?></td>
<td><?php echo makePopupLink( '?view=frames&amp;eid='.$event->Id(), 'zmFrames',
( ZM_WEB_LIST_THUMBS ? array('frames', ZM_WEB_LIST_THUMB_WIDTH, ZM_WEB_LIST_THUMB_HEIGHT) : 'frames'),
$event->AlarmFrames() ) ?></td>
<td><?php echo $event->TotScore() ?></td> <td><?php echo $event->TotScore() ?></td>
<td><?php echo $event->AvgScore() ?></td> <td><?php echo $event->AvgScore() ?></td>
<td><?php echo makePopupLink( <td><?php echo makePopupLink(

View File

@ -110,70 +110,60 @@ xhtmlHeaders(__FILE__, translate('Frames').' - '.$Event->Id());
?> ?>
<body> <body>
<div id="page"> <div id="page">
<div id="header"> <?php echo getNavBarHTML() ?>
<div id="headerButtons"><a href="#" data-on-click="closeWindow"><?php echo translate('Close') ?></a></div>
<h2><?php echo translate('Frames') ?> - <?php echo $Event->Id() ?></h2> <!-- Toolbar button placement and styling handled by bootstrap-tables -->
<div id="pagination"> <div id="toolbar">
<?php <button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
if ( $pagination ) { <button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
?>
<h2 class="pagination"><?php echo $pagination ?></h2>
<?php
}
?>
<?php
if ( $pages > 1 ) {
if ( !empty($page) ) {
?>
<a href="?view=<?php echo $view ?>&amp;page=0<?php echo $totalQuery ?>"><?php echo translate('ViewAll') ?></a>
<?php
} else {
?>
<a href="?view=<?php echo $view ?>&amp;page=1<?php echo $totalQuery ?>"><?php echo translate('ViewPaged') ?></a>
<?php
}
}
?>
</div>
</div> </div>
<div id="content">
<form name="contentForm" id="contentForm" method="get" action="?"> <!-- Table styling handled by bootstrap-tables -->
<input type="hidden" name="view" value="none"/> <div class="row justify-content-center">
<input type="hidden" name="view" value="<?php echo $view ?>"/> <table
<input type="hidden" name="action" value=""/> id="framesTable"
<input type="hidden" name="page" value="<?php echo $page ?>"/> data-toggle="table"
<input type="hidden" name="eid" value="<?php echo $eid ?>"/> data-pagination="true"
<?php echo $_REQUEST['filter']['fields'] ?> data-show-pagination-switch="true"
<input type="hidden" name="sort_field" value="<?php echo validHtmlStr($_REQUEST['sort_field']) ?>"/> data-page-list="[10, 25, 50, 100, 200, All]"
<input type="hidden" name="sort_asc" value="<?php echo validHtmlStr($_REQUEST['sort_asc']) ?>"/> data-search="true"
<input type="hidden" name="limit" value="<?php echo $limit ?>"/> data-cookie="true"
<table id="contentTable" class="major"> data-cookie-id-table="zmFramesTable"
<thead> data-cookie-expire="2y"
<tr> data-remember-order="true"
<th class="colId"><a href="<?php echo sortHeader('FramesFrameId') ?>"><?php echo translate('Frame Id') ?><?php echo sortTag('FramesFrameId') ?></a></th> data-show-columns="true"
<th class="colType"><a href="<?php echo sortHeader('FramesType') ?>"><?php echo translate('Type') ?><?php echo sortTag('FramesType') ?></a></th> data-toolbar="#toolbar"
<th class="colTimeStamp"><a href="<?php echo sortHeader('FramesTimeStamp') ?>"><?php echo translate('TimeStamp') ?><?php echo sortTag('FramesTimeStamp') ?></a></th> data-show-fullscreen="true"
<th class="colTimeDelta"><a href="<?php echo sortHeader('FramesDelta') ?>"><?php echo translate('TimeDelta') ?><?php echo sortTag('FramesDelta') ?></a></th> data-maintain-meta-data="true"
<th class="colScore"><a href="<?php echo sortHeader('FramesScore') ?>"><?php echo translate('Score') ?><?php echo sortTag('FramesScore') ?></a></th> data-mobile-responsive="true"
data-buttons-class="btn btn-normal"
class="table-sm table-borderless">
<thead>
<!-- Row styling is handled by bootstrap-tables -->
<tr>
<th data-align="center" data-sortable="true" data-field="FramesId"><a href="<?php echo sortHeader('FramesFrameId') ?>"><?php echo translate('Frame Id') ?></a></th>
<th data-align="center" data-sortable="true" data-field="FramesType"><a href="<?php echo sortHeader('FramesType') ?>"><?php echo translate('Type') ?></a></th>
<th data-align="center" data-sortable="true" data-field="FramesTimeStamp"><a href="<?php echo sortHeader('FramesTimeStamp') ?>"><?php echo translate('TimeStamp') ?></a></th>
<th data-align="center" data-sortable="true" data-field="FramesDelta"><a href="<?php echo sortHeader('FramesDelta') ?>"><?php echo translate('TimeDelta') ?></a></th>
<th data-align="center" data-sortable="true" data-field="FramesScore"><a href="<?php echo sortHeader('FramesScore') ?>"><?php echo translate('Score') ?></a></th>
<?php <?php
if ( ZM_WEB_LIST_THUMBS ) { if ( ZM_WEB_LIST_THUMBS ) {
?> ?>
<th class="colThumbnail"><?php echo translate('Thumbnail') ?></th> <th data-align="center" data-sortable="true" data-field="Thumbnail" class="zoom"><?php echo translate('Thumbnail') ?></th>
<?php <?php
} }
?> ?>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php <?php
if ( count($frames) ) { if ( count($frames) ) {
foreach ( $frames as $frame ) { foreach ( $frames as $frame ) {
$Frame = new ZM\Frame($frame); $Frame = new ZM\Frame($frame);
$class = strtolower($frame['Type']);
?> ?>
<tr class="<?php echo $class ?>"> <tr<?php echo ( strtolower($frame['Type']) == "alarm" ) ? ' class="text-center alarm"' : ' class="text-center"' ?>>
<td class="colId"><?php echo makePopupLink( <td><?php echo makePopupLink(
'?view=frame&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmImage', '?view=frame&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmImage',
array( array(
'frame', 'frame',
@ -182,22 +172,22 @@ if ( count($frames) ) {
), ),
$frame['FrameId']) $frame['FrameId'])
?></td> ?></td>
<td class="colType"><?php echo $frame['Type'] ?></td> <td><?php echo $frame['Type'] ?></td>
<td class="colTimeStamp"><?php echo strftime(STRF_FMT_TIME, $frame['UnixTimeStamp']) ?></td> <td><?php echo strftime(STRF_FMT_TIME, $frame['UnixTimeStamp']) ?></td>
<td class="colTimeDelta"><?php echo number_format( $frame['Delta'], 2 ) ?></td> <td><?php echo number_format( $frame['Delta'], 2 ) ?></td>
<?php <?php
if ( ZM_RECORD_EVENT_STATS && ($frame['Type'] == 'Alarm') ) { if ( ZM_RECORD_EVENT_STATS && ($frame['Type'] == 'Alarm') ) {
?> ?>
<td class="colScore"><?php echo makePopupLink('?view=stats&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmStats', 'stats', $frame['Score']) ?></td> <td><?php echo makePopupLink('?view=stats&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmStats', 'stats', $frame['Score']) ?></td>
<?php <?php
} else { } else {
?> ?>
<td class="colScore"><?php echo $frame['Score'] ?></td> <td><?php echo $frame['Score'] ?></td>
<?php <?php
} }
if ( ZM_WEB_LIST_THUMBS ) { if ( ZM_WEB_LIST_THUMBS ) {
?> ?>
<td class="colThumbnail"><?php echo makePopupLink( '?view=frame&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmImage', array('image', $Event->Width(), $Event->Height()), '<img src="?view=image&amp;fid='.$Frame->Id().'&amp;'. <td><?php echo makePopupLink( '?view=frame&amp;eid='.$Event->Id().'&amp;fid='.$frame['FrameId'], 'zmImage', array('image', $Event->Width(), $Event->Height()), '<img src="?view=image&amp;fid='.$Frame->Id().'&amp;'.
(ZM_WEB_LIST_THUMB_WIDTH?'width='.ZM_WEB_LIST_THUMB_WIDTH.'&amp;':''). (ZM_WEB_LIST_THUMB_WIDTH?'width='.ZM_WEB_LIST_THUMB_WIDTH.'&amp;':'').
(ZM_WEB_LIST_THUMB_HEIGHT?'height='.ZM_WEB_LIST_THUMB_HEIGHT.'&amp;':'').'filename='.$Event->MonitorId().'_'.$frame['EventId'].'_'.$frame['FrameId'].'.jpg" '. (ZM_WEB_LIST_THUMB_HEIGHT?'height='.ZM_WEB_LIST_THUMB_HEIGHT.'&amp;':'').'filename='.$Event->MonitorId().'_'.$frame['EventId'].'_'.$frame['FrameId'].'.jpg" '.
(ZM_WEB_LIST_THUMB_WIDTH?'width="'.ZM_WEB_LIST_THUMB_WIDTH.'" ':''). (ZM_WEB_LIST_THUMB_WIDTH?'width="'.ZM_WEB_LIST_THUMB_WIDTH.'" ':'').
@ -218,19 +208,7 @@ if ( count($frames) ) {
?> ?>
</tbody> </tbody>
</table> </table>
</div>
<?php
if ( $pagination ) {
?>
<h3 class="pagination"><?php echo $pagination ?></h3>
<?php
}
?>
<div id="contentButtons">
</div>
</form>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -60,7 +60,7 @@ function initPage() {
}; };
// Init the bootstrap-table // Init the bootstrap-table
$j('#eventTable').bootstrapTable('destroy').bootstrapTable({icons: icons}); table.bootstrapTable('destroy').bootstrapTable({icons: icons});
// Hide these columns on first run when no cookie is saved // Hide these columns on first run when no cookie is saved
if ( !getCookie("zmEventsTable.bs.table.columns") ) { if ( !getCookie("zmEventsTable.bs.table.columns") ) {
@ -68,6 +68,8 @@ function initPage() {
table.bootstrapTable('hideColumn', 'Emailed'); table.bootstrapTable('hideColumn', 'Emailed');
} }
backBtn.prop('disabled', !document.referrer.length);
// enable or disable buttons based on current selection and user rights // enable or disable buttons based on current selection and user rights
table.on('check.bs.table uncheck.bs.table ' + table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', 'check-all.bs.table uncheck-all.bs.table',
@ -80,10 +82,6 @@ function initPage() {
downloadBtn.prop('disabled', !(table.bootstrapTable('getSelections').length && canViewEvents)); downloadBtn.prop('disabled', !(table.bootstrapTable('getSelections').length && canViewEvents));
deleteBtn.prop('disabled', !(table.bootstrapTable('getSelections').length && canEditEvents)); deleteBtn.prop('disabled', !(table.bootstrapTable('getSelections').length && canEditEvents));
}); });
// Don't enable the back button if there is no previous zm page to go back to
backBtn.prop('disabled', !document.referrer.length);
// Setup the thumbnail video animation // Setup the thumbnail video animation
initThumbAnimation(); initThumbAnimation();
@ -95,19 +93,16 @@ function initPage() {
evt.preventDefault(); evt.preventDefault();
window.history.back(); window.history.back();
}); });
// Manage the REFRESH Button // Manage the REFRESH Button
document.getElementById("refreshBtn").addEventListener("click", function onRefreshClick(evt) { document.getElementById("refreshBtn").addEventListener("click", function onRefreshClick(evt) {
evt.preventDefault(); evt.preventDefault();
window.location.reload(true); window.location.reload(true);
}); });
// Manage the TIMELINE Button // Manage the TIMELINE Button
document.getElementById("tlineBtn").addEventListener("click", function onTlineClick(evt) { document.getElementById("tlineBtn").addEventListener("click", function onTlineClick(evt) {
evt.preventDefault(); evt.preventDefault();
window.location.assign('?view=timeline'+filterQuery); window.location.assign('?view=timeline'+filterQuery);
}); });
// Manage the VIEW button // Manage the VIEW button
document.getElementById("viewBtn").addEventListener("click", function onViewClick(evt) { document.getElementById("viewBtn").addEventListener("click", function onViewClick(evt) {
var selections = getIdSelections(); var selections = getIdSelections();
@ -116,7 +111,6 @@ function initPage() {
var filter = '&filter[Query][terms][0][attr]=Id&filter[Query][terms][0][op]=%3D%5B%5D&filter[Query][terms][0][val]='+selections.join('%2C'); var filter = '&filter[Query][terms][0][attr]=Id&filter[Query][terms][0][op]=%3D%5B%5D&filter[Query][terms][0][val]='+selections.join('%2C');
window.location.href = thisUrl+'?view=event&eid='+selections[0]+filter+sortQuery+'&page=1&play=1'; window.location.href = thisUrl+'?view=event&eid='+selections[0]+filter+sortQuery+'&page=1&play=1';
}); });
// Manage the ARCHIVE button // Manage the ARCHIVE button
document.getElementById("archiveBtn").addEventListener("click", function onArchiveClick(evt) { document.getElementById("archiveBtn").addEventListener("click", function onArchiveClick(evt) {
var selections = getIdSelections(); var selections = getIdSelections();
@ -125,7 +119,6 @@ function initPage() {
$j.getJSON(thisUrl + '?view=events&action=archive&eids[]='+selections.join('&eids[]=')); $j.getJSON(thisUrl + '?view=events&action=archive&eids[]='+selections.join('&eids[]='));
window.location.reload(true); window.location.reload(true);
}); });
// Manage the UNARCHIVE button // Manage the UNARCHIVE button
document.getElementById("unarchiveBtn").addEventListener("click", function onUnarchiveClick(evt) { document.getElementById("unarchiveBtn").addEventListener("click", function onUnarchiveClick(evt) {
if ( ! canEditEvents ) { if ( ! canEditEvents ) {
@ -146,7 +139,6 @@ function initPage() {
window.location.reload(true); window.location.reload(true);
} }
}); });
// Manage the EDIT button // Manage the EDIT button
document.getElementById("editBtn").addEventListener("click", function onEditClick(evt) { document.getElementById("editBtn").addEventListener("click", function onEditClick(evt) {
if ( ! canEditEvents ) { if ( ! canEditEvents ) {
@ -159,7 +151,6 @@ function initPage() {
evt.preventDefault(); evt.preventDefault();
createPopup('?view=eventdetail&eids[]='+selections.join('&eids[]='), 'zmEventDetail', 'eventdetail'); createPopup('?view=eventdetail&eids[]='+selections.join('&eids[]='), 'zmEventDetail', 'eventdetail');
}); });
// Manage the EXPORT button // Manage the EXPORT button
document.getElementById("exportBtn").addEventListener("click", function onExportClick(evt) { document.getElementById("exportBtn").addEventListener("click", function onExportClick(evt) {
var selections = getIdSelections(); var selections = getIdSelections();
@ -167,7 +158,6 @@ function initPage() {
evt.preventDefault(); evt.preventDefault();
window.location.assign('?view=export&eids[]='+selections.join('&eids[]=')); window.location.assign('?view=export&eids[]='+selections.join('&eids[]='));
}); });
// Manage the DOWNLOAD VIDEO button // Manage the DOWNLOAD VIDEO button
document.getElementById("downloadBtn").addEventListener("click", function onDownloadClick(evt) { document.getElementById("downloadBtn").addEventListener("click", function onDownloadClick(evt) {
var selections = getIdSelections(); var selections = getIdSelections();
@ -175,7 +165,6 @@ function initPage() {
evt.preventDefault(); evt.preventDefault();
createPopup('?view=download&eids[]='+selections.join('&eids[]='), 'zmDownload', 'download'); createPopup('?view=download&eids[]='+selections.join('&eids[]='), 'zmDownload', 'download');
}); });
// Manage the DELETE button // Manage the DELETE button
document.getElementById("deleteBtn").addEventListener("click", function onDeleteClick(evt) { document.getElementById("deleteBtn").addEventListener("click", function onDeleteClick(evt) {
if ( ! canEditEvents ) { if ( ! canEditEvents ) {

View File

@ -0,0 +1,37 @@
function initPage() {
var backBtn = $j('#backBtn');
var table = $j('#framesTable');
// Define the icons used in the bootstrap-table top-right toolbar
var icons = {
paginationSwitchDown: 'fa-caret-square-o-down',
paginationSwitchUp: 'fa-caret-square-o-up',
refresh: 'fa-sync',
toggleOff: 'fa-toggle-off',
toggleOn: 'fa-toggle-on',
columns: 'fa-th-list',
fullscreen: 'fa-arrows-alt',
detailOpen: 'fa-plus',
detailClose: 'fa-minus'
};
// Init the bootstrap-table
table.bootstrapTable('destroy').bootstrapTable({icons: icons});
backBtn.prop('disabled', !document.referrer.length);
// Manage the BACK button
document.getElementById("backBtn").addEventListener("click", function onBackClick(evt) {
evt.preventDefault();
window.history.back();
});
// Manage the REFRESH Button
document.getElementById("refreshBtn").addEventListener("click", function onRefreshClick(evt) {
evt.preventDefault();
window.location.reload(true);
});
}
$j(document).ready(function() {
initPage();
});