smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Nicola Brunner 2020-04-16 18:20:22 +02:00
parent f99a5d49ff
commit 1330f3cfea
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
View file

@ -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

20
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -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}`} />