1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

widgets are now rendered in edit mode

This commit is contained in:
Laura Fuentes Grau 2020-01-21 10:26:52 +01:00
parent 374437dfad
commit 9516ced50c
9 changed files with 40 additions and 35 deletions

View file

@ -322,17 +322,14 @@ class Dashboard extends Component {
}
widgetChange(widget, index, callback = null){
const widgets = this.state.dashboard.get('widgets');
widgets[index] = widget;
console.log("widget change was called (dashboard)");
const dashboard = this.state.dashboard.set('widgets');
// Check if the height needs to be increased, the section may have shrunk if not
if (!this.increaseHeightWithWidget(widget)) {
this.computeHeightWithWidgets(dashboard.widgets);
}
this.setState({ dashboard }, callback);
AppDispatcher.dispatch({
type: 'widgets/start-edit',
token: this.state.sessionToken,
data: widget
});
}
@ -495,8 +492,8 @@ class Dashboard extends Component {
key={widgetKey}
data={widgets[widgetKey]}
simulation={this.state.simulation}
onWidgetChange={this.widgetChange}
onWidgetStatusChange={this.widgetStatusChange}
onWidgetChange={this.widgetChange.bind(this)}
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
editing={this.state.editing}
index={parseInt(widgetKey,10)}
grid={grid}
@ -518,6 +515,18 @@ class Dashboard extends Component {
/*
onWidgetChange={(w, k) => this.widgetChange(w, k)}
onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
const widgets = this.state.dashboard.get('widgets');
widgets[index] = widget;
const dashboard = this.state.dashboard.set('widgets');
// Check if the height needs to be increased, the section may have shrunk if not
if (!this.increaseHeightWithWidget(widget)) {
this.computeHeightWithWidgets(dashboard.widgets);
}
this.setState({ dashboard }, callback);
*/
let fluxContainerConverter = require('../common/FluxContainerConverter');

View file

@ -62,6 +62,7 @@ function collect(connect, monitor) {
class Dropzone extends React.Component {
render() {
var toolboxClass = classNames({
'box-content': true,
'toolbox-dropzone': true,

View file

@ -48,7 +48,7 @@ class WidgetArea extends React.Component {
}
render() {
const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
const absolutHeight = widget.y + widget.height;
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
@ -67,7 +67,7 @@ WidgetArea.propTypes = {
editing: PropTypes.bool,
grid: PropTypes.number,
defaultSimulationModel: PropTypes.string,
widgets: PropTypes.array,
//widgets: PropTypes.array,
onWidgetAdded: PropTypes.func
};

View file

@ -33,7 +33,6 @@ class WidgetContextMenu extends React.Component {
deleteWidget = event => {
if (this.props.onDelete != null) {
console.log("deleteWIget in wcm was called");
this.props.onDelete(this.props.widget, this.props.index);
}
};

View file

@ -38,7 +38,7 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control';
import EditWidgetHTMLContent from './edit-widget-html-content';
import EditWidgetParametersControl from './edit-widget-parameters-control';
export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels = null, handleChange) {
// Use a list to concatenate the controls according to the widget type
var DialogControls = [];

View file

@ -28,9 +28,6 @@ class EditWidgetSimulationControl extends Component {
this.state = {
widget: {
customProperties: {
simulationModel: ''
}
}
};
}

View file

@ -90,21 +90,21 @@ class EditableWidgetContainer extends React.Component {
const widget = this.props.widget;
const resizing = {
bottom: !widget.locked,
bottomLeft: !widget.locked,
bottomRight: !widget.locked,
left: !widget.locked,
right: !widget.locked,
top: !widget.locked,
topLeft: !widget.locked,
topRight: !widget.locked
bottom: !widget.isLocked,
bottomLeft: !widget.isLocked,
bottomRight: !widget.isLocked,
left: !widget.isLocked,
right: !widget.idLocked,
top: !widget.isLocked,
topLeft: !widget.isLocked,
topRight: !widget.isLocked
};
const gridArray = [ this.props.grid, this.props.grid ];
const widgetClasses = classNames({
'editing-widget': true,
'locked': widget.locked
'locked': widget.isLocked
});
return <Rnd
@ -112,7 +112,7 @@ class EditableWidgetContainer extends React.Component {
default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
minWidth={widget.minWidth}
minHeight={widget.minHeight}
lockAspectRatio={Boolean(widget.lockAspect)}
lockAspectRatio={Boolean(widget.isLocked)}
bounds={'parent'}
className={widgetClasses}
onResizeStart={this.borderWasClicked}
@ -123,11 +123,11 @@ class EditableWidgetContainer extends React.Component {
resizeGrid={gridArray}
zindex={widget.z}
enableResizing={resizing}
disableDragging={widget.locked}
disableDragging={widget.isLocked}
>
<Menu id={'widgetMenu' + this.props.index}>
{this.props.children}
</Menu>
</Rnd>;
}
}

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={this.props.index} onWidgetChange={this.props.onWidgetChange}>
{element}
</EditableWidgetContainer>;
}

View file

@ -25,8 +25,7 @@ import EditWidgetColorControl from '../edit-widget-color-control';
class WidgetLabel extends Component {
render() {
const style = {
const style = {
fontSize: this.props.widget.customProperties.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
};