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',