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

added new way to change Gauge colorzones #251

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-10-16 21:31:15 +02:00
parent e8fca667dc
commit 91be57fc06
2 changed files with 52 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/widget/edit-widget/edit-widget-color-zones-control.js
View file

@ -33,7 +33,7 @@ class EditWidgetColorZonesControl extends React.Component {
}
},
selectedZone: null,
selectedIndex: 0,
selectedIndex: null,
showColorPicker: false,
originalColor: null,
minValue: 0,
@ -61,22 +61,28 @@ class EditWidgetColorZonesControl extends React.Component {
}
}
this.setState({ widget });
this.setState({ widget, selectedZone: null, selectedIndex: null });
this.sendEvent(widget);
}
removeZones = () => {
// remove zones
const widget = this.state.widget;
let temp = this.state.widget;
/*this.state.selectedZones.forEach(row => {
widget.customProperties.zones.splice(row, 1);
});
temp.customProperties.zones.splice(this.state.selectedIndex, 1);
this.setState({ selectedZones: [], widget });*/
if(temp.customProperties.zones.length > 0){
let length = temp.customProperties.zones.length
for(let i= 0 ; i < length; i++){
temp.customProperties.zones[i].min = i* 100/length;
temp.customProperties.zones[i].max = (i+1)* 100/length;
}
}
this.setState({widget: temp,selectedZone: null, selectedIndex: null});
this.sendEvent(widget);
}
changeCell = (event, row, column) => {
@ -97,8 +103,12 @@ class EditWidgetColorZonesControl extends React.Component {
}
editColorZone = (index) => {
if(this.state.selectedIndex !== index){
this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max});
}
else{
this.setState({selectedZone: null, selectedIndex: null});
}
}
openColorPicker = () =>{
@ -119,8 +129,35 @@ class EditWidgetColorZonesControl extends React.Component {
}
}
handleMinMaxChange = () => {
}
handleMinChange = (e) => {
if(e.target.value < 0) return;
this.setState({minValue: e.target.value});
let temp = this.state.widget;
temp.customProperties.zones[this.state.selectedIndex]['min'] = e.target.value;
if(this.state.selectedIndex !== 0){
temp.customProperties.zones[this.state.selectedIndex - 1]['max'] = e.target.value
}
this.setState({ widget: temp });
}
handleMaxChange = (e) => {
if(e.target.value > 100) return;
this.setState({maxValue: e.target.value});
let temp = this.state.widget;
temp.customProperties.zones[this.state.selectedIndex]['max'] = e.target.value;
if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){
temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value
}
this.setState({ widget: temp });
}
sendEvent(widget) {
// create event
@ -194,7 +231,7 @@ class EditWidgetColorZonesControl extends React.Component {
step="any"
placeholder="Min"
value={this.state.minValue}
onChange={e => this.handleMinMaxChange(e)} />
onChange={e => this.handleMinChange(e)} />
</td>
<td>
Max:
@ -203,11 +240,12 @@ class EditWidgetColorZonesControl extends React.Component {
step="any"
placeholder="Max"
value={ this.state.maxValue}
onChange={e => this.handleMinMaxChange(e)} />
onChange={e => this.handleMaxChange(e)} />
</td>
</tr>
</tbody>
</Table>
<Button onClick={this.removeZones}><Icon size='xs' icon="trash-alt" /></Button>
</Collapse>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />

1
src/widget/widgets/table.js
View file

@ -45,7 +45,6 @@ class WidgetTable extends Component {
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) {
console.log("Table: sig", sig)
let data = props.data[icID].output.values[sig.index-1];
rows.push({
name: sig.name,