Implement System file browser and prepare for setting file paths

modules/webgui/web/src/api/Actions/actionTypes.js

@@ -31,4 +31,5 @@ export const actionTypes = {
 
   // action types for data loader
   setDataLoaderActivated: 'DATA_LOADER_TOGGLE_ACTIVATED',
+  setSelectedFilesPathName: 'DATA_LOADER_SET_FILEPATH',
 };

modules/webgui/web/src/api/Actions/dataLoaderActions.js

@@ -6,3 +6,10 @@ export const setActivated = (isActivated) => ({
     activated: isActivated
   }
 });
+
+export const setFilePaths = (filePaths) => ({
+  type: actionTypes.setSelectedFilesPathName,
+  payload: {
+    filePaths: filePaths
+  }
+});

modules/webgui/web/src/api/Reducers/dataLoader.js

@@ -10,6 +10,14 @@ export const dataLoader = (state = {}, action) => {
         activated
       }
 
+    case actionTypes.setSelectedFilesPathName:
+      const { filePaths } = action.payload;
+      
+      return {
+        ...state,
+        filePaths
+      }
+
     default:
       return state;
   }

modules/webgui/web/src/components/DataLoader/DataLoader.jsx

@@ -4,28 +4,75 @@ import { connect } from 'react-redux';
 import Proptypes from 'prop-types'; 
 import styles from './DataLoader.scss';
 import Window from '../common/Window/Window';
-import { toggleActivated } from '../../api/Actions/dataLoaderActions';
-
+import { setActivated, setFilePaths } from '../../api/Actions/dataLoaderActions';
+import Button from '../common/Input/Button/Button';
+import SmallLabel from '../common/SmallLabel/SmallLabel';
 
 class DataLoader extends Component {
   constructor(props) {
     super(props);
 
+    this.state={activeDataType: ''};
   }
 
+  // handleChange(event) {
+  //   let filePathString = event.target.value;
+  // };
+
   render() {
-    const {toggleActivated, activated } = this.props
+    const {setActivated, activated } = this.props
+    let buttonArray = ["Volume", "Fieldlines"];
+
+    let dataTypeButtons = () => {
+      return(
+        <section className={styles.dataButtons}>
+          <SmallLabel>
+            Select data type you wish to load
+          </SmallLabel>
+          <div>
+            {buttonArray.map((element) => 
+              <Button 
+                key={element} 
+                onClick={() => this.setState({activeDataType: element})}>
+                <SmallLabel>{element}</SmallLabel>
+              </Button>
+            )}
+          </div>
+        </section>
+      );
+    };
+
+    let uploadDataButton = () => {
+      return(
+        <div>
+          <label>
+            <input 
+              type="file"
+              style={{opacity: 0}} 
+              // onChange={(event) => this.handleChange(event)}
+              // accept=".cdf, .osfls"/>
+              multiple
+              />    
+            Upload Data
+            {/* Style above - Or replace with <Button/> */}
+          </label>
+        </div>
+      );
+    };
+
     return(
       <div id="page-content-wrapper">
         { this.props.activated && (
           <div className={styles.center-content}>
             <Window
               title="Data Loader"
+              // Temporary position and size fix
               size={{ width:600, height:400 }}
               position={{ x:470, y:-370 }}
-              closeCallback={() => toggleActivated(!activated)}
+              closeCallback={() => setActivated(false)}
             >
-              {/* Array-list to be read from. Buttons selecting what data type to load */}
+              { dataTypeButtons() }
+              { uploadDataButton() }
             </Window>
           </div>
         )}
@@ -39,9 +86,13 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  toggleActivated: (activated) => {
-    dispatch(toggleActivated(activated));
-  }
+  setFilePaths: (filePaths) => {
+    dispatch(setFilePaths(filePaths))
+  },
+
+  setActivated: (isActivated) => {
+    dispatch(setActivated(isActivated));
+  },
 });
 
 DataLoader = connect(

modules/webgui/web/src/components/DataLoader/DataLoader.scss

@@ -5,4 +5,27 @@
   width: 50%;
   height: 50%;
   padding: 10px;
+}
+
+.dataButtons {
+  display: table;
+  height: 50%;
+  padding: 10px;
+}
+
+.block {
+  width: 100%;
+  height: 30px;
+  margin: auto;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.custom-file-upload {
+  border: 1px solid #ccc;
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
 }