context menu now integrated into widget

src/dashboard/dashboard.js

@@ -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} />
 
 

src/dashboard/dropzone.js

@@ -52,6 +52,7 @@ const dropzoneTarget = {
 };
 
 function collect(connect, monitor) {
+
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),

src/dashboard/widget-context-menu.js

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

src/widget/edit-widget-color-control.js

@@ -55,7 +55,6 @@ class EditWidgetColorControl extends Component {
   }
 
   render() {
-    console.log("edit widgetcolorcontrol was called");
     return (
       <FormGroup bsclass="color-control">
         <Row>

src/widget/edit-widget-min-max-control.js

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

src/widget/edit-widget.js

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

src/widget/editable-widget-container.js

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

src/widget/widget-container.js

@@ -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),

src/widget/widget.js

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

src/widget/widgets/label.js

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

src/widget/widgets/slider.js

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