Merge pull request #1896 from connortechnology/dragndrop_monitor_sorting

Dragndrop monitor sorting
This commit is contained in:
Andrew Bauer 2017-06-12 20:49:51 -05:00 committed by GitHub
commit c11a219b9f
8 changed files with 84 additions and 97 deletions

37
web/ajax/console.php Normal file
View File

@ -0,0 +1,37 @@
<?php
if ( canEdit( 'Monitors' ) ) {
switch ( $_REQUEST['action'] ) {
case 'sort' :
{
$monitor_ids = $_POST['monitor_ids'];
# Two concurrent sorts could generate odd sortings... so lock the table.
global $dbConn;
$dbConn->beginTransaction();
$dbConn->exec( 'LOCK TABLES Monitors WRITE' );
for ( $i = 0; $i < count($monitor_ids); $i += 1 ) {
$monitor_id = $monitor_ids[$i];
$monitor_id = preg_replace( '/^monitor_id-/', '', $monitor_id );
if ( ( ! $monitor_id ) or ! ( is_integer( $monitor_id ) or ctype_digit( $monitor_id ) ) ) {
Warning( "Got $monitor_id from " . $monitor_ids[$i] );
continue;
}
dbQuery( 'UPDATE Monitors SET Sequence=? WHERE Id=?', array( $i, $monitor_id ) );
} // end for each monitor_id
$dbConn->commit();
$dbConn->exec('UNLOCK TABLES');
return;
} // end case sort
default:
{
Warning("unknown action " . $_REQUEST['action'] );
} // end ddcase default
}
} else {
Warning("Cannot edit monitors" );
}
ajaxError( 'Unrecognised action or insufficient permissions' );
?>

View File

@ -61,12 +61,8 @@
text-align: left;
}
#consoleTable .colOrder {
text-align: center;
}
#consoleTable .colMark {
width: 32px;
width: 62px;
text-align: center;
}
@ -85,13 +81,3 @@
#consoleTable .colLeftButtons input {
margin-right: 24px;
}
#consoleTable .colRightButtons {
text-align: right;
padding-right: 8px;
}
#consoleTable .colRightButtons input {
margin: 0 8px;
}

View File

@ -61,12 +61,8 @@
text-align: left;
}
#consoleTable .colOrder {
text-align: center;
}
#consoleTable .colMark {
width: 32px;
width: 62px;
text-align: center;
}
@ -85,13 +81,3 @@
#consoleTable .colLeftButtons input {
margin-right: 24px;
}
#consoleTable .colRightButtons {
text-align: right;
padding-right: 8px;
}
#consoleTable .colRightButtons input {
margin: 0 8px;
}

View File

@ -61,12 +61,8 @@
text-align: left;
}
#consoleTable .colOrder {
text-align: center;
}
#consoleTable .colMark {
width: 32px;
width: 62px;
text-align: center;
}
@ -85,13 +81,3 @@
#consoleTable .colLeftButtons input {
margin-right: 24px;
}
#consoleTable .colRightButtons {
text-align: right;
padding-right: 8px;
}
#consoleTable .colRightButtons input {
margin: 0 8px;
}

View File

