1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

wip: edit widget panel now viewable

This commit is contained in:
Laura Fuentes Grau 2019-12-17 11:46:14 +01:00
parent c662285037
commit 9190cd52e9
11 changed files with 82 additions and 58 deletions

View file

@ -26,7 +26,6 @@ import Icon from "../common/icon";
class DashboardButtonGroup extends React.Component {
render() {
console.log("DashboardButtonGroup was called");
const buttonStyle = {
marginLeft: '8px'
};

View file

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

View file

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

View file

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

View file

@ -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(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
<EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => 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(
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => 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(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => 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(
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />,
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => 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(
<EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => 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(
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" 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(
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetAspectControl key={1} widget={widget} 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(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />,
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => 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(
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />,
<EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
@ -132,7 +132,7 @@ export default function createControls(widgetType = null, widget = null, session
);
break;
case 'Slider':
dialogControls.push(
DialogControls.push(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
<EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => 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(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => buttonBoundOnChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => 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(
<EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
);
break;
case 'Label':
dialogControls.push(
DialogControls.push(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
<EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
);
break;
case 'HTML':
dialogControls.push(
DialogControls.push(
<EditWidgetHTMLContent key={0} widget={widget} placeholder='HTML Code' controlId='content' handleChange={e => 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(
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => 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(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => inputBoundOnChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => 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;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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