mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Removed plot-table widget as it is redundant to plot widget #218
This commit is contained in:
Sonja Happ
parent
c4781b86f1
commit
5844efdbbb
8 changed files with 1 additions and 227 deletions
|
|
@ -30,7 +30,6 @@ describe('edit widget control creator', () => {
|
|||
{ args: { widgetType: 'Table' }, result: { controlNumber: 2, controlTypes: [EditWidgetCheckboxControl] } },
|
||||
{ args: { widgetType: 'Image' }, result: { controlNumber: 2, controlTypes: [EditFileWidgetControl, EditWidgetAspectControl] } },
|
||||
{ args: { widgetType: 'Gauge' }, result: { controlNumber: 6, controlTypes: [EditWidgetTextControl, EditWidgetSignalControl, EditWidgetCheckboxControl, EditWidgetColorZonesControl, EditWidgetMinMaxControl] } },
|
||||
{ args: { widgetType: 'PlotTable' }, result: { controlNumber: 5, controlTypes: [EditWidgetSignalsControl, EditWidgetTextControl, EditWidgetTimeControl, EditWidgetMinMaxControl] } },
|
||||
{ args: { widgetType: 'Slider' }, result: { controlNumber: 9, controlTypes: [EditWidgetTextControl, EditWidgetOrientation, EditWidgetSignalControl, EditWidgetCheckboxControl, EditWidgetCheckboxControl, EditWidgetMinMaxControl, EditWidgetNumberControl, EditWidgetNumberControl] } },
|
||||
{ args: { widgetType: 'Button' }, result: { controlNumber: 6, controlTypes: [EditWidgetTextControl, EditWidgetSignalControl, EditWidgetCheckboxControl, EditWidgetNumberControl, EditWidgetNumberControl] } },
|
||||
{ args: { widgetType: 'Box' }, result: { controlNumber: 2, controlTypes: [EditWidgetColorControl, EditWidgetColorControl] } },
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ class IcDataDataManager {
|
|||
if (socket == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log("Sending to IC", identifier, "message: ", message);
|
||||
const data = this.messageToBuffer(message);
|
||||
socket.send(data);
|
||||
|
||||
|
|
|
|||
|
|
@ -115,65 +115,6 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
|
|||
|
||||
/* End edit menu: Colors */
|
||||
|
||||
/* PlotTable widget */
|
||||
.plot-table-widget, .plot-widget, .value-widget, .image-widget, .label-widget {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.plot-table-widget {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.plot-table-widget .content {
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-plot-row {
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.plot-table-widget .widget-table {
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
flex-basis: 90px;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.plot-table-widget small {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plot-table-widget .checkbox label {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.plot-table-widget .btn {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.plot-table-widget input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
/* End PlotTable Widget */
|
||||
|
||||
/* Plot Widget */
|
||||
.plot-widget {
|
||||
display: -webkit-flex;
|
||||
|
|
@ -438,8 +379,3 @@ div[class*="-widget"] label {
|
|||
border: 2px solid;
|
||||
}
|
||||
/* End box widget */
|
||||
|
||||
.plot-table-widget .widget-plot {
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,14 +97,6 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
<EditWidgetMinMaxControl key={4} widget={widget} controlId="customProperties.value" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'PlotTable':
|
||||
DialogControls.push(
|
||||
<EditWidgetSignalsControl key={0} widget={widget} controlId={'signalIDs'} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} widget={widget} controlId={'customProperties.ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTimeControl key={2} widget={widget} controlId={'customProperties.time'} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetMinMaxControl key={3} widget={widget} controlId="customProperties.y" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Slider':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
|
|
|
|||
|
|
@ -105,17 +105,6 @@ class WidgetFactory {
|
|||
widget.customProperties.fontColor = 0;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
break;
|
||||
case 'PlotTable':
|
||||
widget.customProperties.ylabel = '';
|
||||
widget.minWidth = 200;
|
||||
widget.minHeight = 100;
|
||||
widget.width = 600;
|
||||
widget.height = 300;
|
||||
widget.customProperties.time = 60;
|
||||
widget.customProperties.yMin = 0;
|
||||
widget.customProperties.yMax = 10;
|
||||
widget.customProperties.yUseMinMax = false;
|
||||
break;
|
||||
case 'Image':
|
||||
widget.minWidth = 20;
|
||||
widget.minHeight = 20;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ class WidgetToolbox extends React.Component {
|
|||
<ToolboxItem name='Table' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='Label' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='Image' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='PlotTable' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='Button' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='NumberInput' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='Slider' type='widget' icon = 'plus'/>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ import WidgetValue from './widgets/value';
|
|||
import WidgetPlot from './widgets/plot';
|
||||
import WidgetTable from './widgets/table';
|
||||
import WidgetLabel from './widgets/label';
|
||||
import WidgetPlotTable from './widgets/plot-table';
|
||||
import WidgetImage from './widgets/image';
|
||||
import WidgetButton from './widgets/button';
|
||||
import WidgetInput from './widgets/input';
|
||||
|
|
@ -170,16 +169,6 @@ class Widget extends React.Component {
|
|||
return <WidgetLabel
|
||||
widget={widget}
|
||||
/>
|
||||
} else if (widget.type === 'PlotTable') {
|
||||
return <WidgetPlotTable
|
||||
widget={widget}
|
||||
data={this.state.icData}
|
||||
signals={this.state.signals}
|
||||
icIDs={this.state.icIDs}
|
||||
editing={this.props.editing}
|
||||
onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index)}
|
||||
paused={this.props.paused}
|
||||
/>
|
||||
} else if (widget.type === 'Image') {
|
||||
return <WidgetImage
|
||||
widget={widget}
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
/**
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormGroup } from 'react-bootstrap';
|
||||
import Plot from '../widget-plot/plot';
|
||||
import PlotLegend from '../widget-plot/plot-legend';
|
||||
|
||||
class WidgetPlotTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
signals: [],
|
||||
data: []
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state){
|
||||
let intersection = []
|
||||
let data = [];
|
||||
let signalID, sig;
|
||||
for (signalID of props.widget.signalIDs) {
|
||||
for (sig of props.signals) {
|
||||
if (signalID === sig.id) {
|
||||
intersection.push(sig);
|
||||
|
||||
// sig is a selected signal, get data
|
||||
// determine ID of infrastructure component related to signal (via config)
|
||||
let icID = props.icIDs[sig.id]
|
||||
|
||||
// distinguish between input and output signals
|
||||
if (sig.direction === "out") {
|
||||
if (props.data[icID] != null && props.data[icID].output != null && props.data[icID].output.values != null) {
|
||||
if (props.data[icID].output.values[sig.index-1] !== undefined) {
|
||||
data.push(props.data[icID].output.values[sig.index-1]);
|
||||
}
|
||||
}
|
||||
} else if (sig.direction === "in") {
|
||||
if (props.data[icID] != null && props.data[icID].input != null && props.data[icID].input.values != null) {
|
||||
if (props.data[icID].input.values[sig.index-1] !== undefined) {
|
||||
data.push(props.data[icID].input.values[sig.index-1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
} // sig is selected signal
|
||||
} // loop over props.signals
|
||||
} // loop over selected signals
|
||||
|
||||
return {signals: intersection, data: data}
|
||||
}
|
||||
|
||||
// updateSignalSelection(signal, checked) {
|
||||
// // Update the selected signals and propagate to parent component
|
||||
// var new_widget = Object.assign({}, this.props.widget, {
|
||||
// checkedSignals: checked ? this.state.signals.concat(signal) : this.state.signals.filter((idx) => idx !== signal)
|
||||
// });
|
||||
// this.props.onWidgetChange(new_widget);
|
||||
// }
|
||||
|
||||
render() {
|
||||
let checkBoxes = [];
|
||||
|
||||
let showLegend = false;
|
||||
if (this.state.signals.length > 0) {
|
||||
|
||||
showLegend = true;
|
||||
|
||||
// Create checkboxes using the signal indices from component config
|
||||
// checkBoxes = this.state.signals.map((signal) => {
|
||||
// let checked = this.state.signals.indexOf(signal) > -1;
|
||||
// let chkBxClasses = classNames({
|
||||
// 'btn': true,
|
||||
// 'btn-default': true,
|
||||
// 'active': checked
|
||||
// });
|
||||
// return <FormCheck key={signal.index} className={chkBxClasses} checked={checked} disabled={this.props.editing}
|
||||
// onChange={(e) => this.updateSignalSelection(signal, e.target.checked)}> {signal.name} </FormCheck>
|
||||
// });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="plot-table-widget" ref="wrapper">
|
||||
<div className="content">
|
||||
<div className="table-plot-row">
|
||||
<div className="widget-table">
|
||||
{checkBoxes.length > 0 ? (
|
||||
<FormGroup className="btn-group-vertical">
|
||||
{checkBoxes}
|
||||
</FormGroup>
|
||||
) : (<small>Use edit menu to change selected signals.</small>)
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="widget-plot">
|
||||
<Plot
|
||||
data={this.state.data}
|
||||
time={this.props.widget.customProperties.time}
|
||||
width={this.props.widget.width - 100}
|
||||
height={this.props.widget.height - 55}
|
||||
yMin={this.props.widget.customProperties.yMin}
|
||||
yMax={this.props.widget.customProperties.yMax}
|
||||
yUseMinMax={this.props.widget.customProperties.yUseMinMax}
|
||||
paused={this.props.paused}
|
||||
yLabel={this.props.widget.customProperties.ylabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{showLegend ? (
|
||||
<PlotLegend signals={this.state.signals}/>) : (<div></div>)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default WidgetPlotTable;
|
||||
Loading…
Add table
Reference in a new issue