Upload workflow

pull/34/head
Piero Toffanin 2016-10-21 10:42:46 -04:00
rodzic a93fd5ae46
commit 31d63cdc3c
4 zmienionych plików z 82 dodań i 15 usunięć

Wyświetl plik

@ -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 (
<div className="edit-task-panel">
<div className={"edit-task-panel " + (!this.props.show ? "hide" : "")}>
<form className="form-horizontal">
<p>Your images are being uploaded. In the meanwhile, check these additional options:</p>
<p>{this.props.uploading ?
"Your images are being uploaded. In the meanwhile, check these additional options:"
: "Please check these additional options:"}</p>
<div className="form-group">
<label className="col-sm-2 control-label">Name</label>
<div className="col-sm-10">
@ -186,21 +193,23 @@ class EditTaskPanel extends React.Component {
{processingNodesOptions}
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" className="btn btn-primary" onClick={this.save}><i className="glyphicon glyphicon-saved"></i> Save</button>
<button type="submit" className="btn btn-primary" onClick={this.save}><i className="glyphicon glyphicon-saved"></i> {this.props.uploading ? "Save" : "Start Processing"}</button>
</div>
</div>
</form>
</div>
);
}else{
}else if (this.props.uploading){
return (
<div className="edit-task-panel">
<div className={"edit-task-panel " + (!this.props.show ? "hide" : "")}>
<div className="pull-right">
<button type="submit" className="btn btn-primary btn-sm glyphicon glyphicon-pencil" onClick={this.edit}></button>
</div>
<p className="header"><strong>Thank you!</strong> Please wait for the upload to complete.</p>
</div>
);
}else{
return (<div></div>);
}
}
}

Wyświetl plik

@ -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 (
<li className="project-list-item list-group-item"
href="javascript:void(0);">
@ -169,9 +211,9 @@ class ProjectListItem extends React.Component {
</div>
</div>
{this.state.showPanel ? <ProjectListItemPanel /> : ""}
{this.state.showPanel ? <ProjectListItemPanel ref={this.setRef("projectListItemPanel")}/> : ""}
{this.state.upload.uploading ? <UploadProgressBar {...this.state.upload}/> : ""}
{this.state.upload.showEditTask ? <UploadProgressBar {...this.state.upload}/> : ""}
{this.state.upload.error !== "" ?
<div className="alert alert-warning alert-dismissible">
@ -180,7 +222,11 @@ class ProjectListItem extends React.Component {
</div>
: ""}
<EditTaskPanel className={!this.state.upload.showEditTask ? "hide" : ""} />
<EditTaskPanel
uploading={this.state.upload.uploading}
show={this.state.upload.showEditTask}
onSave={this.handleTaskSaved}
/>
</div>
</li>

Wyświetl plik

@ -5,6 +5,14 @@ class ProjectListItemPanel extends React.Component {
super();
}
componentDidMount(){
console.log("DISPLAY");
}
refresh(){
console.log("REFRESH");
}
render() {
return (
<div className="project-list-item-panel">

Wyświetl plik

@ -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 (
<div>
<div className="progress">
@ -31,7 +35,7 @@ class UploadProgressBar extends React.Component {
</div>
</div>
<div className="text-left small">
{this.props.totalCount} files{bytes}
{label}
</div>
</div>
);