Add select file component

src/containers/selectFile.js

@@ -0,0 +1,133 @@
+/**
+ * File: selectFile.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 10.08.2018
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { Container } from 'flux/utils';
+import { FormGroup, FormControl, ControlLabel, Button, ProgressBar } from 'react-bootstrap';
+
+import FileStore from '../stores/file-store';
+import UserStore from '../stores/user-store';
+
+import AppDispatcher from '../app-dispatcher';
+
+class SelectFile extends React.Component {
+    static getStores() {
+        return [ FileStore, UserStore ];
+    }
+
+    static calculateState() {
+        return {
+            files: FileStore.getState(),
+            sessionToken: UserStore.getState().token,
+            selectedFile: '',
+            uploadFile: null,
+            uploadProgress: 0
+        };
+    }
+
+    componentDidMount() {
+        AppDispatcher.dispatch({
+            type: 'files/start-load',
+            token: this.state.sessionToken
+        });
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.value === this.state.selectedSimulator) {
+            return;
+        }
+
+        let selectedSimulator = nextProps.value;
+        if (selectedSimulator == null) {
+            if (this.state.simulators.length > 0) {
+                selectedSimulator = this.state.simulators[0]._id;
+            } else {
+                selectedSimulator = '';
+            }
+        }
+
+        this.setState({ selectedSimulator });
+    }
+
+    handleChange = event => {
+        this.setState({ selectedFile: event.target.value });
+
+        // send file to callback
+        if (this.props.onChange != null) {
+            const file = this.state.files.find(f => f._id === event.target.value);
+
+            this.props.onChange(file);
+        }
+    }
+
+    selectUploadFile = event => {
+        this.setState({ uploadFile: event.target.files[0] });
+    }
+
+    startFileUpload = () => {
+        // upload file
+        const formData = new FormData();
+        formData.append(0, this.state.uploadFile);
+
+        AppDispatcher.dispatch({
+            type: 'files/start-upload',
+            data: formData,
+            token: this.state.sessionToken,
+            progressCallback: this.updateUploadProgress,
+            finishedCallback: this.clearProgress
+        });
+    }
+
+    updateUploadProgress = event => {
+        this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
+    }
+
+    clearProgress = () => {
+        // select uploaded file
+        const selectedFile = this.state.files[this.state.files.length - 1]._id;
+        this.setState({ selectedFile, uploadProgress: 0 });
+    }
+
+    render() {
+        const fileOptions = this.state.files.map(f => 
+            <option key={f._id} value={f._id}>{f.name}</option>
+        );
+
+        return <div>
+            <FormGroup>
+                <ControlLabel>{this.props.name}</ControlLabel>
+                <FormControl componentClass='select' placeholder='Select file' onChange={this.handleChange}>
+                    {fileOptions}
+                </FormControl>
+            </FormGroup>
+
+            <FormGroup>
+                <ControlLabel>Upload {this.props.name}</ControlLabel>
+                <FormControl type='file' onChange={this.selectUploadFile} />
+            </FormGroup>
+
+            <ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} />
+            <Button bsSize='small' onClick={this.startFileUpload}>Upload file</Button>
+        </div>;
+    }
+}
+
+export default Container.create(SelectFile);

src/containers/selectSimulator.js

@@ -25,17 +25,15 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 import _ from 'lodash';
 
 import SimulatorStore from '../stores/simulator-store';
-import UserStore from '../stores/user-store';
 
 class SelectSimulator extends React.Component {
     static getStores() {
-        return [ SimulatorStore, UserStore ];
+        return [ SimulatorStore ];
     }
 
     static calculateState() {
         return {
             simulators: SimulatorStore.getState(),
-            sessionToken: UserStore.getState().token,
             selectedSimulator: ''
         };
     }
@@ -58,13 +56,12 @@ class SelectSimulator extends React.Component {
     }
 
     handleChange = event => {
-        // update selection
         this.setState({ selectedSimulator: event.target.value });
 
         // send complete simulator to callback
-        const simulator = this.state.simulators.find(s => s._id === event.target.value);
-
         if (this.props.onChange != null) {
+            const simulator = this.state.simulators.find(s => s._id === event.target.value);
+
             this.props.onChange(simulator);
         }
     }

src/containers/simulationModel.js

@@ -28,6 +28,7 @@ import UserStore from '../stores/user-store';
 import AppDispatcher from '../app-dispatcher';
 
 import SelectSimulator from './selectSimulator';
+import SelectFile from './selectFile';
 
 class SimulationModel extends React.Component {
     static getStores() {
@@ -63,6 +64,14 @@ class SimulationModel extends React.Component {
         console.log(simulator);
     }
 
+    handleModelChange = file => {
+        console.log(file);
+    }
+
+    handleConfigurationChange = file => {
+        console.log(file);
+    }
+
     render() {
         return <div className='section'>
             <h1>{this.state.simulationModel.name}</h1>
@@ -70,6 +79,10 @@ class SimulationModel extends React.Component {
             <form onSubmit={this.submitForm}>
                 <SelectSimulator onChange={this.handleSimulatorChange} value={this.state.simulationModel.simulator} />
 
+                <SelectFile type='model' name='Model' onChange={this.handleModelChange} value={this.state.simulationModel.model} />
+
+                <SelectFile type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} />
+
                 <Button bsStyle='primary' onClick={this.saveChanges}>Save</Button>
             </form>
         </div>;

src/data-managers/files-data-manager.js

@@ -30,8 +30,10 @@ class FilesDataManager extends RestDataManager {
 
   upload(file, token = null, progressCallback = null, finishedCallback = null) {
     RestAPI.upload(this.makeURL('/upload'), file, token, progressCallback).then(response => {
+      console.log(response);
+
       AppDispatcher.dispatch({
-        type: 'files/uploaded'
+        type: 'files/uploaded',
       });
 
       // Trigger a files reload