First stab at Events view via angular and API
This commit is contained in:
Kyle Johnson
parent
930b94be40
commit
0c38102951
|
|
@ -415,3 +415,24 @@ th.table-th-sort-rev span.table-th-sort-span {
|
|||
height: 240px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.event {
|
||||
float: left;
|
||||
width: 184px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.over {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7);
|
||||
color: #FFF;
|
||||
position: absolute;
|
||||
padding:0 1px;
|
||||
bottom: 5px;
|
||||
font-size: 12px;
|
||||
width: 174px;
|
||||
left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,14 @@ ZoneMinder.factory('Footer', function($http) {
|
|||
};
|
||||
});
|
||||
|
||||
ZoneMinder.factory('Events', function($http) {
|
||||
return {
|
||||
getEvents: function() {
|
||||
return $http.get('/api/events.json');
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
ZoneMinder.factory('Event', function($http) {
|
||||
return {
|
||||
getEvent: function(eventId) {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,14 @@ ZoneMinder.controller('LogController', function($scope, Log) {
|
|||
});
|
||||
});
|
||||
|
||||
ZoneMinder.controller('EventsController', function($scope, Events) {
|
||||
|
||||
Events.getEvents().then(function(results) {
|
||||
$scope.events = results.data.events;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
ZoneMinder.controller('EventController', function($scope, $location, Event) {
|
||||
|
||||
var eventId = $location.search().eid;
|
||||
|
|
|
|||
|
|
@ -1,236 +1,39 @@
|
|||
<?php
|
||||
//
|
||||
// ZoneMinder web events view file, $Date$, $Revision$
|
||||
// Copyright (C) 2001-2008 Philip Coombes
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
|
||||
//
|
||||
<?php xhtmlHeaders(__FILE__, $SLANG['Events'] ); ?>
|
||||
|
||||
if ( !canView( 'Events' ) || (!empty($_REQUEST['execute']) && !canEdit('Events')) )
|
||||
{
|
||||
$view = "error";
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !empty($_REQUEST['execute']) )
|
||||
{
|
||||
executeFilter( $tempFilterName );
|
||||
}
|
||||
|
||||
$countSql = 'SELECT count(E.Id) AS EventCount FROM Monitors AS M INNER JOIN Events AS E ON (M.Id = E.MonitorId) WHERE';
|
||||
$eventsSql = 'SELECT E.Id,E.MonitorId,M.Name AS MonitorName,M.DefaultScale,E.Name,E.Width,E.Height,E.Cause,E.Notes,E.StartTime,E.Length,E.Frames,E.AlarmFrames,E.TotScore,E.AvgScore,E.MaxScore,E.Archived FROM Monitors AS M INNER JOIN Events AS E on (M.Id = E.MonitorId) WHERE';
|
||||
if ( $user['MonitorIds'] ) {
|
||||
$user_monitor_ids = " M.Id in (".join( ",", preg_split( '/["\'\s]*,["\'\s]*/', $user['MonitorIds'] ) ).")";
|
||||
$countSql .= $user_monitor_ids;
|
||||
$eventsSql .= $user_monitor_ids;
|
||||
} else {
|
||||
$countSql .= " 1";
|
||||
$eventsSql .= " 1";
|
||||
}
|
||||
|
||||
parseSort();
|
||||
parseFilter( $_REQUEST['filter'] );
|
||||
$filterQuery = $_REQUEST['filter']['query'];
|
||||
|
||||
if ( $_REQUEST['filter']['sql'] )
|
||||
{
|
||||
$countSql .= $_REQUEST['filter']['sql'];
|
||||
$eventsSql .= $_REQUEST['filter']['sql'];
|
||||
}
|
||||
$eventsSql .= " ORDER BY $sortColumn $sortOrder";
|
||||
|
||||
if ( isset($_REQUEST['page']) )
|
||||
$page = validInt($_REQUEST['page']);
|
||||
else
|
||||
$page = 0;
|
||||
if ( isset($_REQUEST['limit']) )
|
||||
$limit = validInt($_REQUEST['limit']);
|
||||
else
|
||||
$limit = 0;
|
||||
|
||||
$nEvents = dbFetchOne( $countSql, 'EventCount' );
|
||||
if ( !empty($limit) && $nEvents > $limit )
|
||||
{
|
||||
$nEvents = $limit;
|
||||
}
|
||||
$pages = (int)ceil($nEvents/ZM_WEB_EVENTS_PER_PAGE);
|
||||
if ( $pages > 1 ) {
|
||||
if ( !empty($page) ) {
|
||||
if ( $page < 0 )
|
||||
$page = 1;
|
||||
if ( $page > $pages )
|
||||
$page = $pages;
|
||||
}
|
||||
}
|
||||
if ( !empty($page) ) {
|
||||
$limitStart = (($page-1)*ZM_WEB_EVENTS_PER_PAGE);
|
||||
if ( empty( $limit ) )
|
||||
{
|
||||
$limitAmount = ZM_WEB_EVENTS_PER_PAGE;
|
||||
}
|
||||
else
|
||||
{
|
||||
$limitLeft = $limit - $limitStart;
|
||||
$limitAmount = ($limitLeft>ZM_WEB_EVENTS_PER_PAGE)?ZM_WEB_EVENTS_PER_PAGE:$limitLeft;
|
||||
}
|
||||
$eventsSql .= " limit $limitStart, $limitAmount";
|
||||
} elseif ( !empty( $limit ) ) {
|
||||
$eventsSql .= " limit 0, ".$limit;
|
||||
}
|
||||
|
||||
$maxWidth = 0;
|
||||
$maxHeight = 0;
|
||||
$archived = false;
|
||||
$unarchived = false;
|
||||
$events = array();
|
||||
foreach ( dbFetchAll( $eventsSql ) as $event )
|
||||
{
|
||||
$events[] = $event;
|
||||
$scale = max( reScale( SCALE_BASE, $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE ), SCALE_BASE );
|
||||
$eventWidth = reScale( $event['Width'], $scale );
|
||||
$eventHeight = reScale( $event['Height'], $scale );
|
||||
if ( $maxWidth < $eventWidth ) $maxWidth = $eventWidth;
|
||||
if ( $maxHeight < $eventHeight ) $maxHeight = $eventHeight;
|
||||
if ( $event['Archived'] )
|
||||
$archived = true;
|
||||
else
|
||||
$unarchived = true;
|
||||
}
|
||||
|
||||
$maxShortcuts = 5;
|
||||
$pagination = getPagination( $pages, $page, $maxShortcuts, $filterQuery.$sortQuery.'&limit='.$limit );
|
||||
|
||||
$focusWindow = true;
|
||||
|
||||
xhtmlHeaders(__FILE__, $SLANG['Events'] );
|
||||
|
||||
?>
|
||||
<body>
|
||||
|
||||
<?php include("header.php"); ?>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<form name="contentForm" id="contentForm" method="post" action="">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<h2><?= sprintf( $CLANG['EventCount'], $nEvents, zmVlang( $VLANG['Event'], $nEvents ) ) ?></h2>
|
||||
<?php if ( true || canEdit( 'Events' ) ) { ?>
|
||||
<div class="btn-group-vertical">
|
||||
<input class="btn btn-default" type="button" name="viewBtn" value="<?= $SLANG['View'] ?>" onclick="viewEvents( this, 'markEids' );" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="archiveBtn" value="<?= $SLANG['Archive'] ?>" onclick="archiveEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="unarchiveBtn" value="<?= $SLANG['Unarchive'] ?>" onclick="unarchiveEvents( this, 'markEids' );" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="editBtn" value="<?= $SLANG['Edit'] ?>" onclick="editEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="exportBtn" value="<?= $SLANG['Export'] ?>" onclick="exportEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="deleteBtn" value="<?= $SLANG['Delete'] ?>" onclick="deleteEvents( this, 'markEids' );" disabled="disabled"/>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<h2><?= sprintf( $CLANG['EventCount'], $nEvents, zmVlang( $VLANG['Event'], $nEvents ) ) ?></h2>
|
||||
<?php if ( true || canEdit( 'Events' ) ) { ?>
|
||||
<div class="btn-group-vertical">
|
||||
<input class="btn btn-default" type="button" name="archiveBtn" value="<?= $SLANG['Archive'] ?>" onclick="archiveEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="unarchiveBtn" value="<?= $SLANG['Unarchive'] ?>" onclick="unarchiveEvents( this, 'markEids' );" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="editBtn" value="<?= $SLANG['Edit'] ?>" onclick="editEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="exportBtn" value="<?= $SLANG['Export'] ?>" onclick="exportEvents( this, 'markEids' )" disabled="disabled"/>
|
||||
<input class="btn btn-default" type="button" name="deleteBtn" value="<?= $SLANG['Delete'] ?>" onclick="deleteEvents( this, 'markEids' );" disabled="disabled"/>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div> <!-- End sidebar .col-md-2 -->
|
||||
|
||||
<div class="col-md-10">
|
||||
<input type="hidden" name="view" value="<?= $view ?>"/>
|
||||
<input type="hidden" name="action" value=""/>
|
||||
<input type="hidden" name="page" value="<?= $page ?>"/>
|
||||
<?= $_REQUEST['filter']['fields'] ?>
|
||||
<input type="hidden" name="sort_field" value="<?= validHtmlStr($_REQUEST['sort_field']) ?>"/>
|
||||
<input type="hidden" name="sort_asc" value="<?= validHtmlStr($_REQUEST['sort_asc']) ?>"/>
|
||||
<input type="hidden" name="limit" value="<?= $limit ?>"/>
|
||||
<?php
|
||||
if ( $pagination )
|
||||
{
|
||||
?>
|
||||
<ul class="pagination"><?= $pagination ?></ul>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<?php
|
||||
$count = 0;
|
||||
foreach ( $events as $event )
|
||||
{
|
||||
if ( ($count++%ZM_WEB_EVENTS_PER_PAGE) == 0 )
|
||||
{
|
||||
?>
|
||||
<tr>
|
||||
<th class="colId"><a href="<?= sortHeader( 'Id' ) ?>"><?= $SLANG['Id'] ?><?= sortTag( 'Id' ) ?></a></th>
|
||||
<th class="colName"><a href="<?= sortHeader( 'Name' ) ?>"><?= $SLANG['Name'] ?><?= sortTag( 'Name' ) ?></a></th>
|
||||
<th class="colMonitor"><a href="<?= sortHeader( 'MonitorName' ) ?>"><?= $SLANG['Monitor'] ?><?= sortTag( 'MonitorName' ) ?></a></th>
|
||||
<th class="colCause"><a href="<?= sortHeader( 'Cause' ) ?>"><?= $SLANG['Cause'] ?><?= sortTag( 'Cause' ) ?></a></th>
|
||||
<th class="colTime"><a href="<?= sortHeader( 'StartTime' ) ?>"><?= $SLANG['Time'] ?><?= sortTag( 'StartTime' ) ?></a></th>
|
||||
<th class="colDuration"><a href="<?= sortHeader( 'Length' ) ?>"><?= $SLANG['Duration'] ?><?= sortTag( 'Length' ) ?></a></th>
|
||||
<th class="colFrames"><a href="<?= sortHeader( 'Frames' ) ?>"><?= $SLANG['Frames'] ?><?= sortTag( 'Frames' ) ?></a></th>
|
||||
<th class="colAlarmFrames"><a href="<?= sortHeader( 'AlarmFrames' ) ?>"><?= $SLANG['AlarmBrFrames'] ?><?= sortTag( 'AlarmFrames' ) ?></a></th>
|
||||
<th class="colTotScore"><a href="<?= sortHeader( 'TotScore' ) ?>"><?= $SLANG['TotalBrScore'] ?><?= sortTag( 'TotScore' ) ?></a></th>
|
||||
<th class="colAvgScore"><a href="<?= sortHeader( 'AvgScore' ) ?>"><?= $SLANG['AvgBrScore'] ?><?= sortTag( 'AvgScore' ) ?></a></th>
|
||||
<th class="colMaxScore"><a href="<?= sortHeader( 'MaxScore' ) ?>"><?= $SLANG['MaxBrScore'] ?><?= sortTag( 'MaxScore' ) ?></a></th>
|
||||
<?php
|
||||
if ( ZM_WEB_LIST_THUMBS )
|
||||
{
|
||||
?>
|
||||
<th class="colThumbnail"><?= $SLANG['Thumbnail'] ?></th>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<th class="colMark"><input type="checkbox" name="toggleCheck" value="1" onclick="toggleCheckbox( this, 'markEids' );"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/></th>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
$scale = max( reScale( SCALE_BASE, $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE ), SCALE_BASE );
|
||||
?>
|
||||
<tr>
|
||||
<td class="colId"><?= makePopupLink( '?view=event&eid='.$event['Id'].$filterQuery.$sortQuery.'&page=1', 'zmEvent', array( 'event', reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ) ), $event['Id'].($event['Archived']?'*':'') ) ?></td>
|
||||
<td class="colName"><?= makePopupLink( '?view=event&eid='.$event['Id'].$filterQuery.$sortQuery.'&page=1', 'zmEvent', array( 'event', reScale( $event['Width'], $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE ), reScale( $event['Height'], $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE ) ), validHtmlStr($event['Name']).($event['Archived']?'*':'' ) ) ?></td>
|
||||
<td class="colMonitorName"><?= $event['MonitorName'] ?></td>
|
||||
<td class="colCause"><?= makePopupLink( '?view=eventdetail&eid='.$event['Id'], 'zmEventDetail', 'eventdetail', validHtmlStr($event['Cause']), canEdit( 'Events' ), 'title="'.htmlspecialchars($event['Notes']).'"' ) ?></td>
|
||||
<td class="colTime"><?= strftime( STRF_FMT_DATETIME_SHORTER, strtotime($event['StartTime']) ) ?></td>
|
||||
<td class="colDuration"><?= $event['Length'] ?></td>
|
||||
<td class="colFrames"><?= makePopupLink( '?view=frames&eid='.$event['Id'], 'zmFrames', 'frames', $event['Frames'] ) ?></td>
|
||||
<td class="colAlarmFrames"><?= makePopupLink( '?view=frames&eid='.$event['Id'], 'zmFrames', 'frames', $event['AlarmFrames'] ) ?></td>
|
||||
<td class="colTotScore"><?= $event['TotScore'] ?></td>
|
||||
<td class="colAvgScore"><?= $event['AvgScore'] ?></td>
|
||||
<td class="colMaxScore"><?= makePopupLink( '?view=frame&eid='.$event['Id'].'&fid=0', 'zmImage', array( 'image', reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ) ), $event['MaxScore'] ) ?></td>
|
||||
<?php
|
||||
if ( ZM_WEB_LIST_THUMBS )
|
||||
{
|
||||
if ( $thumbData = createListThumbnail( $event ) )
|
||||
{
|
||||
?>
|
||||
<td class="colThumbnail"><?= makePopupLink( '?view=frame&eid='.$event['Id'].'&fid='.$thumbData['FrameId'], 'zmImage', array( 'image', reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ) ), '<img src="'.viewImagePath( $thumbData['Path'] ).'" width="'.$thumbData['Width'].'" height="'.$thumbData['Height'].'" alt="'.$thumbData['FrameId'].'/'.$event['MaxScore'].'"/>' ) ?></td>
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
?>
|
||||
<td class="colThumbnail"> </td>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
<td class="colMark"><input type="checkbox" name="markEids[]" value="<?= $event['Id'] ?>" onclick="configureButton( this, 'markEids' );"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/></td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php if ( $pagination ) { ?>
|
||||
<ul class="pagination"><?= $pagination ?></ul>
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10" ng-controller="EventsController">
|
||||
<div class="event" ng-repeat="event in events">
|
||||
<div>
|
||||
<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..." />
|
||||
<div class="over">
|
||||
<div class="info">
|
||||
<span>Monitor {{event.Event.MonitorId}}</span>
|
||||
<span>{{ event.Event.StartTime | DateDiff:event.Event.EndTime:'pretty' }}</span>
|
||||
<span>Event {{event.Event.Id}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End main .col-md-10 -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue