simulation model frame finally showing, there are still a lot of errors to fix

src/common/editable-header.js

@@ -68,7 +68,7 @@ class EditableHeader extends React.Component {
         };
 
         const iconStyle = {
-            float: 'left',
+            float: 'right',
 
             marginLeft: '10px',
             marginTop: '25px',
@@ -84,7 +84,7 @@ class EditableHeader extends React.Component {
 
             return <div>
                 <form style={wrapperStyle}>
-                    <FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
+                    <FormControl type='text' size='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
                 </form>
 
                 <Button onClick={this.save}><Icon icon='check' style={iconStyle} /></Button>

src/file/select-file.js

@@ -43,12 +43,12 @@ class SelectFile extends React.Component {
       };
   }
 
-  componentDidMount() {
+  /*componentDidMount() {
       AppDispatcher.dispatch({
           type: 'files/start-load',
           token: this.state.sessionToken
       });
-  }
+  }*/
 
   static getDerivedStateFromProps(props, state){
     if (props.value === state.selectedSimulator) {
@@ -107,10 +107,19 @@ class SelectFile extends React.Component {
   };
 
   render() {
-      const fileOptions = this.state.files.map(f =>
-          <option key={f._id} value={f._id}>{f.name}</option>
-      );
 
+    console.log("Files: ", this.state.files);
+
+    let fileOptions;
+    if (this.state.files.length > 0){
+      fileOptions = this.state.files.map(f =>
+        <option key={f.id} value={f.id}>{f.name}</option>
+      );
+    } else {
+      fileOptions = <option >No files for this simulation model</option>
+    }
+
+    console.log("FileOptions: ", fileOptions);
       const progressBarStyle = {
           marginLeft: '100px',
           marginTop: '-25px'
@@ -122,27 +131,24 @@ class SelectFile extends React.Component {
                   {this.props.name}
               </FormLabel>
 
-              <Col sm={9} md={10}>
-                  <FormControl disabled={this.props.disabled} placeholder='Select file' onChange={this.handleChange}>
+              <FormGroup as={Col} sm={9} md={10}>
+                  <FormControl as="select" disabled={this.props.disabled} placeholder='Select file' onChange={(e) => this.handleChange(e)}>
                       {fileOptions}
                   </FormControl>
-              </Col>
+              </FormGroup>
           </FormGroup>
 
-          <FormGroup>
-              <Col sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}} >
+          <FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}} >
                   <FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
-              </Col>
           </FormGroup>
 
-          <FormGroup>
-              <Col sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
+          <FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
                   <Button disabled={this.props.disabled} onClick={this.startFileUpload}>
                       Upload file
                   </Button>
-
+          </FormGroup>
+          <FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
                   <ProgressBar striped animated now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
-              </Col>
           </FormGroup>
       </div>;
   }

src/simulationmodel/signal-mapping.js

@@ -112,7 +112,7 @@ class SignalMapping extends React.Component {
                 <Table data={this.props.signals}>
                     <TableColumn title='ID' width='60' dataIndex />
                     <TableColumn title='Name' dataKey='name' inlineEditable onInlineChange={this.handleMappingChange} />
-                    <TableColumn title='Type' dataKey='type' inlineEditable onInlineChange={this.handleMappingChange} />
+                    <TableColumn title='Unit' dataKey='unit' inlineEditable onInlineChange={this.handleMappingChange} />
                 </Table>
             </FormGroup>
         </div>;

src/simulationmodel/simulation-model.js

@@ -21,7 +21,7 @@
 
 import React from 'react';
 import { Container } from 'flux/utils';
-import { Button, Col, Form, FormLabel } from 'react-bootstrap';
+import { Button, Col, Form, FormLabel, FormGroup } from 'react-bootstrap';
 
 import SimulationModelStore from './simulation-model-store';
 import LoginStore from '../user/login-store';
@@ -57,15 +57,22 @@ class SimulationModel extends React.Component {
       }
 
       // signals and files of simulation model
-      let signals = SignalStore.getState().find(sig => sig.simulationModelID === parseInt(props.match.params.simulationModel, 10));
+      // TODO add direction of signals to find operation
+      let inputSignals = SignalStore.getState().find(sig => sig.simulationModelID === parseInt(props.match.params.simulationModel, 10));
+      let outputSignals = SignalStore.getState().find(sig => sig.simulationModelID === parseInt(props.match.params.simulationModel, 10));
+
+
       let files = FileStore.getState().find(f => f.simulationModelID === parseInt(props.match.params.simulationModel, 10));
 
+
         return {
           simulationModel,
-          signals,
+          inputSignals,
+          outputSignals,
           files,
           sessionToken,
-          simulators: SimulatorStore.getState()
+          simulators: SimulatorStore.getState(),
+          selectedFile: null,
 
         };
     }
@@ -78,18 +85,25 @@ class SimulationModel extends React.Component {
         token: this.state.sessionToken
       });
 
-      // load signals for selected simulation model
+      // load input signals for selected simulation model
       AppDispatcher.dispatch({
         type: 'signals/start-load',
         token: this.state.sessionToken,
-        param: 'TODO',
+        param: '?direction=in&modelID=' + this.state.simulationModel.id,
+      });
+
+      // load output signals for selected simulation model
+      AppDispatcher.dispatch({
+        type: 'signals/start-load',
+        token: this.state.sessionToken,
+        param: '?direction=out&modelID=' + this.state.simulationModel.id,
       });
 
       // load files for selected simulation model
       AppDispatcher.dispatch({
         type: 'files/start-load',
         token: this.state.sessionToken,
-        param: 'TODO',
+        param: '?objectType=model&objectID=' + this.state.simulationModel.id,
       });
 
       // load simulators
@@ -171,17 +185,30 @@ class SimulationModel extends React.Component {
         const buttonStyle = {
             marginRight: '10px'
         };
+        console.log("OutputSignals: ", this.state.outputSignals);
+        let outputSignals = null;
+        if  (this.state.outputSignals != null){
+          outputSignals = Object.keys(this.state.outputSignals).map(key => {return this.state.outputSignals[key]});
+          console.log("OutputSignals Array", outputSignals);
+        }
+        let inputSignals = null;
+        console.log("InputSignals: ", this.state.inputSignals);
+        if  (this.state.inputSignals != null){
+          inputSignals = Object.keys(this.state.inputSignals).map(key => {return this.state.inputSignals[key]});
+          console.log("InputSignals Array", inputSignals);
+        }
+
 
         return <div className='section'>
             <EditableHeader title={this.state.simulationModel.name} onChange={this.handleTitleChange} />
 
-            <Form horizontal onSubmit={this.submitForm}>
-                <Col xs={12} sm={12}>
+            <Form onSubmit={this.submitForm}>
+                <FormGroup as={Col} xs={12} sm={12}>
                     <SelectSimulator onChange={this.handleSimulatorChange} value={this.state.simulationModel.simulator} />
 
-                    <SelectFile disabled type='model' name='Model' onChange={this.handleModelChange} value={this.state.simulationModel.model} />
+                    <SelectFile type='model' name='Model' onChange={this.handleModelChange} value={this.state.selectedFile} />
 
-                    <SelectFile disabled type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} />
+                    <SelectFile type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} />
 
                     <div>
                         <FormLabel sm={3} md={2}>
