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