Refactoring

2019-10-23 18:12:18 -05:00
parent 8f946b5521
commit fabb6b5b7c
6 changed files with 14 additions and 14 deletions
--- a/src/containers/Configuration/Configuration.js
+++ b/src/containers/Configuration/Configuration.js
@@ -3,7 +3,7 @@ import './Configuration.css';
 import {connect} from 'react-redux';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
-import ConfigurationItem from '../../components/ConfigurationItem/ConfigurationItem';
+import ConfigurationItem from './ConfigurationItem/ConfigurationItem';
 import Modal from '../../components/UI/Modal/Modal';
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {displayConfiguration} from '../../redux/actions/mount_actions';
--- a/src/containers/Configuration/ConfigurationItem/ConfigurationItem.css
+++ b/src/containers/Configuration/ConfigurationItem/ConfigurationItem.css
@@ -0,0 +1,21 @@
+.ConfigurationItem {
+  margin: 0;
+  padding: 0;
+}
+
+input.ConfigurationItemInput {
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(160, 160, 160, 0.1);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+}
+
+.ConfigurationInfo {
+  cursor: pointer;
+}
--- a/src/containers/Configuration/ConfigurationItem/ConfigurationItem.js
+++ b/src/containers/Configuration/ConfigurationItem/ConfigurationItem.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import './ConfigurationItem.css';
+import CheckBox from '../../../components/UI/CheckBox/CheckBox';
+import {connect} from 'react-redux';
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {notifyInfo} from '../../../redux/actions/error_actions';
+import settings from '../../../assets/settings';
+import DropDown from '../../../components/UI/DropDown/DropDown';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg))
+  }
+};
+
+export default connect(null, mapDispatchToProps)(props => {
+  const handleChanged = (e) => {
+    const target = e.target;
+    if (target.type === 'checkbox') {
+      target.value = e.target.checked ? "true" : "false";
+    }
+    props.changed(target);
+  };
+
+  let infoDisplay;
+  if (settings[props.grouping] && settings[props.grouping][props.label]) {
+    const displayInfo = () => {
+      const description = settings[props.grouping][props.label];
+      props.notifyInfo(props.label, description);
+    };
+
+    infoDisplay = <a href={void(0)}
+                  className={'ConfigurationInfo'}
+                  onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
+  }
+  
+  let data;
+  switch (props.template.type) {
+    case "bool":
+      data = <CheckBox changed={handleChanged}
+                       checked={props.value}
+                       disabled={props.readOnly}/>;
+    break;
+
+    case "double":
+      data = <input min={0.0}
+                    disabled={props.readOnly}
+                    onChange={e=>handleChanged(e)}
+                    step={"0.01"}
+                    className={'ConfigurationItemInput'}
+                    type={'number'}
+                    value={parseFloat(props.value).toFixed(2)}/>;
+    break;
+
+    case "list":
+      data = <DropDown alt
+                       auto
+                       changed={handleChanged}
+                       disabled={props.readOnly}
+                       items={props.items}
+                       selected={props.value} />;
+    break;
+
+    case "string":
+      data = <input onChange={e=>handleChanged(e)}
+                    className={'ConfigurationItemInput'}
+                    disabled={props.readOnly}
+                    type={'text'}
+                    value={props.value}/>;
+    break;
+
+    case "uint8":
+      data = <input max={255}
+                    min={0}
+                    disabled={props.readOnly}
+                    onChange={e=>handleChanged(e)}
+                    className={'ConfigurationItemInput'}
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint16":
+      data = <input max={65535}
+                    min={0}
+                    disabled={props.readOnly}
+                    onChange={e=>handleChanged(e)}
+                    className={'ConfigurationItemInput'}
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint32":
+      data = <input max={4294967295}
+                    min={0}
+                    disabled={props.readOnly}
+                    onChange={e=>handleChanged(e)}
+                    className={'ConfigurationItemInput'}
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint64":
+      data = <input max={18446744073709551615}
+                    min={0}
+                    disabled={props.readOnly}
+                    onChange={e=>handleChanged(e)}
+                    className={'ConfigurationItemInput'}
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    default:
+      data = <div>{props.value}</div>;
+  }
+
+  return (
+    <div className={'ConfigurationItem'}>
+      <table cellPadding='2'
+             width='100%'>
+        <tbody>
+          <tr>
+            {infoDisplay ?
+              <td width='100%'>{infoDisplay} {props.label}</td> :
+              <td width='100%'>{props.label}</td>}
+            <td>{data}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+});
--- a/src/containers/MountItems/MountItem/MountItem.css
+++ b/src/containers/MountItems/MountItem/MountItem.css
@@ -0,0 +1,19 @@
+.MountItem {
+  padding: 0;
+  margin: 0;
+  height: 56px;
+  overflow: visible;
+}
+
+input.MountItemInput {
+  margin: 0;
+  padding: 4px;
+  border-radius: var(--border_radius);
+  background: var(--control_background);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  width: 100%;
+}
--- a/src/containers/MountItems/MountItem/MountItem.js
+++ b/src/containers/MountItems/MountItem/MountItem.js
@@ -0,0 +1,184 @@
+import React from 'react';
+import './MountItem.css';
+import {connect} from 'react-redux';
+import DropDown from '../../../components/UI/DropDown/DropDown';
+import Button from '../../../components/UI/Button/Button';
+import Loader from 'react-loader-spinner';
+import Text from '../../../components/UI/Text/Text';
+import Grid from '../../../components/UI/Grid/Grid';
+import configureImage from '../../../assets/images/configure.png';
+import RootElem from '../../../components/UI/RootElem/RootElem';
+import {displayConfiguration, removeRemoteMount, setProviderState} from '../../../redux/actions/mount_actions';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faTrashAlt} from '@fortawesome/free-solid-svg-icons';
+import CheckBox from '../../../components/UI/CheckBox/CheckBox';
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    MState: state.mounts.MountState[ownProps.provider],
+    Platform: state.common.Platform,
+    PState: state.mounts.ProviderState[ownProps.provider]
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
+    removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
+    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(props => {
+  const handleAutoMountChanged = e => {
+    const state = {
+      ...props.PState,
+      AutoMount: e.target.checked,
+    };
+    props.setProviderState(props.provider, state);
+  };
+
+  const handleAutoRestartChanged = e => {
+    const state = {
+      ...props.PState,
+      AutoRestart: e.target.checked,
+    };
+    props.setProviderState(props.provider, state);
+  };
+
+  let configButton = null;
+  let secondRow = 6;
+  if (props.allowConfig) {
+    const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
+    configButton = (
+      <RootElem colSpan={4}
+                rowSpan={6}>
+        <img alt=''
+             height={'16px'}
+             onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider, props.remote) : e=>{e.preventDefault();}}
+             src={configureImage}
+             style={{padding: 0, border: 0, margin: 0, ...pointer}}
+             width={'16px'}/>
+      </RootElem>
+    );
+  }
+
+  let inputColumnSpan;
+  let inputControls = null;
+  if (props.Platform === 'win32') {
+    inputColumnSpan = 20;
+    const index = props.MState.DriveLetters.indexOf(props.PState.MountLocation);
+    inputControls = <DropDown changed={props.changed}
+                              colSpan={inputColumnSpan}
+                              disabled={!props.MState.AllowMount || props.MState.Mounted}
+                              items={props.MState.DriveLetters}
+                              row={secondRow}
+                              rowSpan={7}
+                              selected={index >= 0 ? props.PState.MountLocation : ''}/>;
+
+  } else {
+    inputColumnSpan = 64;
+    inputControls = [];
+    let key = 0;
+    inputControls.push((
+      <RootElem colSpan={inputColumnSpan - 8}
+                key={'i' + key++}
+                row={secondRow}
+                rowSpan={7}>
+        <input disabled={!props.MState.AllowMount || props.MState.Mounted}
+               maxLength={4096}
+               onChange={props.changed}
+               size={4096}
+               className={'MountItemInput'}
+               type={'text'}
+               value={props.PState.MountLocation}/>
+      </RootElem>
+    ));
+    inputControls.push((
+      <Button clicked={()=>props.browseClicked(props.provider, props.PState.MountLocation)}
+              col={inputColumnSpan - 7}
+              colSpan={7}
+              disabled={props.MState.Mounted || !props.MState.AllowMount}
+              key={'b' + key++}
+              row={secondRow}
+              rowSpan={7}>...</Button>
+    ));
+  }
+
+  const buttonDisplay = props.MState.AllowMount ?
+    (props.MState.Mounted ? 'Unmount' : 'Mount') :
+    <Loader color={'var(--heading_text_color)'}
+            height={19}
+            type='Circles'
+            width={19}/>;
+
+  const actionsDisplay = (
+    <Button clicked={()=>props.clicked(props.provider, props.remote, !props.MState.Mounted, props.PState.MountLocation)}
+            col={inputColumnSpan + 2}
+            colSpan={21}
+            disabled={!props.MState.AllowMount}
+            row={secondRow}
+            rowSpan={7}>
+      {buttonDisplay}
+    </Button>);
+
+  const autoMountControl = (
+    <RootElem col={inputColumnSpan + 24}
+              colSpan={28}
+              row={secondRow}
+              rowSpan={7}>
+      <CheckBox changed={handleAutoMountChanged}
+                checked={props.PState.AutoMount} label={'Auto-mount'}/>
+    </RootElem>
+  );
+
+  const autoRestartControl = (
+    <RootElem col={inputColumnSpan + 24 + 28}
+              colSpan={24}
+              row={secondRow}
+              rowSpan={7}>
+      <CheckBox changed={handleAutoRestartChanged}
+                checked={props.PState.AutoRestart}
+                label={'Restart'}/>
+    </RootElem>
+  );
+
+  let removeControl;
+  if (props.remote) {
+    const removeDisabled = !props.MState.AllowMount || props.MState.Mounted;
+    const removeStyle = {
+      cursor: removeDisabled ? 'no-drop' : 'pointer'
+    };
+    const handleRemoveMount = () => {
+      if (!removeDisabled) {
+        props.removeRemoteMount(props.provider);
+      }
+    };
+    removeControl = (
+      <a col={dimensions=>dimensions.columns - 6}
+         href={void(0)}
+         onClick={handleRemoveMount}
+         row={secondRow + 3}
+         style={removeStyle}>
+      <FontAwesomeIcon icon={faTrashAlt}/>
+    </a>);
+  }
+
+  return (
+    <div className={'MountItem'}>
+      <Grid noScroll>
+        {configButton}
+        <Text
+          col={configButton ? 6 : 0}
+          rowSpan={5}
+          text={props.remote ? props.provider.substr(6) : props.provider}
+          type={'Heading1'}/>
+        {inputControls}
+        {actionsDisplay}
+        {autoMountControl}
+        {autoRestartControl}
+        {removeControl}
+      </Grid>
+    </div>
+  );
+});
--- a/src/containers/MountItems/MountItems.js
+++ b/src/containers/MountItems/MountItems.js
@@ -5,7 +5,7 @@ import Button from '../../components/UI/Button/Button';
 import {connect} from 'react-redux';
 import './MountItems.css';
 import Modal from '../../components/UI/Modal/Modal';
-import MountItem from '../../components/MountItem/MountItem';
+import MountItem from './MountItem/MountItem';
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {
  resetMountsState,