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

Fix for edit config, select-file; enable upload progress callback; fix startParams update

Browse source
This commit is contained in:
Sonja Happ 2020-05-28 09:59:22 +02:00
parent 5f36915afb
commit e90e12fc5c
5 changed files with 85 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/api/rest-api.js
View file

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

24
src/componentconfig/edit-config.js
View file

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

6
src/file/files-data-manager.js
View file

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

126
src/file/select-file.js
View file

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

10
src/scenario/scenario.js
View file

@ -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)} />