diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js index 756a09d..04163f0 100644 --- a/src/dashboard/dashboard-button-group.js +++ b/src/dashboard/dashboard-button-group.js @@ -41,11 +41,11 @@ class DashboardButtonGroup extends React.Component { buttons.push( , ); } else { @@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( ); } diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index b8ec62e..e45c5ad 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -188,13 +188,13 @@ class Dashboard extends Component { } } -/* +/* componentWillUnmount() { //document.removeEventListener('keydown', this.handleKeydown.bind(this)); } - /*componentDidUpdate() { + componentDidUpdate() { if (this.state.dashboard._id !== this.props.match.params.dashboard) { this.reloadDashboard(); } @@ -224,9 +224,9 @@ class Dashboard extends Component { } }); } - }* + } */ - /*handleKeydown(e) { + handleKeydown(e) { switch (e.key) { case ' ': case 'p': @@ -242,7 +242,7 @@ class Dashboard extends Component { } } - } + /* * Adapt the area's height with the position of the new widget. * Return true if the height increased, otherwise false. @@ -293,16 +293,25 @@ class Dashboard extends Component { } handleDrop(widget) { - const widgets = this.state.dashboard.get('widgets') || []; - const widgetKey = this.getNewWidgetKey(); + widget.dashboardID = this.state.dashboard.id; + + AppDispatcher.dispatch({ + type: 'widgets/start-add', + token: this.state.sessionToken, + data: widget + }); + /*let widgets = []; + widgets = this.state.dashboard.get('widgets'); + + const widgetKey = Dashboard.getNewWidgetKey(); widgets[widgetKey] = widget; - const dashboard = this.state.dashboard.set('widgets'); + const dashboard = this.state.dashboard.set('widgets',widgets); // this.increaseHeightWithWidget(widget); - this.setState({ dashboard }); + this.setState({ dashboard });*/ }; @@ -311,7 +320,7 @@ class Dashboard extends Component { this.widgetChange(updated_widget, key, this.saveChanges); } - widgetChange = (widget, index, callback = null) => { + widgetChange(widget, index, callback = null){ const widgets = this.state.dashboard.get('widgets'); widgets[index] = widget; @@ -352,18 +361,21 @@ class Dashboard extends Component { closeEdit(data){ + console.log("dashboard close edit was called: "); + console.log(data); if (data == null) { this.setState({ editModal: false }); return; } - const widgets = this.state.dashboard.get('widgets'); - widgets[this.state.modalIndex] = data; + AppDispatcher.dispatch({ + type: 'widgets/start-edit', + token: this.state.sessionToken, + data: data + }); - const dashboard = this.state.dashboard.set('widgets', widgets); - - this.setState({ editModal: false, dashboard }); + this.setState({ editModal: false }); }; @@ -390,7 +402,7 @@ class Dashboard extends Component { saveEditing() { // Provide the callback so it can be called when state change is applied // TODO: Check if callback is needed - this.setState({ editing: false }, this.saveChanges ); + this.setState({ editing: false }); }; saveChanges() { @@ -407,9 +419,8 @@ class Dashboard extends Component { } cancelEditing() { - this.setState({ editing: false, dasboard: {} }); + this.setState({ editing: false }); - this.reloadDashboard(); }; setGrid(value) { @@ -440,29 +451,30 @@ class Dashboard extends Component {
e.preventDefault() }> {this.state.editing && - + } - + {widgets != null && Object.keys(widgets).map(widgetKey => ( this.widgetChange(w, k)} - onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} + onWidgetChange={this.widgetChange.bind(this)} + onWidgetStatusChange={this.widgetStatusChange.bind(this)} editing={this.state.editing} index={widgetKey} grid={grid} @@ -480,16 +492,20 @@ class Dashboard extends Component { widget={widgets[widgetKey]} onEdit={this.editWidget.bind(this)} onDelete={this.deleteWidget.bind(this)} - onChange={this.widgetChange} /> + onChange={this.widgetChange.bind(this)} /> ))} - +
; } } +/* +onWidgetChange={(w, k) => this.widgetChange(w, k)} +onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} +*/ let fluxContainerConverter = require('../common/FluxContainerConverter'); export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true })); diff --git a/src/widget/edit-widget-min-max-control.js b/src/widget/edit-widget-min-max-control.js index a09ae77..c717f55 100644 --- a/src/widget/edit-widget-min-max-control.js +++ b/src/widget/edit-widget-min-max-control.js @@ -41,6 +41,8 @@ class EditWidgetMinMaxControl extends React.Component { } render() { + console.log("in minmax control, widget: "); + console.log(this.state.widget); return {this.props.label} this.props.handleChange(e)}>Enable min-max diff --git a/src/widget/edit-widget-number-control.js b/src/widget/edit-widget-number-control.js index 378d724..0328333 100644 --- a/src/widget/edit-widget-number-control.js +++ b/src/widget/edit-widget-number-control.js @@ -40,7 +40,7 @@ class EditWidgetNumberControl extends Component { return ( {this.props.label} - this.props.handleChange(e)} /> + this.props.handleChange(e)} /> ); } diff --git a/src/widget/edit-widget-signal-control.js b/src/widget/edit-widget-signal-control.js index 9591470..18a180f 100644 --- a/src/widget/edit-widget-signal-control.js +++ b/src/widget/edit-widget-signal-control.js @@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component { return ( Signal - this.props.handleChange(e)}> + this.props.handleChange(e)}> { signalsToRender.length === 0 ? ( diff --git a/src/widget/edit-widget-simulation-control.js b/src/widget/edit-widget-simulation-control.js index a988b39..e6d88ee 100644 --- a/src/widget/edit-widget-simulation-control.js +++ b/src/widget/edit-widget-simulation-control.js @@ -39,10 +39,12 @@ class EditWidgetSimulationControl extends Component { } render() { + console.log("editwidgetsimulationcontrol was called"); + console.log(this.state.widget); return ( Simulation Model - this.props.handleChange(e)}> + this.props.handleChange(e)}> { this.props.simulationModels.length === 0 ? ( diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js index d78069d..8b19af0 100644 --- a/src/widget/edit-widget.js +++ b/src/widget/edit-widget.js @@ -42,7 +42,11 @@ class EditWidgetDialog extends React.Component { }; } + + onClose(canceled) { + console.log("in editWidget. the temporal state: "); + console.log(this.state.temporal); if (canceled === false) { if (this.valid) { this.props.onClose(this.state.temporal); @@ -66,8 +70,11 @@ class EditWidgetDialog extends React.Component { handleChange(e) { if (e.constructor === Array) { // Every property in the array will be updated + console.log("####its an array!"); let changes = e.reduce( (changesObject, event) => { changesObject[event.target.id] = event.target.value; + console.log("hier ist changes object: "); + console.log(changesObject); return changesObject; }, {}); @@ -96,8 +103,20 @@ class EditWidgetDialog extends React.Component { } else { changeObject[e.target.id] = e.target.value; } + console.log("this.state.temporal is: "); + console.log(this.state.temporal); + console.log("the event target id: " + e.target.id); + console.log("the value is: " + e.target.value) + console.log("change Object is: "); + console.log(changeObject); - this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) }); + let finalChange = this.state.temporal; + + finalChange.customProperties[e.target.id] = changeObject[e.target.id]; + + + + this.setState({ temporal: finalChange}); } } diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js index 94944b2..3fcddf0 100644 --- a/src/widget/editable-widget-container.js +++ b/src/widget/editable-widget-container.js @@ -23,7 +23,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Rnd } from 'react-rnd'; -import { contextMenu } from 'react-contexify'; +import { Menu } from 'react-contexify'; class EditableWidgetContainer extends React.Component { constructor(props) { @@ -122,13 +122,13 @@ class EditableWidgetContainer extends React.Component { onDragStop={this.dragStop} dragGrid={gridArray} resizeGrid={gridArray} - zIndex={widget.z} + zindex={widget.z} enableResizing={resizing} disableDragging={widget.locked} > - + {this.props.children} - + ; } } diff --git a/src/widget/widget-container.js b/src/widget/widget-container.js index 4aa62a5..b5258ff 100644 --- a/src/widget/widget-container.js +++ b/src/widget/widget-container.js @@ -29,7 +29,7 @@ class WidgetContainer extends React.Component { height: Number(this.props.widget.height), left: Number(this.props.widget.x), top: Number(this.props.widget.y), - zIndex: Number(this.props.widget.z), + zindex: Number(this.props.widget.z), position: 'absolute' }; diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index 4ab6731..b131e2d 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -35,13 +35,14 @@ class WidgetFactory { x: position.x, y: position.y, z: position.z, - locked: false + locked: false, + customProperties: {} }; // set type specific properties switch(type) { case 'CustomAction': - widget.actions = [ + widget.customProperties.actions = [ { action: 'stop' }, @@ -56,51 +57,51 @@ class WidgetFactory { } ]; widget.name = 'Action'; - widget.icon = 'star'; + widget.customProperties.icon = 'star'; widget.width = 100; widget.height = 50; - widget.simulationModel = defaultSimulationModel; + widget.customProperties.simulationModel = defaultSimulationModel; break; case 'Action': - widget.simulationModel = defaultSimulationModel; + widget.customProperties.simulationModel = defaultSimulationModel; break; case 'Lamp': - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; widget.minWidth = 5; widget.minHeight = 5; widget.width = 20; widget.height = 20; - widget.on_color = 6; - widget.off_color = 8; - widget.threshold = 0.5; + widget.customProperties.on_color = 6; + widget.customProperties.off_color = 8; + widget.customProperties.threshold = 0.5; break; case 'Value': - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; widget.minWidth = 70; widget.minHeight = 20; widget.width = 120; widget.height = 30; - widget.textSize = 16; + widget.customProperties.textSize = 16; widget.name = 'Value'; - widget.showUnit = false; + widget.customProperties.showUnit = false; break; case 'Plot': - widget.simulationModel = defaultSimulationModel; - widget.signals = [ 0 ]; - widget.ylabel = ''; - widget.time = 60; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signals = [ 0 ]; + widget.customProperties.ylabel = ''; + widget.customProperties.time = 60; widget.minWidth = 400; widget.minHeight = 200; widget.width = 400; widget.height = 200; - widget.yMin = 0; - widget.yMax = 10; - widget.yUseMinMax = false; + widget.customProperties.yMin = 0; + widget.customProperties.yMax = 10; + widget.customProperties.yUseMinMax = false; break; case 'Table': - widget.simulationModel = defaultSimulationModel; + widget.customProperties.simulationModel = defaultSimulationModel; widget.minWidth = 200; widget.width = 300; widget.height = 200; @@ -111,80 +112,80 @@ class WidgetFactory { widget.width = 100; widget.height = 35; widget.name = 'Label'; - widget.textSize = 32; - widget.fontColor = 0; + widget.customProperties.textSize = 32; + widget.customProperties.fontColor = 0; break; case 'PlotTable': - widget.simulationModel = defaultSimulationModel; - widget.preselectedSignals = []; - widget.signals = []; // initialize selected signals - widget.ylabel = ''; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.preselectedSignals = []; + widget.customProperties.signals = []; // initialize selected signals + widget.customProperties.ylabel = ''; widget.minWidth = 200; widget.minHeight = 100; widget.width = 600; widget.height = 300; - widget.time = 60; - widget.yMin = 0; - widget.yMax = 10; - widget.yUseMinMax = false; + widget.customProperties.time = 60; + widget.customProperties.yMin = 0; + widget.customProperties.yMax = 10; + widget.customProperties.yUseMinMax = false; break; case 'Image': widget.minWidth = 20; widget.minHeight = 20; widget.width = 200; widget.height = 200; - widget.lockAspect = true; + widget.customProperties.lockAspect = true; break; case 'Button': widget.minWidth = 100; widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.background_color = 1; - widget.font_color = 0; - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.background_color = 1; + widget.customProperties.font_color = 0; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; break; case 'Input': widget.minWidth = 200; widget.minHeight = 50; widget.width = 200; widget.height = 50; - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; break; case 'Slider': widget.minWidth = 380; widget.minHeight = 30; widget.width = 400; widget.height = 50; - widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; break; case 'Gauge': - widget.simulationModel = defaultSimulationModel; - widget.signal = 0; + widget.customProperties.simulationModel = defaultSimulationModel; + widget.customProperties.signal = 0; widget.minWidth = 100; widget.minHeight = 150; widget.width = 150; widget.height = 150; - widget.colorZones = false; - widget.zones = []; - widget.valueMin = 0; - widget.valueMax = 1; - widget.valueUseMinMax = false; + widget.customProperties.colorZones = false; + widget.customProperties.zones = []; + widget.customProperties.valueMin = 0; + widget.customProperties.valueMax = 1; + widget.customProperties.valueUseMinMax = false; break; case 'Box': widget.minWidth = 50; widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.border_color = 0; + widget.customProperties.border_color = 0; widget.z = 0; break; case 'HTML': - widget.content = 'Hello World'; + widget.customProperties.content = 'Hello World'; break; case 'Topology': widget.width = 600; diff --git a/src/widget/widget.js b/src/widget/widget.js index f6b7f92..e9c3f2c 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -168,7 +168,7 @@ class Widget extends React.Component { const element = this.createWidget(this.props.data); if (this.props.editing) { - return + return {element} ; } diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js index 69539ab..db06848 100644 --- a/src/widget/widgets/box.js +++ b/src/widget/widgets/box.js @@ -30,9 +30,9 @@ class WidgetBox extends Component { let colors = EditWidgetColorControl.ColorPalette; let colorStyle = { - borderColor: colors[this.props.widget.border_color], - backgroundColor: colors[this.props.widget.background_color], - opacity: this.props.widget.background_color_opacity + borderColor: colors[this.props.widget.customProperties.border_color], + backgroundColor: colors[this.props.widget.customProperties.background_color], + opacity: this.props.widget.customProperties.background_color_opacity } return ( diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index c9cafdf..68a2ee0 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -25,6 +25,8 @@ import EditWidgetColorControl from '../edit-widget-color-control'; class WidgetLabel extends Component { render() { + console.log("here is the label; "); + console.log(this.props.widget); const style = { fontSize: this.props.widget.customProperties.textSize + 'px', color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]