ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #179 from WDKevin/modern 

Added datetime picker support and implemented on events sidebar
This commit is contained in:
Kyle Johnson 2013-10-01 06:28:29 -07:00
parent 366a7c2541 84cd245462
commit 38944fb994
7 changed files with 133 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/app/Controller/EventsController.php
View File

@ -5,31 +5,24 @@ class EventsController extends AppController {
public $components = array('Paginator'); public $components = array('Paginator');
public function index() { public function index() {
$this->loadModel('Monitor'); $this->loadModel('Monitor');
$this->loadModel('Frame'); $this->loadModel('Frame');
$conditions = array(); $conditions = array();
$this->set('thumb_width', Configure::read('ZM_WEB_LIST_THUMB_WIDTH')); $this->set('thumb_width', Configure::read('ZM_WEB_LIST_THUMB_WIDTH'));
$named = $this->extractNamedParams( if (isset($this->params['url']['data'])) {
array('MonitorId', 'StartTime' ) $params = $this->params['url']['data'];
); if (isset($params['StartDate']) ) {
$params['StartDate'] = strtotime($params['StartDate']);
if ($params['StartDate'] > 0) {array_push($conditions, array('UNIX_TIMESTAMP(Event.StartTime) >= '.$params['StartDate']));}
}
if ($named) { if (isset($params['EndDate']) ) {
foreach ($named as $key => $value) { $params['EndDate'] = strtotime($params['EndDate']);
switch ($key) { if ($params['EndDate'] > 0) {array_push($conditions, array('UNIX_TIMESTAMP(Event.EndTime) <= '.$params['EndDate']));}
case "StartTime":
$StartTime = array("$key BETWEEN FROM_UNIXTIME($value[0]) and FROM_UNIXTIME($value[1])");
array_push($conditions, $StartTime);
break;
case "MonitorId":
$$key = array($key => $value);
array_push($conditions, $$key);
break;
} }
} }
};
$this->paginate = array( $this->paginate = array(
'fields' => array('Event.Name', 'Event.Length', 'Event.MonitorId', 'Event.Id', 'Monitor.Name', 'Event.MaxScore', 'Event.Width', 'Event.Height', 'Event.StartTime', 'Event.TotScore', 'Event.AvgScore', 'Event.Cause', 'Event.AlarmFrames', 'TIMESTAMPDIFF (SECOND, Event.StartTime, Event.EndTime) AS Duration' ), 'fields' => array('Event.Name', 'Event.Length', 'Event.MonitorId', 'Event.Id', 'Monitor.Name', 'Event.MaxScore', 'Event.Width', 'Event.Height', 'Event.StartTime', 'Event.TotScore', 'Event.AvgScore', 'Event.Cause', 'Event.AlarmFrames', 'TIMESTAMPDIFF (SECOND, Event.StartTime, Event.EndTime) AS Duration' ),
@ -46,13 +39,6 @@ public function index() {
$thumbData[$key] = $this->Frame->createListThumbnail($value['Event']); $thumbData[$key] = $this->Frame->createListThumbnail($value['Event']);
$this->set('thumbData', $thumbData); $this->set('thumbData', $thumbData);
} }
$prepend = array('00','01','02','03','04','05','06','07','08','09');
$hours = array_merge($prepend,range(10, 23));
$minutes = array_merge($prepend,range(10, 59));
$seconds = $minutes;
$this->set('hours', $hours);
$this->set('minutes', $minutes);
} }
public function view($id = null) { public function view($id = null) {

77
web/app/View/Events/index.ctp
View File

@ -1,70 +1,58 @@
<?php $this->assign('title', 'Events'); ?> <?php $this->assign('title', 'Events'); ?>
<?php $this->start('sidebar'); ?> <?php $this->start('sidebar'); ?>
<div class="panel-body">
<div id="sidebar"> <div id="sidebar">
<?php <?php
echo $this->Form->create('Events', array('default' => false, 'inputDefaults' => array( echo $this->Form->create('Events', array('action' => 'index', 'default' => false, 'inputDefaults' => array(
'legend' => false, 'legend' => false,
'label' => false, 'label' => false,
'div' => false, 'div' => false,
'fieldset' => false 'fieldset' => false
))); )));
?> ?>
<div class="panel panel-default">
<div class="panel-heading">Filter by Monitor</div>
<div class="panel-body">
<div id="events_monitors"> <div id="events_monitors">
<ul class="list-group"> <?
<?php foreach ($monitors as $monitor): ?> foreach ($monitors as $monitor) {
<li class="list-group-item" id="Monitor_<?php echo $monitor['Monitor']['Id']; ?>"> echo $this->Form->input($monitor['Monitor']['Name'], array('type' => 'checkbox', 'label' => $monitor['Monitor']['Name']));
<?php echo $this->Form->input($monitor['Monitor']['Name'], array('type' => 'checkbox', 'label' => $monitor['Monitor']['Name'])); ?> }
</li>
<?php
endforeach;
unset($monitor);
?> ?>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">Start Time</div>
<div class="list-group">
<div class="list-group-item"><?php echo $this->Form->input('Start Date', array('id' => 'EventStartDate', 'required' => true)); ?></div>
<div class="list-group-item">
<?php echo $this->Form->inputs(array(
'legend' => false,
'fieldset' => false,
'Hour' => array('type' => 'select', 'id' => 'EventStartHour', 'options' => $hours),
'Minute' => array('type' => 'select', 'id' => 'EventStartMinute', 'options' => $minutes)
)); ?>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Filter by Date & Time</div>
<div class="panel-heading">End Time</div> <div class="panel-body">
<div class="list-group"> Start Date
<div class="list-group-item"><?php echo $this->Form->input('End Date', array('id' => 'EventEndDate', 'required' => true)); ?></div> <div class="form-group">
<div class="input-group date datetime">
<div class="list-group-item"> <input type="text" class="form-control" id="EventStartDate" name="data[StartDate]">
<?php echo $this->Form->inputs(array( <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
'legend' => false, </div>
'fieldset' => false, </div>
'Hour' => array('type' => 'select', 'id' => 'EventEndHour', 'options' => $hours), End Date
'Minute' => array('type' => 'select', 'id' => 'EventEndMinute', 'options' => $minutes) <div class="form-group">
)); ?> <div class="input-group date datetime">
<input type="text" class="form-control" id="EventEndDate" name="data[EndDate]">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div> </div>
</div> </div>
</div> </div>
<?php echo $this->Form->end(array('label' => 'Search', 'id' => 'EventsButtonSearch', 'class' => 'btn btn-default')); ?> <?php echo $this->Form->end(array('label' => 'Search', 'class' => 'btn btn-default')); ?>
<?php echo $this->Html->link('Delete Selected','#',array('class' => 'btn btn-default', 'onClick' => '$("#EventsDeleteSelectedForm").submit();')); ?> <?php echo $this->Html->link('Delete Selected','#',array('class' => 'btn btn-default', 'onClick' => '$("#EventsDeleteSelectedForm").submit();')); ?>
</div>
</div> </div>
<?php $this->end(); ?> <?php $this->end(); ?>
<div id="EventsContent">
<ul class="pagination"> <ul class="pagination">
<?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?> <?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?>
</ul> </ul>
@ -74,9 +62,13 @@ unset($monitor);
?> ?>
<table class="table table-condensed table-striped" id="Events"> <table class="table table-condensed table-striped" id="Events">
<thead>
<?php <?php
echo $this->Html->tableHeaders(array($this->Form->checkbox('', array('hiddenField' => false, 'class' => 'selectAll')), 'Thumbnail', 'Id', 'Name', 'Monitor', 'Cause', 'Date/Time', 'Duration', 'Alarm Frames', 'Total Score', 'Avg. Score', 'Max Score')); echo $this->Html->tableHeaders(array($this->Form->checkbox('', array('hiddenField' => false, 'class' => 'selectAll')), 'Thumbnail', 'Id', 'Name', 'Monitor', 'Cause', 'Date/Time', 'Duration', 'Alarm Frames', 'Total Score', 'Avg. Score', 'Max Score'));
?>
</thead>
<tbody id="EventsTableBody">
<?
foreach ($events as $key => $value) { foreach ($events as $key => $value) {
echo $this->Html->tableCells(array( echo $this->Html->tableCells(array(
$this->Form->checkbox('delete.', array( $this->Form->checkbox('delete.', array(
@ -93,7 +85,6 @@ foreach ($events as $key => $value) {
$value['Event']['Name'], $value['Event']['Name'],
$value['Monitor']['Name'], $value['Monitor']['Name'],
$value['Event']['Cause'], $value['Event']['Cause'],
//$value['Event']['StartTime'],
$this->Time->format('n/j/y @ g:i:s A', $value['Event']['StartTime'], null, 'EST'), $this->Time->format('n/j/y @ g:i:s A', $value['Event']['StartTime'], null, 'EST'),
$value[0]['Duration'], $value[0]['Duration'],
$value['Event']['AlarmFrames'], $value['Event']['AlarmFrames'],
@ -103,6 +94,7 @@ foreach ($events as $key => $value) {
)); ));
} }
?> ?>
</tbody>
</table> </table>
<? <?
@ -112,3 +104,4 @@ foreach ($events as $key => $value) {
<ul class="pagination"> <ul class="pagination">
<?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?> <?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?>
</ul> </ul>
</div>

6
web/app/View/Layouts/default.ctp
View File

@ -33,6 +33,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
echo $this->Html->css('jquery-ui.min'); echo $this->Html->css('jquery-ui.min');
echo $this->Html->css('colorbox'); echo $this->Html->css('colorbox');
echo $this->Html->css('bootstrap-theme.min'); echo $this->Html->css('bootstrap-theme.min');
echo $this->Html->css('bootstrap-datetimepicker.min');
echo $this->Html->css('bootstrap.min'); echo $this->Html->css('bootstrap.min');
echo $this->Html->css('main'); echo $this->Html->css('main');
@ -44,16 +45,17 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
echo $this->Html->script('jquery.expander.min'); echo $this->Html->script('jquery.expander.min');
echo $this->Html->script('jquery.colorbox-min'); echo $this->Html->script('jquery.colorbox-min');
echo $this->Html->script('bootstrap.min'); echo $this->Html->script('bootstrap.min');
echo $this->Html->script('bootstrap-datetimepicker.min');
echo $this->Html->script('main'); echo $this->Html->script('main');
?> ?>
</head> </head>
<body> <body>
<div id="loadingDiv"><div></div></div>
<div id="header" class="navbar navbar-default" role="navigation"> <div id="header" class="navbar navbar-default" role="navigation">
<p class="navbar-text navbar-right"><?php echo $daemonStatusHtml; ?></p> <p class="navbar-text navbar-right"><?php echo $daemonStatusHtml; ?></p>
<p class="navbar-text navbar-right">Used Event Storage: <?php echo $diskSpace; ?>%</p> <p class="navbar-text navbar-right">Used Event Storage: <?php echo $diskSpace; ?>%</p>
<p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p> <p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p>
<div class="container"> <div class="container">
<div id="loadingDiv"><img src="/img/loading.gif" alt="Loading..." /></div>
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#">ZoneMinder</a> <a class="navbar-brand" href="#">ZoneMinder</a>
</div> </div>
@ -77,7 +79,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-10 col-md-10 col-lg-10"> <div class="col-sm-10 col-md-10 col-lg-10" id="main-content-body">
<?php echo $this->Session->flash(); ?> <?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?> <?php echo $this->fetch('content'); ?>

9
web/app/webroot/css/bootstrap-datetimepicker.min.css vendored Normal file
View File

@ -0,0 +1,9 @@
/*!
* Datepicker for Bootstrap v3
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.bootstrap-datetimepicker-widget{top:0;left:0;z-index:3000;width:250px;padding:4px;margin-top:1px;border-radius:4px}.bootstrap-datetimepicker-widget .btn{padding:6px}.bootstrap-datetimepicker-widget:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.bootstrap-datetimepicker-widget:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid white;border-left:6px solid transparent;content:''}.bootstrap-datetimepicker-widget.pull-right:before{right:6px;left:auto}.bootstrap-datetimepicker-widget.pull-right:after{right:7px;left:auto}.bootstrap-datetimepicker-widget>ul{margin:0;list-style-type:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-size:1.2em;font-weight:bold}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{width:20px;height:20px;text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{cursor:pointer;background:#eee}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#428bca}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{color:#999;cursor:not-allowed;background:0}.bootstrap-datetimepicker-widget td span{display:block;float:left;width:47px;height:54px;margin:2px;line-height:54px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#428bca}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{color:#999;cursor:not-allowed;background:0}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{color:#999;cursor:not-allowed;background:0}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;width:16px;height:16px;cursor:pointer}.bootstrap-datetimepicker-widget.left-oriented:before{right:6px;left:auto}.bootstrap-datetimepicker-widget.left-oriented:after{right:7px;left:auto}.bootstrap-datetimepicker-widget ul.list-unstyled li.in div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important}

32
web/app/webroot/css/main.css
View File

@ -1,7 +1,7 @@
/* Fullscreen */ /* Fullscreen */
#main-content {} #main-content {}
#main-content.fullscreen {padding-top:15px;} #main-content.fullscreen {padding-top:15px;}
#toggle-fullscreen {position:absolute;bottom:0px;right:0px;opacity:.5;padding:5px;cursor:pointer;} #toggle-fullscreen {position:fixed;bottom:0px;right:0px;opacity:.5;padding:5px;cursor:pointer;}
#toggle-fullscreen:hover {opacity:1;} #toggle-fullscreen:hover {opacity:1;}
/* End Fullscreen */ /* End Fullscreen */
@ -14,6 +14,36 @@
} }
/* End Bootstrap fixes */ /* End Bootstrap fixes */
/* Loading Spinner */
#loadingDiv {width:100%;height:100%;position:fixed;z-index:1000000;background:rgba(0,0,0,.7);}
#loadingDiv > div {
width:400px;height:40px;background-color:#ccc;top:50%;left:50%;margin:-40px -200px;position:absolute;border:3px solid #fff;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
-webkit-box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);
}
#loadingDiv > div:after {
content:'';position:absolute;background-color:#fff;left:2px;top:2px;bottom:2px;right:360px;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
-webkit-animation:loader 2s linear infinite;-moz-animation:loader 2s linear infinite;animation:loader 2s linear infinite;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
@keyframes loader {
0% {right:360px;left:2px;}
5% {left:2px;}
50% {right:2px;left:360px}
55% {right:2px;}
100% {right:360px;left:2px;}
}
@-webkit-keyframes loader {
0% {right:360px;left:2px;}
5% {left:2px;}
50% {right:2px;left:360px}
55% {right:2px;}
100% {right:360px;left:2px;}
}
/* Loading Spinner */
.monitor{ .monitor{
margin: 5px; margin: 5px;
} }

27
web/app/webroot/js/bootstrap-datetimepicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

37
web/app/webroot/js/main.js
View File

@ -1,5 +1,12 @@
$(document).ready(function() { $(document).ready(function() {
// Date/Time Pickers //
$('.datetime').datetimepicker({
pick12HourFormat: true,
pickSeconds: false
});
// Date/Time Pickers //
// Fullscreen // // Fullscreen //
var fullscreen = false; var fullscreen = false;
$('#toggle-fullscreen').click(function() { $('#toggle-fullscreen').click(function() {
@ -82,32 +89,8 @@ $(document).ready(function() {
}); });
$("#EventsButtonSearch").button(); $("#EventsButtonSearch").button();
$("#EventsIndexForm").submit(function() { $('#EventsIndexForm').submit(function() {
$base_url = '/events/index/'; $('#main-content-body').load('/events/index #EventsContent', $('#EventsIndexForm').serialize());
$( "li.ui-selected" ).each(function() {
$monitor_id = $(this).attr('id').split('_');
$base_url = $base_url + 'MonitorId:'+$monitor_id[1]+'/';
});
$start_date = $("#EventStartDate").val();
$start_hour = $("#EventStartHour").val();
$start_min = $("#EventStartMinute").val();
$end_date = $("#EventEndDate").val();
$end_hour = $("#EventEndHour").val();
$end_min = $("#EventEndMinute").val();
var start = $start_date + ' ' + $start_hour + ':' + $start_min;
var end = $end_date + ' ' + $end_hour + ':' + $end_min;
var start_epoch = new Date(start).getTime()/1000.0;
var end_epoch = new Date(end).getTime()/1000.0;
$base_url = $base_url + 'StartTime:'+start_epoch+'/';
$base_url = $base_url + 'StartTime:'+end_epoch+'/';
$('#Events').load($base_url + ' #Events');
}); });
$( "#EventStartDate" ).datepicker({ $( "#EventStartDate" ).datepicker({
@ -184,7 +167,7 @@ $(document).ready(function() {
}); });
// Select All Events // // Select All Events //
$('input[type=checkbox].selectAll').click(function(e) { $('body').on('click', 'input[type=checkbox].selectAll', function() {
$(this).closest('table').find(':checkbox').prop('checked', this.checked); $(this).closest('table').find(':checkbox').prop('checked', this.checked);
}); });
// Select All Events // // Select All Events //