From 1330f3cfea19db3402e24c0e8f5eea45abd5d28e Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Thu, 16 Apr 2020 18:20:22 +0200
Subject: [PATCH] For edit device modal: added  possibility to exit window
 without modifications (cross) | For Sensors: Now displays general device name
 and not specific device name in the icon

---
 .../dashboard/devices/DeviceSettingsModal.js  | 13 ++++++++----
 .../components/dashboard/devices/Sensor.js    | 20 +++++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
index fcf29a0..037118a 100644
--- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
@@ -35,6 +35,7 @@ const SettingsForm = (props) => {
           onChange={handleInputChange}
           value={values.name}
           placeholder="Device name"
+          // {this.props.device.name}
         />
       </Form.Field>
 
@@ -63,9 +64,13 @@ class DeviceSettingsModal extends Component {
     this.deleteDevice = this.deleteDevice.bind(this);
   }
 
-  openModal() {
-    this.setState({ open: true });
-  }
+  closeModal = (e) => {
+    this.setState({ openModal: false });
+  };
+
+  openModal = (e) => {
+    this.setState({ openModal: true });
+  };
 
   updateDevice(values) {
     if (values.name.length === 0) return;
@@ -94,7 +99,7 @@ class DeviceSettingsModal extends Component {
 
   render() {
     const SettingsModal = () => (
-      <Modal open={this.state.open}>
+      <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
         <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
         <Modal.Content>
           <SettingsForm
diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js
index 4d3cf81..0f7e0bd 100644
--- a/smart-hut/src/components/dashboard/devices/Sensor.js
+++ b/smart-hut/src/components/dashboard/devices/Sensor.js
@@ -53,14 +53,15 @@ class Sensor extends Component {
 
     this.colors = temperatureSensorColors;
     this.icon = "temperatureIcon.svg";
+    this.name = "Sensor";
   }
 
-  setName = () => {
-    if (this.props.device.name.length > 15) {
-      return this.props.device.name.slice(0, 12) + "...";
-    }
-    return this.props.device.name;
-  };
+  // setName = () => {
+  //   if (this.props.device.name.length > 15) {
+  //     return this.props.device.name.slice(0, 12) + "...";
+  //   }
+  //   return this.props.device.name;
+  // };
 
   componentDidUpdate(prevProps) {
     if (
@@ -83,16 +84,19 @@ class Sensor extends Component {
           this.units = "ºC";
           this.colors = temperatureSensorColors;
           this.icon = "temperatureIcon.svg";
+          this.name = "Temperature Sensor";
           break;
         case "HUMIDITY":
           this.units = "%";
           this.colors = humiditySensorColors;
           this.icon = "humidityIcon.svg";
+          this.name = "Humidity Sensor";
           break;
         case "LIGHT":
           this.units = "lm";
           this.colors = lightSensorColors;
           this.icon = "lightSensorIcon.svg";
+          this.name = "Light Sensor";
           break;
         default:
           this.units = "";
@@ -131,7 +135,7 @@ class Sensor extends Component {
             }}
           >
             <Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
-            <span style={nameMotionStyle}>{this.props.device.name}</span>
+            <span style={nameMotionStyle}>Motion Sensor</span>
           </div>
         </div>
       );
@@ -176,7 +180,7 @@ class Sensor extends Component {
                 dy="0.4em"
                 fontWeight="bold"
               >
-                {this.setName()} ({this.props.device.id})
+                {this.name}
               </text>
             </CircularInput>
             <Image style={iconSensorStyle} src={`/img/${this.icon}`} />