Commit 374437df authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

context menu now integrated into widget

parent b4343aaa
......@@ -57,14 +57,14 @@ class Dashboard extends Component {
prevState = {};
}
const sessionToken = LoginStore.getState().token;
let maxHeight = null;
let dashboard = Map();
let dashboards = DashboardStore.getState()
let rawDashboard = dashboards[props.match.params.dashboard - 1];
if (rawDashboard != null) {
if (rawDashboard) {
dashboard = Map(rawDashboard);
// convert widgets list to a dictionary to be able to reference widgets
......@@ -95,7 +95,7 @@ class Dashboard extends Component {
//ist das überhaupt nötiG??
/* if (this.state.dashboard.has('id') === false) {
AppDispatcher.dispatch({
type: 'dashboards/start-load',
......@@ -121,7 +121,7 @@ class Dashboard extends Component {
token: this.state.sessionToken
});
*/
}
let widgets = {};
......@@ -129,13 +129,14 @@ class Dashboard extends Component {
widgets[Dashboard.lastWidgetKey] = widget;
Dashboard.lastWidgetKey++;
}
let maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
let thisWidget = widgets[widgetKey];
let thisWidgetHeight = thisWidget.y + thisWidget.height;
return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar;
}, 0);
}
let simulationModels = [];
//if (prevState.simulation != null) {
......@@ -162,8 +163,8 @@ class Dashboard extends Component {
modalData: null,
modalIndex: null,
maxWidgetHeight: maxHeight,
dropZoneHeight: maxHeight +80,
maxWidgetHeight: maxHeight || null,
dropZoneHeight: maxHeight +80 || null,
};
}
......@@ -176,7 +177,7 @@ class Dashboard extends Component {
}
//!!!won't work anymore
componentWillMount() {
componentDidMount() {
//document.addEventListener('keydown', this.handleKeydown.bind(this));
if (this.state.dashboard.has('id') === false) {
AppDispatcher.dispatch({
......@@ -355,7 +356,6 @@ class Dashboard extends Component {
editWidget(widget, index){
console.log("dashboard editWidget was called widget: " + widget +" index: " + index);
this.setState({ editModal: true, modalData: widget, modalIndex: index });
};
......@@ -442,7 +442,7 @@ class Dashboard extends Component {
const widgets = this.state.dashboard.get('widgets');
const grid = this.state.dashboard.get('grid');
const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen });
let draggable = this.state.editing;
return <div className={boxClasses} >
<div className='section-header box-header'>
<div className="section-title">
......@@ -466,8 +466,30 @@ class Dashboard extends Component {
{this.state.editing &&
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={widgets} />
}
{!draggable?(
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
{widgets != null && Object.keys(widgets).map(widgetKey => (
<WidgetContextMenu
key={widgetKey}
index={parseInt(widgetKey,10)}
widget={widgets[widgetKey]}
onEdit={this.editWidget.bind(this)}
onDelete={this.deleteWidget.bind(this)}
onChange={this.widgetChange.bind(this)}
simulation={this.state.simulation}
onWidgetChange={this.widgetChange.bind(this)}
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
editing={this.state.editing}
grid={grid}
paused={this.state.paused}
/>
))}
</WidgetArea>
) : (
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
{widgets != null && Object.keys(widgets).map(widgetKey => (
<Widget
key={widgetKey}
......@@ -476,7 +498,7 @@ class Dashboard extends Component {
onWidgetChange={this.widgetChange}
onWidgetStatusChange={this.widgetStatusChange}
editing={this.state.editing}
index={widgetKey}
index={parseInt(widgetKey,10)}
grid={grid}
paused={this.state.paused}
/>
......@@ -484,17 +506,8 @@ class Dashboard extends Component {
))}
</WidgetArea>
{/* TODO: Create only one context menu for all widgets */}
{widgets != null && Object.keys(widgets).map(widgetKey => (
<WidgetContextMenu
key={widgetKey}
index={parseInt(widgetKey,10)}
widget={widgets[widgetKey]}
onEdit={this.editWidget.bind(this)}
onDelete={this.deleteWidget.bind(this)}
onChange={this.widgetChange.bind(this)} />
))}
)}
<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} />
......
......@@ -52,6 +52,7 @@ const dropzoneTarget = {
};
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
......
......@@ -22,6 +22,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Item, Separator, MenuProvider } from 'react-contexify';
import Widget from '../widget/widget';
class WidgetContextMenu extends React.Component {
editWidget = event => {
......@@ -92,7 +93,6 @@ class WidgetContextMenu extends React.Component {
};
render() {
const isLocked = this.props.widget.locked;
const ContextMenu = () => (
<Menu id={'widgetMenu'+ this.props.index}>
......@@ -115,7 +115,16 @@ class WidgetContextMenu extends React.Component {
return <div>
<MenuProvider id={'widgetMenu'+ this.props.index} style={{ border: '1px solid purple', display: 'inline-block' }}>
{"Widget " + this.props.widget.name}
<Widget
data={this.props.widget}
simulation={this.props.simulation}
onWidgetChange={this.props.onWidgetChange}
onWidgetStatusChange={this.props.onWidgetStatusChange}
editing={this.props.editing}
index={this.props.index}
grid={this.props.grid}
paused={this.props.paused}
/>
</MenuProvider>
<ContextMenu />
</div>
......
......@@ -55,7 +55,6 @@ class EditWidgetColorControl extends Component {
}
render() {
console.log("edit widgetcolorcontrol was called");
return (
<FormGroup bsclass="color-control">
<Row>
......
......@@ -40,8 +40,6 @@ 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"} label= {"UseMinMax"} checked={this.state.widget.customProperties[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
......
......@@ -69,7 +69,7 @@ class EditWidgetDialog extends React.Component {
}
handleChange(e) {
/*is this needed?
if (e.constructor === Array) {
// Every property in the array will be updated
console.log("####its an array!");
......@@ -82,7 +82,8 @@ class EditWidgetDialog extends React.Component {
}, {});
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
*/
}
if(e.target.type !== 'text'){
let changeObject = {};
if (e.target.id === 'lockAspect') {
......@@ -103,7 +104,8 @@ class EditWidgetDialog extends React.Component {
changeObject[e.target.id] = e.target.checked;
} else if (e.target.type === 'number') {
changeObject[e.target.id] = Number(e.target.value);
}
}
else {
changeObject[e.target.id] = e.target.value;
}
......@@ -148,14 +150,13 @@ class EditWidgetDialog extends React.Component {
}
//this.valid = name;
this.valid = true;
this.valid = name;
// return state to control
if (target === 'name') return name ? "success" : "error";
}
render() {
console.log("####edit widget render was called");
let controls = null;
if (this.props.widget) {
controls = CreateControls(
......
......@@ -28,7 +28,7 @@ import { Menu } from 'react-contexify';
class EditableWidgetContainer extends React.Component {
constructor(props) {
super(props);
this.rnd = null;
}
......@@ -88,7 +88,6 @@ class EditableWidgetContainer extends React.Component {
render() {
const widget = this.props.widget;
console.log("editable-widget-container was called");
const resizing = {
bottom: !widget.locked,
......
......@@ -24,6 +24,7 @@ import PropTypes from 'prop-types';
class WidgetContainer extends React.Component {
render() {
const containerStyle = {
width: Number(this.props.widget.width),
height: Number(this.props.widget.height),
......
......@@ -56,6 +56,7 @@ class Widget extends React.Component {
}
static calculateState(prevState, props) {
let simulatorData = {};
if (props.paused) {
......@@ -81,7 +82,6 @@ class Widget extends React.Component {
if (this.state.sessionToken == null) {
return;
}
console.log('widget componentwillmount called');
AppDispatcher.dispatch({
type: 'files/start-load',
token: this.state.sessionToken,
......@@ -125,7 +125,7 @@ class Widget extends React.Component {
simulationModel = model;
}
//all types are lowercase!!! at least slider is
if (widget.type === 'CustomAction') {
return <WidgetCustomAction widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
} else if (widget.type === 'Action') {
......@@ -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={parseInt(this.props.index,10)}>
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index}>
{element}
</EditableWidgetContainer>;
}
......
......@@ -25,6 +25,7 @@ import EditWidgetColorControl from '../edit-widget-color-control';
class WidgetLabel extends Component {
render() {
const style = {
fontSize: this.props.widget.customProperties.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
......
......@@ -95,6 +95,7 @@ class WidgetSlider extends Component {
}
render() {
let isVertical = this.props.widget.customProperties.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
let fields = {
name: this.props.widget.name,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment