Merge pull request #15 from glyptodon/notification-progress-bar

GUAC-928: Notification progress bar

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

@@ -367,17 +367,19 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
      *     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) {
+    var getFileProgress = function getFileProgress(text, bytes, length) {
 
         // Gigabytes
         if (bytes > 1000000000)
             return {
                 text  : text,
                 value : (bytes / 1000000000).toFixed(1),
+                ratio : bytes / length,
                 unit  : "gb"
             };
 
@@ -386,6 +388,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             return {
                 text  : text,
                 value : (bytes / 1000000).toFixed(1),
+                ratio : bytes / length,
                 unit  : "mb"
             };
 
@@ -394,6 +397,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             return {
                 text  : text,
                 value : (bytes / 1000).toFixed(1),
+                ratio : bytes / length,
                 unit  : "kb"
             };
 
@@ -401,6 +405,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         return {
             text  : text,
             value : bytes,
+            ratio : bytes / length,
             unit  : "b"
         };
 
@@ -493,7 +498,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             
             var notification = uploadNotifications[streamIndex];
             if (notification)
-                notification.progress = getFileProgress('client.fileTransfer.progressText', offset);
+                notification.progress = getFileProgress('client.fileTransfer.progressText', offset, length);
             
         });
     });

guacamole/src/main/webapp/app/index/controllers/indexController.js

@@ -93,6 +93,22 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
      *     The number of seconds remaining before the countdown callback is
      *     called.
      *
+     * @param {String} [status.progress.text]
+     *     If this notification has associated progress, the text to display
+     *     while the operation is occurring.
+     *
+     * @param {String} [status.progress.value]
+     *     The current state of operation progress, as an arbitrary number
+     *     which increases as the operation continues.
+     *
+     * @param {String} [status.progress.unit]
+     *     The unit of the arbitrary status.progress.value, if that value has
+     *     an associated unit.
+     *
+     * @param {String} [status.progress.ratio]
+     *     If known, the current status of the operation as a value between
+     *     0 and 1 inclusive, where 0 is not yet started, and 1 is complete.
+     *
      * @param {Object[]} [status.actions]
      *     Array of action objects which contain an action name and callback to
      *     be executed when that action is invoked. 
@@ -138,6 +154,22 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
      *     The number of seconds remaining before the countdown callback is
      *     called.
      *
+     * @param {String} [notification.progress.text]
+     *     If this notification has associated progress, the text to display
+     *     while the operation is occurring.
+     *
+     * @param {String} [notification.progress.value]
+     *     The current state of operation progress, as an arbitrary number
+     *     which increases as the operation continues.
+     *
+     * @param {String} [notification.progress.unit]
+     *     The unit of the arbitrary notification.progress.value, if that value
+     *     has an associated unit.
+     *
+     * @param {String} [notification.progress.ratio]
+     *     If known, the current status of the operation as a value between
+     *     0 and 1 inclusive, where 0 is not yet started, and 1 is complete.
+     *
      * @param {Object[]} [notification.actions]
      *     Array of action objects which contain an action name and callback to
      *     be executed when that action is invoked. 

guacamole/src/main/webapp/app/notification/directives/guacNotification.js

@@ -108,6 +108,15 @@ angular.module('notification').directive('guacNotification', [function guacNotif
              */
             progress : '=',
 
+            /**
+             * Value between 0 and 1 denoting what proportion of the operation
+             * has completed. If known, this value should be 0 if the operation
+             * has not started, and 1 if the operation is complete.
+             *
+             * @type Number
+             */
+            progressRatio : '=',
+
             /**
              * Array of name/callback pairs for each action the user is allowed
              * to take once the notification is shown.
@@ -132,6 +141,11 @@ angular.module('notification').directive('guacNotification', [function guacNotif
         templateUrl: 'app/notification/templates/guacNotification.html',
         controller: ['$scope', '$interval', function guacNotificationController($scope, $interval) {
 
+            // Update progress bar if end known
+            $scope.$watch("progressRatio", function updateProgress(ratio) {
+                $scope.progressPercent = ratio * 100;
+            });
+
             // Set countdown interval when associated property is set
             $scope.$watch("countdown", function resetTimeRemaining(countdown) {
 

guacamole/src/main/webapp/app/notification/styles/notification.css

@@ -96,11 +96,11 @@
     padding: 0.25em;
     
     border: 1px solid gray;
-    -moz-border-radius: 0.2em;
-    -webkit-border-radius: 0.2em;
-    -khtml-border-radius: 0.2em;
-    border-radius: 0.2em;
 
     position: relative;
     
 }
+
+.notification .progress .text {
+    position: relative;
+}

guacamole/src/main/webapp/app/notification/templates/guacNotification.html

@@ -32,7 +32,7 @@
         <p ng-show="text" class="text">{{text | translate}}</p>
 
         <!-- Current progress -->
-        <div ng-show="progressText" class="progress">{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}</div>
+        <div ng-show="progressText" class="progress"><div ng-show="progressPercent" ng-style="{'width': progressPercent + '%'}" class="bar"></div><div class="text">{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}</div></div>
 
         <!-- Default action countdown text -->
         <p ng-show="countdownText" class="countdown-text">{{countdownText | translate:"{ REMAINING: timeRemaining }"}}</p>

guacamole/src/main/webapp/index.html

@@ -44,6 +44,7 @@ THE SOFTWARE.
                     text="status.text"
                     progress-text="status.progress.text"
                     progress-unit="status.progress.unit"
+                    progress-ratio="status.progress.ratio"
                     progress="status.progress.value"
                     actions="status.actions"
                     countdown-text="status.countdown.text"
@@ -66,6 +67,7 @@ THE SOFTWARE.
                     text="wrapper.notification.text"
                     progress-text="wrapper.notification.progress.text"
                     progress-unit="wrapper.notification.progress.unit"
+                    progress-ratio="wrapper.notification.progress.ratio"
                     progress="wrapper.notification.progress.value"
                     actions="wrapper.notification.actions"
                     countdown-text="wrapper.notification.countdown.text"