safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-31 00:53:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-963: Display progress with units for file transfer. Only display moving bars when file transfer is in-progress.

Browse Source
This commit is contained in:
Michael Jumper
2015-01-02 00:50:37 -08:00
parent e055bf6254
commit a538999856
4 changed files with 131 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
guacamole/src/main/webapp/app/client/controllers/clientController.js
View File

@@ -505,60 +505,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
};
/**
* Returns a progress object, as required by $scope.addNotification(), which
* contains the given number of bytes as an appropriate combination of
* progress value and associated unit.
*
* @param {String} text
* The translation string to associate with the progress object
* returned.
*
* @param {Number} bytes The number of bytes.
* @param {Number} [length] The file length, in bytes, if known.
*
* @returns {Object}
* A progress object, as required by $scope.addNotification().
*/
var getFileProgress = function getFileProgress(text, bytes, length) {
// Gigabytes
if (bytes > 1000000000)
return {
text : text,
value : (bytes / 1000000000).toFixed(1),
ratio : bytes / length,
unit : "gb"
};
// Megabytes
if (bytes > 1000000)
return {
text : text,
value : (bytes / 1000000).toFixed(1),
ratio : bytes / length,
unit : "mb"
};
// Kilobytes
if (bytes > 1000)
return {
text : text,
value : (bytes / 1000).toFixed(1),
ratio : bytes / length,
unit : "kb"
};
// Bytes
return {
text : text,
value : bytes,
ratio : bytes / length,
unit : "b"
};
};
// Clean up when view destroyed
$scope.$on('$destroy', function clientViewDestroyed() {

113
guacamole/src/main/webapp/app/client/directives/guacFileTransfer.js
View File

@@ -43,9 +43,118 @@ angular.module('client').directive('guacFileTransfer', [function guacFileTransfe
templateUrl: 'app/client/templates/guacFileTransfer.html',
controller: ['$scope', '$injector', function guacFileTransferController($scope, $injector) {
/* STUB */
// Required types
var ManagedFileTransferState = $injector.get('ManagedFileTransferState');
}]
/**
* Returns the unit string that is most appropriate for the
* number of bytes transferred thus far - either 'gb', 'mb', 'kb',
* or 'b'.
*
* @returns {String}
* The unit string that is most appropriate for the number of
* bytes transferred thus far.
*/
$scope.getProgressUnit = function getProgressUnit() {
var bytes = $scope.transfer.progress;
// Gigabytes
if (bytes > 1000000000)
return 'gb';
// Megabytes
if (bytes > 1000000)
return 'mb';
// Kilobytes
if (bytes > 1000)
return 'kb';
// Bytes
return 'b';
};
/**
* Returns the amount of data transferred thus far, in the units
* returned by getProgressUnit().
*
* @returns {Number}
* The amount of data transferred thus far, in the units
* returned by getProgressUnit().
*/
$scope.getProgressValue = function getProgressValue() {
var bytes = $scope.transfer.progress;
if (!bytes)
return bytes;
// Convert bytes to necessary units
switch ($scope.getProgressUnit()) {
// Gigabytes
case 'gb':
return (bytes / 1000000000).toFixed(1);
// Megabytes
case 'mb':
return (bytes / 1000000).toFixed(1);
// Kilobytes
case 'kb':
return (bytes / 1000).toFixed(1);
// Bytes
case 'b':
default:
return bytes;
}
};
/**
* Returns the percentage of bytes transferred thus far, if the
* overall length of the file is known.
*
* @returns {Number}
* The percentage of bytes transferred thus far, if the
* overall length of the file is known.
*/
$scope.getPercentDone = function getPercentDone() {
return $scope.transfer.progress / $scope.transfer.length * 100;
};
/**
* Determines whether the associated file transfer is in progress.
*
* @returns {Boolean}
* true if the file transfer is in progress, false othherwise.
*/
$scope.isInProgress = function isInProgress() {
// Not in progress if there is no transfer
if (!$scope.transfer)
return false;
// Determine in-progress status based on stream state
switch ($scope.transfer.transferState.streamState) {
// IDLE or OPEN file transfers are active
case ManagedFileTransferState.StreamState.IDLE:
case ManagedFileTransferState.StreamState.OPEN:
return true;
// All others are not active
default:
return false;
}
};
}] // end file transfer controller
};
}]);

28
guacamole/src/main/webapp/app/client/styles/transfer.css
View File

@@ -53,7 +53,23 @@
.transfer .progress {
width: 100%;
background: #C2C2C2 url('images/progress.png');
background: #C2C2C2;
padding: 0.25em;
border: 1px solid gray;
position: absolute;
top: 0;
left: 0;
bottom: 0;
opacity: 0.25;
}
.transfer.in-progress .progress {
background-image: url('images/progress.png');
background-size: 16px 16px;
-moz-background-size: 16px 16px;
-webkit-background-size: 16px 16px;
@@ -69,16 +85,6 @@
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
padding: 0.25em;
border: 1px solid gray;
position: absolute;
top: 0;
left: 0;
bottom: 0;
opacity: 0.25;
}
.transfer .progress .bar {

6
guacamole/src/main/webapp/app/client/templates/guacFileTransfer.html
View File

@@ -1,4 +1,4 @@
<div class="transfer">
<div class="transfer" ng-class="{'in-progress': isInProgress()}">
<!--
Copyright (C) 2014 Glyptodon LLC
@@ -25,9 +25,9 @@
<div class="filename">{{transfer.filename}}</div>
<!-- Progress/status text -->
<div class="text">{{transfer.progress}}</div>
<div class="text">{{'CLIENT.TEXT_FILE_TRANSFER_PROGRESS' | translate:'{PROGRESS: getProgressValue(), UNIT: getProgressUnit()}'}}</div>
<!-- Progress bar -->
<div class="progress"><div ng-style="{'width': (transfer.progress / transfer.length * 100) + '%'}" class="bar"></div></div>
<div class="progress"><div ng-style="{'width': getPercentDone() + '%'}" class="bar"></div></div>
</div>