mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Fix for edit config, select-file; enable upload progress callback; fix startParams update
This commit is contained in:
parent
5f36915afb
commit
e90e12fc5c
5 changed files with 85 additions and 83 deletions
|
@ -125,7 +125,7 @@ class RestAPI {
|
|||
|
||||
upload(url, data, token, progressCallback, scenarioID) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
const req = request.post(url + "?scenarioID=" + scenarioID).send(data); //.on('progress', progressCallback);
|
||||
const req = request.post(url + "?scenarioID=" + scenarioID).send(data).on('progress', progressCallback);
|
||||
|
||||
if (token != null) {
|
||||
req.set('Authorization', "Bearer " + token);
|
||||
|
|
|
@ -32,8 +32,8 @@ class EditConfigDialog extends React.Component {
|
|||
name: '',
|
||||
icID: '',
|
||||
configuration: null,
|
||||
startParameters: {},
|
||||
selectedFileID:0
|
||||
startParameters: this.props.config.startParameters,
|
||||
selectedFileID: this.props.config.selectedFileID
|
||||
|
||||
};
|
||||
}
|
||||
|
@ -49,7 +49,7 @@ class EditConfigDialog extends React.Component {
|
|||
if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
|
||||
data.icID = parseInt(this.state.icID, 10);
|
||||
}
|
||||
if(this.state.startParameters !== {} && this.props.config.startParameters !== this.state.startParameters){
|
||||
if(this.state.startParameters !== {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
|
||||
data.startParameters = this.state.startParameters;
|
||||
}
|
||||
if (parseInt(this.state.selectedFileID, 10) !== 0 &&
|
||||
|
@ -79,9 +79,9 @@ class EditConfigDialog extends React.Component {
|
|||
this.valid = this.isValid()
|
||||
}
|
||||
|
||||
handleSelectedFileChange(newFileID){
|
||||
console.log("Config file change to: ", newFileID);
|
||||
this.setState({selectedFileID: newFileID})
|
||||
handleSelectedFileChange(event){
|
||||
//console.log("Config file change to: ", event.target.value);
|
||||
this.setState({selectedFileID: event.target.value})
|
||||
|
||||
this.valid = this.isValid()
|
||||
}
|
||||
|
@ -121,11 +121,19 @@ class EditConfigDialog extends React.Component {
|
|||
</FormControl>
|
||||
</FormGroup>
|
||||
|
||||
<SelectFile type='config' name='Configuration File' onChange={(e) => this.handleSelectedFileChange(e)} value={this.state.selectedFileID} scenarioID={this.props.config.scenarioID}/>
|
||||
<SelectFile
|
||||
type='config'
|
||||
name='Configuration File'
|
||||
onChange={(e) => this.handleSelectedFileChange(e)}
|
||||
files={this.props.files}
|
||||
value={this.state.selectedFileID}
|
||||
scenarioID={this.props.config.scenarioID}
|
||||
sessionToken={this.props.sessionToken}
|
||||
/>
|
||||
|
||||
<FormGroup controlId='startParameters'>
|
||||
<FormLabel> Start Parameters </FormLabel>
|
||||
<ParametersEditor content={this.props.config.startParameters} onChange={(data) => this.handleParameterChange(data)} />
|
||||
<ParametersEditor content={this.state.startParameters} onChange={(data) => this.handleParameterChange(data)} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
|
|
@ -38,9 +38,9 @@ class FilesDataManager extends RestDataManager {
|
|||
token: token
|
||||
});
|
||||
|
||||
/*if (finishedCallback) {
|
||||
finishedCallback();
|
||||
}*/
|
||||
if (finishedCallback) {
|
||||
finishedCallback(response.file.id);
|
||||
}
|
||||
}).catch(error => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'files/upload-error',
|
||||
|
|
|
@ -16,56 +16,20 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { FormGroup, FormControl, FormLabel, Button, Col } from 'react-bootstrap';
|
||||
|
||||
import FileStore from './file-store';
|
||||
import LoginStore from '../user/login-store';
|
||||
|
||||
import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap';
|
||||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import Icon from "../common/icon";
|
||||
|
||||
class SelectFile extends React.Component {
|
||||
static getStores() {
|
||||
return [ FileStore, LoginStore ];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
uploadFile: null,
|
||||
uploadProgress: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
||||
let files = FileStore.getState().filter((file) => {
|
||||
return (file.scenarioID === props.scenarioID)
|
||||
});
|
||||
|
||||
return {
|
||||
files: files,
|
||||
sessionToken: LoginStore.getState().token,
|
||||
selectedFile: '',
|
||||
uploadFile: null,
|
||||
uploadProgress: 0
|
||||
};
|
||||
}
|
||||
|
||||
/*componentDidMount() {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'files/start-load',
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}*/
|
||||
|
||||
static getDerivedStateFromProps(props, state){
|
||||
|
||||
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
|
||||
// send file ID to callback
|
||||
if (this.props.onChange != null) {
|
||||
this.props.onChange(event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
selectUploadFile(event) {
|
||||
this.setState({ uploadFile: event.target.files[0] });
|
||||
};
|
||||
|
@ -78,39 +42,46 @@ class SelectFile extends React.Component {
|
|||
AppDispatcher.dispatch({
|
||||
type: 'files/start-upload',
|
||||
data: formData,
|
||||
token: this.state.sessionToken,
|
||||
//progressCallback: this.updateUploadProgress,
|
||||
//finishedCallback: this.clearProgress,
|
||||
token: this.props.sessionToken,
|
||||
progressCallback: this.updateUploadProgress,
|
||||
finishedCallback: this.clearProgress,
|
||||
scenarioID: this.props.scenarioID,
|
||||
});
|
||||
|
||||
// TODO make sure that edit config dialog remains open after clicking "Upload" button
|
||||
};
|
||||
|
||||
updateUploadProgress = (event) => {// TODO: this callback does not work properly (access to setState)
|
||||
updateUploadProgress = (event) => {
|
||||
this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
|
||||
};
|
||||
|
||||
clearProgress = () => { // TODO this callback does not work properly (access to setState)
|
||||
if (this.props.onChange != null) {
|
||||
this.props.onChange(this.state.files[this.state.files.length - 1].id);
|
||||
clearProgress = (newFileID) => {
|
||||
/*if (this.props.onChange != null) {
|
||||
let event = {}
|
||||
event["target"] = {}
|
||||
event.target["value"] = newFileID
|
||||
this.props.onChange(event);
|
||||
}
|
||||
this.setState({ uploadProgress: 0 });
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
let fileOptions;
|
||||
if (this.state.files.length > 0){
|
||||
fileOptions = this.state.files.map(f =>
|
||||
if (this.props.files.length > 0){
|
||||
fileOptions = this.props.files.map(f =>
|
||||
<option key={f.id} value={f.id}>{f.name}</option>
|
||||
);
|
||||
} else {
|
||||
fileOptions = <option >No files for this component config</option>
|
||||
fileOptions = <option >No files available</option>
|
||||
}
|
||||
|
||||
/*const progressBarStyle = {
|
||||
const progressBarStyle = {
|
||||
marginLeft: '100px',
|
||||
marginTop: '-25px'
|
||||
};*/
|
||||
marginTop: '-40px'
|
||||
};
|
||||
|
||||
return <div>
|
||||
<FormGroup>
|
||||
|
@ -119,29 +90,44 @@ class SelectFile extends React.Component {
|
|||
</FormLabel>
|
||||
|
||||
<FormGroup as={Col} sm={9} md={10}>
|
||||
<FormControl as="select" disabled={this.props.disabled} placeholder='Select file' onChange={(event) => this.handleChange(event)}>
|
||||
<FormControl
|
||||
as="select"
|
||||
value={this.props.value}
|
||||
disabled={this.props.disabled}
|
||||
placeholder='Select file'
|
||||
onChange={(event) => this.props.onChange(event)}>
|
||||
{fileOptions}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}} >
|
||||
<FormControl disabled={this.props.disabled} type='file' onChange={(event) => this.selectUploadFile(event)} />
|
||||
<FormGroup as={Col} >
|
||||
<FormControl
|
||||
disabled={this.props.disabled}
|
||||
type='file'
|
||||
onChange={(event) => this.selectUploadFile(event)} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
|
||||
<Button disabled={this.props.disabled} onClick={() => this.startFileUpload()}>
|
||||
<Icon icon="plus" /> File
|
||||
<FormGroup as={Col} >
|
||||
<Button
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</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}/>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
now={this.state.uploadProgress}
|
||||
label={this.state.uploadProgress + '%'}
|
||||
style={progressBarStyle}
|
||||
/>
|
||||
</FormGroup>
|
||||
*/}
|
||||
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default Container.create(fluxContainerConverter.convert(SelectFile), { withProps: true });
|
||||
export default SelectFile;
|
||||
|
|
|
@ -467,7 +467,15 @@ class Scenario extends React.Component {
|
|||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
||||
<EditConfigDialog show={this.state.editConfigModal} onClose={data => this.closeEditConfigModal(data)} config={this.state.modalConfigData} ics={this.state.ics} />
|
||||
<EditConfigDialog
|
||||
show={this.state.editConfigModal}
|
||||
onClose={data => this.closeEditConfigModal(data)}
|
||||
config={this.state.modalConfigData}
|
||||
ics={this.state.ics}
|
||||
files={this.state.files}
|
||||
sessionToken={this.state.sessionToken}
|
||||
/>
|
||||
|
||||
<ImportConfigDialog show={this.state.importConfigModal} onClose={data => this.importConfig(data)} ics={this.state.ics} />
|
||||
<DeleteDialog title="component configuration" name={this.state.modalConfigData.name} show={this.state.deleteConfigModal} onClose={(c) => this.closeDeleteConfigModal(c)} />
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue