OpenDroneMap-WebODM/coreplugins/cloudimport/public/components/PlatformDialog.jsx

98 wiersze
2.7 KiB
JavaScript

import PropTypes from 'prop-types';
import { Component } from "react";
import { Modal, Button, FormGroup, ControlLabel, FormControl, HelpBlock } from "react-bootstrap";
import "./PlatformDialog.scss";
export default class PlatformDialog extends Component {
static defaultProps = {
platform: null,
};
static propTypes = {
onHide: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
platform: PropTypes.object,
apiURL: PropTypes.string.isRequired,
}
constructor(props){
super(props);
this.state = {
folderUrl: "",
fetchedFolder: null,
fetching: false,
};
}
handleChange = e => {
this.setState({folderUrl: e.target.value});
this.verifyFolderUrl(e.target.value);
}
handleSubmit = e => this.props.onSubmit(this.state.fetchedFolder);
verifyFolderUrl = (folderUrl) => {
if (this.props.platform == null) {
this.setState({fetching: false, fetchedFolder: null});
} else {
this.setState({fetching: true});
$.getJSON(`${this.props.apiURL}/platforms/${this.props.platform.name}/verify`, {folderUrl: folderUrl})
.done(data => this.setState({fetching: false, fetchedFolder: data.folder}))
.fail(() => this.setState({fetching: false, fetchedFolder: null}))
}
}
getValidationState = () => {
if (this.state.folderUrl === "" || this.state.fetching === true) {
return null;
} else if (this.state.fetchedFolder == null){
return "error";
} else {
return "success";
}
}
render() {
const {
onHide,
platform,
} = this.props;
const title = "Import from " + (platform !== null ? platform.name : "Platform");
const isVisible = platform !== null && platform.type === "platform";
return (
<Modal className={"folder-select"} onHide={onHide} show={isVisible}>
<Modal.Header closeButton>
<Modal.Title>
{title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<FormGroup controlId="folderUrl" validationState={this.getValidationState()}>
<ControlLabel>Folder/Album URL</ControlLabel>
<FormControl
type="url"
placeholder={platform !== null ? platform.folder_url_example : "Enter a folder url"}
onChange={this.handleChange}
/>
<FormControl.Feedback />
<HelpBlock>Please enter a valid folder/album URL. We will import all images from that folder.</HelpBlock>
</FormGroup>
</form>
</Modal.Body>
<Modal.Footer>
<Button onClick={onHide}>Close</Button>
<Button
bsStyle="primary"
disabled={this.state.fetchedFolder === null}
onClick={this.handleSubmit}
>
<i className={"fa fa-upload"} />
Import
</Button>
</Modal.Footer>
</Modal>
);
}
}