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

wip: make widgets editable

Browse source
This commit is contained in:
Laura Fuentes Grau 2019-12-26 18:37:28 +01:00
parent 9190cd52e9
commit 2f6a6851c4
13 changed files with 137 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/dashboard/dashboard-button-group.js
View file

@ -41,11 +41,11 @@ class DashboardButtonGroup extends React.Component {
buttons.push(
<Button key={key++} onClick={this.props.onSave} style={buttonStyle}>
<Icon icon="info" />
<span class="glyphicon glyphicon-floppy-disk"></span> Save
<span className="glyphicon glyphicon-floppy-disk"></span> Save
</Button>,
<Button key={key++} onClick={this.props.onCancel} style={buttonStyle}>
<Icon icon="info" />
<span class="glyphicon glyphicon-remove" ></span> Cancel
<span className="glyphicon glyphicon-remove" ></span> Cancel
</Button>
);
} else {
@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
buttons.push(
<Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
<Icon icon="info" />
<span className="glyphicon glyphicon-pencil"></span> Pause
<span className="glyphicon glyphicon-pencil"></span> Edit
</Button>
);
}

72
src/dashboard/dashboard.js
View file

@ -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 {
<DashboardButtonGroup
editing={this.state.editing}
onEdit={this.startEditing.bind(this)}
fullscreen={this.props.isFullscreen}
paused={this.state.paused}
onSave={this.saveEditing}
onCancel={this.cancelEditing}
onSave={this.saveEditing.bind(this)}
onCancel={this.cancelEditing.bind(this)}
onFullscreen={this.props.toggleFullscreen}
onPause={this.pauseData}
onUnpause={this.unpauseData}
onPause={this.pauseData.bind(this)}
onUnpause={this.unpauseData.bind(this)}
/>
</div>
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
{this.state.editing &&
<WidgetToolbox grid={grid} onGridChange={this.setGrid} widgets={widgets} />
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={widgets} />
}
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop}>
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
{widgets != null && Object.keys(widgets).map(widgetKey => (
<Widget
key={widgetKey}
data={widgets[widgetKey]}
simulation={this.state.simulation}
onWidgetChange={(w, k) => 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)} />
))}
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit.bind(this)} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
</div>
</div>;
}
}
/*
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 }));

2
src/widget/edit-widget-min-max-control.js
View file

@ -41,6 +41,8 @@ class EditWidgetMinMaxControl extends React.Component {
}
render() {
console.log("in minmax control, widget: ");
console.log(this.state.widget);
return <FormGroup>
<FormLabel>{this.props.label}</FormLabel>
<FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>

2
src/widget/edit-widget-number-control.js
View file

@ -40,7 +40,7 @@ class EditWidgetNumberControl extends Component {
return (
<FormGroup controlId={this.props.controlId}>
<FormLabel>{this.props.label}</FormLabel>
<FormControl type="number" step="any" defaultValue={this.props.defaultValue} value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
<FormControl type="number" step="any" value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
</FormGroup>
);
}

2
src/widget/edit-widget-signal-control.js
View file

@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
return (
<FormGroup controlId="signal">
<FormLabel>Signal</FormLabel>
<FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
<FormControl as="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
{
signalsToRender.length === 0 ? (
<option disabled value style={{ display: 'none' }}>No signals available.</option>

4
src/widget/edit-widget-simulation-control.js
View file

@ -39,10 +39,12 @@ class EditWidgetSimulationControl extends Component {
}
render() {
console.log("editwidgetsimulationcontrol was called");
console.log(this.state.widget);
return (
<FormGroup controlId="simulationModel">
<FormLabel>Simulation Model</FormLabel>
<FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
<FormControl as="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
{
this.props.simulationModels.length === 0 ? (
<option disabled value style={{ display: 'none' }}> No simulation models available. </option>

21
src/widget/edit-widget.js
View file

@ -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});
}
}

8
src/widget/editable-widget-container.js
View file

@ -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}
>
<contextMenu id={'widgetMenu' + this.props.index}>
<Menu id={'widgetMenu' + this.props.index}>
{this.props.children}
</contextMenu>
</Menu>
</Rnd>;
}
}

2
src/widget/widget-container.js
View file

@ -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'
};

103
src/widget/widget-factory.js
View file

@ -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 = '<i>Hello World</i>';
widget.customProperties.content = '<i>Hello World</i>';
break;
case 'Topology':
widget.width = 600;

2
src/widget/widget.js
View file

@ -168,7 +168,7 @@ class Widget extends React.Component {
const element = this.createWidget(this.props.data);
if (this.props.editing) {
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index}>
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={parseInt(this.props.index,10)}>
{element}
</EditableWidgetContainer>;
}

6
src/widget/widgets/box.js
View file

@ -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 (

2
src/widget/widgets/label.js
View file

@ -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]