Skip to content

Commit

Permalink
Events index view is now at a semi-usable state, similar to the origi…
Browse files Browse the repository at this point in the history 
…nal skin.

In the interest of releasing something, I am not going to use ajax here
for now.  Goal is to have this view behave similar to the original Events
view in the original skin.  Currently you can:

  * Paginate events
  * Filter events using the sidebar

Bug:  Filter elements are unset when paginating.
  • Loading branch information
@kylejohnson
kylejohnson committed Jul 19, 2013
1 parent ad0aaa6 commit 46deb93
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 57 deletions.
35 changes: 19 additions & 16 deletions web/app/Controller/EventsController.php
View file
Expand Up @@ -5,26 +5,35 @@ class EventsController extends AppController {
public $components = array('Paginator');

public function index() {

$this->loadModel('Monitor');
$this->loadModel('Frame');
$conditions = array();
$conditions = array();

$this->set('thumb_width', Configure::read('ZM_WEB_LIST_THUMB_WIDTH'));

$named = $this->extractNamedParams(
array('MonitorId')
array('MonitorId', 'StartTime' )
);

if ($named) {
foreach ($named as $key => $value) {
$$key = array($key => $value);
array_push($conditions, $$key);
}
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;
}
}
};

$events_per_page = Configure::read('ZM_WEB_EVENTS_PER_PAGE');

$this->paginate = array(
'fields' => array('Event.Name', 'Event.Length', 'Event.MonitorId', 'Event.Id', 'Monitor.Name', 'Event.MaxScore', 'Event.Width', 'Event.Height', 'Event.StartTime'),
'limit' => $events_per_page,
'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' ),
'limit' => Configure::read('ZM_WEB_EVENTS_PER_PAGE'),
'order' => array( 'Event.Id' => 'asc'),
'conditions' => $conditions
);
Expand All @@ -33,12 +42,6 @@ public function index() {

$this->set('monitors', $this->Monitor->find('all', array('fields' => array('Monitor.Name') )));

$this->set('eventsLastHour', $this->Monitor->query('SELECT COUNT(Event.Id) AS count FROM Monitors AS Monitor LEFT JOIN Events as Event ON Monitor.Id = Event.MonitorId AND Event.StartTime > DATE_SUB(NOW(), INTERVAL 1 HOUR) GROUP BY Monitor.Id'));
$this->set('eventsLastDay', $this->Monitor->query('SELECT COUNT(Event.Id) AS count FROM Monitors AS Monitor LEFT JOIN Events as Event ON Monitor.Id = Event.MonitorId AND Event.StartTime > DATE_SUB(NOW(), INTERVAL 1 DAY) GROUP BY Monitor.Id'));
$this->set('eventsLastWeek', $this->Monitor->query('SELECT COUNT(Event.Id) AS count FROM Monitors AS Monitor LEFT JOIN Events as Event ON Monitor.Id = Event.MonitorId AND Event.StartTime > DATE_SUB(NOW(), INTERVAL 1 WEEK) GROUP BY Monitor.Id'));
$this->set('eventsLastMonth', $this->Monitor->query('SELECT COUNT(Event.Id) AS count FROM Monitors AS Monitor LEFT JOIN Events as Event ON Monitor.Id = Event.MonitorId AND Event.StartTime > DATE_SUB(NOW(), INTERVAL 1 MONTH) GROUP BY Monitor.Id'));
$this->set('eventsArchived', $this->Monitor->query('SELECT COUNT(Event.Id) AS count FROM Monitors AS Monitor LEFT JOIN Events as Event ON Monitor.Id = Event.MonitorId AND Event.Archived = 1 GROUP BY Monitor.Id'));

foreach ($data as $key => $value) {
$thumbData[$key] = $this->Frame->createListThumbnail($value['Event']);
$this->set('thumbData', $thumbData);
Expand Down
124 changes: 88 additions & 36 deletions web/app/View/Events/index.ctp
View file
@@ -1,46 +1,98 @@
<h2>Events</h2>
<?php $count = 0; ?>
<div id="sidebar">
<?php
echo $this->Form->create('Events', array('default' => false, 'inputDefaults' => array(
'legend' => false,
'label' => false,
'div' => false,
'fieldset' => false
)));
?>
<div id="events_monitors">
<fieldset>
<legend>Monitors</legend>
<ol id="selectable">
<?php foreach ($monitors as $monitor): ?>
<li id="Monitor_<?php echo $monitor['Monitor']['Id']; ?>">
<?php echo $monitor['Monitor']['Name']; ?>
<?php echo count($monitor['Event']); ?>
<?php echo $eventsLastHour[$count][0]['count']; ?>
<?php echo $eventsLastDay[$count][0]['count']; ?>
<?php echo $eventsLastWeek[$count][0]['count']; ?>
<?php echo $eventsLastMonth[$count][0]['count']; ?>
<?php echo $eventsArchived[$count][0]['count']; ?>
</li>
<?php $count++; ?>
<?php endforeach; ?>
<?php unset($monitor); ?>
<li 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);
?>
</ol>
</fieldset>
</div>

<div id="events_date_time">
<fieldset>
<legend>Date Range</legend>
<fieldset>
<?php
$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;
echo $this->Form->input('Start Date', array('id' => 'EventStartDate', 'required' => true));
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)
));
?>
</fieldset>
<fieldset>
<?php
echo $this->Form->input('End Date', array('id' => 'EventEndDate', 'required' => true));
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)
));
?>
</fieldset>
</div>
<?php echo $this->Form->end(array('label' => 'Search', 'id' => 'EventsButtonSearch')); ?>
</div>

