Commit 50cbcd36 authored by Sonja Happ's avatar Sonja Happ

progress with simulation model

parent 42ffff2d
...@@ -87,8 +87,8 @@ class EditableHeader extends React.Component { ...@@ -87,8 +87,8 @@ class EditableHeader extends React.Component {
<FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus /> <FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
</form> </form>
<Button bsStyle="link" onClick={this.save}><Icon icon='check' style={iconStyle} /></Button> <Button onClick={this.save}><Icon icon='check' style={iconStyle} /></Button>
<Button bsStyle="link" onClick={this.cancel}><Icon icon='times' style={iconStyle} /></Button> <Button onClick={this.cancel}><Icon icon='times' style={iconStyle} /></Button>
</div>; </div>;
} }
...@@ -97,7 +97,7 @@ class EditableHeader extends React.Component { ...@@ -97,7 +97,7 @@ class EditableHeader extends React.Component {
{this.state.title} {this.state.title}
</h1> </h1>
<Button bsStyle="link" onClick={this.edit}><Icon icon='edit' style={iconStyle} /></Button> <Button onClick={this.edit}><Icon icon='edit' style={iconStyle} /></Button>
</div>; </div>;
} }
} }
......
...@@ -118,30 +118,30 @@ class SelectFile extends React.Component { ...@@ -118,30 +118,30 @@ class SelectFile extends React.Component {
return <div> return <div>
<FormGroup> <FormGroup>
<Col componentClass={FormLabel} sm={3} md={2}> <FormLabel sm={3} md={2}>
{this.props.name} {this.props.name}
</Col> </FormLabel>
<Col sm={9} md={10}> <Col sm={9} md={10}>
<FormControl disabled={this.props.disabled} componentClass='select' placeholder='Select file' onChange={this.handleChange}> <FormControl disabled={this.props.disabled} placeholder='Select file' onChange={this.handleChange}>
{fileOptions} {fileOptions}
</FormControl> </FormControl>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}> <Col sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}} >
<FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} /> <FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}> <Col sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
<Button disabled={this.props.disabled} bsSize='small' onClick={this.startFileUpload}> <Button disabled={this.props.disabled} onClick={this.startFileUpload}>
Upload file Upload file
</Button> </Button>
<ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} /> <ProgressBar striped animated now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
</Col> </Col>
</FormGroup> </FormGroup>
</div>; </div>;
......
...@@ -100,7 +100,7 @@ class SignalMapping extends React.Component { ...@@ -100,7 +100,7 @@ class SignalMapping extends React.Component {
render() { render() {
return <div> return <div>
<FormGroup validationState={this.validateLength()}> <FormGroup validated={this.validateLength()}>
<FormLabel>{this.props.name} Length</FormLabel> <FormLabel>{this.props.name} Length</FormLabel>
<FormControl name='length' type='number' placeholder='Enter length' defaultValue={this.state.length} min='1' onBlur={this.handleLengthChange} /> <FormControl name='length' type='number' placeholder='Enter length' defaultValue={this.state.length} min='1' onBlur={this.handleLengthChange} />
<FormControl.Feedback /> <FormControl.Feedback />
......
...@@ -32,6 +32,10 @@ import SelectFile from '../file/select-file'; ...@@ -32,6 +32,10 @@ import SelectFile from '../file/select-file';
import SignalMapping from './signal-mapping'; import SignalMapping from './signal-mapping';
import EditableHeader from '../common/editable-header'; import EditableHeader from '../common/editable-header';
import ParametersEditor from '../common/parameters-editor'; import ParametersEditor from '../common/parameters-editor';
import SimulatorStore from "../simulator/simulator-store";
import SignalStore from "./signal-store";
import FileStore from "../file/file-store"
class SimulationModel extends React.Component { class SimulationModel extends React.Component {
static getStores() { static getStores() {
...@@ -39,20 +43,60 @@ class SimulationModel extends React.Component { ...@@ -39,20 +43,60 @@ class SimulationModel extends React.Component {
} }
static calculateState(prevState, props) { static calculateState(prevState, props) {
const simulationModel = SimulationModelStore.getState().find(m => m.id === props.match.params.simulationModel);
// get selected simulation model
const sessionToken = LoginStore.getState().token;
let simulationModel = SimulationModelStore.getState().find(m => m.id === parseInt(props.match.params.simulationModel, 10));
if (simulationModel == null) {
AppDispatcher.dispatch({
type: 'simulationModels/start-load',
data: props.match.params.simulationModel,
token: sessionToken
});
}
// signals and files of simulation model
let signals = 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 { return {
simulationModel: simulationModel || {}, simulationModel,
sessionToken: LoginStore.getState().token signals,
files,
sessionToken,
simulators: SimulatorStore.getState()
}; };
} }
componentDidMount() { componentDidMount() {
AppDispatcher.dispatch({ //load selected simulationModel
type: 'simulationModels/start-load', AppDispatcher.dispatch({
data: this.props.match.params.simulationModel, type: 'simulationModels/start-load',
token: this.state.sessionToken data: this.state.simulationModel.id,
}); token: this.state.sessionToken
});
// load signals for selected simulation model
AppDispatcher.dispatch({
type: 'signals/start-load',
token: this.state.sessionToken,
param: 'TODO',
});
// load files for selected simulation model
AppDispatcher.dispatch({
type: 'files/start-load',
token: this.state.sessionToken,
param: 'TODO',
});
// load simulators
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.sessionToken,
});
} }
submitForm = event => { submitForm = event => {
...@@ -140,9 +184,9 @@ class SimulationModel extends React.Component { ...@@ -140,9 +184,9 @@ class SimulationModel extends React.Component {
<SelectFile disabled type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} /> <SelectFile disabled type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} />
<div> <div>
<Col componentClass={FormLabel} sm={3} md={2}> <FormLabel sm={3} md={2}>
Start Parameters Start Parameters
</Col> </FormLabel>
<Col sm={9} md={10}> <Col sm={9} md={10}>
<ParametersEditor content={this.state.simulationModel.startParameters} onChange={this.handleStartParametersChange} /> <ParametersEditor content={this.state.simulationModel.startParameters} onChange={this.handleStartParametersChange} />
...@@ -162,7 +206,7 @@ class SimulationModel extends React.Component { ...@@ -162,7 +206,7 @@ class SimulationModel extends React.Component {
<div style={{ clear: 'both' }}></div> <div style={{ clear: 'both' }}></div>
<Button onClick={this.discardChanges} style={buttonStyle}>Cancel</Button> <Button onClick={this.discardChanges} style={buttonStyle}>Cancel</Button>
<Button bsStyle='primary' onClick={this.saveChanges} style={buttonStyle}>Save</Button> <Button onClick={this.saveChanges} style={buttonStyle}>Save</Button>
</Form> </Form>
</div>; </div>;
} }
......
...@@ -69,18 +69,20 @@ class SelectSimulator extends React.Component { ...@@ -69,18 +69,20 @@ class SelectSimulator extends React.Component {
}; };
render() { render() {
const simulatorOptions = this.state.simulators.map(s => const simulatorOptions = this.state.simulators.map(s =>
<option key={s._id} value={s._id}>{_.get(s, 'properties.name') || _.get(s, 'rawProperties.name') || s.uuid}</option> <option key={s.id} value={s.id}>{_.get(s, 'properties.name') || _.get(s, 'rawProperties.name') || s.uuid}</option>
); );
console.log("simulator options: ", simulatorOptions);
return <FormGroup> return <FormGroup>
<Col componentClass={FormLabel} sm={3} md={2}> <FormLabel sm={3} md={2}>
Simulator Simulator
</Col> </FormLabel>
<Col sm={9} md={10}> <Col sm={9} md={10}>
<FormControl componentClass='select' placeholder='Select simulator' value={this.state.selectedSimulator} onChange={this.handleChange}> <FormControl as="select" placeholder='Select simulator' value={this.state.selectedSimulator} onChange={(e) => this.handleChange(e)}>
{simulatorOptions} {simulatorOptions}
</FormControl> </FormControl>
</Col> </Col>
</FormGroup>; </FormGroup>;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment