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:
parent
374437dfad
commit
9516ced50c
9 changed files with 40 additions and 35 deletions
|
@ -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');
|
||||
|
|
|
@ -62,6 +62,7 @@ function collect(connect, monitor) {
|
|||
|
||||
class Dropzone extends React.Component {
|
||||
render() {
|
||||
|
||||
var toolboxClass = classNames({
|
||||
'box-content': true,
|
||||
'toolbox-dropzone': true,
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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 = [];
|
||||
|
||||
|
|
|
@ -28,9 +28,6 @@ class EditWidgetSimulationControl extends Component {
|
|||
|
||||
this.state = {
|
||||
widget: {
|
||||
customProperties: {
|
||||
simulationModel: ''
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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]
|
||||
};
|
||||
|
|
Loading…
Add table
Reference in a new issue