From 8d0b86e242ee21d6450bdd68e84063550dd79ece Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Mon, 6 Jul 2020 16:57:49 +0200 Subject: [PATCH 1/3] Show multiple selected files in component config table; add column for simulation model; allow for selection of multiple files per component config in edit dialog #234 --- package-lock.json | 9 +++++ package.json | 1 + src/componentconfig/edit-config.js | 56 ++++++++++++++++++++---------- src/scenario/scenario.js | 21 ++++++++--- 4 files changed, 64 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 56c4421..5ad0112 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0f50af1..11aceb7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index a69159d..ba6e413 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -17,6 +17,7 @@ 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"; @@ -28,12 +29,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 +52,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 +83,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 +104,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 +116,15 @@ class EditConfigDialog extends React.Component { ); + let configFileOptions = []; + for(let file of this.props.files) { + configFileOptions.push( + {name: file.name, id: file.id} + ); + } + + + return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
@@ -121,14 +141,14 @@ class EditConfigDialog extends React.Component { - this.handleSelectedFileChange(e)} - files={this.props.files} - value={this.state.selectedFileID} - scenarioID={this.props.config.scenarioID} - sessionToken={this.props.sessionToken} + this.onFileSelect(selectedList, selectedItem)} + onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)} + displayValue={'name'} + placeholder={'Select file(s)...'} /> diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 8d3495e..8e2ceda 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -396,12 +396,22 @@ 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, type) { + + let fileList = ''; + + for (let id of fileIDs){ + for (let file of this.state.files) { + if (file.id === id && (type === 'all' || file.type.includes(type))) { + fileList = fileList + '\n' + file.name; + } } } + + + + + return fileList; } /* ############################################## @@ -428,7 +438,8 @@ class Scenario extends React.Component { this.onConfigChecked(index, event)} width='30' /> - this.getFileName(selectedFileID)} /> + this.getListOfFiles(fileIDs, 'all')} /> + this.getListOfFiles(fileIDs, 'xml')} /> Date: Mon, 6 Jul 2020 16:58:25 +0200 Subject: [PATCH 2/3] remove unused import --- src/componentconfig/edit-config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index ba6e413..2e277b1 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -20,7 +20,6 @@ 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; From 8fb20c25433c3f67eb755ab6a7072f0971932737 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Wed, 8 Jul 2020 16:41:55 +0200 Subject: [PATCH 3/3] Add edit button to model file column, prepare placeholder for Pintura start #234 --- src/scenario/scenario.js | 51 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 8e2ceda..59b7804 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -396,14 +396,18 @@ class Scenario extends React.Component { * File modification methods ############################################## */ - getListOfFiles(fileIDs, type) { + getListOfFiles(fileIDs, types) { let fileList = ''; for (let id of fileIDs){ for (let file of this.state.files) { - if (file.id === id && (type === 'all' || file.type.includes(type))) { - fileList = fileList + '\n' + file.name; + if (file.id === id && types.some(e => file.type.includes(e))) { + if (fileList === ''){ + fileList = file.name + } else { + fileList = fileList + ';' + file.name; + } } } } @@ -414,6 +418,37 @@ class Scenario extends React.Component { 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) + } + } + /* ############################################## * Render method ############################################## */ @@ -438,8 +473,14 @@ class Scenario extends React.Component {
this.onConfigChecked(index, event)} width='30' /> - this.getListOfFiles(fileIDs, 'all')} /> - this.getListOfFiles(fileIDs, 'xml')} /> + this.getListOfFiles(fileIDs, ['json', 'JSON'])} /> + this.getListOfFiles(fileIDs, ['xml'])} + editButton + onEdit={(index) => this.startPintura(index)} + />