From 31d63cdc3c523d28f7ba718002ca993aca3366f3 Mon Sep 17 00:00:00 2001 From: Piero Toffanin Date: Fri, 21 Oct 2016 10:42:46 -0400 Subject: [PATCH] Upload workflow --- .../app/js/components/EditTaskPanel.jsx | 19 ++++-- .../app/js/components/ProjectListItem.jsx | 64 ++++++++++++++++--- .../js/components/ProjectListItemPanel.jsx | 8 +++ .../app/js/components/UploadProgressBar.jsx | 6 +- 4 files changed, 82 insertions(+), 15 deletions(-) diff --git a/app/static/app/js/components/EditTaskPanel.jsx b/app/static/app/js/components/EditTaskPanel.jsx index aa7fe95f..dcf695ba 100644 --- a/app/static/app/js/components/EditTaskPanel.jsx +++ b/app/static/app/js/components/EditTaskPanel.jsx @@ -124,6 +124,11 @@ class EditTaskPanel extends React.Component { // console.log(this.state.selectedNode); // console.log(this.state.name || this.namePlaceholder); this.setState({editing: false}); + this.props.onSave({ + name: this.state.name !== "" ? this.state.name : this.namePlaceholder, + selectedNode: this.state.selectedNode, + options: this.getOptions() + }); } edit(e){ @@ -174,9 +179,11 @@ class EditTaskPanel extends React.Component { } return ( -
+
-

Your images are being uploaded. In the meanwhile, check these additional options:

+

{this.props.uploading ? + "Your images are being uploaded. In the meanwhile, check these additional options:" + : "Please check these additional options:"}

@@ -186,21 +193,23 @@ class EditTaskPanel extends React.Component { {processingNodesOptions}
- +
); - }else{ + }else if (this.props.uploading){ return ( -
+

Thank you! Please wait for the upload to complete.

); + }else{ + return (
); } } } diff --git a/app/static/app/js/components/ProjectListItem.jsx b/app/static/app/js/components/ProjectListItem.jsx index fae00ec0..93a62c82 100644 --- a/app/static/app/js/components/ProjectListItem.jsx +++ b/app/static/app/js/components/ProjectListItem.jsx @@ -14,14 +14,14 @@ class ProjectListItem extends React.Component { this.state = { showPanel: false, - upload: this.getDefaultUploadState(), - taskId: null + upload: this.getDefaultUploadState() }; this.togglePanel = this.togglePanel.bind(this); this.handleUpload = this.handleUpload.bind(this); this.closeUploadError = this.closeUploadError.bind(this); this.cancelUpload = this.cancelUpload.bind(this); + this.handleTaskSaved = this.handleTaskSaved.bind(this); } getDefaultUploadState(){ @@ -32,7 +32,9 @@ class ProjectListItem extends React.Component { progress: 0, totalCount: 0, totalBytes: 0, - totalBytesSent: 0 + totalBytesSent: 0, + taskInfo: null, + taskId: null }; } @@ -84,14 +86,33 @@ class ProjectListItem extends React.Component { }) .on("completemultiple", (files) => { // Check - let success = files.filter(file => file.status !== "success").length === 0; + let success = files.length > 0 && files.filter(file => file.status !== "success").length === 0; + // All files have uploaded! if (success){ this.setUploadState({uploading: false}); + + try{ + let response = JSON.parse(files[0].xhr.response); + if (!response.id) throw new Error(`Expected id field, but none given (${response})`); + + let taskId = response.id; + this.setUploadState({taskId}); + + // Update task information (if the user has completed this step) + if (this.state.upload.taskInfo !== null){ + this.updateTaskInfo(); + }else{ + // Need to wait for user to confirm task options + } + }catch(e){ + this.setUploadState({error: `Invalid response from server: ${e.message}`}) + } + }else{ this.setUploadState({ uploading: false, - error: "Could not upload all files. An error occured." + error: "Could not upload all files. An error occured. Please try again." }); } }) @@ -100,6 +121,19 @@ class ProjectListItem extends React.Component { }); } + updateTaskInfo(){ + if (this.state.upload.taskId === null) throw new Error("taskId is null"); + if (this.state.upload.taskInfo === null) throw new Error("taskInfo is null"); + + // TODO: update task via API call + // if (this.state.showPanel){ + // this.projectListItemPanel.refresh(); + // }else{ + // this.setState({showPanel: true}); + // } + // this.setState({showEditTask: false}); + } + setRef(prop){ return (domNode) => { if (domNode != null) this[prop] = domNode; @@ -124,8 +158,16 @@ class ProjectListItem extends React.Component { this.resetUploadState(); } - render() { + handleTaskSaved(taskInfo){ + this.setUploadState({taskInfo}); + // Has the upload finished? + if (!this.state.upload.uploading && this.state.upload.taskId !== null){ + this.updateTaskInfo(); + } + } + + render() { return (
  • @@ -169,9 +211,9 @@ class ProjectListItem extends React.Component {
    • - {this.state.showPanel ? : ""} + {this.state.showPanel ? : ""} - {this.state.upload.uploading ? : ""} + {this.state.upload.showEditTask ? : ""} {this.state.upload.error !== "" ?
    @@ -180,7 +222,11 @@ class ProjectListItem extends React.Component {
    : ""} - +
    diff --git a/app/static/app/js/components/ProjectListItemPanel.jsx b/app/static/app/js/components/ProjectListItemPanel.jsx index 1cc25b18..42d611f1 100644 --- a/app/static/app/js/components/ProjectListItemPanel.jsx +++ b/app/static/app/js/components/ProjectListItemPanel.jsx @@ -5,6 +5,14 @@ class ProjectListItemPanel extends React.Component { super(); } + componentDidMount(){ + console.log("DISPLAY"); + } + + refresh(){ + console.log("REFRESH"); + } + render() { return (
    diff --git a/app/static/app/js/components/UploadProgressBar.jsx b/app/static/app/js/components/UploadProgressBar.jsx index 7fc0f31a..52ba7668 100644 --- a/app/static/app/js/components/UploadProgressBar.jsx +++ b/app/static/app/js/components/UploadProgressBar.jsx @@ -23,6 +23,10 @@ class UploadProgressBar extends React.Component { let active = percentage < 100 ? "active" : ""; + let label = active ? + `${this.props.totalCount} files${bytes}` : + `${this.props.totalCount} files uploaded successfully`; + return (
    @@ -31,7 +35,7 @@ class UploadProgressBar extends React.Component {
    - {this.props.totalCount} files{bytes} + {label}
    );