Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Add color to label widget

Browse source 
Remove name edit control from default dialog
Remove text from plots
This commit is contained in:
Markus Grigull 2017-08-01 14:29:29 +02:00
parent 69c835cecb
commit 0ffae6d373
11 changed files with 40 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/dialog/edit-widget-control-creator.js
View file

@ -43,7 +43,8 @@ export default function createControls(widgetType = null, widget = null, session
}
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />
)
}
break;
@ -106,7 +107,9 @@ export default function createControls(widgetType = null, widget = null, session
break;
case 'Label':
dialogControls.push(
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />
<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;
default:

9
src/components/dialog/edit-widget-text-control.js
View file

@ -37,15 +37,14 @@ class EditWidgetTextControl extends Component {
}
render() {
return (
<FormGroup controlId={ this.props.controlId }>
<ControlLabel> { this.props.label } </ControlLabel>
<FormControl type="text" placeholder={ this.props.placeholder } value={ this.state.widget[this.props.controlId] || '' } onChange={(e) => this.props.handleChange(e)} />
<FormGroup controlId={this.props.controlId} validationState={this.props.validate(this.props.controlId)}>
<ControlLabel>{this.props.label}</ControlLabel>
<FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
);
}
}
export default EditWidgetTextControl;
export default EditWidgetTextControl;

7
src/components/dialog/edit-widget.js
View file

@ -20,7 +20,7 @@
******************************************************************************/
import React, { Component, PropTypes } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
//import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import Dialog from './dialog';
@ -124,7 +124,6 @@ class EditWidgetDialog extends Component {
}
render() {
let controls = null;
if (this.props.widget) {
controls = createControls(
@ -140,11 +139,11 @@ class EditWidgetDialog extends Component {
return (
<Dialog show={this.props.show} title="Edit Widget" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form encType='multipart/form-data'>
<FormGroup controlId="name" validationState={this.validateForm('name')}>
{/*<FormGroup controlId="name" validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
</FormGroup>*/}
{ controls || '' }
</form>
</Dialog>

9
src/components/widget-factory.js
View file

@ -33,6 +33,7 @@ class WidgetFactory {
widget.minHeight = 20;
widget.width = 120;
widget.height = 70;
widget.textSize = 16;
break;
case 'Plot':
widget.simulator = defaultSimulator;
@ -52,9 +53,13 @@ class WidgetFactory {
widget.height = 200;
break;
case 'Label':
widget.minWidth = 70;
widget.minWidth = 20;
widget.minHeight = 20;
widget.textSize = 18;
widget.width = 100;
widget.height = 35;
widget.name = 'Label';
widget.textSize = 32;
widget.fontColor = 0;
break;
case 'PlotTable':
widget.simulator = defaultSimulator;

9
src/components/widget-label.js
View file

@ -21,11 +21,18 @@
import React, { Component } from 'react';
import EditWidgetColorControl from './dialog/edit-widget-color-control';
class WidgetLabel extends Component {
render() {
const style = {
fontSize: this.props.widget.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.fontColor]
};
return (
<div className="label-widget">
<h4 style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</h4>
<h4 style={style}>{this.props.widget.name}</h4>
</div>
);
}

4
src/components/widget-plot-table.js
View file

@ -141,8 +141,6 @@ class WidgetPlotTable extends Component {
return (
<div className="plot-table-widget" ref="wrapper">
<h4>{this.props.widget.name}</h4>
<div className="content">
<div className="table-plot-row">
<div className="widget-table">
@ -159,7 +157,7 @@ class WidgetPlotTable extends Component {
data={simulatorData}
time={this.props.widget.time}
width={this.props.widget.width - 100}
height={this.props.widget.height - 100}
height={this.props.widget.height - 55}
/>
</div>
</div>

4
src/components/widget-plot.js
View file

@ -52,12 +52,10 @@ class WidgetPlot extends React.Component {
return (
<div className="plot-widget" ref="wrapper">
<h4>{this.props.widget.name}</h4>
<div className="widget-plot">
<Plot
data={simulatorData}
height={this.props.widget.height - 100}
height={this.props.widget.height - 55}
width={this.props.widget.width - 20}
time={this.props.widget.time}
/>

2
src/components/widget-table.js
View file

@ -70,8 +70,6 @@ class WidgetTable extends Component {
render() {
return (
<div className="table-widget">
<h4>{this.props.widget.name}</h4>
<Table data={this.state.rows}>
<TableColumn title="Signal" dataKey="name" width={120} />
<TableColumn title="Value" dataKey="value" />

2
src/components/widget-value.js
View file

@ -53,7 +53,7 @@ class WidgetValue extends Component {
var value_to_render = Number(this.state.value);
return (
<div className="single-value-widget">
<strong>{this.props.widget.name}</strong> <span>{ Number.isNaN(value_to_render)? NaN : value_to_render.toFixed(3) } </span>
<strong style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</strong> <span style={{ fontSize: this.props.widget.textSize + 'px' }}>{ Number.isNaN(value_to_render)? NaN : value_to_render.toFixed(3) } </span>
</div>
);
}

2
src/containers/widget.js
View file

@ -156,14 +156,12 @@ class Widget extends Component {
element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
} else if (widget.type === 'Plot') {
element = <WidgetPlot widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
borderedWidget = true;
} else if (widget.type === 'Table') {
element = <WidgetTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
} else if (widget.type === 'Label') {
element = <WidgetLabel widget={widget} />
} else if (widget.type === 'PlotTable') {
element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
borderedWidget = true;
} else if (widget.type === 'Image') {
element = <WidgetImage widget={widget} files={this.state.files} token={this.state.sessionToken} />
} else if (widget.type === 'Button') {

13
src/styles/widgets.css
View file

@ -20,7 +20,7 @@
******************************************************************************/
.widget {
}
.border {
@ -300,11 +300,14 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
/* End Plots */
.single-value-widget {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
word-wrap: break-word;
}
.single-value-widget > * {
@ -466,6 +469,10 @@ div[class*="-widget"] label {
/* End label widget */
/* Begin table widget */
.table-widget table {
background-color: #fff;
}
.table-widget td, .table-widget th {
text-align: center;
}