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

add case distinguish for customProperty to checkbox and min max edits; apply case distinguish in handeChange function of edit-widget

Browse source
This commit is contained in:
Sonja Happ 2020-03-18 16:25:36 +01:00
parent 39e8366108
commit 0de876f608
4 changed files with 66 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/widget/edit-widget/edit-widget-checkbox-control.js
View file

@ -27,11 +27,7 @@ class EditWidgetCheckboxControl extends React.Component {
super(props);
this.state = {
widget: {
customProperties:{
}
}
widget: props.widget
};
}
@ -42,8 +38,21 @@ class EditWidgetCheckboxControl extends React.Component {
}
render() {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length ===1){
isCustomProperty = false;
}
return <FormGroup>
<FormCheck id={this.props.controlId} label={this.props.controlId} checked={this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
<FormCheck
id={this.props.controlId}
label={this.props.text}
checked={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
onChange={e => this.props.handleChange(e)}>
</FormCheck>
</FormGroup>;
}
}

12
src/widget/edit-widget/edit-widget-control-creator.js
View file

@ -71,7 +71,7 @@ export default function CreateControls(widgetType = null, widget = null, session
<EditWidgetTimeControl key={0} widget={widget} handleChange={(e) => handleChange(e)} />,
<EditWidgetSignalsControl key={1} widget={widget} controlId={'signalIDs'} signals={signals} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextControl key={2} widget={widget} controlId={'customProperties.ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} handleChange={(e) => handleChange(e)} />,
<EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
<EditWidgetMinMaxControl key={3} widget={widget} controlId="customProperties.y" handleChange={e => handleChange(e)} />
);
break;
case 'Table':
@ -82,9 +82,9 @@ export default function CreateControls(widgetType = null, widget = null, session
break;
case 'Image':
// Restrict to only image file types (MIME)
let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
//let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
DialogControls.push(
<EditImageWidgetControl key={0} widget={widget} sessionToken={sessionToken} files={imageControlFiles} handleChange={(e) => handleChange(e)} />,
<EditImageWidgetControl key={0} widget={widget} controlId={"customProperties.file"} sessionToken={sessionToken} files={files} handleChange={(e) => handleChange(e)} />,
<EditWidgetAspectControl key={1} widget={widget} controlId={"customProperties.lockAspect"} handleChange={e => handleChange(e)} />
);
break;
@ -102,7 +102,7 @@ export default function CreateControls(widgetType = null, widget = null, session
<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} handleChange={(e) => handleChange(e)} />,
<EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
<EditWidgetMinMaxControl key={3} widget={widget} controlId="customProperties.y" handleChange={e => handleChange(e)} />
);
break;
case 'Slider':
@ -146,9 +146,9 @@ export default function CreateControls(widgetType = null, widget = null, session
break;
case 'Topology':
// Restrict to only xml files (MIME)
let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
//let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
DialogControls.push(
<EditImageWidgetControl key={0} widget={widget} sessionToken={sessionToken} files={topologyControlFiles} handleChange={(e) => handleChange(e)} />
<EditImageWidgetControl key={0} widget={widget} controlId={"customProperties.file"} sessionToken={sessionToken} files={files} handleChange={(e) => handleChange(e)} />
);
break;

48
src/widget/edit-widget/edit-widget-min-max-control.js
View file

@ -1,8 +1,4 @@
/**
* File: edit-widget-min-max-control.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 30.08.2017
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
@ -27,12 +23,9 @@ class EditWidgetMinMaxControl extends React.Component {
super(props);
this.state = {
widget: {
customProperties:{
}
}
widget: props.widget
}
}
static getDerivedStateFromProps(props, state){
@ -42,18 +35,49 @@ class EditWidgetMinMaxControl extends React.Component {
}
render() {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
console.log("min max edit: ", isCustomProperty);
return <FormGroup>
<FormLabel>{this.props.label}</FormLabel>
<FormCheck id={this.props.controlId + "UseMinMax"} label= {"UseMinMax"} checked={this.state.widget.customProperties[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
<FormCheck
type={'checkbox'}
id={this.props.controlId + "UseMinMax"}
label= {"UseMinMax"}
checked={isCustomProperty ? this.state.widget[parts[0]][parts[1]+"UseMinMax"] ==='on' : this.state.widget[this.props.controlId + "UseMinMax"] === 'on'}
onChange={e => this.props.handleChange(e)}>
</FormCheck>
<Table>
<tbody>
<tr>
<td>
Min: <FormControl type="number" step="any" id={this.props.controlId + "Min"} disabled={!this.state.widget.customProperties[this.props.controlId + "UseMinMax"]} placeholder="Minimum value" value={this.state.widget.customProperties[this.props.controlId + 'Min']} onChange={e => this.props.handleChange(e)} />
Min:
<FormControl
type="number"
step="any"
id={this.props.controlId + "Min"}
disabled={isCustomProperty ? !(this.state.widget[parts[0]][parts[1] + "UseMinMax"] === 'on'): !(this.state.widget[this.props.controlId + "UseMinMax"] === 'on')}
placeholder="Minimum value"
value={isCustomProperty ? this.state.widget[parts[0]][parts[1] + 'Min'] : this.state.widget[this.props.controlId + "Min"]}
onChange={e => this.props.handleChange(e)} />
</td>
<td>
Max: <FormControl type="number" step="any" id={this.props.controlId + "Max"} disabled={!this.state.widget.customProperties[this.props.controlId + "UseMinMax"]} placeholder="Maximum value" value={this.state.widget.customProperties[this.props.controlId + 'Max']} onChange={e => this.props.handleChange(e)} />
Max:
<FormControl
type="number"
step="any"
id={this.props.controlId + "Max"}
disabled={isCustomProperty ? !(this.state.widget[parts[0]][parts[1] + "UseMinMax"] === 'on'): !(this.state.widget[this.props.controlId + "UseMinMax"] === 'on')}
placeholder="Maximum value"
value={ isCustomProperty ? this.state.widget[parts[0]][parts[1] + 'Max'] : this.state.widget[this.props.controlId + "Max"]}
onChange={e => this.props.handleChange(e)} />
</td>
</tr>
</tbody>

16
src/widget/edit-widget/edit-widget.js
View file

@ -69,14 +69,14 @@ class EditWidgetDialog extends React.Component {
let parts = e.target.id.split('.');
let changeObject = this.state.temporal;
let customProperty = true;
if (parts.length === 1 && this.state.temporal[e.target.id]) {
if (parts.length === 1) {
// not a customProperty
customProperty = false;
}
if (e.target.id === 'lockAspect') {
//not a customProperty
changeObject[e.target.id] = e.target.checked;
customProperty ? changeObject[parts[0]][parts[1]] = e.target.checked : changeObject[e.target.id] = e.target.checked;
// correct image aspect if turned on
if (e.target.checked) {
@ -84,19 +84,21 @@ class EditWidgetDialog extends React.Component {
}
} else if (e.target.id === 'file') {
//not a customProperty
changeObject.customProperties[e.target.id] = e.target.value;
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value;
// get file and update size (if it's an image)
if ('lockAspect' in this.state.temporal && this.state.temporal.lockAspect) {
// TODO this if condition requires changes to work!!!
changeObject = this.assignAspectRatio(changeObject, e.target.value);
}
} else if (e.target.type === 'number') {
customProperty ? changeObject.customProperties[e.target.id] = Number(e.target.value) : changeObject[e.target.id] = Number(e.target.value);
customProperty ? changeObject[parts[0]][parts[1]] = Number(e.target.value) : changeObject[e.target.id] = Number(e.target.value);
} else if(e.target.id === 'name'){
if(changeObject[e.target.id] != null){
changeObject[e.target.id] = e.target.value;
if(customProperty ? (changeObject[parts[0]][parts[1]] != null) : (changeObject[e.target.id] != null)){
customProperty ? changeObject[parts[0]][parts[1]]= e.target.value : changeObject[e.target.id] = e.target.value;
} else{
changeObject[e.target.id] = 'default';
customProperty ? changeObject[parts[0]][parts[1]]= 'default' : changeObject[e.target.id] = 'default';
}
} else {
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;