mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
add case distinguish for customProperty to checkbox and min max edits; apply case distinguish in handeChange function of edit-widget
This commit is contained in:
parent
39e8366108
commit
0de876f608
4 changed files with 66 additions and 31 deletions
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 ;
|
||||
|
|
Loading…
Add table
Reference in a new issue