From 9190cd52e9ba153bba78db6f429f0ddd14efdb70 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Tue, 17 Dec 2019 11:46:14 +0100 Subject: [PATCH] wip: edit widget panel now viewable --- src/dashboard/dashboard-button-group.js | 1 - src/dashboard/dashboard.js | 57 ++++++++++++-------- src/dashboard/widget-context-menu.js | 20 +++++-- src/widget/edit-widget-color-control.js | 8 +-- src/widget/edit-widget-control-creator.js | 38 ++++++------- src/widget/edit-widget-orientation.js | 2 +- src/widget/edit-widget-signal-control.js | 2 +- src/widget/edit-widget-simulation-control.js | 2 +- src/widget/edit-widget-text-control.js | 2 +- src/widget/edit-widget-text-size-control.js | 2 +- src/widget/edit-widget.js | 6 ++- 11 files changed, 82 insertions(+), 58 deletions(-) diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js index 7653ff0..756a09d 100644 --- a/src/dashboard/dashboard-button-group.js +++ b/src/dashboard/dashboard-button-group.js @@ -26,7 +26,6 @@ import Icon from "../common/icon"; class DashboardButtonGroup extends React.Component { render() { - console.log("DashboardButtonGroup was called"); const buttonStyle = { marginLeft: '8px' }; diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 9569e4d..b8ec62e 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React from 'react'; +import React, {Component} from 'react'; import { Container } from 'flux/utils'; import Fullscreenable from 'react-fullscreenable'; import classNames from 'classnames'; @@ -45,8 +45,8 @@ import AppDispatcher from '../common/app-dispatcher'; import 'react-contexify/dist/ReactContexify.min.css'; -class Dashboard extends React.Component { - +class Dashboard extends Component { + static lastWidgetKey = 0; static getStores() { return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, LoginStore, WidgetStore ]; @@ -66,7 +66,6 @@ class Dashboard extends React.Component { if (rawDashboard != null) { dashboard = Map(rawDashboard); - console.log("dashboard: " + dashboard); // convert widgets list to a dictionary to be able to reference widgets //let widgets = {}; @@ -159,9 +158,9 @@ class Dashboard extends React.Component { editing: prevState.editing || false, paused: prevState.paused || false, - editModal: prevState.editModal || false, - modalData: prevState.modalData || null, - modalIndex: prevState.modalIndex || null, + editModal: false, + modalData: null, + modalIndex: null, maxWidgetHeight: maxHeight, dropZoneHeight: maxHeight +80, @@ -269,7 +268,6 @@ class Dashboard extends React.Component { } reloadDashboard() { - console.log("Error: reloadDashboard was called"); // select dashboard by param id this.state.dashboards.forEach((tempDashboard) => { if (tempDashboard._id === this.props.match.params.dashboard) { @@ -294,7 +292,7 @@ class Dashboard extends React.Component { }); } - handleDrop = widget => { + handleDrop(widget) { const widgets = this.state.dashboard.get('widgets') || []; const widgetKey = this.getNewWidgetKey(); @@ -347,12 +345,13 @@ class Dashboard extends React.Component { } - editWidget = (widget, index) => { + editWidget(widget, index){ + console.log("dashboard editWidget was called widget: " + widget +" index: " + index); this.setState({ editModal: true, modalData: widget, modalIndex: index }); - } + }; - closeEdit = data => { + closeEdit(data){ if (data == null) { this.setState({ editModal: false }); @@ -368,21 +367,27 @@ class Dashboard extends React.Component { }; - deleteWidget = (widget, index) => { - const widgets = this.state.dashboard.get('widgets'); + deleteWidget(widget, index) { + /*const widgets = this.state.dashboard.get('widgets'); delete widgets[index]; const dashboard = this.state.dashboard.set('widgets'); - this.setState({ dashboard }); + this.setState({ dashboard });*/ + console.log("delete Widget in dashboard was called"); + AppDispatcher.dispatch({ + type: 'widgets/start-remove', + data: widget, + token: this.state.sessionToken + }); }; - startEditing = () => { + startEditing(){ this.setState({ editing: true }); }; - saveEditing = () => { + 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 ); @@ -401,23 +406,23 @@ class Dashboard extends React.Component { }); } - cancelEditing = () => { + cancelEditing() { this.setState({ editing: false, dasboard: {} }); this.reloadDashboard(); }; - setGrid = value => { + setGrid(value) { const dashboard = this.state.dashboard.set('grid', value); this.setState({ dashboard }); }; - pauseData = () => { + pauseData(){ this.setState({ paused: true }); }; - unpauseData = () => { + unpauseData() { this.setState({ paused: false }); }; @@ -463,13 +468,21 @@ class Dashboard extends React.Component { grid={grid} paused={this.state.paused} /> + ))} {/* TODO: Create only one context menu for all widgets */} {widgets != null && Object.keys(widgets).map(widgetKey => ( - + ))} + diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js index 9276d3c..c1cd082 100644 --- a/src/dashboard/widget-context-menu.js +++ b/src/dashboard/widget-context-menu.js @@ -21,7 +21,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Menu, Item, Separator } from 'react-contexify'; +import { Menu, Item, Separator, MenuProvider } from 'react-contexify'; class WidgetContextMenu extends React.Component { editWidget = event => { @@ -32,6 +32,7 @@ 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); } }; @@ -91,9 +92,10 @@ class WidgetContextMenu extends React.Component { }; render() { + const isLocked = this.props.widget.locked; - - return + const ContextMenu = () => ( + Edit Delete @@ -108,14 +110,22 @@ class WidgetContextMenu extends React.Component { Lock Unlock - ; + + ); + + return
+ + {"Widget " + this.props.widget.name} + + +
} } WidgetContextMenu.propTypes = { index: PropTypes.number.isRequired, widget: PropTypes.object.isRequired, - onEdit: PropTypes.func, + onEdit: PropTypes.func.isRequired, onDelete: PropTypes.func, onChange: PropTypes.func }; diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js index b54b666..8ec2bd3 100644 --- a/src/widget/edit-widget-color-control.js +++ b/src/widget/edit-widget-color-control.js @@ -53,14 +53,14 @@ class EditWidgetColorControl extends Component { } render() { - + console.log("edit widgetcolorcontrol was called"); return ( - + - + { this.props.label } - + { EditWidgetColorControl.ColorPalette.map( (color, idx ) => { let colorStyle = { diff --git a/src/widget/edit-widget-control-creator.js b/src/widget/edit-widget-control-creator.js index fdce7e5..f435085 100644 --- a/src/widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget-control-creator.js @@ -38,13 +38,13 @@ 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, handleChange) { // Use a list to concatenate the controls according to the widget type - var dialogControls = []; + var DialogControls = []; switch(widgetType) { case 'CustomAction': - dialogControls.push( + DialogControls.push( validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -52,7 +52,7 @@ export default function createControls(widgetType = null, widget = null, session ) break; case 'Action': - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} /> ) break; @@ -60,7 +60,7 @@ export default function createControls(widgetType = null, widget = null, session let valueBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: 0}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -72,7 +72,7 @@ export default function createControls(widgetType = null, widget = null, session let lampBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: 0}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, validateForm(id)} handleChange={e => handleChange(e)} />, @@ -84,7 +84,7 @@ export default function createControls(widgetType = null, widget = null, session let plotBoundOnChange = (e) => { handleChange([e, {target: {id: 'signals', value: []}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -93,7 +93,7 @@ export default function createControls(widgetType = null, widget = null, session ); break; case 'Table': - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, handleChange(e)} /> ); @@ -101,7 +101,7 @@ export default function createControls(widgetType = null, widget = null, session case 'Image': // Restrict to only image file types (MIME) let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image')); - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, handleChange(e)} /> ); @@ -110,7 +110,7 @@ export default function createControls(widgetType = null, widget = null, session let gaugeBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: ''}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -123,7 +123,7 @@ export default function createControls(widgetType = null, widget = null, session let plotTableBoundOnChange = (e) => { handleChange([e, {target: {id: 'preselectedSignals', value: []}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, handleChange(e)} />, @@ -132,7 +132,7 @@ export default function createControls(widgetType = null, widget = null, session ); break; case 'Slider': - dialogControls.push( + DialogControls.push( handleChange(e)} validate={id => validateForm(id)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -148,7 +148,7 @@ export default function createControls(widgetType = null, widget = null, session let buttonBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: 0}}]); } - dialogControls.push( + DialogControls.push( handleChange(e)} validate={id => validateForm(id)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => buttonBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />, @@ -158,27 +158,27 @@ export default function createControls(widgetType = null, widget = null, session ); break; case 'Box': - dialogControls.push( + DialogControls.push( validateForm(id)} handleChange={(e) => handleChange(e)} />, handleChange(e)} /> ); break; case 'Label': - dialogControls.push( + DialogControls.push( handleChange(e)} validate={id => validateForm(id)} />, handleChange(e)} />, handleChange(e)} /> ); break; case 'HTML': - dialogControls.push( + DialogControls.push( handleChange(e)} /> ); break; case 'Topology': // Restrict to only xml files (MIME) let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml')); - dialogControls.push( + DialogControls.push( validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} /> ); break; @@ -187,7 +187,7 @@ export default function createControls(widgetType = null, widget = null, session let inputBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: 0}}]); } - dialogControls.push( + DialogControls.push( validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => inputBoundOnChange(e)} />, validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} /> @@ -198,5 +198,5 @@ export default function createControls(widgetType = null, widget = null, session console.log('Non-valid widget type: ' + widgetType); } - return dialogControls; + return DialogControls; } diff --git a/src/widget/edit-widget-orientation.js b/src/widget/edit-widget-orientation.js index 88ee57c..41503ba 100644 --- a/src/widget/edit-widget-orientation.js +++ b/src/widget/edit-widget-orientation.js @@ -48,7 +48,7 @@ class EditWidgetOrientation extends Component { return ( - + Orientation diff --git a/src/widget/edit-widget-signal-control.js b/src/widget/edit-widget-signal-control.js index 05f3710..9591470 100644 --- a/src/widget/edit-widget-signal-control.js +++ b/src/widget/edit-widget-signal-control.js @@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component { return ( Signal - this.props.handleChange(e)}> + this.props.handleChange(e)}> { signalsToRender.length === 0 ? ( diff --git a/src/widget/edit-widget-simulation-control.js b/src/widget/edit-widget-simulation-control.js index c9ca495..a988b39 100644 --- a/src/widget/edit-widget-simulation-control.js +++ b/src/widget/edit-widget-simulation-control.js @@ -42,7 +42,7 @@ class EditWidgetSimulationControl extends Component { return ( Simulation Model - this.props.handleChange(e)}> + this.props.handleChange(e)}> { this.props.simulationModels.length === 0 ? ( diff --git a/src/widget/edit-widget-text-control.js b/src/widget/edit-widget-text-control.js index bbac6d2..c94887f 100644 --- a/src/widget/edit-widget-text-control.js +++ b/src/widget/edit-widget-text-control.js @@ -38,7 +38,7 @@ class EditWidgetTextControl extends Component { render() { return ( - + {this.props.label} this.props.handleChange(e)} /> diff --git a/src/widget/edit-widget-text-size-control.js b/src/widget/edit-widget-text-size-control.js index 655cdf5..949b1dd 100644 --- a/src/widget/edit-widget-text-size-control.js +++ b/src/widget/edit-widget-text-size-control.js @@ -29,7 +29,7 @@ class EditWidgetTextSizeControl extends React.Component { return ( Text size - this.props.handleChange(e)}> + this.props.handleChange(e)}> {sizes.map((size, index) => ( ))} diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js index 051feae..d78069d 100644 --- a/src/widget/edit-widget.js +++ b/src/widget/edit-widget.js @@ -24,10 +24,11 @@ import React from 'react'; import Dialog from '../common/dialogs/dialog'; -import createControls from './edit-widget-control-creator'; +import CreateControls from './edit-widget-control-creator'; class EditWidgetDialog extends React.Component { valid = true; + constructor(props) { super(props); @@ -121,9 +122,10 @@ class EditWidgetDialog extends React.Component { } render() { + console.log("####edit widget render was called"); let controls = null; if (this.props.widget) { - controls = createControls( + controls = CreateControls( this.props.widget.type, this.state.temporal, this.props.sessionToken,