From 24d009e214a9ad8b351e415fd92b78b284c80c85 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Wed, 8 Mar 2017 20:30:23 +0100 Subject: [PATCH] Add edit dialog to widgets and value-widget Data and simulation is passed properly to widgets --- src/components/dialog/edit-widget-value.js | 106 ++++++++------------- src/components/dialog/edit-widget.js | 95 ++++++++++++++++++ src/components/widget-value.js | 11 +-- src/containers/visualization.js | 80 +++++++++++++--- src/containers/widget.js | 4 +- 5 files changed, 205 insertions(+), 91 deletions(-) create mode 100644 src/components/dialog/edit-widget.js diff --git a/src/components/dialog/edit-widget-value.js b/src/components/dialog/edit-widget-value.js index 1fa5de8..7f16a03 100644 --- a/src/components/dialog/edit-widget-value.js +++ b/src/components/dialog/edit-widget-value.js @@ -7,86 +7,58 @@ * Unauthorized copying of this file, via any medium is strictly prohibited. **********************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; -import Dialog from './dialog'; - -class EditWidgetValueDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - - valid: false; - +class EditValueWidget extends Component { constructor(props) { super(props); this.state = { - name: '', - simulator: '', - signal: 0 - } + widget: { + simulator: '', + signal: 0 + } + }; } - 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: '' }); - } - - validateForm(target) { - // check all controls - var name = true; - - if (this.state.name === '') { - name = false; - } - - this.valid = name; - - // return state to control - if (target === 'name') return name ? "success" : "error"; - - return "success"; + componentWillReceiveProps(nextProps) { + this.setState({ widget: nextProps.widget }); } render() { + // get selected simulation model + var simulationModel = {}; + + if (this.props.simulation) { + this.props.simulation.models.forEach((model) => { + if (model.simulation === this.state.widget.simulation) { + simulationModel = model; + } + }); + } + return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - - - Simulator - - - - - - - Signal - this.handleChange(e)} /> - - -
- +
+ + Simulator + this.props.handleChange(e)}> + {this.props.simulation.models.map((model, index) => ( + + ))} + + + + Signal + this.props.handleChange(e)}> + {simulationModel.mapping.map((signal, index) => ( + + ))} + + +
); } } -export default EditWidgetValueDialog; +export default EditValueWidget; diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js new file mode 100644 index 0000000..c777466 --- /dev/null +++ b/src/components/dialog/edit-widget.js @@ -0,0 +1,95 @@ +/** + * File: edit-widget.js + * Author: Markus Grigull + * Date: 08.03.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'; + +import EditValueWidget from './edit-widget-value'; + +class EditWidgetDialog extends Component { + static propTypes = { + show: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired + }; + + valid: true; + + constructor(props) { + super(props); + + this.state = { + widget: { + name: '', + simulator: '', + signal: 0 + } + }; + } + + onClose(canceled) { + if (canceled === false) { + this.props.onClose(this.state.widget); + } else { + this.props.onClose(); + } + } + + handleChange(e) { + var widget = this.state.widget; + widget[e.target.id] = e.target.value; + this.setState({ widget: widget }); + + console.log(this.state.widget); + } + + resetState() { + this.setState({ widget: this.props.widget }); + } + + validateForm(target) { + // check all controls + var name = true; + + if (this.state.name === '') { + name = false; + } + + this.valid = name; + + // return state to control + if (target === 'name') return name ? "success" : "error"; + } + + render() { + // get widget part + var widgetDialog = null; + + if (this.props.widget && this.props.widget.type === 'Value') { + widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />; + } + + return ( + this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> +
+ + Name + this.handleChange(e)} /> + + + + {widgetDialog} +
+ + ); + } +} + +export default EditWidgetDialog; diff --git a/src/components/widget-value.js b/src/components/widget-value.js index e016d0a..92987b6 100644 --- a/src/components/widget-value.js +++ b/src/components/widget-value.js @@ -9,23 +9,20 @@ import React, { Component } from 'react'; -//import EditWidgetValueDialog from './dialog-edit-widget-value'; - class WidgetValue extends Component { render() { // calculate value var value = null; - const identifier = '58bfd9facd76830327c8b6d4'; - const signal = 2; + const widget = this.props.widget; - if (this.props.data && this.props.data[identifier] && this.props.data[identifier].values) { - const signalArray = this.props.data[identifier].values[signal]; + if (this.props.data && this.props.data[widget.simulator] && this.props.data[widget.simulator].values) { + const signalArray = this.props.data[widget.simulator].values[widget.signal]; value = signalArray[signalArray.length - 1].y; } return (
- {this.props.widget.name}: {value} + {widget.name}: {value}
); } diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 31bf209..e1fb132 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -15,6 +15,7 @@ import { ContextMenu, MenuItem } from 'react-contextmenu'; import ToolboxItem from '../components/toolbox-item'; import Dropzone from '../components/dropzone'; import Widget from './widget'; +import EditWidget from '../components/dialog/edit-widget'; import VisualizationStore from '../stores/visualization-store'; import ProjectStore from '../stores/project-store'; @@ -27,24 +28,25 @@ class Visualization extends Component { } static calculateState(prevState) { - if (prevState) { - return { - visualizations: VisualizationStore.getState(), - - visualization: prevState.visualization, - editing: prevState.editing, - grid: prevState.grid - }; + if (prevState == null) { + prevState = {}; } return { visualizations: VisualizationStore.getState(), + projects: ProjectStore.getState(), + simulations: SimulationStore.getState(), - visualization: {}, - simulation: null, - editing: false, - grid: false - } + visualization: prevState.visualization || {}, + project: prevState.project || null, + simulation: prevState.simulation || null, + editing: prevState.editing || false, + grid: prevState.grid || false, + + editModal: prevState.editModal || false, + modalData: prevState.modalData || null, + modalIndex: prevState.modalIndex || null + }; } componentWillMount() { @@ -57,6 +59,29 @@ class Visualization extends Component { if (this.state.visualization._id !== this.props.params.visualization) { this.reloadVisualization(); } + + // load depending project + if (this.state.project == null && this.state.projects) { + this.state.projects.forEach((project) => { + if (project._id === this.state.visualization.project) { + this.setState({ project: project, simulation: null }); + + AppDispatcher.dispatch({ + type: 'simulations/start-load', + data: project.simulation + }); + } + }); + } + + // load depending simulation + if (this.state.simulation == null && this.state.simulations && this.state.project) { + this.state.simulations.forEach((simulation) => { + if (simulation._id === this.state.project.simulation) { + this.setState({ simulation: simulation }); + } + }); + } } reloadVisualization() { @@ -64,7 +89,12 @@ class Visualization extends Component { this.state.visualizations.forEach((visualization) => { if (visualization._id === this.props.params.visualization) { // JSON.parse(JSON.stringify(obj)) = deep clone to make also copy of widget objects inside - this.setState({ visualization: JSON.parse(JSON.stringify(visualization)) }); + this.setState({ visualization: JSON.parse(JSON.stringify(visualization)), project: null }); + + AppDispatcher.dispatch({ + type: 'projects/start-load', + data: visualization.project + }); } }); } @@ -81,6 +111,12 @@ class Visualization extends Component { z: 0 }; + // set type specific properties + if (item.name === 'Value') { + widget.simulator = this.state.simulation.models[0].simulator; + widget.signal = 0; + } + var visualization = this.state.visualization; visualization.widgets.push(widget); @@ -97,7 +133,19 @@ class Visualization extends Component { } editWidget(e, data) { + this.setState({ editModal: true, modalData: this.state.visualization.widgets[data.index], modalIndex: data.index }); + } + closeEdit(data) { + if (data) { + // save changes temporarily + var visualization = this.state.visualization; + visualization.widgets[this.state.modalIndex] = data; + + this.setState({ editModal: false, visualization: visualization }); + } else { + this.setState({ editModal: false }); + } } deleteWidget(e, data) { @@ -155,7 +203,7 @@ class Visualization extends Component { this.handleDrop(item)} editing={this.state.editing}> {this.state.visualization.widgets != null && this.state.visualization.widgets.map((widget, index) => ( - this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} /> + this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} /> ))} @@ -166,6 +214,8 @@ class Visualization extends Component { this.deleteWidget(e, data)}>Delete ))} + + this.closeEdit(data)} widget={this.state.modalData} simulation={this.state.simulation} /> ); diff --git a/src/containers/widget.js b/src/containers/widget.js index c24a0a0..67e7bd4 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -77,14 +77,14 @@ class Widget extends Component { resizeGrid={grid} > - + ); } else { return (
- +
); }