From 0de876f6083a36734d1b4f8bf3e95900af117522 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Wed, 18 Mar 2020 16:25:36 +0100
Subject: [PATCH] add case distinguish for customProperty to checkbox and min
 max edits; apply case distinguish in handeChange function of edit-widget

---
 .../edit-widget-checkbox-control.js           | 21 +++++---
 .../edit-widget-control-creator.js            | 12 ++---
 .../edit-widget-min-max-control.js            | 48 ++++++++++++++-----
 src/widget/edit-widget/edit-widget.js         | 16 ++++---
 4 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget-checkbox-control.js b/src/widget/edit-widget/edit-widget-checkbox-control.js
index 66c8c57..960c9e8 100644
--- a/src/widget/edit-widget/edit-widget-checkbox-control.js
+++ b/src/widget/edit-widget/edit-widget-checkbox-control.js
@@ -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>;
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index fb4d0d5..0b1ac15 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -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;
 
diff --git a/src/widget/edit-widget/edit-widget-min-max-control.js b/src/widget/edit-widget/edit-widget-min-max-control.js
index e21530f..945f036 100644
--- a/src/widget/edit-widget/edit-widget-min-max-control.js
+++ b/src/widget/edit-widget/edit-widget-min-max-control.js
@@ -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>
diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index 7d34887..bc36aca 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -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 ;