Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 5d192d6

Browse files
author
vikasrohit
committed
SUP-1159, Progress bar to show %complete on upload
-- Implemented approved designs for normal and error states (action buttons for error states are pending)
1 parent 8999f5d commit 5d192d6

File tree

10 files changed

+220
-28
lines changed

10 files changed

+220
-28
lines changed

‎app/directives/progress-bar/progress-bar.directive.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.progress-bar
2-
.bar(style="background-color: #F0F0F0;height: 10px;")
3-
.completed(style="background-color: #0096FF;")
4-
.summary
2+
.progress-bar__bar
3+
.progress-bar__bar--completed
4+
.progress-bar__summary
55
span(ng-bind="completed")
66
span % {{message}}

‎app/directives/progress-bar/progress-bar.directive.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
link: function(scope, element, attr) {
1313
var model = $parse(attr.completed);
1414
var msg = attr.message;
15-
var progress = angular.element(element[0].querySelector('.completed'));
15+
var progress = angular.element(element[0].querySelector('.progress-bar__bar--completed'));
1616

1717
scope.$watch(model, function(newValue, oldValue) {
18-
console.log("Updating progress bar with " + newValue);
1918
scope.completed = Math.round(newValue);
19+
// console.log("Updating progress bar with " + scope.completed);
2020
scope.message = msg;
2121
progress.css('width', scope.completed + '%')
2222
});

‎app/index.jade

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ html
1717
link(rel='stylesheet', href='../bower_components/intro.js/introjs.css')
1818
link(rel='stylesheet', href='../bower_components/angularjs-toaster/toaster.css')
1919
link(rel='stylesheet', href='../bower_components/react-select/dist/react-select.min.css')
20+
link(rel='stylesheet', href='../bower_components/appirio-tech-ng-ui-components/dist/main.css')
2021
link(rel='stylesheet', href='../bower_components/fontawesome/css/font-awesome.css')
2122
link(rel='stylesheet', href='../bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css')
2223
link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog.css')
@@ -72,6 +73,7 @@ html
7273
link(rel="stylesheet", href="assets/css/directives/srm-tile.css")
7374
link(rel="stylesheet", href="assets/css/directives/skill-tile.css")
7475
link(rel="stylesheet", href="assets/css/directives/responsive-carousel.css")
76+
link(rel="stylesheet", href="assets/css/directives/progress-bar.directive.css")
7577
link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
7678
link(rel="stylesheet", href="assets/css/directives/page-state-header.directive.css")
7779
link(rel="stylesheet", href="assets/css/directives/ios-card.css")
@@ -221,6 +223,7 @@ html
221223
script(src="directives/page-state-header/page-state-header.directive.js")
222224
script(src="directives/preventEventPropagation.directive.js")
223225
script(src="directives/profile-widget/profile-widget.directive.js")
226+
script(src="directives/progress-bar/progress-bar.directive.js")
224227
script(src="directives/responsive-carousel/responsive-carousel.directive.js")
225228
script(src="directives/skill-tile/skill-tile.directive.js")
226229
script(src="directives/slideable.directive.js")

‎app/services/submissions.service.js

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
return api.all('submissions').customPOST(body)
2424
.then(function(response) {
2525
console.log('POST/Presigned URL Response: ', response.plain());
26-
26+
progressCallback.call(progressCallback, 'PREPARE', 100);
2727
uploadSubmissionFileToS3(response, response.data.files, files, progressCallback);
2828
})
2929
.catch(function(err) {
@@ -45,9 +45,12 @@
4545
xhr.upload.addEventListener("progress", function(oEvent) {
4646
if (oEvent.lengthComputable) {
4747
var percentComplete = oEvent.loaded / oEvent.total;
48-
console.log("Completed " + percentComplete);
48+
// console.log("Completed " + percentComplete);
4949
if (progressCallback && typeof progressCallback === 'function') {
50-
progressCallback.call(progressCallback, fileWithPresignedURL.preSignedUploadUrl, percentComplete*100);
50+
progressCallback.call(progressCallback, 'UPLOAD', {
51+
file: fileWithPresignedURL.preSignedUploadUrl,
52+
progress: percentComplete*100
53+
});
5154
}
5255
// ...
5356
} else {
@@ -87,39 +90,42 @@
8790
.then(function(response) {
8891
console.log('response from S3: ', response);
8992
console.log('response to use .save restnagular with: ', presignedURLResponse);
90-
93+
progressCallback.call(progressCallback, 'UPLOAD', 100);
9194
// Update and start processing
92-
updateSubmissionStatus(presignedURLResponse.plain());
95+
updateSubmissionStatus(presignedURLResponse.plain(), progressCallback);
9396

9497
})
9598
.catch(function(err) {
99+
progressCallback.call(progressCallback, 'ERROR', err);
96100
console.log('error uploading to S3: ', err);
97101
});
98102
}
99103

100-
function updateSubmissionStatus(body) {
104+
function updateSubmissionStatus(body, progressCallback) {
101105
// Pass data from upload to S3
102106
body.data.files.forEach(function(file) {
103107
file.status = 'UPLOADED';
104108
});
105109

106-
return api.one('submissions', body.id).customPUT(body)
110+
return api.one('submissionss', body.id).customPUT(body)
107111
.then(function(response) {
108112
$log.info('Successfully updated file statuses');
109-
recordCompletedSubmission(response.plain());
113+
recordCompletedSubmission(response.plain(), progressCallback);
110114
})
111115
.catch(function(err) {
112116
$log.info('Error updating file statuses');
113117
$log.error(err);
118+
progressCallback.call(progressCallback, 'ERROR', err);
114119
});
115120
}
116121

117-
function recordCompletedSubmission(body) {
122+
function recordCompletedSubmission(body, progressCallback) {
118123
// Once all uploaded, make record and begin processing
119124
return api.one('submissions', body.id).customPOST(body, 'process')
120125
.then(function(response) {
121126
$log.info('Successfully made file record. Beginning processing');
122127
console.log('response from process call: ', response);
128+
progressCallback.call(progressCallback, 'FINISH', 100);
123129
})
124130
.catch(function(err) {
125131
$log.info('Error in starting processing');

‎app/submissions/submit-file/submit-file.controller.js

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
2929
vm.comments = '';
3030
vm.uploadProgress = 0;
31+
vm.uploading = false;
32+
vm.preparing = false;
33+
vm.finishing = false;
34+
vm.showProgress = false;
35+
vm.errorInUpload = false;
3136
vm.submissionForm = {
3237
files: [],
3338

@@ -82,6 +87,7 @@
8287
vm.selectFont = selectFont;
8388
vm.createAnotherFontFieldset = createAnotherFontFieldset;
8489
vm.createAnotherStockArtFieldset = createAnotherStockArtFieldset;
90+
vm.cancelRetry = cancelRetry;
8591

8692
activate();
8793

@@ -168,7 +174,10 @@
168174
}
169175

170176
function uploadSubmission() {
171-
vm.updateProgress = 0;
177+
vm.uploadProgress = 0;
178+
vm.fileUploadProgress = {};
179+
vm.showProgress = true;
180+
vm.preparing = true;
172181
vm.submissionsBody.data.submitterComments = vm.comments;
173182
vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank;
174183

@@ -197,16 +206,63 @@
197206
SubmissionsService.getPresignedURL(vm.submissionsBody, files, updateProgress);
198207
}
199208

200-
function updateProgress(requestId, progress) {
201-
fileUploadProgress[requestId] = progress;
202-
var total = 0, count = 0;
203-
for(var requestId in fileUploadProgress) {
204-
var prog = fileUploadProgress[requestId];
205-
total += prog;
206-
count++;
209+
/**
210+
* Callback for updating submission upload process. It looks for different phases e.g. PREPARE, UPLOAD, FINISH
211+
* of the submission upload and updates the progress UI accordingly.
212+
*/
213+
function updateProgress(phase, args) {
214+
// for PREPARE phase
215+
if (phase === 'PREPARE') {
216+
// we are concerned only for completion of the phase
217+
if (args === 100) {
218+
vm.preparing = false;
219+
vm.uploading = true;
220+
console.log('Prapared');
221+
}
222+
} else if (phase === 'UPLOAD') {
223+
// if args is object, this update is about XHRRequest's upload progress
224+
if (typeof args === 'object') {
225+
var requestId = args.file;
226+
var progress = args.progress;
227+
if (!fileUploadProgress[requestId] || fileUploadProgress[requestId] < progress) {
228+
fileUploadProgress[requestId] = progress;
229+
}
230+
var total = 0, count = 0;
231+
for(var requestId in fileUploadProgress) {
232+
var prog = fileUploadProgress[requestId];
233+
total += prog;
234+
count++;
235+
}
236+
vm.uploadProgress = total / count;
237+
// initiate digest cycle because this event (xhr event) is caused outside angular
238+
$scope.$apply();
239+
} else { // typeof args === 'number', mainly used a s fallback to mark completion of the UPLOAD phase
240+
vm.uploadProgress = args;
241+
}
242+
// start next phase when UPLOAD is done
243+
if (vm.uploadProgress == 100) {
244+
console.log('Uploaded');
245+
vm.uploading = false;
246+
vm.finishing = true;
247+
}
248+
} else if (phase === 'FINISH') {
249+
// we are concerned only for completion of the phase
250+
if (args === 100) {
251+
console.log('Finished');
252+
vm.finishing = false;
253+
vm.showProgress = false;
254+
255+
// TODO redirect to submission listing / challenge details page
256+
}
257+
} else { // assume it to be error condition
258+
console.log("Else: " + phase);
259+
vm.errorInUpload = true;
207260
}
208-
vm.uploadProgress = total / count;
209-
$scope.$apply();
261+
}
262+
263+
function cancelRetry() {
264+
vm.showProgress = false;
265+
// TODO redirect to submission listing / challenge details page
210266
}
211267
}
212268
})();

‎app/submissions/submit-file/submit-file.jade

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,24 @@
185185

186186
button.tc-btn.tc-btn-secondary(type="submit", ng-disabled="submissionForm.$invalid") Submit
187187

188-
.panel-body
189-
p Uploading submission for TBD: challenge name
190-
progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")
188+
modal.transition(show="vm.showProgress", background-click-close="true", style="background-color:white;")
189+
.upload-progress(ng-class="{'upload-progress--error': vm.errorInUpload}")
190+
.upload-progress__title
191+
p Uploading submission for
192+
p.upload-progress-title__challenge-name [Challenge name]
193+
img.upload-progress__image(ng-src="/images/robot.svg", ng-hide="vm.errorInUpload")
194+
img.upload-progress__image--error(ng-src="/images/robot-embarresed.svg", ng-show="vm.errorInUpload")
195+
p.upload-progress__message(ng-hide="vm.errorInUpload") Hey, your work is AWESOME! Please don’t close the window while I’m working, you’ll loose all files!
196+
p.upload-progress__message--error(ng-show="vm.errorInUpload") Oh, that’s embarrassing! The file couldn’t be uploaded, I’m so sorry.
197+
198+
progress-bar.upload-progress__progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")
199+
200+
.upload-progress__preparing(ng-show="vm.preparing && !vm.errorInUpload")
201+
span Preparing...
202+
.upload-progress__finishing(ng-show="vm.finishing && !vm.errorInUpload")
203+
span Finishing...
204+
.upload-progress__error(ng-show="vm.errorInUpload")
205+
span File upload failed
206+
.upload-progress__error-action(ng-show="vm.errorInUpload")
207+
button.tc-btn.tc-btn-s.tc-btn-ghost(type="button", ng-click="vm.cancelRetry()") Cancel
208+
button.tc-btn.tc-btn-s.tc-btn-secondary(type="submit") Try Again

‎assets/css/directives/progress-bar.directive.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import 'topcoder/tc-includes';
2+
3+
.progress-bar {
4+
.progress-bar__bar {
5+
background-color: $gray-light;
6+
height: 10px;
7+
8+
.progress-bar__bar--completed {
9+
background-color: $dark-blue;
10+
height: 100%;
11+
}
12+
}
13+
14+
.progress-bar__summary {
15+
@include font-with-weight('Sofia Pro', 500);
16+
font-size: 12px;
17+
line-height: 14px;
18+
color: $accent-gray-dark;
19+
margin-top: 20px;
20+
}
21+
}

‎assets/css/submissions/submit-file.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,73 @@
3636
.submitterRank {
3737
margin-top: 10px;
3838
}
39+
40+
modal {
41+
.close {
42+
.icon.cross {
43+
background-image: url(/images/x-mark-gray.svg);
44+
background-size: 25px;
45+
}
46+
}
47+
}
48+
.upload-progress {
49+
display:flex;
50+
flex-direction:column;
51+
align-items: center;
52+
53+
.upload-progress__title {
54+
text-transform: uppercase;
55+
@include font-with-weight('Sofia Pro', 500);
56+
font-size: 24px;
57+
line-height: 30px;
58+
max-width: 355px;
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
}
63+
64+
.upload-progress__image,
65+
.upload-progress__image--error {
66+
margin-top: 60px;
67+
}
68+
69+
.upload-progress__message,
70+
.upload-progress__message--error {
71+
@include font-with-weight('Merriweather Sans', 400);
72+
font-size: 15px;
73+
line-height: 19px;
74+
color: $accent-gray;
75+
margin-top: 40px;
76+
}
77+
78+
.upload-progress__progress-bar {
79+
margin-top: 30px;
80+
width: 100%;
81+
max-width: 760px;
82+
}
83+
84+
.upload-progress__preparing,
85+
.upload-progress__finishing,
86+
.upload-progress__error {
87+
@include font-with-weight('Sofia Pro', 500);
88+
font-size: 12px;
89+
line-height: 14px;
90+
color: $accent-gray-dark;
91+
}
92+
93+
.upload-progress__error {
94+
color: $error;
95+
}
96+
97+
.upload-progress__error-action {
98+
margin-top: 40px;
99+
}
100+
101+
&.upload-progress--error {
102+
.upload-progress__progress-bar {
103+
.progress-bar__bar--completed {
104+
background-color: $error;
105+
}
106+
}
107+
}
108+
}

‎assets/images/robot-embarresed.svg

Lines changed: 18 additions & 0 deletions
Loading

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"angular-xml": "~2.1.1",
4141
"angularjs-toaster": "~0.4.15",
4242
"appirio-tech-ng-iso-constants": "[email protected]:appirio-tech/ng-iso-constants#~1.0.5",
43-
"appirio-tech-ng-ui-components": "1.x.x",
43+
"appirio-tech-ng-ui-components": "appirio-tech/ng-ui-components#bower-wiredep-fix",
4444
"d3": "~3.5.6",
4545
"fontawesome": "~4.3.0",
4646
"jstzdetect": "~1.0.6",

0 commit comments

Comments
 (0)