Working on select ddb url dialog

coreplugins/dronedb/plugin.py

@@ -2,8 +2,7 @@ from app.plugins import PluginBase, Menu, MountPoint, logger
 from coreplugins.dronedb.app_views import LoadButtonsView
 
 from .api_views import FoldersTaskView, ImportDatasetTaskView, CheckCredentialsTaskView, OrganizationsTaskView, DatasetsTaskView, VerifyUrlTaskView
-#from .app_views import HomeView, LoadButtonsView
-#from .platform_helper import get_all_extended_platforms
+
 from django.contrib import messages
 from django.shortcuts import render
 from django.contrib.auth.decorators import login_required

coreplugins/dronedb/public/ImportView.jsx

@@ -2,44 +2,49 @@ import React, { Component, Fragment } from "react";
 import PropTypes from 'prop-types';
 
 import ResizeModes from 'webodm/classes/ResizeModes';
-
+import { Modal, Button } from "react-bootstrap";
 import PlatformDialog from "./components/PlatformDialog";
-import LibraryDialog from "./components/LibraryDialog";
+import SelectUrlDialog from "./components/SelectUrlDialog";
 import ErrorDialog from "./components/ErrorDialog";
 import ConfigureNewTaskDialog from "./components/ConfigureNewTaskDialog";
 
 import "./ImportView.scss";
 
 export default class TaskView extends Component {
-	static propTypes = {
+
+	/*
+ 	static propTypes = {
 		projectId: PropTypes.number.isRequired,
 		apiURL: PropTypes.string.isRequired,
 		onNewTaskAdded: PropTypes.func.isRequired,
-  }
+  	}*/
 	
 	state = {
 		error: "",
 		ddbUrl: "",
 		selectedFolder: "",
+		isDialogOpen: false
 	};
 	
 	componentDidMount() {
 
-		// We should check if username and password were set in the DroneDB config
-
-		/*$.getJSON(`${this.props.apiURL}/platforms/`)
+		/* $.getJSON(`${this.props.apiURL}/platforms/`)
 				.done(data => {
 					this.setState({platforms: data.platforms});
 				})
 				.fail(() => {
 					this.onErrorInDialog("Failed to find available platforms")
-				})
-				*/
+				}) */
+				
 	}
 
 	//onSelectPlatform = platform => this.setState({ currentPlatform: platform });
+
+	onHideDialog = () => this.setState({ ddbUrl: null, taskId: null, isDialogOpen: false });
+	onSelectFolder = url => this.setState({ ddbUrl: url });
+	/*
 	onSelectFolder = folder => this.setState({ selectedFolder: folder });
-	onHideDialog = () => this.setState({ ddbUrl: null, taskId: null });
+	
 
 	onSaveTask = taskInfo => {
 		// Create task
@@ -82,12 +87,17 @@ export default class TaskView extends Component {
 	onErrorInDialog = msg => {
 		this.setState({ error: msg });
 		this.onHideDialog();
-	};
+	};*/
+
+	handleClick = () => {
+		this.setState({ isDialogOpen: true });
+	}
 
 	render() {
 		const {
 			error,
 			ddbUrl,
+			isDialogOpen
 		} = this.state;
 		return (
 			<Fragment>
@@ -101,30 +111,13 @@ export default class TaskView extends Component {
 						<i className={"fas fa-cloud"} />
 						DroneDB
 				</Button>
-				{selectedFolder === null ?
-					<Fragment>
-						<PlatformDialog
-							show={selectedFolder === null}
-							apiURL={this.props.apiURL}
-							onHide={this.onHideDialog}
-							onSubmit={this.onSelectFolder}
-						/>
-						<LibraryDialog
-						  show={selectedFolder === null}
-						  apiURL={this.props.apiURL}
+				<SelectUrlDialog
+						  show={isDialogOpen}						  
 						  onHide={this.onHideDialog}
 						  onSubmit={this.onSelectFolder}
 						/>
-					</Fragment>
-				: 
-					<ConfigureNewTaskDialog
-					  show={selectedFolder !== null}
-					  folder={selectedFolder}
-					  onHide={this.onHideDialog}
-					  onSaveTask={this.onSaveTask}
-					/>
-				}
-			</Fragment>
+			</Fragment>		
+					
 		);
 	}
 }

coreplugins/dronedb/public/components/GoToFolderButton.jsx

@@ -16,8 +16,7 @@ export default class GoToFolderButton extends Component {
 			<Button
 				bsStyle={"primary"}
 				bsSize={"small"}
-				onClick={this.handleClick}
-			>
+				onClick={this.handleClick}>
 				<i className={"fa fa-folder icon"} />
 				Go To Import Folder
 			</Button>

coreplugins/dronedb/public/components/PlatformDialog.jsx

@@ -1,97 +0,0 @@
-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>
-		);
-	}
-}

coreplugins/dronedb/public/components/PlatformDialog.scss

@@ -1,7 +0,0 @@
-.modal-backdrop {
-	z-index: 100000 !important;
-}
-
-.folder-select.modal button i {
-	margin-right: 1em;
-}

coreplugins/dronedb/public/components/SelectUrlDialog.jsx

@@ -2,17 +2,19 @@ import PropTypes from 'prop-types';
 import { Component } from "react";
 import { Modal, Button } from "react-bootstrap";
 import Select from 'react-select';
-import "./LibraryDialog.scss";
+import "./SelectUrlDialog.scss";
 
-export default class LibraryDialog extends Component {
+export default class SelectUrlDialog extends Component {
 	static defaultProps = {
 		platform: null,
+		show: false
 	};
 	static propTypes = {
 		onHide: PropTypes.func.isRequired,
 		onSubmit: PropTypes.func.isRequired,
 		platform: PropTypes.object,
 		apiURL: PropTypes.string.isRequired,
+		show: PropTypes.bool.isRequired
   }
 
   constructor(props){
@@ -25,7 +27,7 @@ export default class LibraryDialog extends Component {
 				error: "",
     };
   }
-	
+	/*
 	componentDidUpdate(){
     if (this.props.platform !== null && this.props.platform.type == "library" && this.state.loadingFolders){
 	    $.get(`${this.props.apiURL}/dronedb/${this.props.platform.name}/listfolders`)
@@ -44,7 +46,7 @@ export default class LibraryDialog extends Component {
 			});
     }
   }
-	
+	*/
 	handleSelectFolder = (e) => this.setState({selectedFolder: e});
 	handleSubmit = e => this.props.onSubmit(this.state.selectedFolder);
 	
@@ -52,12 +54,13 @@ export default class LibraryDialog extends Component {
 		const {
 			onHide,
 			platform,
+			show
 		} = this.props;
 
 		const title = "Import from " + (platform !== null ? platform.name : "Platform");
-		const isVisible = platform !== null && platform.type === "library";
+		//const isVisible = true;
 		return (
-			<Modal className={"folder-select"} onHide={onHide} show={isVisible}>
+			<Modal className={"folder-select"} onHide={onHide} show={show}>
 				<Modal.Header closeButton>
 					<Modal.Title>
 						{title}