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

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -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() {
 

guacamole/src/main/webapp/app/client/directives/guacFileTransfer.js

@@ -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
 
     };
 }]);

guacamole/src/main/webapp/app/client/styles/transfer.css

@@ -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 {

guacamole/src/main/webapp/app/client/templates/guacFileTransfer.html

@@ -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>