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}
>
-
+
;
}
}
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]