GUACAMOLE-724: Migrate file transfer status dialog to multi-client support.

This commit is contained in:
Michael Jumper
2021-06-28 12:33:49 -07:00
parent 6b296374d5
commit 19aa600b80
9 changed files with 70 additions and 30 deletions

View File

@@ -171,7 +171,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
* The set of clients that should be attached to the client UI. This will
* be immediately initialized by a call to updateAttachedClients() below.
*
* @type ManagedClientGroup[]
* @type ManagedClientGroup
*/
$scope.clientGroup = null;
@@ -748,20 +748,20 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
};
/**
* Determines whether the attached client has associated file transfers,
* regardless of those file transfers' state.
* Determines whether the attached client group has any associated file
* transfers, regardless of those file transfers' state.
*
* @returns {Boolean}
* true if there are any file transfers associated with the
* attached client, false otherise.
* attached client group, false otherise.
*/
$scope.hasTransfers = function hasTransfers() {
// There are no file transfers if there is no client
if (!$scope.client)
// There are no file transfers if there is no client group
if (!$scope.clientGroup)
return false;
return !!$scope.client.uploads.length;
return _.findIndex($scope.clientGroup.clients, ManagedClient.hasTransfers) !== -1;
};

View File

@@ -28,12 +28,12 @@ angular.module('client').directive('guacFileTransferManager', [function guacFile
scope: {
/**
* The client whose file transfers should be managed by this
* The client group whose file transfers should be managed by this
* directive.
*
* @type ManagerClient
* @type ManagedClientGroup
*/
client : '='
clientGroup : '='
},
@@ -41,6 +41,8 @@ angular.module('client').directive('guacFileTransferManager', [function guacFile
controller: ['$scope', '$injector', function guacFileTransferManagerController($scope, $injector) {
// Required types
var ManagedClient = $injector.get('ManagedClient');
var ManagedClientGroup = $injector.get('ManagedClientGroup');
var ManagedFileTransferState = $injector.get('ManagedFileTransferState');
/**
@@ -74,17 +76,29 @@ angular.module('client').directive('guacFileTransferManager', [function guacFile
*/
$scope.clearCompletedTransfers = function clearCompletedTransfers() {
// Nothing to clear if no client attached
if (!$scope.client)
// Nothing to clear if no client group attached
if (!$scope.clientGroup)
return;
// Remove completed uploads
$scope.client.uploads = $scope.client.uploads.filter(function isUploadInProgress(upload) {
return isInProgress(upload.transferState);
$scope.clientGroup.clients.forEach(client => {
client.uploads = client.uploads.filter(function isUploadInProgress(upload) {
return isInProgress(upload.transferState);
});
});
};
/**
* @borrows ManagedClientGroup.hasMultipleClients
*/
$scope.hasMultipleClients = ManagedClientGroup.hasMultipleClients;
/**
* @borrows ManagedClient.hasTransfers
*/
$scope.hasTransfers = ManagedClient.hasTransfers;
}]
};

View File

@@ -145,18 +145,11 @@ angular.module('client').directive('guacTiledClients', [function guacTiledClient
};
/**
* Returns whether multiple clients are currently shown within the
* tiled grid.
*
* @returns {Boolean}
* true if two or more clients are currently present, false
* otherwise.
* @borrows ManagedClientGroup.hasMultipleClients
*/
$scope.hasMultipleClients = function hasMultipleClients() {
return $scope.clientGroup && $scope.clientGroup.clients.length > 1;
};
$scope.hasMultipleClients = ManagedClientGroup.hasMultipleClients;
/**
/**
* Returns the CSS width that should be applied to each tile to
* achieve an even arrangement.
*

View File

@@ -36,6 +36,14 @@
align-items: center;
}
.transfer-manager h3 {
margin: 0.25em;
font-size: 1em;
margin-bottom: 0;
opacity: 0.5;
text-align: center;
}
.transfer-manager .transfers {
display: table;
padding: 0.25em;

View File

@@ -36,7 +36,7 @@
<!-- File transfers -->
<div id="file-transfer-dialog" ng-show="hasTransfers()">
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
<guac-file-transfer-manager client-group="clientGroup"></guac-file-transfer-manager>
</div>
<!-- Connection stability warning -->

View File

@@ -7,14 +7,12 @@
</div>
<!-- Sent/received files -->
<div class="transfer-manager-body">
<div class="transfer-manager-body" ng-repeat="client in clientGroup.clients" ng-show="hasTransfers(client)">
<h3 ng-show="hasMultipleClients(clientGroup)">{{ client.name }}</h3>
<div class="transfers">
<guac-file-transfer
transfer="upload"
ng-repeat="upload in client.uploads">
</guac-file-transfer><guac-file-transfer
transfer="download"
ng-repeat="download in client.downloads">
</guac-file-transfer>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<ul class="tiled-client-list" ng-class="{ 'multiple-clients' : hasMultipleClients() }">
<ul class="tiled-client-list" ng-class="{ 'multiple-clients' : hasMultipleClients(clientGroup) }">
<li class="client-tile"
ng-repeat="client in clientGroup.clients"

View File

@@ -852,6 +852,18 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
};
/**
* Returns whether the given client has any associated file transfers,
* regardless of those file transfers' state.
*
* @returns {boolean}
* true if there are any file transfers associated with the
* given client, false otherise.
*/
ManagedClient.hasTransfers = function hasTransfers(client) {
return !!(client && client.uploads && client.uploads.length);
};
/**
* Store the thumbnail of the given managed client within the connection
* history under its associated ID. If the client is not connected, this

View File

@@ -261,6 +261,21 @@ angular.module('client').factory('ManagedClientGroup', ['$injector', function de
}
};
/**
* Returns whether the given ManagedClientGroup contains more than one
* client.
*
* @param {ManagedClientGroup} group
* The ManagedClientGroup to test.
*
* @returns {boolean}
* true if two or more clients are currently present in the given
* group, false otherwise.
*/
ManagedClientGroup.hasMultipleClients = function hasMultipleClients(group) {
return group && group.clients.length > 1;
};
return ManagedClientGroup;
}]);