Commit 33fb7381 authored by Sonja Happ's avatar Sonja Happ

Merge branch 'develop' of git.rwth-aachen.de:acs/public/villas/web into develop

parents 309084f7 edfae8f0
...@@ -186,17 +186,6 @@ class Dashboard extends Component { ...@@ -186,17 +186,6 @@ class Dashboard extends Component {
}); });
/*let widgets = [];
widgets = this.state.dashboard.get('widgets');
const widgetKey = Dashboard.getNewWidgetKey();
widgets[widgetKey] = widget;
const dashboard = this.state.dashboard.set('widgets',widgets);
// this.increaseHeightWithWidget(widget);
this.setState({ dashboard });*/
}; };
...@@ -206,11 +195,9 @@ class Dashboard extends Component { ...@@ -206,11 +195,9 @@ class Dashboard extends Component {
} }
widgetChange(widget, index, callback = null){ widgetChange(widget, index, callback = null){
let temp = this.state.widgetChangeData;
let tempChanges = this.state.widgetChangeData; temp.push(widget);
tempChanges.push(widget); this.setState({widgetChangeData: temp});
this.setState({ widgetChangeData: tempChanges})
} }
...@@ -294,7 +281,7 @@ class Dashboard extends Component { ...@@ -294,7 +281,7 @@ class Dashboard extends Component {
data: widget data: widget
}); });
}); });
this.setState({ editing: false }); this.setState({ editing: false, widgetChangeData: [], widgetAddData: [] });
}; };
saveChanges() { saveChanges() {
...@@ -312,21 +299,28 @@ class Dashboard extends Component { ...@@ -312,21 +299,28 @@ class Dashboard extends Component {
cancelEditing() { cancelEditing() {
//raw widget has no id -> cannot be deleted in its original form //raw widget has no id -> cannot be deleted in its original form
/* let temp = [];
this.state.widgetAddData.forEach( widget => { this.state.widgetAddData.forEach(rawWidget => {
this.state.widgets.forEach(widget => {
if(widget.y === rawWidget.y && widget.x === rawWidget.x && widget.type === rawWidget.type){
temp.push(widget);
}
})
})
temp.forEach( widget => {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'widgets/start-remove', type: 'widgets/start-remove',
data: widget, data: widget,
token: this.state.sessionToken token: this.state.sessionToken
}); });
}); */ });
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'widgets/start-load', type: 'widgets/start-load',
token: this.state.sessionToken, token: this.state.sessionToken,
param: '?dashboardID=1' param: '?dashboardID=1'
}); });
this.setState({ editing: false, widgetChangeData: [], widgetAddData: [] }); this.setState({ editing: false, widgetChangeData: [], widgetAddData: []});
}; };
......
...@@ -249,6 +249,7 @@ span.signal-unit::after { ...@@ -249,6 +249,7 @@ span.signal-unit::after {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex: none;
word-wrap: break-word; word-wrap: break-word;
} }
......
...@@ -28,20 +28,20 @@ const dropzoneTarget = { ...@@ -28,20 +28,20 @@ const dropzoneTarget = {
position.y -= dropzoneRect.top; position.y -= dropzoneRect.top;
// Z-Index is one more the top most children // Z-Index is one more the top most children
let foundZ = props.children.reduce( (maxZ, currentChildren) => { let foundZ = props.widgets.reduce( (maxZ, currentWidget) => {
if (currentChildren.props != null) { if (currentWidget != null) {
// Is there a simpler way? Is not easy to expose a getter in a Container.create(Component) // Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
let widget = currentChildren.props.data; if (currentWidget.z > maxZ) {
if (widget && widget.z) { return currentWidget.z;
if (widget.z > maxZ) {
return widget.z;
} }
}
} }
return maxZ; return maxZ;
}, 0); }, 0)
position.z = foundZ >= 100? foundZ : ++foundZ; position.z = foundZ >= 100? foundZ : foundZ += 10;
if(monitor.getItem().name === "Box"){
position.z = 0;
}
props.onDrop(monitor.getItem(), position); props.onDrop(monitor.getItem(), position);
} }
......
...@@ -129,7 +129,8 @@ export default function CreateControls(widgetType = null, widget = null, session ...@@ -129,7 +129,8 @@ export default function CreateControls(widgetType = null, widget = null, session
case 'Box': case 'Box':
DialogControls.push( DialogControls.push(
<EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />, <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} /> <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />,
<EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
); );
break; break;
case 'Label': case 'Label':
...@@ -155,7 +156,8 @@ export default function CreateControls(widgetType = null, widget = null, session ...@@ -155,7 +156,8 @@ export default function CreateControls(widgetType = null, widget = null, session
case 'NumberInput': case 'NumberInput':
DialogControls.push( DialogControls.push(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />, <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} controlId={'signalIDs'} input signals={signals} handleChange={(e) => handleChange(e)} /> <EditWidgetSignalControl key={2} widget={widget} controlId={'signalIDs'} input signals={signals} handleChange={(e) => handleChange(e)} />,
<EditWidgetCheckboxControl key={1} widget={widget} controlId={'customProperties.showUnit'} input text="Show unit" handleChange={e => handleChange(e)} />
); );
break; break;
......
...@@ -25,21 +25,25 @@ class EditWidgetNumberControl extends Component { ...@@ -25,21 +25,25 @@ class EditWidgetNumberControl extends Component {
this.state = { this.state = {
widget: { widget: {
customProperties:{} customProperties:{}
} }
}; };
} }
static getDerivedStateFromProps(props, state){ static getDerivedStateFromProps(props, state){
return{ return{
widget: props.widget widget: props.widget
}; };
} }
render() { render() {
let step = 1;
if(this.props.controlId ==='customProperties.background_color_opacity'){
step = 0.1;
}
return ( return (
<FormGroup controlId={this.props.controlId}> <FormGroup controlId={this.props.controlId}>
<FormLabel>{this.props.label}</FormLabel> <FormLabel>{this.props.label}</FormLabel>
<FormControl type="number" step="any" value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} /> <FormControl type="number" step={step} value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
</FormGroup> </FormGroup>
); );
} }
......
...@@ -57,9 +57,33 @@ class EditWidgetDialog extends React.Component { ...@@ -57,9 +57,33 @@ class EditWidgetDialog extends React.Component {
const file = this.props.files.find(element => element.id === fileId); const file = this.props.files.find(element => element.id === fileId);
// scale width to match aspect // scale width to match aspect
if(file.dimensions){
const aspectRatio = file.dimensions.width / file.dimensions.height; const aspectRatio = file.dimensions.width / file.dimensions.height;
changeObject.width = this.state.temporal.height * aspectRatio; changeObject.width = this.state.temporal.height * aspectRatio;
}
return changeObject;
}
setMaxWidth(changeObject){
if(changeObject.type === 'Label'){
changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.34) * changeObject.name.length;
}
else if (changeObject.type === 'Value'){
// changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.5) * (changeObject.name.length+13);
}
return changeObject;
}
setNewLockRestrictions(changeObject){
if(changeObject.customProperties.orientation === 0){
changeObject.customProperties.resizeTopBottomLock = true;
changeObject.customProperties.resizeRightLeftLock = false;
}
else if(changeObject.customProperties.orientation === 1){
changeObject.customProperties.resizeTopBottomLock = false;
changeObject.customProperties.resizeRightLeftLock = true;
}
return changeObject; return changeObject;
} }
...@@ -73,13 +97,13 @@ class EditWidgetDialog extends React.Component { ...@@ -73,13 +97,13 @@ class EditWidgetDialog extends React.Component {
// not a customProperty // not a customProperty
customProperty = false; customProperty = false;
} }
if (e.target.id === 'lockAspect') { if (parts[1] === 'lockAspect') {
//not a customProperty //not a customProperty
customProperty ? changeObject[parts[0]][parts[1]] = e.target.checked : 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 // correct image aspect if turned on
if (e.target.checked) { if (e.target.checked && this.state.temporal.customProperties.file) {
changeObject = this.assignAspectRatio(changeObject, this.state.temporal.customProperties.file); changeObject = this.assignAspectRatio(changeObject, this.state.temporal.customProperties.file);
} }
} else if (e.target.id.includes('file')) { } else if (e.target.id.includes('file')) {
...@@ -91,7 +115,15 @@ class EditWidgetDialog extends React.Component { ...@@ -91,7 +115,15 @@ class EditWidgetDialog extends React.Component {
// TODO this if condition requires changes to work!!! // TODO this if condition requires changes to work!!!
changeObject = this.assignAspectRatio(changeObject, e.target.value); changeObject = this.assignAspectRatio(changeObject, e.target.value);
} }
} else if (e.target.type === 'number') { }else if (parts[1] === 'textSize'){
changeObject[parts[0]][parts[1]] = Number(e.target.value);
changeObject = this.setMaxWidth(changeObject);
}else if(parts[1] === 'orientation'){
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;
changeObject = this.setNewLockRestrictions(changeObject);
}
else if (e.target.type === 'number') {
customProperty ? changeObject[parts[0]][parts[1]] = 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'){ } else if(e.target.id === 'name'){
if(customProperty ? (changeObject[parts[0]][parts[1]] != null) : (changeObject[e.target.id] != null)){ if(customProperty ? (changeObject[parts[0]][parts[1]] != null) : (changeObject[e.target.id] != null)){
...@@ -99,6 +131,7 @@ class EditWidgetDialog extends React.Component { ...@@ -99,6 +131,7 @@ class EditWidgetDialog extends React.Component {
} else{ } else{
customProperty ? changeObject[parts[0]][parts[1]]= 'default' : changeObject[e.target.id] = 'default'; customProperty ? changeObject[parts[0]][parts[1]]= 'default' : changeObject[e.target.id] = 'default';
} }
changeObject = this.setMaxWidth(changeObject);
} else { } else {
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ; customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;
} }
......
...@@ -84,16 +84,21 @@ class EditableWidgetContainer extends React.Component { ...@@ -84,16 +84,21 @@ class EditableWidgetContainer extends React.Component {
render() { render() {
const widget = this.props.widget; const widget = this.props.widget;
let resizingRestricted = false;
if(widget.customProperties.resizeRightLeftLock || widget.customProperties.resizeTopBottomLock){
resizingRestricted = true;
}
const resizing = { const resizing = {
bottom: !widget.isLocked, bottom: !(widget.customProperties.resizeTopBottomLock || widget.isLocked),
bottomLeft: !widget.isLocked, bottomLeft: !(resizingRestricted|| widget.isLocked),
bottomRight: !widget.isLocked, bottomRight: !(resizingRestricted || widget.isLocked),
left: !widget.isLocked, left: !(widget.customProperties.resizeRightLeftLock || widget.isLocked),
right: !widget.idLocked, right: !(widget.customProperties.resizeRightLeftLock || widget.isLocked),
top: !widget.isLocked, top: !(widget.customProperties.resizeTopBottomLock || widget.isLocked),
topLeft: !widget.isLocked, topLeft: !(resizingRestricted || widget.isLocked),
topRight: !widget.isLocked topRight: !(resizingRestricted || widget.isLocked)
}; };
const gridArray = [ this.props.grid, this.props.grid ]; const gridArray = [ this.props.grid, this.props.grid ];
...@@ -108,6 +113,7 @@ class EditableWidgetContainer extends React.Component { ...@@ -108,6 +113,7 @@ class EditableWidgetContainer extends React.Component {
default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
minWidth={widget.minWidth} minWidth={widget.minWidth}
minHeight={widget.minHeight} minHeight={widget.minHeight}
maxWidth ={widget.customProperties.maxWidth || '100%' }
lockAspectRatio={Boolean(widget.isLocked)} lockAspectRatio={Boolean(widget.isLocked)}
bounds={'parent'} bounds={'parent'}
className={widgetClasses} className={widgetClasses}
......
...@@ -50,7 +50,7 @@ class WidgetArea extends React.Component { ...@@ -50,7 +50,7 @@ class WidgetArea extends React.Component {
return absolutHeight > currentHeight ? absolutHeight : currentHeight; return absolutHeight > currentHeight ? absolutHeight : currentHeight;
}, 0); }, 0);
return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing}> return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
{this.props.children} {this.props.children}
<Grid size={this.props.grid} disabled={this.props.grid === 1 || this.props.editing !== true} /> <Grid size={this.props.grid} disabled={this.props.grid === 1 || this.props.editing !== true} />
......
...@@ -26,7 +26,7 @@ class WidgetContainer extends React.Component { ...@@ -26,7 +26,7 @@ class WidgetContainer extends React.Component {
height: Number(this.props.widget.height), height: Number(this.props.widget.height),
left: Number(this.props.widget.x), left: Number(this.props.widget.x),
top: Number(this.props.widget.y), top: Number(this.props.widget.y),
zindex: Number(this.props.widget.z), zIndex: Number(this.props.widget.z),
position: 'absolute' position: 'absolute'
}; };
......
...@@ -34,7 +34,7 @@ class WidgetContextMenu extends React.Component { ...@@ -34,7 +34,7 @@ class WidgetContextMenu extends React.Component {
}; };
moveAbove = event => { moveAbove = event => {
this.props.widget.z++; this.props.widget.z += 10;
if (this.props.widget.z > 100) { if (this.props.widget.z > 100) {
this.props.widget.z = 100; this.props.widget.z = 100;
} }
...@@ -53,7 +53,7 @@ class WidgetContextMenu extends React.Component { ...@@ -53,7 +53,7 @@ class WidgetContextMenu extends React.Component {
}; };
moveUnderneath = event => { moveUnderneath = event => {
this.props.widget.z--; this.props.widget.z -= 10;
if (this.props.widget.z < 0) { if (this.props.widget.z < 0) {
this.props.widget.z = 0; this.props.widget.z = 0;
} }
...@@ -90,7 +90,7 @@ class WidgetContextMenu extends React.Component { ...@@ -90,7 +90,7 @@ class WidgetContextMenu extends React.Component {
render() { render() {
const isLocked = this.props.widget.locked; const isLocked = this.props.widget.locked;
const ContextMenu = () => ( const ContextMenu = () => (
<Menu id={'widgetMenu'+ this.props.index}> <Menu id={'widgetMenu'+ this.props.index} style={{zIndex: 1000}}>
<Item disabled={isLocked} onClick={this.editWidget}>Edit</Item> <Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
<Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item> <Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
......
...@@ -70,11 +70,12 @@ class WidgetFactory { ...@@ -70,11 +70,12 @@ class WidgetFactory {
case 'Value': case 'Value':
widget.minWidth = 70; widget.minWidth = 70;
widget.minHeight = 20; widget.minHeight = 20;
widget.width = 120; widget.width = 150;
widget.height = 30; widget.height = 30;
widget.customProperties.textSize = 16; widget.customProperties.textSize = 16;
widget.name = 'Value'; widget.name = 'Value';
widget.customProperties.showUnit = false; widget.customProperties.showUnit = false;
widget.customProperties.resizeTopBottomLock = true;
break; break;
case 'Plot': case 'Plot':
widget.customProperties.ylabel = ''; widget.customProperties.ylabel = '';
...@@ -96,11 +97,13 @@ class WidgetFactory { ...@@ -96,11 +97,13 @@ class WidgetFactory {
case 'Label': case 'Label':
widget.minWidth = 20; widget.minWidth = 20;
widget.minHeight = 20; widget.minHeight = 20;
widget.customProperties.maxWidth = 100;
widget.width = 100; widget.width = 100;
widget.height = 35; widget.height = 35;
widget.name = 'Label'; widget.name = 'Label';
widget.customProperties.textSize = 32; widget.customProperties.textSize = 32;
widget.customProperties.fontColor = 0; widget.customProperties.fontColor = 0;
widget.customProperties.resizeTopBottomLock = true;
break; break;
case 'PlotTable': case 'PlotTable':
widget.customProperties.ylabel = ''; widget.customProperties.ylabel = '';
...@@ -137,6 +140,8 @@ class WidgetFactory { ...@@ -137,6 +140,8 @@ class WidgetFactory {
widget.minHeight = 50; widget.minHeight = 50;
widget.width = 200; widget.width = 200;
widget.height = 50; widget.height = 50;
widget.customProperties.showUnit = false;
widget.customProperties.resizeTopBottomLock = true;
break; break;
case 'Slider': case 'Slider':
widget.minWidth = 380; widget.minWidth = 380;
...@@ -150,6 +155,8 @@ class WidgetFactory { ...@@ -150,6 +155,8 @@ class WidgetFactory {
widget.customProperties.showUnit = true; widget.customProperties.showUnit = true;
widget.customProperties.continous_update = false; widget.customProperties.continous_update = false;
widget.customProperties.default_value = 0; widget.customProperties.default_value = 0;
widget.customProperties.resizeLeftRightLock = false;
widget.customProperties.resizeTopBottomLock = true;
break; break;
case 'Gauge': case 'Gauge':
...@@ -169,6 +176,7 @@ class WidgetFactory { ...@@ -169,6 +176,7 @@ class WidgetFactory {
widget.width = 100; widget.width = 100;
widget.height = 100; widget.height = 100;
widget.customProperties.border_color = 0; widget.customProperties.border_color = 0;
widget.customProperties.background_color_opacity = 0.5;
widget.z = 0; widget.z = 0;
break; break;
case 'HTML': case 'HTML':
......
...@@ -27,7 +27,7 @@ class WidgetBox extends Component { ...@@ -27,7 +27,7 @@ class WidgetBox extends Component {
let colorStyle = { let colorStyle = {
borderColor: colors[this.props.widget.customProperties.border_color], borderColor: colors[this.props.widget.customProperties.border_color],
backgroundColor: colors[this.props.widget.customProperties.background_color], backgroundColor: colors[this.props.widget.customProperties.background_color],
opacity: this.props.widget.customProperties.background_color_opacity opacity: this.props.widget.customProperties.background_color_opacity,
} }
return ( return (
......
...@@ -31,17 +31,20 @@ class WidgetGauge extends Component { ...@@ -31,17 +31,20 @@ class WidgetGauge extends Component {
unit: '', unit: '',
minValue: null, minValue: null,
maxValue: null, maxValue: null,
useColorZones: false,
useMinMax: false,
useMinMaxChange: false,
}; };
} }
componentDidMount() { componentDidMount() {
this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget)); this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget));
//this.gauge.maxValue = this.state.maxValue; this.gauge.maxValue = this.state.maxValue;
//this.gauge.setMinValue(this.state.minValue); this.gauge.setMinValue(this.state.minValue);
this.gauge.animationSpeed = 30; this.gauge.animationSpeed = 30;
//this.gauge.set(this.state.value); this.gauge.set(this.state.value);
//this.updateLabels(this.state.minValue, this.state.maxValue); this.updateLabels(this.state.minValue, this.state.maxValue);
} }
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void { componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
...@@ -57,9 +60,19 @@ class WidgetGauge extends Component { ...@@ -57,9 +60,19 @@ class WidgetGauge extends Component {
this.gauge.set(this.state.value) this.gauge.set(this.state.value)
} }
if(prevState.useMinMax === true && this.state.useMinMax === false){
this.setState({useMinMaxChange: true});
}
// update labels // update labels
if(prevState.minValue !== this.state.minValue || prevState.maxValue !== this.state.maxValue){ if(prevState.minValue !== this.state.minValue || prevState.maxValue !== this.state.maxValue || prevState.useColorZones !== this.state.useColorZones
this.updateLabels(this.state.minValue, this.state.maxValue) || prevState.useMinMax !== this.state.useMinMax){
this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget));
this.gauge.maxValue = this.state.maxValue;
this.gauge.setMinValue(this.state.minValue);
this.gauge.animationSpeed = 30;
this.gauge.set(this.state.value);
this.updateLabels(this.state.minValue, this.state.maxValue)
} }
} }
...@@ -69,9 +82,10 @@ class WidgetGauge extends Component { ...@@ -69,9 +82,10 @@ class WidgetGauge extends Component {
if(props.widget.signalIDs.length === 0){ if(props.widget.signalIDs.length === 0){
return null; return null;
} }
let returnState = {} let returnState = {}
returnState["useColorZones"] = props.widget.customProperties.colorZones;
// Update unit (assuming there is exactly one signal for this widget) // Update unit (assuming there is exactly one signal for this widget)
let signalID = props.widget.signalIDs[0]; let signalID = props.widget.signalIDs[0];
let widgetSignal = props.signals.find(sig => sig.id === signalID); let widgetSignal = props.signals.find(sig => sig.id === signalID);
...@@ -105,7 +119,8 @@ class WidgetGauge extends Component { ...@@ -105,7 +119,8 @@ class WidgetGauge extends Component {
const value = Math.round(signalData[signalData.length - 1].y * 1e3) / 1e3; const value = Math.round(signalData[signalData.length - 1].y * 1e3) / 1e3;
let minValue = null; let minValue = null;
let maxValue = null; let maxValue = null;
if (state.value !== value && value != null) {
if ((state.value !== value && value != null) || props.widget.customProperties.valueUseMinMax || state.useMinMaxChange) {
//value has changed //value has changed
updateValue = true; updateValue = true;
...@@ -114,17 +129,18 @@ class WidgetGauge extends Component { ...@@ -114,17 +129,18 @@ class WidgetGauge extends Component {
minValue = state.minValue; minValue = state.minValue;
maxValue = state.maxValue; maxValue = state.maxValue;