mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
simulation model frame finally showing, there are still a lot of errors to fix
This commit is contained in:
parent
739aa3c073
commit
26781f7c11
5 changed files with 69 additions and 36 deletions
|
@ -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>
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue