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

Improve imports and exports

Browse source
This commit is contained in:
Markus Grigull 2017-09-18 14:32:17 +02:00
parent 0878909660
commit a4ef517670
8 changed files with 138 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/dialog/export-simulator.js
View file

@ -1,88 +0,0 @@
/**
* File: export-simulator.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 04.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component, PropTypes } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import Dialog from './dialog';
class ExportSimulatorDialog extends Component {
static propTypes = {
show: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired
};
valid: false;
constructor(props) {
super(props);
this.state = {
name: '',
endpoint: ''
};
}
onClose(canceled) {
if (canceled === false) {
this.props.onClose(this.state);
} else {
this.props.onClose();
}
}
handleChange(e) {
this.setState({ [e.target.id]: e.target.value });
}
resetState() {
this.setState({ name: '', endpoint: '' });
}
validateForm(target) {
// check all controls
var endpoint = true;
var name = true;
if (this.state.name === '') {
name = false;
}
if (this.state.endpoint === '') {
endpoint = false;
}
this.valid = endpoint && name;
// return state to control
if (target === 'name') return name ? "success" : "error";
else return endpoint ? "success" : "error";
}
render() {
return (
<Dialog show={this.props.show} title="Export Simulator" buttonTitle="Export" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name" validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
<ControlLabel>Endpoint</ControlLabel>
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
</form>
</Dialog>
);
}
}
export default ExportSimulatorDialog;

64
src/components/dialog/import-node.js
View file

@ -1,11 +1,23 @@
/**
* File: import-simulator.js
* File: import-node.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 04.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
* Date: 03.09.2017
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
@ -14,13 +26,15 @@ import Dialog from './dialog';
class ImportNodeDialog extends React.Component {
valid = false;
imported = false;
constructor(props) {
super(props);
this.state = {
name: '',
endpoint: ''
endpoint: '',
simulators: []
};
}
@ -38,6 +52,8 @@ class ImportNodeDialog extends React.Component {
resetState() {
this.setState({ name: '', endpoint: '' });
this.imported = false;
}
loadFile(fileList) {
@ -53,14 +69,34 @@ class ImportNodeDialog extends React.Component {
reader.onload = function(event) {
// read simulator
const simulator = JSON.parse(event.target.result);
self.valid = true;
self.setState({ name: simulator.name, endpoint: simulator.endpoint });
const node = JSON.parse(event.target.result);
self.imported = true;
self.setState({ name: node.name, endpoint: node.endpoint, simulators: node.simulators });
};
reader.readAsText(file);
}
validateForm(target) {
// check all controls
let endpoint = true;
let name = true;
if (this.state.name === '' || this.props.nodes.find(node => node.name === this.state.name) !== undefined) {
name = false;
}
if (this.state.endpoint === '' || this.props.nodes.find(node => node.endpoint === this.state.endpoint) !== undefined) {
endpoint = false;
}
this.valid = endpoint && name;
// return state to control
if (target === 'name') return name ? "success" : "error";
else return endpoint ? "success" : "error";
}
render() {
return (
<Dialog show={this.props.show} title="Import Simulator" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
@ -70,14 +106,14 @@ class ImportNodeDialog extends React.Component {
<FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
</FormGroup>
<FormGroup controlId="name">
<FormGroup controlId="name" validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormControl readOnly type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl readOnly={!this.imported} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="endpoint">
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
<ControlLabel>Endpoint</ControlLabel>
<FormControl readOnly type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
<FormControl readOnly={!this.imported} type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
</form>

26
src/components/dialog/import-simulation.js
View file

@ -33,21 +33,13 @@ class ImportSimulationDialog extends React.Component {
this.state = {
name: '',
selectedModels: []
models: [],
};
}
onClose(canceled) {
if (canceled === false) {
// create simulation
const simulation = {
name: this.state.name,
models: this.props.simulation.models.filter((element, index) => {
return this.state.selectedModels[index];
})
};
this.props.onClose(simulation);
this.props.onClose(this.state);
} else {
this.props.onClose();
}
@ -112,20 +104,6 @@ class ImportSimulationDialog extends React.Component {
if (target === 'name') return name ? "success" : "error";
}
selectModels(event) {
// update selection
const selectedModels = this.state.selectedModels.map((element, index) => {
// eslint-disable-next-line
if (event.target.id == index) {
return !element;
} else {
return element;
}
});
this.setState({ selectedModels: selectedModels });
}
render() {
return (
<Dialog show={this.props.show} title="Import Simulation" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>

2
src/components/dialog/new-node.js
View file

@ -25,7 +25,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import Dialog from './dialog';
class NewNodeDialog extends React.Component {
valid: false;
valid = false;
constructor(props) {
super(props);

2
src/components/dialog/new-simulation-model.js
View file

@ -27,7 +27,7 @@ import TableColumn from '../table-column';
import Dialog from './dialog';
class NewSimulationModelDialog extends React.Component {
valid: false;
valid = false;
constructor(props) {
super(props);

1
src/components/node-tree.js
View file

@ -47,6 +47,7 @@ class NodeTree extends React.Component {
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeAdd(rowInfo.node)}><Glyphicon glyph="plus" /></Button>);
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeEdit(rowInfo.node)}><Glyphicon glyph="pencil" /></Button>);
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeDelete(rowInfo.node)}><Glyphicon glyph="trash" /></Button>);
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeExport(rowInfo.node)}><Glyphicon glyph="export" /></Button>);
} else {
// get child index
var index = rowInfo.path[1] - rowInfo.path[0] - 1;

42
src/containers/simulation.js
View file

@ -21,7 +21,7 @@
import React from 'react';
import { Container } from 'flux/utils';
import { Button, Modal, Glyphicon, FormControl, FormGroup, Form } from 'react-bootstrap';
import { Button, Modal, Glyphicon } from 'react-bootstrap';
import FileSaver from 'file-saver';
import SimulationStore from '../stores/simulation-store';
@ -129,6 +129,20 @@ class Simulation extends React.Component {
}
}
closeImportModal(data) {
this.setState({ importModal: false });
if (data) {
this.state.simulation.models.push(data);
AppDispatcher.dispatch({
type: 'simulations/start-edit',
data: this.state.simulation,
token: this.state.sessionToken
});
}
}
getSimulatorName(simulator) {
var name = "undefined";
@ -141,6 +155,16 @@ class Simulation extends React.Component {
return name;
}
exportModel(index) {
// filter properties
let simulationModel = Object.assign({}, this.state.simulation.models[index]);
delete simulationModel.simulator;
// show save dialog
const blob = new Blob([JSON.stringify(simulationModel, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, 'simulation model - ' + simulationModel.name + '.json');
}
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
@ -194,14 +218,24 @@ class Simulation extends React.Component {
<TableColumn title='Name' dataKey='name' />
<TableColumn title='Simulator' dataKey='simulator' width='180' modifier={(simulator) => this.getSimulatorName(simulator)} />
<TableColumn title='Length' dataKey='length' width='100' />
<TableColumn title='' width='100' editButton deleteButton exportButton onEdit={(index) => this.setState({ editModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} onExport={(index) => this.exportSimulationModel(this.state.simulation.models[index])} />
<TableColumn
title=''
width='100'
editButton
deleteButton
exportButton
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.simulation.models[index], modalIndex: index })}
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulation.models[index], modalIndex: index })}
onExport={index => this.exportModel(index)}
/>
</Table>
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Add Simulation Model</Button>
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Simulation Model</Button>
<Button onClick={() => this.setState({ importModal: true })}><Glyphicon glyph="import" /> Import</Button>
<NewSimulationModelDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} nodes={this.state.nodes} />
<EditSimulationModelDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} data={this.state.modalData} nodes={this.state.nodes} />
<ImportSimulationModelDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} nodes={this.state.nodes} />
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
<Modal.Header>

82
src/containers/simulations.js
View file

@ -21,12 +21,13 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Button, Modal, Glyphicon, FormGroup, FormControl, Form } from 'react-bootstrap';
import { Button, Modal, Glyphicon } from 'react-bootstrap';
import FileSaver from 'file-saver';
import AppDispatcher from '../app-dispatcher';
import SimulationStore from '../stores/simulation-store';
import UserStore from '../stores/user-store';
import NodeStore from '../stores/node-store';
import Table from '../components/table';
import TableColumn from '../components/table-column';
@ -36,12 +37,13 @@ import ImportSimulationDialog from '../components/dialog/import-simulation';
class Simulations extends Component {
static getStores() {
return [ SimulationStore, UserStore ];
return [ SimulationStore, UserStore, NodeStore ];
}
static calculateState() {
return {
simulations: SimulationStore.getState(),
nodes: NodeStore.getState(),
sessionToken: UserStore.getState().token,
newModal: false,
@ -119,6 +121,18 @@ class Simulations extends Component {
}
}
closeImportModal(data) {
this.setState({ importModal: false });
if (data) {
AppDispatcher.dispatch({
type: 'simulations/start-add',
data,
token: this.state.sessionToken
});
}
}
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
@ -126,29 +140,6 @@ class Simulations extends Component {
this.confirmDeleteModal();
}
}
closeImportModal(data) {
this.setState({ importModal : false });
if (data) {
AppDispatcher.dispatch({
type: 'simulations/start-add',
data: data
});
}
}
exportSimulation(data) {
// filter properties
var simulation = Object.assign({}, data);
delete simulation._id;
delete simulation.projects;
delete simulation.running;
// show save dialog
const blob = new Blob([JSON.stringify(simulation, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, simulation.name + '.json');
}
loadFile(fileList) {
// get file
@ -170,6 +161,23 @@ class Simulations extends Component {
reader.readAsText(file);
}
exportSimulation(index) {
// filter properties
let simulation = Object.assign({}, this.state.simulations[index]);
delete simulation._id;
delete simulation.projects;
delete simulation.running;
delete simulation.user;
simulation.models.forEach(model => {
delete model.simulator;
});
// show save dialog
const blob = new Blob([JSON.stringify(simulation, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, 'simulation - ' + simulation.name + '.json');
}
render() {
return (
<div className='section'>
@ -177,23 +185,23 @@ class Simulations extends Component {
<Table data={this.state.simulations}>
<TableColumn title='Name' dataKey='name' link='/simulations/' linkKey='_id' />
<TableColumn width='100' editButton deleteButton exportButton onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })} onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })} onExport={(index) => this.exportSimulation(this.state.simulations[index])} />
<TableColumn
width='100'
editButton
deleteButton
exportButton
onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
onExport={index => this.exportSimulation(index)}
/>
</Table>
<Form inline>
<FormGroup>
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Add Simulation</Button>
</FormGroup>
<FormGroup>
<FormControl inputRef={ref => { this.fileInput = ref; }} type="file" style={{ display: 'none' }} onChange={(e) => this.loadFile(e.target.files)} />
<Button onClick={() => { this.fileInput.click(); }}><Glyphicon glyph="import" /> Import Simulation</Button>
</FormGroup>
</Form>
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Simulation</Button>
<Button onClick={() => this.setState({ importModal: true })}><Glyphicon glyph="import" /> Import</Button>
<NewSimulationDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
<EditSimulationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} simulation={this.state.modalSimulation} />
<ImportSimulationDialog show={this.state.importModal} onClose={(data) => this.closeImportModal(data)} simulation={this.state.modalSimulation} />
<ImportSimulationDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} nodes={this.state.nodes} />
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
<Modal.Header>