<div id="Events">
<div style="clear:both;"><?php echo $this->Paginator->numbers(); ?></div>
<table>
<tr>
<th>Event Name</th>
<th>Monitor Name</th>
<th>Length</th>
</tr>
<tr>
<th>Thumbnail</th>
<th>Id</th>
<th>Name</th>
<th>Monitor</th>
<th>Cause</th>
<th>Time</th>
<th>Duration</th>
<th>Alarm Frames</th>
<th>Total Score</th>
<th>Avg. Score</th>
<th>Max Score</th>
</tr>

<?php foreach ($events as $key => $value): ?>
<tr>
<td>
<?php
echo $this->Html->link($this->Html->image('/events/'.$thumbData[$key]['Path'], array(
'alt' => $thumbData[$key]['Frame']['FrameId'].'/'.$thumbData[$key]['Event']['MaxScore'],
'width' => $thumbData[$key]['Width'],
'height' => $thumbData[$key]['Height']
)), array('controller' => 'events', 'action' => 'view', $value['Event']['Id']),
array('escape' => false));
<?php
foreach ($events as $key => $value) {
echo $this->Html->tableCells(array(
$this->Html->link($this->Html->image('/events/'.$thumbData[$key]['Path'], array(
'alt' => $thumbData[$key]['Frame']['FrameId'].'/'.$thumbData[$key]['Event']['MaxScore'],
'width' => $thumbData[$key]['Width'],
'height' => $thumbData[$key]['Height']
)),
array('controller' => 'events', 'action' => 'view', $value['Event']['Id']), array('escape' => false)),
$value['Event']['Id'],
$value['Event']['Name'],
$value['Monitor']['Name'],
$value['Event']['Cause'],
$value['Event']['StartTime'],
$value[0]['Duration'],
$value['Event']['AlarmFrames'],
$value['Event']['TotScore'],
$value['Event']['AvgScore'],
$value['Event']['MaxScore']
));
}
?>
</td>
<td><?php echo $value['Monitor']['Name']; ?></td>
<td><?php echo $value['Event']['Length']; ?></td>
</tr>
<?php endforeach; ?>
<?php unset($key); ?>
</table>
<div><?php echo $this->Paginator->numbers(); ?></div>
<div style="clear:both;"><?php echo $this->Paginator->numbers(); ?></div>
</div>
32 changes: 28 additions & 4 deletions web/app/webroot/css/cake.generic.css
View file
Expand Up @@ -755,10 +755,34 @@ div#footer a{
color: #fff;
}

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 1em; text-align: center; }

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 0.4em; height: 18px; border:1px solid #AAAAAA;}
#selectable input { display:none; }

#sidebar {
float:left;
width:350px;
margin-right:5px;
font-size:80%;
}

#sidebar input {
margin:0;
padding:0;
}

#events_date_time fieldset fieldset input {
float:left;
width:175px;
margin-right:5px;
}

#events_date_time fieldset fieldset {
border:none;
}

/* Config Page */

Expand Down
3 changes: 2 additions & 1 deletion web/app/webroot/js/main.js
View file
Expand Up @@ -36,7 +36,8 @@ $(document).ready(function() {
});
});

$("#EventsButtonSearch").button().click(function() {
$("#EventsButtonSearch").button();
$("#EventsIndexForm").submit(function() {
$base_url = '/events/index/';

$( "li.ui-selected" ).each(function() {
Expand Down

1 comment on commit 46deb93

@kylejohnson
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit introduced #25

Please sign in to comment.