diff --git a/pika/src/Components/Login.js b/pika/src/Components/Login.js index 1cdb4a8..d7967c6 100644 --- a/pika/src/Components/Login.js +++ b/pika/src/Components/Login.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import { Button, Icon, Dropdown, Form, Input } from 'semantic-ui-react'; +import { Button, Icon, Dropdown, Form, Input, Transition } from 'semantic-ui-react'; import AccountStore from '../stores/AccountStore'; import AccountActions from '../actions/AccountActions'; @@ -17,13 +17,28 @@ class Login extends Component { this.handleDatasetChange = this.handleDatasetChange.bind(this); this.handleUsernameChange = this.handleUsernameChange.bind(this); this.renderNaming = this.renderNaming.bind(this); + this.toggleDatasetField = this.toggleDatasetField.bind(this); + this.saveDataset = this.saveDataset.bind(this); + this.changeNewDatasetUrl = this.changeNewDatasetUrl.bind(this); + this.changeNewDatasetName = this.changeNewDatasetName.bind(this); + this.changeNewDatasetUsername = this.changeNewDatasetUsername.bind(this); + this.changeNewDatasetPassword = this.changeNewDatasetPassword.bind(this); + this.getNewDatasetProperties = this.getNewDatasetProperties.bind(this); this.state = { is_loading: true, available_datasets: [], user_name: "", similarity_type: "deprecated", - dataset: "" + dataset: {}, + show_dataset_form: false, + dataset_btn_icon: 'add', + dataset_btn_text: 'Add Dataset', + submit_btn_margin: '20px', + new_dataset_url: '', + new_dataset_name: '', + new_dataset_username: '', + new_dataset_password: '' }; } @@ -31,11 +46,22 @@ class Login extends Component { MetaPathAPI.getAvailableDatasets(); AccountStore.on("change", this.getDatasets); AccountStore.on("change", this.getUserName); + AccountStore.on("change", this.getNewDatasetProperties); } componentWillUnmount(){ AccountStore.removeListener("change", this.getDatasets); AccountStore.removeListener("change", this.getUserName); + AccountStore.removeListener("change", this.getNewDatasetProperties); + } + + getNewDatasetProperties(){ + this.setState({ + new_dataset_url: AccountStore.getNewDatasetUrl(), + new_dataset_name: AccountStore.getNewDatasetName(), + new_dataset_username: AccountStore.getNewDatasetUsername(), + new_dataset_password: AccountStore.getNewDatasetPassword() + }); } getDatasets(){ @@ -58,13 +84,65 @@ class Login extends Component { AccountActions.updateUsername(data.value); } - submitNaming() { - AccountActions.login(this.state.user_name, this.state.dataset); + changeNewDatasetUrl(data){ + AccountActions.updateNewDatasetUrl(data.value); + } + + changeNewDatasetName(data){ + AccountActions.updateNewDatasetName(data.value); + } + + changeNewDatasetUsername(data){ + AccountActions.updateNewDatasetUsername(data.value); + } + + changeNewDatasetPassword(data){ + AccountActions.updateNewDatasetPassword(data.value); + } + + toggleDatasetField(){ + if(!this.state.show_dataset_form){ + this.setState({ + show_dataset_form: true, + dataset_btn_icon: 'remove', + dataset_btn_text: 'Remove Dataset', + submit_btn_margin: '0px' + }); + } + else{ + this.setState({ + show_dataset_form: false, + dataset_btn_icon: 'add', + dataset_btn_text: 'Add Dataset', + submit_btn_margin: '20px' + }); + } + } + + saveDataset(e){ + e.preventDefault(); + e.stopPropagation(); + + var url = this.state.new_dataset_url; + var name = this.state.new_dataset_name; + var username = this.state.new_dataset_username; + var password = this.state.new_dataset_password; + + this.toggleDatasetField(); + + AccountActions.saveNewDataset(url, name, username, password); + } + + submitNaming(e) { + e.preventDefault(); + e.stopPropagation(); + + AccountActions.login(this.state.user_name, this.state.dataset.name); } renderNaming() { let available_datasets = this.state.available_datasets.map((dataset, index) => { - return { key: index, value: dataset.name, text: dataset.name }; + return { key: index, value: index, text: dataset.name }; }); return ( @@ -73,15 +151,45 @@ class Login extends Component { this.handleUsernameChange(data)} /> - - - this.handleDatasetChange(data)} /> - - - +
+
+ + + this.handleDatasetChange(data)} /> + +
+
+ this.toggleDatasetField()} icon primary={false} style={{marginTop: 23 + 'px'}}> + + {this.state.dataset_btn_text} + +
+
+ + +
+
+ + this.changeNewDatasetUrl(data)} fluid label='URL' placeholder='URL to Database' value={this.state.new_dataset_url} /> + this.changeNewDatasetName(data)} fluid label='Dataset-Name' placeholder='Name of Dataset' value={this.state.new_dataset_name} /> + this.changeNewDatasetUsername(data)} fluid label='Username' placeholder='Username of Database' value={this.state.new_dataset_username} /> + this.changeNewDatasetPassword(data)} fluid label='Password' placeholder='Password of Database' type='password' value={this.state.new_dataset_password} /> + +
+
+ this.saveDataset(e)} floated='right' icon primary={true} style={{marginTop: 23 + 'px'}}> + + Save + +
+
+
+
+ + this.submitNaming(e)} icon primary={true}> + + Sign In + ); diff --git a/pika/src/actions/AccountActionTypes.js b/pika/src/actions/AccountActionTypes.js index ab604c3..30b4051 100644 --- a/pika/src/actions/AccountActionTypes.js +++ b/pika/src/actions/AccountActionTypes.js @@ -7,7 +7,12 @@ const ActionTypes = { LOGIN: 'LOGIN', LOGIN_RESPONSE: 'LOGIN_RESPONSE', LOGOUT: 'LOGOUT', - LOGOUT_RESPONSE: 'LOGOUT_RESPONSE' + LOGOUT_RESPONSE: 'LOGOUT_RESPONSE', + UPDATE_NEW_DATASET_URL: 'UPDATE_NEW_DATASET_URL', + UPDATE_NEW_DATASET_NAME: 'UPDATE_NEW_DATASET_NAME', + UPDATE_NEW_DATASET_USERNAME: 'UPDATE_NEW_DATASET_USERNAME', + UPDATE_NEW_DATASET_PASSWORD: 'UPDATE_NEW_DATASET_PASSWORD', + SAVE_NEW_DATASET: 'SAVE_NEW_DATASET' } export default ActionTypes; diff --git a/pika/src/actions/AccountActions.js b/pika/src/actions/AccountActions.js index f3fb6a5..e6b59db 100644 --- a/pika/src/actions/AccountActions.js +++ b/pika/src/actions/AccountActions.js @@ -32,10 +32,10 @@ const Actions = { MetaPathAPI.getAvailableDatasets(); }, - selectDataset(dataset){ + selectDataset(dataset_id){ AccountDispatcher.dispatch({ type: AccountActionTypes.DATASET_SELECTION, - payload: {dataset: dataset} + payload: {dataset_id: dataset_id} }) }, @@ -56,6 +56,41 @@ const Actions = { type: AccountActionTypes.LOAD_DATASETS_RESPONSE, payload: {datasets: datasets} }); + }, + + updateNewDatasetUrl(url){ + AccountDispatcher.dispatch({ + type: AccountActionTypes.UPDATE_NEW_DATASET_URL, + payload: {url: url} + }); + }, + + updateNewDatasetName(name){ + AccountDispatcher.dispatch({ + type: AccountActionTypes.UPDATE_NEW_DATASET_NAME, + payload: {name: name} + }); + }, + + updateNewDatasetUsername(username){ + AccountDispatcher.dispatch({ + type: AccountActionTypes.UPDATE_NEW_DATASET_USERNAME, + payload: {username: username} + }); + }, + + updateNewDatasetPassword(password){ + AccountDispatcher.dispatch({ + type: AccountActionTypes.UPDATE_NEW_DATASET_PASSWORD, + payload: {password: password} + }); + }, + + saveNewDataset(url, name, username, password){ + AccountDispatcher.dispatch({ + type: AccountActionTypes.SAVE_NEW_DATASET + }); + MetaPathAPI.saveNewDataset(url, name, username, password); } }; diff --git a/pika/src/stores/AccountStore.js b/pika/src/stores/AccountStore.js index 2de3ff5..9508394 100644 --- a/pika/src/stores/AccountStore.js +++ b/pika/src/stores/AccountStore.js @@ -12,12 +12,52 @@ class AccountStore extends EventEmitter { this.dataset = ''; this.availableDatasets = []; this.isLoading = true; + this.newDatasetUrl = ''; + this.newDatasetName = ''; + this.newDatasetUsername = ''; + this.newDatasetPassword = ''; } loading(){ return this.isLoading; } + getNewDatasetUrl(){ + return this.newDatasetUrl; + } + + getNewDatasetName(){ + return this.newDatasetName; + } + + getNewDatasetUsername(){ + return this.newDatasetUsername; + } + + getNewDatasetPassword(){ + return this.newDatasetPassword; + } + + setNewDatasetUrl(url){ + this.newDatasetUrl = url; + this.emit("change"); + } + + setNewDatasetName(name){ + this.newDatasetName = name; + this.emit("change"); + } + + setNewDatasetUsername(username){ + this.newDatasetUsername = username; + this.emit("change"); + } + + setNewDatasetPassword(password){ + this.newDatasetPassword = password; + this.emit("change"); + } + getAvailableDatasets(){ return this.availableDatasets; } @@ -44,8 +84,8 @@ class AccountStore extends EventEmitter { this.emit("change"); } - setDataset(dataset){ - this.dataset = dataset; + setDataset(dataset_id){ + this.dataset = this.availableDatasets[dataset_id]; this.emit("change"); } @@ -73,7 +113,7 @@ class AccountStore extends EventEmitter { return this.loggedIn; }; case AccountActionTypes.DATASET_SELECTION:{ - this.setDataset(action.payload.dataset); + this.setDataset(action.payload.dataset_id); return this.dataset; }; case AccountActionTypes.LOAD_DATASETS_RESPONSE:{ @@ -84,6 +124,22 @@ class AccountStore extends EventEmitter { this.setUsername(action.payload.userName); return this.userName; }; + case AccountActionTypes.UPDATE_NEW_DATASET_URL:{ + this.setNewDatasetUrl(action.payload.url); + return this.newDatasetUrl; + }; + case AccountActionTypes.UPDATE_NEW_DATASET_NAME:{ + this.setNewDatasetName(action.payload.name); + return this.newDatasetName; + }; + case AccountActionTypes.UPDATE_NEW_DATASET_USERNAME:{ + this.setNewDatasetUsername(action.payload.username); + return this.newDatasetUrl; + }; + case AccountActionTypes.UPDATE_NEW_DATASET_PASSWORD:{ + this.setNewDatasetPassword(action.payload.password); + return this.newDatasetUrl; + }; default:{ return this.state; }; diff --git a/pika/src/utils/MetaPathAPI.js b/pika/src/utils/MetaPathAPI.js index 90d640d..309d9a7 100644 --- a/pika/src/utils/MetaPathAPI.js +++ b/pika/src/utils/MetaPathAPI.js @@ -145,6 +145,33 @@ const Actions = { console.error(error); }); }, + saveNewDataset(url, name, username, password){ + alert("URL: " + url + "\nName: " + name + "\nUsername: " + username + "\nPassword: " + password); + fetch(process.env.REACT_APP_API_HOST + 'save-new-dataset', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + url: url, + name: name, + username: username, + password: password + }), + credentials: 'include' + }).then((response) => { return response.json(); }).then((json) => { + if (!(json.status === 200)){ + alert('Could not save new dataset'); + } + else { + alert('Saved dataset'); + AccountActions.loadDatasets(); + } + }).catch((error) => { + console.error(error); + }); + }, fetchSimilarityScore(){ fetch(process.env.REACT_APP_API_HOST + 'get-similarity-score', { method: 'GET',