From 6c96affbd846c69ac938c8b601cca09bad82f923 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Fri, 5 Dec 2014 10:47:22 -0800 Subject: [PATCH] GUAC-928: Add progress bar to notifications. --- .../client/controllers/clientController.js | 9 ++++-- .../app/index/controllers/indexController.js | 32 +++++++++++++++++++ .../directives/guacNotification.js | 14 ++++++++ .../app/notification/styles/notification.css | 4 +++ .../templates/guacNotification.html | 2 +- guacamole/src/main/webapp/index.html | 2 ++ 6 files changed, 60 insertions(+), 3 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index 3b2dedba2..66ffc9d6b 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/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); }); }); diff --git a/guacamole/src/main/webapp/app/index/controllers/indexController.js b/guacamole/src/main/webapp/app/index/controllers/indexController.js index 4f7f54776..4a5b26ce3 100644 --- a/guacamole/src/main/webapp/app/index/controllers/indexController.js +++ b/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. diff --git a/guacamole/src/main/webapp/app/notification/directives/guacNotification.js b/guacamole/src/main/webapp/app/notification/directives/guacNotification.js index 2e08b210d..f8fb8334b 100644 --- a/guacamole/src/main/webapp/app/notification/directives/guacNotification.js +++ b/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) { diff --git a/guacamole/src/main/webapp/app/notification/styles/notification.css b/guacamole/src/main/webapp/app/notification/styles/notification.css index 60599489b..1a1c33787 100644 --- a/guacamole/src/main/webapp/app/notification/styles/notification.css +++ b/guacamole/src/main/webapp/app/notification/styles/notification.css @@ -104,3 +104,7 @@ position: relative; } + +.notification .progress .text { + position: relative; +} \ No newline at end of file diff --git a/guacamole/src/main/webapp/app/notification/templates/guacNotification.html b/guacamole/src/main/webapp/app/notification/templates/guacNotification.html index e6ccea26f..0691f663e 100644 --- a/guacamole/src/main/webapp/app/notification/templates/guacNotification.html +++ b/guacamole/src/main/webapp/app/notification/templates/guacNotification.html @@ -32,7 +32,7 @@

{{text | translate}}

-
{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}
+
{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}

{{countdownText | translate:"{ REMAINING: timeRemaining }"}}

diff --git a/guacamole/src/main/webapp/index.html b/guacamole/src/main/webapp/index.html index 3dbeeecb4..8206371ad 100644 --- a/guacamole/src/main/webapp/index.html +++ b/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"