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} onChange={handleInputChange}
value={values.name} value={values.name}
placeholder="Device name" placeholder="Device name"
// {this.props.device.name}
/> />
</Form.Field> </Form.Field>
@ -63,9 +64,13 @@ class DeviceSettingsModal extends Component {
this.deleteDevice = this.deleteDevice.bind(this); this.deleteDevice = this.deleteDevice.bind(this);
} }
openModal() { closeModal = (e) => {
this.setState({ open: true }); this.setState({ openModal: false });
} };
openModal = (e) => {
this.setState({ openModal: true });
};
updateDevice(values) { updateDevice(values) {
if (values.name.length === 0) return; if (values.name.length === 0) return;
@ -94,7 +99,7 @@ class DeviceSettingsModal extends Component {
render() { render() {
const SettingsModal = () => ( 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.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content> <Modal.Content>
<SettingsForm <SettingsForm

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

@ -53,14 +53,15 @@ class Sensor extends Component {
this.colors = temperatureSensorColors; this.colors = temperatureSensorColors;
this.icon = "temperatureIcon.svg"; this.icon = "temperatureIcon.svg";
this.name = "Sensor";
} }
setName = () => { // setName = () => {
if (this.props.device.name.length > 15) { // if (this.props.device.name.length > 15) {
return this.props.device.name.slice(0, 12) + "..."; // return this.props.device.name.slice(0, 12) + "...";
} // }
return this.props.device.name; // return this.props.device.name;
}; // };
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if ( if (
@ -83,16 +84,19 @@ class Sensor extends Component {
this.units = "ºC"; this.units = "ºC";
this.colors = temperatureSensorColors; this.colors = temperatureSensorColors;
this.icon = "temperatureIcon.svg"; this.icon = "temperatureIcon.svg";
this.name = "Temperature Sensor";
break; break;
case "HUMIDITY": case "HUMIDITY":
this.units = "%"; this.units = "%";
this.colors = humiditySensorColors; this.colors = humiditySensorColors;
this.icon = "humidityIcon.svg"; this.icon = "humidityIcon.svg";
this.name = "Humidity Sensor";
break; break;
case "LIGHT": case "LIGHT":
this.units = "lm"; this.units = "lm";
this.colors = lightSensorColors; this.colors = lightSensorColors;
this.icon = "lightSensorIcon.svg"; this.icon = "lightSensorIcon.svg";
this.name = "Light Sensor";
break; break;
default: default:
this.units = ""; this.units = "";
@ -131,7 +135,7 @@ class Sensor extends Component {
}} }}
> >
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" /> <Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
<span style={nameMotionStyle}>{this.props.device.name}</span> <span style={nameMotionStyle}>Motion Sensor</span>
</div> </div>
</div> </div>
); );
@ -176,7 +180,7 @@ class Sensor extends Component {
dy="0.4em" dy="0.4em"
fontWeight="bold" fontWeight="bold"
> >
{this.setName()} ({this.props.device.id}) {this.name}
</text> </text>
</CircularInput> </CircularInput>
<Image style={iconSensorStyle} src={`/img/${this.icon}`} /> <Image style={iconSensorStyle} src={`/img/${this.icon}`} />