@@ -193,14 +220,14 @@ class SimulationModel extends React.Component {
                         </Col>
                     </div>
 
+                </FormGroup>
+
+                <Col xs={12} sm={6}>
+                    <SignalMapping name='Output' length={this.state.simulationModel.outputLength} signals={outputSignals} onChange={this.handleOutputMappingChange} />
                 </Col>
 
                 <Col xs={12} sm={6}>
-                    <SignalMapping name='Output' length={this.state.simulationModel.outputLength} signals={this.state.simulationModel.outputMapping} onChange={this.handleOutputMappingChange} />
-                </Col>
-
-                <Col xs={12} sm={6}>
-                    <SignalMapping name='Input' length={this.state.simulationModel.inputLength} signals={this.state.simulationModel.inputMapping} onChange={this.handleInputMappingChange} />
+                    <SignalMapping name='Input' length={this.state.simulationModel.inputLength} signals={inputSignals} onChange={this.handleInputMappingChange} />
                 </Col>
 
                 <div style={{ clear: 'both' }}></div>

src/simulator/select-simulator.js

@@ -80,11 +80,11 @@ class SelectSimulator extends React.Component {
                 Simulator
             </FormLabel>
 
-            <Col sm={9} md={10}>
+            <FormGroup as={Col} sm={9} md={10}>
                 <FormControl as="select" placeholder='Select simulator' value={this.state.selectedSimulator} onChange={(e) => this.handleChange(e)}>
                   {simulatorOptions}
                 </FormControl>
-            </Col>
+            </FormGroup>
         </FormGroup>;
     }
 }