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

Added datetime picker support and implemented on events sidebar

This commit is contained in:
Kevin Crider 2013-09-28 18:52:25 -04:00
parent 983aece616
commit 7e90d0f373
5 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<?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('default' => false, 'inputDefaults' => array(
@ -9,6 +10,10 @@ echo $this->Form->create('Events', array('default' => false, 'inputDefaults' =>
'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"> <ul class="list-group">
<?php foreach ($monitors as $monitor): ?> <?php foreach ($monitors as $monitor): ?>
@ -21,46 +26,33 @@ unset($monitor);
?> ?>
</ul> </ul>
</div> </div>
</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 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">
<?php echo $this->Form->inputs(array( <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
'legend' => false, </div>
'fieldset' => false,
'Hour' => array('type' => 'select', 'id' => 'EventEndHour', 'options' => $hours),
'Minute' => array('type' => 'select', 'id' => 'EventEndMinute', 'options' => $minutes)
)); ?>
</div> </div>
End Date
<div class="form-group">
<div class="input-group date datetime">
<input type="text" class="form-control" id="EventEndDate">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</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', 'id' => 'EventsButtonSearch', '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(); ?>

2
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,6 +45,7 @@ $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>

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}

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

7
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() {