mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Merge branch 'componentconfig-fileids' into 'develop'
Add column for model file + edit button for model file See merge request acs/public/villas/web!60
This commit is contained in:
Sonja Happ
commit
417fbcbd03
4 changed files with 105 additions and 24 deletions
9
package-lock.json
generated
9
package-lock.json
generated
|
|
@ -8902,6 +8902,15 @@
|
|||
"resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
|
||||
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
|
||||
},
|
||||
"multiselect-react-dropdown": {
|
||||
"version": "1.5.7",
|
||||
"resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-1.5.7.tgz",
|
||||
"integrity": "sha512-bDlXYEzpV/5p5G5nIFRrZ/Ndf8CSYWliZ62n/5imfjLy0K2/dNx6sFmk4W/Phq83bzPUDK/RI4553yCk6YzZwg==",
|
||||
"requires": {
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"mute-stream": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"jszip": "^3.5.0",
|
||||
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
|
||||
"lodash": "^4.17.15",
|
||||
"multiselect-react-dropdown": "^1.5.7",
|
||||
"node-sass": "^4.14.1",
|
||||
"popper.js": "^1.16.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
|
||||
import React from 'react';
|
||||
import {FormGroup, FormControl, FormLabel} from 'react-bootstrap';
|
||||
import { Multiselect } from 'multiselect-react-dropdown'
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
import ParametersEditor from '../common/parameters-editor';
|
||||
import SelectFile from "../file/select-file";
|
||||
|
||||
class EditConfigDialog extends React.Component {
|
||||
valid = false;
|
||||
|
|
@ -28,12 +28,11 @@ class EditConfigDialog extends React.Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedFile: null,
|
||||
name: '',
|
||||
icID: '',
|
||||
configuration: null,
|
||||
startParameters: this.props.config.startParameters,
|
||||
selectedFileID: this.props.config.selectedFileID
|
||||
fileIDs: this.props.config.fileIDs
|
||||
|
||||
};
|
||||
}
|
||||
|
|
@ -52,9 +51,13 @@ class EditConfigDialog extends React.Component {
|
|||
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 &&
|
||||
this.props.config.selectedFileID !== parseInt(this.state.selectedFileID)) {
|
||||
data.selectedFileID = parseInt(this.state.selectedFileID, 10);
|
||||
|
||||
let IDs = []
|
||||
for(let e of this.state.fileIDs){
|
||||
IDs.push(e.id)
|
||||
}
|
||||
if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){
|
||||
data.fileIDs = IDs;
|
||||
}
|
||||
|
||||
//forward modified config to callback function
|
||||
|
|
@ -79,10 +82,19 @@ class EditConfigDialog extends React.Component {
|
|||
this.valid = this.isValid()
|
||||
}
|
||||
|
||||
handleSelectedFileChange(event){
|
||||
//console.log("Config file change to: ", event.target.value);
|
||||
this.setState({selectedFileID: event.target.value})
|
||||
onFileSelect(selectedList, selectedItem) {
|
||||
|
||||
this.setState({
|
||||
fileIDs: selectedList
|
||||
})
|
||||
this.valid = this.isValid()
|
||||
}
|
||||
|
||||
onFileRemove(selectedList, removedItem) {
|
||||
|
||||
this.setState({
|
||||
fileIDs: selectedList
|
||||
})
|
||||
this.valid = this.isValid()
|
||||
}
|
||||
|
||||
|
|
@ -91,9 +103,7 @@ class EditConfigDialog extends React.Component {
|
|||
return this.state.name !== ''
|
||||
|| this.state.icID !== ''
|
||||
|| this.state.startParameters !== {}
|
||||
|| this.state.selectedFile != null
|
||||
|| this.state.configuration != null
|
||||
|| this.state.selectedFileID !== 0;
|
||||
}
|
||||
|
||||
resetState() {
|
||||
|
|
@ -105,6 +115,15 @@ class EditConfigDialog extends React.Component {
|
|||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
);
|
||||
|
||||
let configFileOptions = [];
|
||||
for(let file of this.props.files) {
|
||||
configFileOptions.push(
|
||||
{name: file.name, id: file.id}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit Component Configuration" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
|
|
@ -121,14 +140,14 @@ class EditConfigDialog extends React.Component {
|
|||
</FormControl>
|
||||
</FormGroup>
|
||||
|
||||
<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}
|
||||
<Multiselect
|
||||
options={configFileOptions}
|
||||
showCheckbox={true}
|
||||
selectedValues={this.state.fileIDs}
|
||||
onSelect={(selectedList, selectedItem) => this.onFileSelect(selectedList, selectedItem)}
|
||||
onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)}
|
||||
displayValue={'name'}
|
||||
placeholder={'Select file(s)...'}
|
||||
/>
|
||||
|
||||
<FormGroup controlId='startParameters'>
|
||||
|
|
|
|||
|
|
@ -417,12 +417,57 @@ class Scenario extends React.Component {
|
|||
* File modification methods
|
||||
############################################## */
|
||||
|
||||
getFileName(id) {
|
||||
for (let file of this.state.files) {
|
||||
if (file.id === id) {
|
||||
return file.name;
|
||||
getListOfFiles(fileIDs, types) {
|
||||
|
||||
let fileList = '';
|
||||
|
||||
for (let id of fileIDs){
|
||||
for (let file of this.state.files) {
|
||||
if (file.id === id && types.some(e => file.type.includes(e))) {
|
||||
if (fileList === ''){
|
||||
fileList = file.name
|
||||
} else {
|
||||
fileList = fileList + ';' + file.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return fileList;
|
||||
}
|
||||
|
||||
startPintura(configIndex){
|
||||
let config = this.state.configs[configIndex];
|
||||
|
||||
// get xml / CIM file
|
||||
let files = []
|
||||
for (let id of config.fileIDs){
|
||||
for (let file of this.state.files) {
|
||||
if (file.id === id && ['xml'].some(e => file.type.includes(e))) {
|
||||
files.push(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(files.length > 1){
|
||||
// more than one CIM file...
|
||||
console.warn("There is more than one CIM file selected in this component configuration. I will open them all in a separate tab.")
|
||||
}
|
||||
|
||||
let base_host = 'aaa.bbb.ccc.ddd/api/v2/files/'
|
||||
for (let file of files) {
|
||||
// endpoint param serves for download and upload of CIM file, token is required for authentication
|
||||
let params = {
|
||||
token: this.state.sessionToken,
|
||||
endpoint: base_host + String(file.id),
|
||||
}
|
||||
|
||||
// TODO start Pintura for editing CIM/ XML file from here
|
||||
console.warn("Starting Pintura... and nothing happens so far :-) ", params)
|
||||
}
|
||||
}
|
||||
|
||||
/* ##############################################
|
||||
|
|
@ -465,7 +510,14 @@ class Scenario extends React.Component {
|
|||
<Table data={this.state.configs}>
|
||||
<TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
|
||||
<TableColumn title='Name' dataKey='name' />
|
||||
<TableColumn title='Selected configuration file' dataKey='selectedFileID' modifier={(selectedFileID) => this.getFileName(selectedFileID)} />
|
||||
<TableColumn title='Configuration file(s)' dataKey='fileIDs' modifier={(fileIDs) => this.getListOfFiles(fileIDs, ['json', 'JSON'])} />
|
||||
<TableColumn
|
||||
title='Model file(s)'
|
||||
dataKey='fileIDs'
|
||||
modifier={(fileIDs) => this.getListOfFiles(fileIDs, ['xml'])}
|
||||
editButton
|
||||
onEdit={(index) => this.startPintura(index)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='# Output Signals'
|
||||
dataKey='outputLength'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue