kopia lustrzana https://github.com/OpenDroneMap/WebODM
Upload workflow
rodzic
a93fd5ae46
commit
31d63cdc3c
|
@ -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>);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Ładowanie…
Reference in New Issue