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

Add dateTime picker to filter

This commit is contained in:
digital-gnome 2017-12-15 22:57:42 -05:00
parent 2e56210007
commit d7532b0340
6 changed files with 3590 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/skins/classic/includes/functions.php
View File

@ -97,6 +97,10 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
<script type="text/javascript" src="skins/<?php echo $skin; ?>/js/jquery-ui.js"></script> <script type="text/javascript" src="skins/<?php echo $skin; ?>/js/jquery-ui.js"></script>
<script type="text/javascript" src="skins/<?php echo $skin; ?>/js/bootstrap.min.js"></script> <script type="text/javascript" src="skins/<?php echo $skin; ?>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="skins/<?php echo $skin; ?>/js/chosen/chosen.jquery.min.js"></script> <script type="text/javascript" src="skins/<?php echo $skin; ?>/js/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="skins/<?php echo $skin; ?>/js/jquery-ui-timepicker-addon.js"></script>
<link href="skins/<?php echo $skin ?>/js/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href="skins/<?php echo $skin ?>/js/jquery-ui.css" rel="stylesheet">
<link href="skins/<?php echo $skin ?>/js/chosen/chosen.min.css" rel="stylesheet"> <link href="skins/<?php echo $skin ?>/js/chosen/chosen.min.css" rel="stylesheet">
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[

30
web/skins/classic/js/dateTimePicker/jquery-ui-timepicker-addon.css Normal file
View File

@ -0,0 +1,30 @@
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

2291
web/skins/classic/js/dateTimePicker/jquery-ui-timepicker-addon.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1225
web/skins/classic/js/jquery-ui.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

22
web/skins/classic/views/filter.php
View File

@ -125,8 +125,6 @@ $archiveTypes = array(
'1' => translate('ArchArchived') '1' => translate('ArchArchived')
); );
$hasCal = file_exists( 'tools/jscalendar/calendar.js' );
$focusWindow = true; $focusWindow = true;
$storageareas = array(); $storageareas = array();
@ -235,19 +233,23 @@ for ( $i=0; $i < count($terms); $i++ ) {
<td><?php echo htmlSelect( "filter[Query][terms][$i][op]", $opTypes, $term['op'] ); ?></td> <td><?php echo htmlSelect( "filter[Query][terms][$i][op]", $opTypes, $term['op'] ); ?></td>
<td> <td>
<input type="text" name="filter[Query][terms][<?php echo $i ?>][val]" id="filter[Query][terms][<?php echo $i ?>][val]" value="<?php echo isset($term['val'])?validHtmlStr($term['val']):'' ?>"/> <input type="text" name="filter[Query][terms][<?php echo $i ?>][val]" id="filter[Query][terms][<?php echo $i ?>][val]" value="<?php echo isset($term['val'])?validHtmlStr($term['val']):'' ?>"/>
<?php if ( $hasCal ) { ?> <script type="text/javascript">$j("[name$='\\[<?php echo $i ?>\\]\\[val\\]']").datetimepicker({timeFormat: "HH:mm:ss", dateFormat: "yy-mm-dd"}); </script>
<script type="text/javascript">Calendar.setup( { inputField: "filter[Query][terms][<?php echo $i ?>][val]", ifFormat: "%Y-%m-%d %H:%M", showsTime: true, timeFormat: "24", showOthers: true, weekNumbers: false });</script>
<?php } ?>
</td> </td>
<?php <?php
} elseif ( $term['attr'] == 'Date' ) { } elseif ( $term['attr'] == 'Date' || $term['attr'] == 'StartDate' || $term['attr'] == 'EndDate') {
?> ?>
<td><?php echo htmlSelect( "filter[Query][terms][$i][op]", $opTypes, $term['op'] ); ?></td> <td><?php echo htmlSelect( "filter[Query][terms][$i][op]", $opTypes, $term['op'] ); ?></td>
<td> <td>
<input name="filter[Query][terms][<?php echo $i ?>][val]" id="filter[Query][terms][<?php echo $i ?>][val]" value="<?php echo isset($term['val'])?validHtmlStr($term['val']):'' ?>"/> <input type="text" name="filter[Query][terms][<?php echo $i ?>][val]" id="filter[Query][terms][<?php echo $i ?>][val]" value="<?php echo isset($term['val'])?validHtmlStr($term['val']):'' ?>"/>
<?php if ( $hasCal ) { ?> <script type="text/javascript">$j("[name$='\\[<?php echo $i ?>\\]\\[val\\]']").datepicker({dateFormat: "yy-mm-dd"}); </script>
<script type="text/javascript">Calendar.setup( { inputField: "filter[Query][terms][<?php echo $i ?>][val]", ifFormat: "%Y-%m-%d", showOthers: true, weekNumbers: false });</script> </td>
<?php } ?> <?php
} elseif ( $term['attr'] == 'StartTime' || $term['attr'] == 'EndTime') {
?>
<td><?php echo htmlSelect( "filter[Query][terms][$i][op]", $opTypes, $term['op'] ); ?></td>
<td>
<input type="text" name="filter[Query][terms][<?php echo $i ?>][val]" id="filter[Query][terms][<?php echo $i ?>][val]" value="<?php echo isset($term['val'])?validHtmlStr($term['val']):'' ?>"/>
<script type="text/javascript">$j("[name$='\\[<?php echo $i ?>\\]\\[val\\]']").timepicker({timeFormat: "HH:mm:ss"}); </script>
</td> </td>
<?php <?php
} elseif ( $term['attr'] == 'StateId' ) { } elseif ( $term['attr'] == 'StateId' ) {

48
web/skins/classic/views/js/filter.js
View File

@ -127,17 +127,17 @@ function parseRows (rows) {
inputTds.eq(1).html(obrSelect).children().val(obrVal); //Set bracket contents and assign saved value inputTds.eq(1).html(obrSelect).children().val(obrVal); //Set bracket contents and assign saved value
inputTds.eq(5).html(cbrSelect).children().val(cbrVal); inputTds.eq(5).html(cbrSelect).children().val(cbrVal);
} else { } else {
inputTds.eq(1).html('&nbsp'); inputTds.eq(1).html('&nbsp'); //Blank if there aren't enough terms for brackets
inputTds.eq(5).html('&nbsp'); inputTds.eq(5).html('&nbsp');
} }
if (rows.length == 1) { if (rows.length == 1) {
inputTds.eq(6).find(':input[value="-"]').prop('disabled', true); inputTds.eq(6).find(':input[value="-"]').prop('disabled', true); //enable/disable remove row button
} else { } else {
inputTds.eq(6).find(':input[value="-"]').prop('disabled', false); inputTds.eq(6).find(':input[value="-"]').prop('disabled', false);
} }
if (inputTds.eq(2).children().val() == "Archived") { if (inputTds.eq(2).children().val() == "Archived") { //Archived types
inputTds.eq(3).html('equal to<input type="hidden" name="filter[Query][terms][' + rowNum + '][op]" value="=">'); inputTds.eq(3).html('equal to<input type="hidden" name="filter[Query][terms][' + rowNum + '][op]" value="=">');
let archiveSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let archiveSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let i = 0; i < archiveTypes.length; i++) { for (let i = 0; i < archiveTypes.length; i++) {
@ -146,7 +146,7 @@ function parseRows (rows) {
let archiveVal = inputTds.eq(4).children().val(); let archiveVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(archiveSelect).children().val(archiveVal); inputTds.eq(4).html(archiveSelect).children().val(archiveVal);
} else if (inputTds.eq(2).children().val().indexOf('Weekday') >= 0) { } else if (inputTds.eq(2).children().val().indexOf('Weekday') >= 0) { //Weekday selection
let weekdaySelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let weekdaySelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let i = 0; i < weekdays.length; i++) { for (let i = 0; i < weekdays.length; i++) {
weekdaySelect.append('<option value="' + i + '">' + weekdays[i] + '</option>'); weekdaySelect.append('<option value="' + i + '">' + weekdays[i] + '</option>');
@ -154,24 +154,24 @@ function parseRows (rows) {
let weekdayVal = inputTds.eq(4).children().val(); let weekdayVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(weekdaySelect).children().val(weekdayVal); inputTds.eq(4).html(weekdaySelect).children().val(weekdayVal);
} else if (inputTds.eq(2).children().val() == 'StateId') { } else if (inputTds.eq(2).children().val() == 'StateId') { //Run state
let stateSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let stateSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let key in states) { for (let key in states) {
stateSelect.append('<option value="' + key + '">' + states[key] + '</option>'); stateSelect.append('<option value="' + key + '">' + states[key] + '</option>');
} }
let stateVal = inputTds.eq(4).children().val(); let stateVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(weekdaySelect).children().val(stateVal) inputTds.eq(4).html(stateSelect).children().val(stateVal)
} else if (inputTds.eq(2).children().val() == 'ServerId') { } else if (inputTds.eq(2).children().val() == 'ServerId') { //Select Server
let serverSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let serverSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let key in servers) { for (let key in servers) {
serverSelect.append('<option value="' + key + '">' + servers[key] + '</option>'); serverSelect.append('<option value="' + key + '">' + servers[key] + '</option>');
} }
let serverVal = inputTds.eq(4).children().val(); let serverVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(weekdaySelect).children().val(serverVal) inputTds.eq(4).html(serverSelect).children().val(serverVal)
} else if (inputTds.eq(2).children().val() == 'StorageId') { } else if (inputTds.eq(2).children().val() == 'StorageId') { //Choose by storagearea
let storageSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let storageSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let i=0; i < storageareas.length; i++) { for (let i=0; i < storageareas.length; i++) {
storageSelect.append('<option value="' + i + '">' + storageareas[i] + '</option>'); storageSelect.append('<option value="' + i + '">' + storageareas[i] + '</option>');
@ -179,14 +179,14 @@ function parseRows (rows) {
let storageVal = inputTds.eq(4).children().val(); let storageVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(storageSelect).children().val(storageVal) inputTds.eq(4).html(storageSelect).children().val(storageVal)
} else if (inputTds.eq(2).children().val() == 'MonitorName') { } else if (inputTds.eq(2).children().val() == 'MonitorName') { //Monitor names
let monitorSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); let monitorSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (let key in monitors) { for (let key in monitors) {
monitorSelect.append('<option value="' + key + '">' + monitors[key] + '</option>'); monitorSelect.append('<option value="' + key + '">' + monitors[key] + '</option>');
} }
let monitorVal = inputTds.eq(4).children().val(); let monitorVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(monitorSelect).children().val(monitorVal) inputTds.eq(4).html(monitorSelect).children().val(monitorVal)
} else { } else { //Reset to regular text field and operator for everything that isn't special
let opSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][op]').attr('id', queryPrefix + rowNum + '][op]'); let opSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][op]').attr('id', queryPrefix + rowNum + '][op]');
for (let key in opTypes) { for (let key in opTypes) {
opSelect.append('<option value="' + key + '">' + opTypes[key] + '</option>'); opSelect.append('<option value="' + key + '">' + opTypes[key] + '</option>');
@ -196,15 +196,23 @@ function parseRows (rows) {
let textInput = $j('<input></input>').attr('type', 'text').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]') let textInput = $j('<input></input>').attr('type', 'text').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]')
let textVal = inputTds.eq(4).children().val(); let textVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(textInput).children().val(textVal); inputTds.eq(4).html(textInput).children().val(textVal);
} }
let attr = inputTds.find("[name$='attr\\]']") // Set attr list id and name if (inputTds.eq(2).children().val().endsWith('DateTime')) { //Start/End DateTime
let term = attr.attr('name').split(/[[\]]{1,2}/); inputTds.eq(4).children().datetimepicker({timeFormat: "HH:mm:ss", dateFormat: "yy-mm-dd"});
term.length--; } else if (inputTds.eq(2).children().val().endsWith('Date')) { //Start/End Date
term.shift(); inputTds.eq(4).children().datepicker({dateFormat: "yy-mm-dd"});
term[2] = rowNum; } else if (inputTds.eq(2).children().val().endsWith('Time')) { //Start/End Time
inputTds.eq(2).children().attr('name', 'filter'+stringFilter(term)); inputTds.eq(4).children().timepicker({timeFormat: "HH:mm:ss"});
inputTds.eq(2).children().attr('id', 'filter'+stringFilter(term)); }
}
let attr = inputTds.find("[name$='attr\\]']") // Set attr list id and name
let term = attr.attr('name').split(/[[\]]{1,2}/);
term.length--;
term.shift();
term[2] = rowNum;
inputTds.eq(2).children().attr('name', 'filter'+stringFilter(term));
inputTds.eq(2).children().attr('id', 'filter'+stringFilter(term));
}//End for each term/row
history.replaceState(null, null, '?view=filter&' + $j('#contentForm').serialize()); history.replaceState(null, null, '?view=filter&' + $j('#contentForm').serialize());
} }