Add remote mount

2019-10-06 21:39:14 -05:00
parent 3359ff5357
commit d52a2f7291
8 changed files with 188 additions and 33 deletions
--- a/src/containers/AddRemoteMount/AddRemoteMount.js
+++ b/src/containers/AddRemoteMount/AddRemoteMount.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import {Component} from 'react';
+import './AddRemoteMount.css';
+import {connect} from 'react-redux';
+import Button from '../../components/UI/Button/Button';
+import Modal from '../../components/UI/Modal/Modal';
+import Box from '../../components/UI/Box/Box';
+import Text from '../../components/UI/Text/Text';
+import {notifyError} from '../../redux/actions/error_actions';
+import {addRemoteMount} from '../../redux/actions/mount_actions';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
+    notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends Component {
+  state = {
+    Display: false,
+    HostNameOrIp: '',
+    Port: 20000,
+    Token: '',
+  };
+
+  addRemoteMount = () => {
+    if (this.state.HostNameOrIp.length === 0) {
+      this.props.notifyError('Hostname or IP cannot be empty.');
+    } else {
+      this.setState({
+        Display: false
+      }, () => {
+        this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
+        this.setState({
+          HostNameOrIp: '',
+          Port: 20000,
+          Token: '',
+        });
+      });
+    }
+  };
+
+  createModalConditionally = (condition, jsx, critical) => {
+    const modalProps = {critical: critical};
+    return condition ? (<Modal {...modalProps}>{jsx}</Modal>) : null;
+  };
+
+  handleAddRemoteMount = () => {
+    this.setState({
+      Display: true,
+    });
+  };
+
+  render() {
+    const displayAdd = this.createModalConditionally(this.state.Display, (
+      <Box dxDark
+           dxStyle={{width: 'auto', height: 'auto', padding: '8px'}}>
+        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: '8px'}}>Add Remote Mount</h1>
+        <Text text={'Hostname or IP'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input onChange={e => this.setState({HostNameOrIp: e.target.value.trim()})}
+               className={'ConfigurationItemInput'}
+               type={'text'}
+               value={this.state.HostNameOrIp}/>
+        <div style={{paddingTop: '8px'}}/>
+        <Text text={'Port'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input max={65535}
+               min={1025}
+               onChange={e => this.setState({Port: e.target.value})}
+               className={'ConfigurationItemInput'}
+               type={'number'}
+               value={this.state.Port}/>
+        <div style={{paddingTop: '8px'}}/>
+        <Text text={'Remote Token'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input onChange={e => this.setState({Token: e.target.value})}
+               className={'ConfigurationItemInput'}
+               type={'text'}
+               value={this.state.Token}/>
+        <div style={{paddingTop: '8px'}}/>
+        <table cellSpacing={1}
+               width="100%">
+          <tbody>
+          <tr>
+            <td width="50%">
+              <Button buttonStyles={{width: '100%'}}
+                      clicked={() => this.addRemoteMount()}>OK</Button>
+            </td>
+            <td width="50%">
+              <Button buttonStyles={{width: '100%'}}
+                      clicked={() => this.setState({Display: false})}>Cancel</Button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </Box>
+    ));
+
+    return (
+      <div className={'AddRemoteMount'}>
+        {displayAdd}
+        <Button clicked={this.handleAddRemoteMount}>Add Remote Mount</Button>
+      </div>
+    );
+  }
+});