rework devices view, remove inline onclick
This commit is contained in:
Andrew Bauer
parent
1c54efa88d
commit
6c0f61ebbd
|
|
@ -0,0 +1,47 @@
|
|||
<?php
|
||||
//
|
||||
// ZoneMinder web action file
|
||||
// Copyright (C) 2019 ZoneMinder LLC
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
//
|
||||
|
||||
// Device view actions
|
||||
if ( !canEdit('Devices') ) {
|
||||
ajaxError('Insufficient permissions for user '.$user['Username']);
|
||||
return;
|
||||
}
|
||||
|
||||
if ( $action == 'device' ) {
|
||||
if ( !empty($_REQUEST['command']) ) {
|
||||
setDeviceStatusX10($_REQUEST['key'], $_REQUEST['command']);
|
||||
} else if ( isset($_REQUEST['newDevice']) ) {
|
||||
if ( isset($_REQUEST['did']) && $_REQUEST['did'] ) {
|
||||
ZM\Warning('did value is: '.$_REQUEST['did']);
|
||||
ZM\Warning('newDevice array value is: '.print_r($_REQUEST['newDevice'],true));
|
||||
dbQuery('UPDATE Devices SET Name=?, KeyString=? WHERE Id=?',
|
||||
array($_REQUEST['newDevice']['Name'], $_REQUEST['newDevice']['KeyString'], $_REQUEST['did']) );
|
||||
} else {
|
||||
|
||||
dbQuery('INSERT INTO Devices SET Name=?, KeyString=?',
|
||||
array($_REQUEST['newDevice']['Name'], $_REQUEST['newDevice']['KeyString']) );
|
||||
}
|
||||
}
|
||||
ajaxResponse();
|
||||
} else {
|
||||
ajaxError('Unrecognised action '.$_REQUEST['action']);
|
||||
} // end if action
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
//
|
||||
// ZoneMinder web action file
|
||||
// Copyright (C) 2019 ZoneMinder LLC
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
//
|
||||
|
||||
// Device view actions
|
||||
if ( !canEdit('Devices') ) {
|
||||
ajaxError('Insufficient permissions for user '.$user['Username']);
|
||||
return;
|
||||
}
|
||||
|
||||
if ( $action == 'delete' ) {
|
||||
if ( isset($_REQUEST['markDids']) ) {
|
||||
foreach( $_REQUEST['markDids'] as $markDid ) {
|
||||
dbQuery('DELETE FROM Devices WHERE Id=?', array($markDid));
|
||||
}
|
||||
}
|
||||
ajaxResponse();
|
||||
} else {
|
||||
ajaxError('Unrecognised action '.$_REQUEST['action']);
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -262,6 +262,7 @@ $SLANG = array(
|
|||
'ConfiguredFor' => 'Configured for',
|
||||
'ConfigURL' => 'Config Base URL',
|
||||
'ConfirmDeleteControl' => 'Warning, deleting a control will reset all monitors that use it to be uncontrollable.<br><br>Are you sure you wish to delete?',
|
||||
'ConfirmDeleteDevices' => 'Are you sure you wish to delete the selected devices?',
|
||||
'ConfirmDeleteEvents' => 'Are you sure you wish to delete the selected events?',
|
||||
'ConfirmDeleteTitle' => 'Delete Confirmation',
|
||||
'ConfirmPassword' => 'Confirm Password',
|
||||
|
|
|
|||
|
|
@ -36,23 +36,45 @@ xhtmlHeaders(__FILE__, translate('Devices') );
|
|||
?>
|
||||
<body>
|
||||
<?php echo getNavBarHTML(); ?>
|
||||
<div id="page">
|
||||
<div class="w-100 py-1">
|
||||
<div class="float-left pl-3">
|
||||
<button type="button" id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
|
||||
<button type="button" id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
|
||||
</div>
|
||||
<div class="w-100 pt-2">
|
||||
<h2><?php echo translate('Devices') ?></h2>
|
||||
</div>
|
||||
<div id="page" class="container-fluid">
|
||||
<h2>X10 <?php echo translate('Devices') ?></h2>
|
||||
|
||||
<div id="toolbar">
|
||||
<button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
|
||||
<button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
|
||||
<button id="newDeviceBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('New') ?>"><i class="fa fa-plus"></i></button>
|
||||
<button id="deleteBtn" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Delete') ?>" disabled><i class="fa fa-trash"></i></button>
|
||||
</div>
|
||||
<div id="content">
|
||||
<form name="contentForm" method="get" action="?">
|
||||
<input type="hidden" name="view" value="none"/>
|
||||
<input type="hidden" name="action" value="device"/>
|
||||
<input type="hidden" name="key" value=""/>
|
||||
<input type="hidden" name="command" value=""/>
|
||||
<table id="contentTable" class="major" cellspacing="0">
|
||||
|
||||
<div id="content" class="row justify-content-center">
|
||||
<table
|
||||
id="devicesTable"
|
||||
class="table-sm table-borderless"
|
||||
data-search="true"
|
||||
data-cookie="true"
|
||||
data-cookie-id-table="zmDevicesTable"
|
||||
data-cookie-expire="2y"
|
||||
data-cookie-expire="2y"
|
||||
data-remember-order="true"
|
||||
data-click-to-select="true"
|
||||
data-maintain-meta-data="true"
|
||||
data-mobile-responsive="true"
|
||||
data-buttons-class="btn btn-normal"
|
||||
data-toolbar="#toolbar"
|
||||
data-show-columns="true"
|
||||
>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sortable="true" data-field="Id"><?php echo translate('Id') ?></th>
|
||||
<th data-sortable="true" data-field="Name"><?php echo translate('Name') ?></th>
|
||||
<th data-sortable="true" data-field="KeyString"><?php echo translate('KeyString') ?></th>
|
||||
<th data-sortable="false" data-field="On"><?php echo translate('On') ?></th>
|
||||
<th data-sortable="false" data-field="Off"><?php echo translate('Off') ?></th>
|
||||
<th data-sortable="false" data-field="toggleCheck" data-checkbox="true"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<?php
|
||||
foreach( $devices as $device ) {
|
||||
|
|
@ -68,21 +90,18 @@ foreach( $devices as $device ) {
|
|||
$str_opt = 'class="deviceCol" data-did="'.$device['Id'].'"';
|
||||
?>
|
||||
<tr>
|
||||
<td><?php echo makeLink( '#', '<span class="'.$fclass.'">'.validHtmlStr($device['Name']).' ('.validHtmlStr($device['KeyString']).')</span>', canEdit( 'Devices' ), $str_opt ) ?></td>
|
||||
<td><input type="button" value="<?php echo translate('On') ?>"<?php echo ($device['Status'] != 'ON')?' class="set"':'' ?> onclick="switchDeviceOn( this, '<?php echo validHtmlStr($device['KeyString']) ?>' )"<?php echo canEdit( 'Devices' )?"":' disabled="disabled"' ?>/></td>
|
||||
<td><input type="button" value="<?php echo translate('Off') ?>"<?php echo ($device['Status'] != 'OFF')?' class="set"':'' ?> onclick="switchDeviceOff( this, '<?php echo validHtmlStr($device['KeyString']) ?>' )"<?php echo canEdit( 'Devices' )?"":' disabled="disabled"' ?>/></td>
|
||||
<td><input type="checkbox" name="markDids[]" value="<?php echo $device['Id'] ?>" onclick="configureButtons( this, 'markDids' );"<?php if ( !canEdit( 'Devices' ) ) {?> disabled="disabled"<?php } ?>/></td>
|
||||
<td><?php echo $device['Id'] ?></td>
|
||||
<td><?php echo makeLink( '#', '<span class="'.$fclass.'">'.validHtmlStr($device['Name']).'</span>', canEdit( 'Devices' ), $str_opt ) ?></td>
|
||||
<td><?php echo makeLink( '#', '<span class="'.$fclass.'">'.validHtmlStr($device['KeyString']).'</span>', canEdit( 'Devices' ), $str_opt ) ?></td>
|
||||
<td><button class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('On') ?>"><i class="fa fa-toggle-on"></i></button></td>
|
||||
<td><button class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Off') ?>"><i class="fa fa-toggle-off"></i></button></td>
|
||||
<td data-checkbox="true"></td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="contentButtons">
|
||||
<button type="button" id="newDeviceBtn" value="<?php echo translate('New') ?>" disabled="disabled"><?php echo translate('New') ?></button>
|
||||
<input type="button" class="btn-danger" name="deleteBtn" value="<?php echo translate('Delete') ?>" data-on-click-this="deleteDevice" disabled="disabled"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php xhtmlFooter() ?>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,6 @@
|
|||
var newDeviceBtn = $j('#newDeviceBtn');
|
||||
|
||||
function switchDeviceOn( element, key ) {
|
||||
var form = element.form;
|
||||
form.view.value = currentView;
|
||||
form.action.value = 'device';
|
||||
form.command.value = 'on';
|
||||
form.key.value = key;
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function switchDeviceOff( element, key ) {
|
||||
var form = element.form;
|
||||
form.view.value = currentView;
|
||||
form.action.value = 'device';
|
||||
form.command.value = 'off';
|
||||
form.key.value = key;
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function deleteDevice( element ) {
|
||||
var form = element.form;
|
||||
form.view.value = currentView;
|
||||
form.action.value = 'delete';
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function configureButtons( element, name ) {
|
||||
var form = element.form;
|
||||
var checked = false;
|
||||
for (var i = 0; i < form.elements.length; i++) {
|
||||
if ( form.elements[i].name.indexOf(name) == 0) {
|
||||
if ( form.elements[i].checked ) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
form.deleteBtn.disabled = !checked;
|
||||
}
|
||||
var table = $j('#devicesTable');
|
||||
var deleteBtn = $j('#deleteBtn');
|
||||
|
||||
// Load the Device Modal HTML via Ajax call
|
||||
function getDeviceModal(did) {
|
||||
|
|
@ -70,7 +33,72 @@ function enableDeviceModal() {
|
|||
});
|
||||
}
|
||||
|
||||
// Load the Delete Confirmation Modal HTML via Ajax call
|
||||
function getDelConfirmModal(key) {
|
||||
$j.getJSON(thisUrl + '?request=modal&modal=delconfirm&key=' + key)
|
||||
.done(function(data) {
|
||||
if ( $j('#deleteConfirm').length ) {
|
||||
$j('#deleteConfirm').replaceWith(data.html);
|
||||
} else {
|
||||
$j("body").append(data.html);
|
||||
}
|
||||
manageDelConfirmModalBtns();
|
||||
})
|
||||
.fail(logAjaxFail);
|
||||
}
|
||||
|
||||
// Manage the DELETE CONFIRMATION modal button
|
||||
function manageDelConfirmModalBtns() {
|
||||
document.getElementById("delConfirmBtn").addEventListener("click", function onDelConfirmClick(evt) {
|
||||
if ( ! canEditDevice ) {
|
||||
enoperm();
|
||||
return;
|
||||
}
|
||||
|
||||
var selections = getIdSelections();
|
||||
|
||||
evt.preventDefault();
|
||||
$j.getJSON(thisUrl + '?request=devices&action=delete&markDids[]='+selections.join('&markDids[]='))
|
||||
.done( function(data) {
|
||||
$j('#devicesTable').bootstrapTable('refresh');
|
||||
window.location.reload(true);
|
||||
})
|
||||
.fail(logAjaxFail);
|
||||
});
|
||||
|
||||
// Manage the CANCEL modal button
|
||||
document.getElementById("delCancelBtn").addEventListener("click", function onDelCancelClick(evt) {
|
||||
$j('#deleteConfirm').modal('hide');
|
||||
});
|
||||
}
|
||||
|
||||
// Returns the event id's of the selected rows
|
||||
function getIdSelections() {
|
||||
return $j.map(table.bootstrapTable('getSelections'), function(row) {
|
||||
return row.Id.replace(/(<([^>]+)>)/gi, ''); // strip the html from the element before sending
|
||||
});
|
||||
}
|
||||
|
||||
// Take the appropriate action when the user clicks on cells in the table
|
||||
function processClicks(event, field, value, row, $element) {
|
||||
if ( field == 'On' || field == 'Off' ) {
|
||||
var key = row.KeyString.replace(/(<([^>]+)>)/gi, '');
|
||||
var url = '?request=device&action=device&command=' + field + '&key=' + key;
|
||||
console.log('Url sent to device: ' + url);
|
||||
$j.getJSON(thisUrl + url)
|
||||
.done(function(data) {
|
||||
// TODO - verify if either of these are needed
|
||||
$j('#devicesTable').bootstrapTable('refresh');
|
||||
window.location.reload(true);
|
||||
})
|
||||
.fail(logAjaxFail);
|
||||
}
|
||||
}
|
||||
|
||||
function initPage() {
|
||||
// Init the bootstrap-table
|
||||
table.bootstrapTable({icons: icons});
|
||||
|
||||
if ( canEditDevice ) enableDeviceModal();
|
||||
|
||||
newDeviceBtn.prop('disabled', !canEditDevice);
|
||||
|
|
@ -89,6 +117,32 @@ function initPage() {
|
|||
evt.preventDefault();
|
||||
window.location.reload(true);
|
||||
});
|
||||
|
||||
// Manage the DELETE button
|
||||
document.getElementById("deleteBtn").addEventListener("click", function onDeleteClick(evt) {
|
||||
if ( ! canEditDevice ) {
|
||||
enoperm();
|
||||
return;
|
||||
}
|
||||
|
||||
evt.preventDefault();
|
||||
$j('#deleteConfirm').modal('show');
|
||||
});
|
||||
|
||||
// Load the delete confirmation modal into the DOM
|
||||
getDelConfirmModal('ConfirmDeleteDevices');
|
||||
|
||||
// enable or disable buttons based on current selection and user rights
|
||||
table.on('check.bs.table uncheck.bs.table ' +
|
||||
'check-all.bs.table uncheck-all.bs.table',
|
||||
function() {
|
||||
selections = table.bootstrapTable('getSelections');
|
||||
|
||||
deleteBtn.prop('disabled', !(selections.length && canEditDevice));
|
||||
});
|
||||
|
||||
// Process mouse clicks on the table cells
|
||||
table.on('click-cell.bs.table', processClicks);
|
||||
}
|
||||
|
||||
$j(document).ready(initPage);
|
||||
|
|
|
|||
Loading…
Reference in New Issue