Merge pull request #179 from WDKevin/modern
Added datetime picker support and implemented on events sidebar
This commit is contained in:
Kyle Johnson
commit
38944fb994
|
|
@ -5,31 +5,24 @@ class EventsController extends AppController {
|
|||
public $components = array('Paginator');
|
||||
|
||||
public function index() {
|
||||
|
||||
$this->loadModel('Monitor');
|
||||
$this->loadModel('Frame');
|
||||
$conditions = array();
|
||||
|
||||
$this->set('thumb_width', Configure::read('ZM_WEB_LIST_THUMB_WIDTH'));
|
||||
|
||||
$named = $this->extractNamedParams(
|
||||
array('MonitorId', 'StartTime' )
|
||||
);
|
||||
if (isset($this->params['url']['data'])) {
|
||||
$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) {
|
||||
foreach ($named as $key => $value) {
|
||||
switch ($key) {
|
||||
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;
|
||||
if (isset($params['EndDate']) ) {
|
||||
$params['EndDate'] = strtotime($params['EndDate']);
|
||||
if ($params['EndDate'] > 0) {array_push($conditions, array('UNIX_TIMESTAMP(Event.EndTime) <= '.$params['EndDate']));}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$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' ),
|
||||
|
|
@ -40,19 +33,12 @@ public function index() {
|
|||
$data = $this->paginate('Event');
|
||||
$this->set('events', $data);
|
||||
|
||||
$this->set('monitors', $this->Monitor->find('all', array('fields' => array('Monitor.Name') )));
|
||||
$this->set('monitors', $this->Monitor->find('all', array('fields' => array('Monitor.Name'))));
|
||||
|
||||
foreach ($data as $key => $value) {
|
||||
$thumbData[$key] = $this->Frame->createListThumbnail($value['Event']);
|
||||
$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) {
|
||||
|
|
|
|||
|
|
@ -1,70 +1,58 @@
|
|||
<?php $this->assign('title', 'Events'); ?>
|
||||
<?php $this->start('sidebar'); ?>
|
||||
<div class="panel-body">
|
||||
<div id="sidebar">
|
||||
<?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,
|
||||
'label' => false,
|
||||
'div' => false,
|
||||
'fieldset' => false
|
||||
)));
|
||||
?>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Filter by Monitor</div>
|
||||
<div class="panel-body">
|
||||
<div id="events_monitors">
|
||||
<ul class="list-group">
|
||||
<?php foreach ($monitors as $monitor): ?>
|
||||
<li class="list-group-item" id="Monitor_<?php echo $monitor['Monitor']['Id']; ?>">
|
||||
<?php echo $this->Form->input($monitor['Monitor']['Name'], array('type' => 'checkbox', 'label' => $monitor['Monitor']['Name'])); ?>
|
||||
</li>
|
||||
<?php
|
||||
endforeach;
|
||||
unset($monitor);
|
||||
<?
|
||||
foreach ($monitors as $monitor) {
|
||||
echo $this->Form->input($monitor['Monitor']['Name'], array('type' => 'checkbox', 'label' => $monitor['Monitor']['Name']));
|
||||
}
|
||||
?>
|
||||
</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 class="panel panel-default">
|
||||
|
||||
<div class="panel-heading">End Time</div>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item"><?php echo $this->Form->input('End Date', array('id' => 'EventEndDate', 'required' => true)); ?></div>
|
||||
|
||||
<div class="list-group-item">
|
||||
<?php echo $this->Form->inputs(array(
|
||||
'legend' => false,
|
||||
'fieldset' => false,
|
||||
'Hour' => array('type' => 'select', 'id' => 'EventEndHour', 'options' => $hours),
|
||||
'Minute' => array('type' => 'select', 'id' => 'EventEndMinute', 'options' => $minutes)
|
||||
)); ?>
|
||||
<div class="panel-heading">Filter by Date & Time</div>
|
||||
<div class="panel-body">
|
||||
Start Date
|
||||
<div class="form-group">
|
||||
<div class="input-group date datetime">
|
||||
<input type="text" class="form-control" id="EventStartDate" name="data[StartDate]">
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
End Date
|
||||
<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>
|
||||
|
||||
<?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();')); ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php $this->end(); ?>
|
||||
|
||||
<div id="EventsContent">
|
||||
<ul class="pagination">
|
||||
<?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?>
|
||||
</ul>
|
||||
|
|
@ -74,9 +62,13 @@ unset($monitor);
|
|||
?>
|
||||
|
||||
<table class="table table-condensed table-striped" id="Events">
|
||||
<thead>
|
||||
<?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'));
|
||||
|
||||
?>
|
||||
</thead>
|
||||
<tbody id="EventsTableBody">
|
||||
<?
|
||||
foreach ($events as $key => $value) {
|
||||
echo $this->Html->tableCells(array(
|
||||
$this->Form->checkbox('delete.', array(
|
||||
|
|
@ -93,7 +85,6 @@ foreach ($events as $key => $value) {
|
|||
$value['Event']['Name'],
|
||||
$value['Monitor']['Name'],
|
||||
$value['Event']['Cause'],
|
||||
//$value['Event']['StartTime'],
|
||||
$this->Time->format('n/j/y @ g:i:s A', $value['Event']['StartTime'], null, 'EST'),
|
||||
$value[0]['Duration'],
|
||||
$value['Event']['AlarmFrames'],
|
||||
|
|
@ -103,6 +94,7 @@ foreach ($events as $key => $value) {
|
|||
));
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<?
|
||||
|
|
@ -112,3 +104,4 @@ foreach ($events as $key => $value) {
|
|||
<ul class="pagination">
|
||||
<?php echo $this->Paginator->numbers(array('tag' => 'li', 'separator' => false, 'currentClass' => 'active', 'currentTag' => 'span')); ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -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('colorbox');
|
||||
echo $this->Html->css('bootstrap-theme.min');
|
||||
echo $this->Html->css('bootstrap-datetimepicker.min');
|
||||
echo $this->Html->css('bootstrap.min');
|
||||
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.colorbox-min');
|
||||
echo $this->Html->script('bootstrap.min');
|
||||
echo $this->Html->script('bootstrap-datetimepicker.min');
|
||||
echo $this->Html->script('main');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loadingDiv"><div></div></div>
|
||||
<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">Used Event Storage: <?php echo $diskSpace; ?>%</p>
|
||||
<p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p>
|
||||
<div class="container">
|
||||
<div id="loadingDiv"><img src="/img/loading.gif" alt="Loading..." /></div>
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">ZoneMinder</a>
|
||||
</div>
|
||||
|
|
@ -77,7 +79,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
|
|||
</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->fetch('content'); ?>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/* Fullscreen */
|
||||
#main-content {}
|
||||
#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;}
|
||||
/* End Fullscreen */
|
||||
|
||||
|
|
@ -14,6 +14,36 @@
|
|||
}
|
||||
/* 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{
|
||||
margin: 5px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,12 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
// Date/Time Pickers //
|
||||
$('.datetime').datetimepicker({
|
||||
pick12HourFormat: true,
|
||||
pickSeconds: false
|
||||
});
|
||||
// Date/Time Pickers //
|
||||
|
||||
// Fullscreen //
|
||||
var fullscreen = false;
|
||||
$('#toggle-fullscreen').click(function() {
|
||||
|
|
@ -82,32 +89,8 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
$("#EventsButtonSearch").button();
|
||||
$("#EventsIndexForm").submit(function() {
|
||||
$base_url = '/events/index/';
|
||||
|
||||
$( "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');
|
||||
$('#EventsIndexForm').submit(function() {
|
||||
$('#main-content-body').load('/events/index #EventsContent', $('#EventsIndexForm').serialize());
|
||||
});
|
||||
|
||||
$( "#EventStartDate" ).datepicker({
|
||||
|
|
@ -184,7 +167,7 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
// Select All Events //
|
||||
|
|
|
|||
Loading…
Reference in New Issue