1
0
Fork 0
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:
Sonja Happ 2020-02-03 17:24:03 +01:00
parent 739aa3c073
commit 26781f7c11
5 changed files with 69 additions and 36 deletions

View file

@ -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>

View file

@ -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>;
}

View file

@ -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>;

View file

@ -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>

View file

@ -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>;
}
}