Commit 9190cd52 authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

wip: edit widget panel now viewable

parent c6622850
......@@ -26,7 +26,6 @@ import Icon from "../common/icon";
class DashboardButtonGroup extends React.Component {
render() {
console.log("DashboardButtonGroup was called");
const buttonStyle = {
marginLeft: '8px'
};
......
......@@ -19,7 +19,7 @@
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
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}
/>
))}
</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} onDelete={this.deleteWidget} onChange={this.widgetChange} />
<WidgetContextMenu
key={widgetKey}
index={parseInt(widgetKey,10)}
widget={widgets[widgetKey]}
onEdit={this.editWidget.bind(this)}
onDelete={this.deleteWidget.bind(this)}
onChange={this.widgetChange} />
))}
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
......
......@@ -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 <Menu id={'widgetMenu'+ this.props.index}>
const ContextMenu = () => (
<Menu id={'widgetMenu'+ this.props.index}>
<Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
<Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
......@@ -108,14 +110,22 @@ class WidgetContextMenu extends React.Component {
<Item disabled={isLocked} onClick={this.lockWidget}>Lock</Item>
<Item disabled={isLocked === false} onClick={this.unlockWidget}>Unlock</Item>
</Menu>;
</Menu>
);
return <div>
<MenuProvider id={'widgetMenu'+ this.props.index} style={{ border: '1px solid purple', display: 'inline-block' }}>
{"Widget " + this.props.widget.name}
</MenuProvider>
<ContextMenu />
</div>
}
}
WidgetContextMenu.propTypes = {
index: PropTypes.number.isRequired,
widget: PropTypes.object.isRequired,
onEdit: PropTypes.func,
onEdit: PropTypes.func.isRequired,
onDelete: PropTypes.func,
onChange: PropTypes.func
};
......
......@@ -53,14 +53,14 @@ class EditWidgetColorControl extends Component {
}
render() {
console.log("edit widgetcolorcontrol was called");
return (
<FormGroup bsClass="color-control">
<FormGroup bsclass="color-control">
<Row>
<Col componentClass={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
<Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
{ this.props.label }
</Col>
<Col sm={10} bsClass='colors-column'>
<Col sm={10} bsclass='colors-column'>
{
EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
let colorStyle = {
......
This diff is collapsed.
......@@ -48,7 +48,7 @@ class EditWidgetOrientation extends Component {
return (
<FormGroup controlId="orientation">
<Row>
<Col componentClass={FormLabel} sm={2}>
<Col className={FormLabel} sm={2}>
Orientation
</Col>
<Col sm={10}>
......
......@@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
return (
<FormGroup controlId="signal">
<FormLabel>Signal</FormLabel>
<FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
<FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
{
signalsToRender.length === 0 ? (
<option disabled value style={{ display: 'none' }}>No signals available.</option>
......
......@@ -42,7 +42,7 @@ class EditWidgetSimulationControl extends Component {
return (
<FormGroup controlId="simulationModel">
<FormLabel>Simulation Model</FormLabel>
<FormControl componentClass="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
<FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
{
this.props.simulationModels.length === 0 ? (
<option disabled value style={{ display: 'none' }}> No simulation models available. </option>
......
......@@ -38,7 +38,7 @@ class EditWidgetTextControl extends Component {
render() {
return (
<FormGroup controlId={this.props.controlId} validationState={this.props.validate ? this.props.validate(this.props.controlId) : null}>
<FormGroup controlId={this.props.controlId} valid={this.props.validate ? this.props.validate(this.props.controlId) : null}>
<FormLabel>{this.props.label}</FormLabel>
<FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
<FormControl.Feedback />
......
......@@ -29,7 +29,7 @@ class EditWidgetTextSizeControl extends React.Component {
return (
<FormGroup controlId="textSize">
<FormLabel>Text size</FormLabel>
<FormControl componentClass="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
<FormControl as="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
{sizes.map((size, index) => (
<option key={index} value={size}>{size}</option>
))}
......
......@@ -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,
......
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