@ -49,9 +49,7 @@ function xhtmlHeaders( $file, $title ) {
<link rel="shortcut icon" href="graphics/favicon.ico"/>
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<link rel="stylesheet" href="css/overlay.css" type="text/css"/>
<?php if ( in_array($basename, $new_views) ) { ?>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<?php } ?>
<link rel="stylesheet" href="<?php echo $skinCssFile ?>" type="text/css" media="screen"/>
<?php
if ( $viewCssFile ) {
@ -74,6 +72,19 @@ function xhtmlHeaders( $file, $title ) {
<script type="text/javascript" src="tools/mootools/mootools-core.js"></script>
<script type="text/javascript" src="tools/mootools/mootools-more.js"></script>
<script type="text/javascript" src="js/mootools.ext.js"></script>
<script type="text/javascript" src="skins/<?php echo $skin; ?>/js/jquery.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">
//<![CDATA[
<!--
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
//-->
//]]>
</script>
<script type="text/javascript" src="js/logger.js"></script>
<script type="text/javascript" src="js/overlay.js"></script>
<?php if ( $title == 'Login' && (defined('ZM_OPT_USE_GOOG_RECAPTCHA') && ZM_OPT_USE_GOOG_RECAPTCHA) ) { ?>

1
web/skins/classic/js/jquery-ui.js vendored Symbolic link
View File

@ -0,0 +1 @@
jquery-ui-1.11.3.js

View File

@ -88,7 +88,6 @@ $maxHeight = 0;
$cycleCount = 0;
$minSequence = 0;
$maxSequence = 1;
$seqIdList = array();
$monitors = dbFetchAll( "select * from Monitors order by Sequence asc" );
$displayMonitors = array();
for ( $i = 0; $i < count($monitors); $i++ ) {
@ -99,12 +98,6 @@ for ( $i = 0; $i < count($monitors); $i++ ) {
continue;
}
$monitors[$i]['Show'] = true;
if ( empty($minSequence) || ($monitors[$i]['Sequence'] < $minSequence) ) {
$minSequence = $monitors[$i]['Sequence'];
}
if ( $monitors[$i]['Sequence'] > $maxSequence ) {
$maxSequence = $monitors[$i]['Sequence'];
}
$monitors[$i]['zmc'] = zmcStatus( $monitors[$i] );
$monitors[$i]['zma'] = zmaStatus( $monitors[$i] );
$monitors[$i]['ZoneCount'] = dbFetchOne( 'select count(Id) as ZoneCount from Zones where MonitorId = ?', 'ZoneCount', array($monitors[$i]['Id']) );
@ -125,27 +118,8 @@ for ( $i = 0; $i < count($monitors); $i++ ) {
if ( $maxHeight < $scaleHeight ) $maxHeight = $scaleHeight;
}
if ( $counts ) $monitors[$i] = array_merge( $monitors[$i], $counts );
$seqIdList[] = $monitors[$i]['Id'];
$displayMonitors[] = $monitors[$i];
}
$lastId = 0;
$seqIdUpList = array();
foreach ( $seqIdList as $seqId ) {
if ( !empty($lastId) )
$seqIdUpList[$seqId] = $lastId;
else
$seqIdUpList[$seqId] = $seqId;
$lastId = $seqId;
}
$lastId = 0;
$seqIdDownList = array();
foreach ( array_reverse($seqIdList) as $seqId ) {
if ( !empty($lastId) )
$seqIdDownList[$seqId] = $lastId;
else
$seqIdDownList[$seqId] = $seqId;
$lastId = $seqId;
}
$cycleWidth = $maxWidth;
$cycleHeight = $maxHeight;
@ -165,9 +139,6 @@ foreach( $displayMonitors as $monitor ) {
$zoneCount += $monitor['ZoneCount'];
}
$seqUpFile = getSkinFile( 'graphics/seq-u.png' );
$seqDownFile = getSkinFile( 'graphics/seq-d.png' );
$versionClass = (ZM_DYN_DB_VERSION&&(ZM_DYN_DB_VERSION!=ZM_VERSION))?'errorText':'';
$left_columns = 3;
@ -239,21 +210,14 @@ if ( ZM_OPT_USE_AUTH ) {
}
?>
<th class="colZones"><?php echo translate('Zones') ?></th>
<?php
if ( canEdit('Monitors') ) {
?>
<th class="colOrder"><?php echo translate('Order') ?></th>
<?php
}
?>
<th class="colMark"><?php echo translate('Mark') ?></th>
</tr>
</thead>
<tbody>
<tbody id="consoleTableBody">
<?php
foreach( $displayMonitors as $monitor ) {
?>
<tr>
<tr id="<?php echo 'monitor_id-'.$monitor['Id'] ?>">
<?php
if ( !$monitor['zmc'] ) {
$dclass = 'errorText';
@ -312,14 +276,10 @@ echo $Server->Name();
}
?>
<td class="colZones"><?php echo makePopupLink( '?view=zones&amp;mid='.$monitor['Id'], 'zmZones', array( 'zones', $monitor['Width'], $monitor['Height'] ), $monitor['ZoneCount'], $running && canView( 'Monitors' ) ) ?></td>
<?php
if ( canEdit('Monitors') ) {
?>
<td class="colOrder"><?php echo makeLink( '?view='.$view.'&amp;action=sequence&amp;mid='.$monitor['Id'].'&amp;smid='.$seqIdUpList[$monitor['Id']], '<img src="'.$seqUpFile.'" alt="Up"/>', $monitor['Sequence']>$minSequence ) ?><?php echo makeLink( '?view='.$view.'&amp;action=sequence&amp;mid='.$monitor['Id'].'&amp;smid='.$seqIdDownList[$monitor['Id']], '<img src="'.$seqDownFile.'" alt="Down"/>', $monitor['Sequence']<$maxSequence ) ?></td>
<?php
}
?>
<td class="colMark"><input type="checkbox" name="markMids[]" value="<?php echo $monitor['Id'] ?>" onclick="setButtonStates( this )"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/></td>
<td class="colMark">
<input type="checkbox" name="markMids[]" value="<?php echo $monitor['Id'] ?>" onclick="setButtonStates( this )"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/>
<span class="glyphicon glyphicon-sort"></span>
</td>
</tr>
<?php
}
@ -332,6 +292,8 @@ echo $Server->Name();
<input type="button" name="addBtn" value="<?php echo translate('AddNewMonitor') ?>" onclick="addMonitor( this )"/>
<!-- <?php echo makePopupButton( '?view=monitor', 'zmMonitor0', 'monitor', translate('AddNewMonitor'), (canEdit( 'Monitors' ) && !$user['MonitorIds']) ) ?> -->
<?php echo makePopupButton( '?view=filter&filter[terms][0][attr]=DateTime&filter[terms][0][op]=%3c&filter[terms][0][val]=now', 'zmFilter', 'filter', translate('Filters'), canView( 'Events' ) ) ?>
<input type="button" name="editBtn" value="<?php echo translate('Edit') ?>" onclick="editMonitor( this )" disabled="disabled"/>
<input type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" onclick="deleteMonitor( this )" disabled="disabled"/>
</td>
<?php
for ( $i = 0; $i < count($eventCounts); $i++ ) {
@ -342,10 +304,7 @@ for ( $i = 0; $i < count($eventCounts); $i++ ) {
}
?>
<td class="colZones"><?php echo $zoneCount ?></td>
<td class="colRightButtons" colspan="<?php echo canEdit('Monitors')?2:1 ?>">
<input type="button" name="editBtn" value="<?php echo translate('Edit') ?>" onclick="editMonitor( this )" disabled="disabled"/>
<input type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" onclick="deleteMonitor( this )" disabled="disabled"/>
</td>
<td class="colMark"></td>
</tr>
</tfoot>
</table>

View File

@ -74,6 +74,27 @@ function initPage() {
createPopup( '?view=version', 'zmVersion', 'version' );
if ( showDonatePopup )
createPopup( '?view=donate', 'zmDonate', 'donate' );
// Makes table sortable
$j( function() {
$j( "#consoleTableBody" ).sortable({
handle: ".glyphicon-sort",
update: applySort,
axis:'Y' } );
$j( "#consoleTableBody" ).disableSelection();
} );
}
function applySort(event, ui) {
var monitor_ids = $j(this).sortable('toArray');
var ajax = new Request.JSON( {
url: '/index.php?request=console',
data: { monitor_ids: monitor_ids, action: 'sort' },
method: 'post',
timeout: AJAX_TIMEOUT
} );
ajax.send();
} // end function applySort(event,ui)
window.addEvent( 'domready', initPage );