1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

Component Config import and export working #216

This commit is contained in:
Sonja Happ 2020-05-29 11:33:49 +02:00
parent 342ed5d83d
commit 7241e2c01b
5 changed files with 83 additions and 94 deletions

View file

@ -17,18 +17,19 @@
import React from 'react';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import _ from 'lodash';
import Dialog from '../common/dialogs/dialog';
class ImportConfigDialog extends React.Component {
imported = false;
valid = false;
constructor(props) {
super(props);
this.state = {
config: {}
config: {},
name: '',
};
}
@ -39,12 +40,13 @@ class ImportConfigDialog extends React.Component {
return;
}
this.props.onClose(this.state.config);
this.props.onClose(this.state);
}
resetState = () => {
this.setState({
config: {}
config: {},
name: ''
});
this.imported = false;
@ -58,46 +60,65 @@ class ImportConfigDialog extends React.Component {
}
// create file reader
const reader = new FileReader();
const self = this;
let reader = new FileReader();
let self = this;
reader.onload = event => {
const config = JSON.parse(event.target.result);
config.icID = this.props.ics.length > 0 ? this.props.ics[0]._id : null;
self.imported = true;
this.setState({ config: config });
self.valid = true;
this.setState({name: config.name, config: config });
};
reader.readAsText(file);
}
handleICChange = event => {
const config = this.state.config;
handleChange(e, index) {
this.setState({ [e.target.id]: e.target.value });
}
config.icID = event.target.value;
validateForm(target) {
// check all controls
let name = true;
this.setState({ config: config });
if (this.state.name === '') {
name = false;
}
this.valid = name;
// return state to control
if (target === 'name'){
return name;
}
}
render() {
return (
<Dialog show={this.props.show} title="Import Component Configuration" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={this.resetState} valid={this.imported}>
<Dialog
show={this.props.show}
title="Import Component Configuration"
buttonTitle="Import"
onClose={(c) => this.onClose(c)}
onReset={() => this.resetState()}
valid={this.valid} >
<form>
<FormGroup controlId='file'>
<FormLabel>Component Configuration File</FormLabel>
<FormControl type='file' onChange={this.loadFile} />
</FormGroup>
<FormGroup controlId='IC'>
<FormLabel>Infrastructure Component</FormLabel>
<FormControl disabled={this.imported === false} as='select' placeholder='Select infrastructure component' value={this.state.config.icID} onChange={this.handleICChange}>
{this.props.ics.map(ic => (
<option key={ic.id} value={ic.id}>{_.get(ic, 'properties.name') || _.get(ic, 'rawProperties.name')}</option>
))}
</FormControl>
<FormGroup controlId="name" >
<FormLabel>Name</FormLabel>
<FormControl
readOnly={!this.imported}
isValid={this.validateForm('name')}
type="text"
placeholder="Enter name"
value={this.state.name}
onChange={(e) => this.handleChange(e)}
/>
<FormControl.Feedback />
</FormGroup>
</form>
</Dialog>

View file

@ -30,7 +30,6 @@ class DashboardsDataManager extends RestDataManager{
data = [data];
}
console.log("onDashboardsLoad");
for (let dashboard of data){
AppDispatcher.dispatch({
type: 'widgets/start-load',

View file

@ -118,20 +118,6 @@ class Scenario extends React.Component {
token: this.state.sessionToken
});
// load component configurations for selected scenario
AppDispatcher.dispatch({
type: 'configs/start-load',
token: this.state.sessionToken,
param: '?scenarioID='+this.state.scenario.id
});
// load dashboards of selected scenario
AppDispatcher.dispatch({
type: 'dashboards/start-load',
token: this.state.sessionToken,
param: '?scenarioID='+this.state.scenario.id
});
// load ICs to enable that component configs and dashboards work with them
AppDispatcher.dispatch({
type: 'ics/start-load',
@ -139,36 +125,6 @@ class Scenario extends React.Component {
});
}
componentDidUpdate(prevProps, prevState) {
if (this.state.dashboards.length > prevState.dashboards.length) {
if (this.addWidgets) { // add widgets
// this can only be true after dashboard import, so there is only one dashboard
// (the newest) and this dashboards ID is used
let dashboardID = this.state.dashboards[this.state.dashboards.length - 1].id;
this.widgetsToAdd.forEach((widget) => {
widget.dashboardID = dashboardID;
AppDispatcher.dispatch({
type: 'widgets/start-add',
data: widget,
token: this.state.sessionToken,
})
})
this.addWidgets = false;
this.widgetsToAdd = [];
}
else { // get widgets
let dashboards = Object.assign([], this.state.dashboards);
for (var i = prevState.dashboards.length; i < this.state.dashboards.length; i++) {
AppDispatcher.dispatch({
type: 'widgets/start-load',
token: this.state.sessionToken,
param: '?dashboardID=' + dashboards[i].id
})
}
}
}
}
/* ##############################################
* Component Configuration modification methods
@ -223,33 +179,47 @@ class Scenario extends React.Component {
});
}
importConfig(config){
importConfig(data){
this.setState({ importConfigModal: false });
if (config == null) {
if (data == null) {
return;
}
config.scenario = this.state.scenario.id;
let newConfig = JSON.parse(JSON.stringify(data.config))
newConfig["scenarioID"] = this.state.scenario.id;
newConfig.name = data.name;
AppDispatcher.dispatch({
type: 'configs/start-add',
data: config,
data: newConfig,
token: this.state.sessionToken
});
this.setState({ scenario: {} }, () => {
AppDispatcher.dispatch({
type: 'scenarios/start-load',
data: this.props.match.params.scenario,
token: this.state.sessionToken
});
});
}
exportConfig(index) {
// filter properties
const config = Object.assign({}, this.state.configs[index]);
let config = JSON.parse(JSON.stringify(this.state.configs[index]));
let signals = JSON.parse(JSON.stringify(SignalStore.getState().filter(s => s.configID === parseInt(config.id, 10))));
signals.forEach((signal) => {
delete signal.configID;
delete signal.id;
})
// two separate lists for inputMapping and outputMapping
let inputSignals = signals.filter(s => s.direction === 'in');
let outputSignals = signals.filter(s => s.direction === 'out');
// add signal mappings to config
config["inputMapping"] = inputSignals;
config["outputMapping"] = outputSignals;
delete config.id;
delete config.scenarioID;
delete config.inputLength;
delete config.outputLength;
// show save dialog
const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
@ -356,12 +326,7 @@ class Scenario extends React.Component {
if (data) {
let newDashboard = JSON.parse(JSON.stringify(data));
newDashboard["scenarioID"] = this.state.scenario.id;
// temporarily store widget data until dashboard is created
if (data.widgets) {
this.addWidgets = true;
this.widgetsToAdd = data.widgets;
}
delete newDashboard.widgets;
AppDispatcher.dispatch({
type: 'dashboards/start-add',
data: newDashboard,
@ -372,16 +337,19 @@ class Scenario extends React.Component {
exportDashboard(index) {
// filter properties
const dashboard = Object.assign({}, this.state.dashboards[index]);
let dashboard = JSON.parse(JSON.stringify(this.state.dashboards[index]));
let widgets = WidgetStore.getState().filter(w => w.dashboardID === parseInt(dashboard.id, 10));
let widgets = JSON.parse(JSON.stringify(WidgetStore.getState().filter(w => w.dashboardID === parseInt(dashboard.id, 10))));
widgets.forEach((widget) => {
delete widget.dashboardID;
delete widget.id;
})
dashboard["widgets"] = widgets;
delete dashboard.scenarioID;
delete dashboard.id;
var jsonObj = dashboard;
jsonObj["widgets"] = widgets;
// show save dialog
const blob = new Blob([JSON.stringify(jsonObj, null, 2)], { type: 'application/json' });
const blob = new Blob([JSON.stringify(dashboard, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, 'dashboard - ' + dashboard.name + '.json');
}

View file

@ -190,6 +190,8 @@ class Scenarios extends Component {
delete config.id;
delete config.scenarioID;
delete config.inputLength;
delete config.outputLength;
})
jsonObj["configs"] = configs;

View file

@ -27,7 +27,6 @@ class SignalsDataManager extends RestDataManager{
reloadConfig(token, data){
// request in signals
console.log("Reloading component config due to signal add/remove")
RestAPI.get(this.makeURL('/configs/' + data.configID), token).then(response => {
AppDispatcher.dispatch({
type: 'configs/edited',