DO NOT MERGE: Database Access Properties

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,25 +17,51 @@ 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: ''
       };
   }
 
   componentDidMount(){
     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 {
           <label htmlFor="uname">Your Name</label>
           <Input type="text" placeholder="Some Username" onChange={(e, data) => this.handleUsernameChange(data)} />
         </Form.Field>
-        <Form.Field>
-          <label htmlFor="dataset">Dataset</label>
-          <Dropdown id="dataset" placeholder='Example Dataset' search selection options={available_datasets} onChange={(e, data) => this.handleDatasetChange(data)} />
-        </Form.Field>
-        <Form.Field>
-            <Button onClick={(e) => this.submitNaming()} icon primary={true}>
-              <Icon name='sign out' />
-              <span style={{marginLeft: 10 + 'px'}}>Sign In</span>
-            </Button>
+        <div className="row" style={{marginTop: 20 + 'px'}}>
+          <div className="col-10">
+            <Form.Field>
+              <label htmlFor="dataset">Dataset</label>
+              <Dropdown id="dataset" placeholder='Example Dataset' search selection options={available_datasets} onChange={(e, data) => this.handleDatasetChange(data)} />
+            </Form.Field>
+          </div>
+          <div className="col-2">
+            <Form.Button floated='right' onClick={(e) => this.toggleDatasetField()} icon primary={false} style={{marginTop: 23 + 'px'}}>
+              <Icon name={this.state.dataset_btn_icon} />
+              <span style={{marginLeft: 10 + 'px'}}>{this.state.dataset_btn_text}</span>
+            </Form.Button>
+          </div>
+        </div>
+        <Transition visible={this.state.show_dataset_form} animation='slide down' duration={200}>
+          <Form.Field>
+            <div className="row" style={{marginTop: 20 + 'px'}}>
+              <div className="col-10">
+                <Form.Group widths='equal'>
+                  <Form.Input onChange={(e, data) => this.changeNewDatasetUrl(data)} fluid label='URL' placeholder='URL to Database' value={this.state.new_dataset_url} />
+                  <Form.Input onChange={(e, data) => this.changeNewDatasetName(data)} fluid label='Dataset-Name' placeholder='Name of Dataset' value={this.state.new_dataset_name} />
+                  <Form.Input onChange={(e, data) => this.changeNewDatasetUsername(data)} fluid label='Username' placeholder='Username of Database' value={this.state.new_dataset_username} />
+                  <Form.Input onChange={(e, data) => this.changeNewDatasetPassword(data)} fluid label='Password' placeholder='Password of Database' type='password' value={this.state.new_dataset_password} />
+                </Form.Group>
+              </div>
+              <div className="col-2">
+                <Form.Button onClick={(e) => this.saveDataset(e)} floated='right' icon primary={true} style={{marginTop: 23 + 'px'}}>
+                  <Icon name='save' />
+                  <span style={{marginLeft: 10 + 'px'}}>Save</span>
+                </Form.Button>
+              </div>
+            </div>
+          </Form.Field>
+        </Transition>
+        <Form.Field style={{marginTop: this.state.submit_btn_margin}}>
+          <Form.Button onClick={(e) => this.submitNaming(e)} icon primary={true}>
+            <Icon name='sign out' />
+            <span style={{marginLeft: 10 + 'px'}}>Sign In</span>
+          </Form.Button>
         </Form.Field>
       </Form>
     );

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;

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);
   }
 
 };

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;
       };

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