Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Update simulation model view

Browse source
This commit is contained in:
Markus Grigull 2018-05-25 10:03:15 +02:00
parent b52655a1c7
commit b5d6749ebd
4 changed files with 68 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/containers/select-file.js
View file

@ -21,7 +21,7 @@
import React from 'react';
import { Container } from 'flux/utils';
import { FormGroup, FormControl, ControlLabel, Button, ProgressBar } from 'react-bootstrap';
import { FormGroup, FormControl, ControlLabel, Button, ProgressBar, Col } from 'react-bootstrap';
import FileStore from '../stores/file-store';
import UserStore from '../stores/user-store';
@ -39,7 +39,7 @@ class SelectFile extends React.Component {
sessionToken: UserStore.getState().token,
selectedFile: '',
uploadFile: null,
uploadProgress: 0
uploadProgress: 100
};
}
@ -111,21 +111,41 @@ class SelectFile extends React.Component {
<option key={f._id} value={f._id}>{f.name}</option>
);
return <div>
const divStyle = {
};
return <div style={divStyle}>
<FormGroup>
<ControlLabel>{this.props.name}</ControlLabel>
<FormControl componentClass='select' placeholder='Select file' onChange={this.handleChange}>
{fileOptions}
</FormControl>
<Col componentClass={ControlLabel} sm={3} md={2}>
{this.props.name}
</Col>
<Col sm={9} md={10}>
<FormControl componentClass='select' placeholder='Select file' onChange={this.handleChange}>
{fileOptions}
</FormControl>
</Col>
</FormGroup>
<FormGroup>
<ControlLabel>Upload {this.props.name}</ControlLabel>
<FormControl type='file' onChange={this.selectUploadFile} />
<Col sm={9} md={10} smOffset={3} mdOffset={2}>
<FormControl type='file' onChange={this.selectUploadFile} />
</Col>
</FormGroup>
<ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} />
<Button bsSize='small' onClick={this.startFileUpload}>Upload file</Button>
<FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}>
<Button bsSize='small' onClick={this.startFileUpload}>
Upload file
</Button>
<ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} />
</Col>
</FormGroup>
</div>;
}
}

15
src/containers/select-simulator.js
View file

@ -21,7 +21,7 @@
import React from 'react';
import { Container } from 'flux/utils';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, ControlLabel, Col } from 'react-bootstrap';
import _ from 'lodash';
import SimulatorStore from '../stores/simulator-store';
@ -72,10 +72,15 @@ class SelectSimulator extends React.Component {
);
return <FormGroup>
<ControlLabel>Simulator</ControlLabel>
<FormControl componentClass='select' placeholder='Select simulator' value={this.state.selectedSimulator} onChange={this.handleChange}>
{simulatorOptions}
</FormControl>
<Col componentClass={ControlLabel} sm={3} md={2}>
Simulator
</Col>
<Col sm={9} md={10}>
<FormControl componentClass='select' placeholder='Select simulator' value={this.state.selectedSimulator} onChange={this.handleChange}>
{simulatorOptions}
</FormControl>
</Col>
</FormGroup>;
}
}

29
src/containers/simulation-model.js
View file

@ -21,7 +21,7 @@
import React from 'react';
import { Container } from 'flux/utils';
import { Button } from 'react-bootstrap';
import { Button, Col, Form } from 'react-bootstrap';
import SimulationModelStore from '../stores/simulation-model-store';
import UserStore from '../stores/user-store';
@ -78,25 +78,40 @@ class SimulationModel extends React.Component {
console.log(signals);
}
handleInputMappingChange = (length, signals) => {
console.log(length);
console.log(signals);
}
render() {
const sectionStyle = {
};
return <div className='section'>
<h1>{this.state.simulationModel.name}</h1>
<form onSubmit={this.submitForm}>
<div>
<Form horizontal onSubmit={this.submitForm}>
<Col xs={12} sm={12} style={sectionStyle}>
<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} />
</div>
</Col>
<div>
<Col xs={12} sm={6} style={sectionStyle}>
<SignalMapping name='Output' length={this.state.simulationModel.outputLength} signals={this.state.simulationModel.outputMapping} onChange={this.handleOutputMappingChange} />
</div>
</Col>
<Col xs={12} sm={6} style={sectionStyle}>
<SignalMapping name='Input' length={this.state.simulationModel.inputLength} signals={this.state.simulationModel.inputMapping} onChange={this.handleInputMappingChange} />
</Col>
<div style={{ clear: 'both' }}></div>
<Button bsStyle='primary' onClick={this.saveChanges}>Save</Button>
</form>
</Form>
</div>;
}
}

5
src/styles/app.css
View file

@ -386,3 +386,8 @@ body {
.section-buttons-group-right .rc-slider {
margin-left: 12px;
}
.form-horizontal .form-group {
margin-left: 0 !important;
margin-right: 0 !important;
}