diff --git a/smart-hut/src/components/FilterDevices.js b/smart-hut/src/components/FilterDevices.js new file mode 100644 index 0000000..bc241b1 --- /dev/null +++ b/smart-hut/src/components/FilterDevices.js @@ -0,0 +1,82 @@ +import { Dropdown } from "semantic-ui-react"; +import React, { Component } from "react"; + +export default class FilterDevices extends Component { + render() { + const tagOptions = [ + { + key: "regularLight", + text: "regularLight", + value: "regularLight", + label: { color: "red", empty: true, circular: true }, + }, + { + key: "dimmableLight", + text: "dimmableLight", + value: "dimmableLight", + label: { color: "blue", empty: true, circular: true }, + }, + { + key: "buttonDimmer", + text: "buttonDimmer", + value: "buttonDimmer", + label: { color: "black", empty: true, circular: true }, + }, + { + key: "knobDimmer", + text: "knobDimmer", + value: "knobDimmer", + label: { color: "purple", empty: true, circular: true }, + }, + { + key: "motionSensor", + text: "motionSensor", + value: "motionSensor", + label: { color: "orange", empty: true, circular: true }, + }, + { + key: "sensor", + text: "sensor", + value: "sensor", + label: { empty: true, circular: true }, + }, + { + key: "smartPlug", + text: "smartPlug", + value: "smartPlug", + label: { color: "pink", empty: true, circular: true }, + }, + { + key: "switch", + text: "switch", + value: "switch", + label: { color: "green", empty: true, circular: true }, + }, + ]; + + return ( + + + + + + {tagOptions.map((option) => ( + + ))} + + + + ); + } +} diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js index 60cdcb0..c0458c4 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js +++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js @@ -25,6 +25,15 @@ const DeviceType = (props) => { edit={props.edit} /> ); + case "motionSensor": + return ( + + ); case "buttonDimmer": return ( { - this.setState({ typeOfSensor: d.value }); + console.log(d.value); + if (d.value === "motionSensor") { + this.setState({ typeOfSensor: d.value, motion: true }); + } else { + this.setState({ typeOfSensor: d.value }); + } }; setLightsDimmerSwitch = (e, d) => { @@ -81,7 +87,7 @@ export default class NewDevice extends Component { params: { name: this.state.deviceName, }, - device: this.state.typeOfDevice, + device: this.state.motion ? "motionSensor" : this.state.typeOfDevice, }; switch (this.state.typeOfDevice) { @@ -89,8 +95,10 @@ export default class NewDevice extends Component { data.params["intensity"] = 1; break; case "sensor": - data.params["sensor"] = this.state.typeOfSensor; - data.params["value"] = 0; + if (!this.state.motion) { + data.params["sensor"] = this.state.typeOfSensor; + data.params["value"] = 0; + } break; case "switch": data.params["lights"] = this.state.lightsAttached; diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index b96fb1f..b02c072 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -29,19 +29,25 @@ import { sensorText, style, valueStyle } from "./SensorStyle"; import Settings from "./DeviceSettings"; import { StyledDiv } from "./styleComponents"; import { call } from "../../../client_server"; +import { nameStyle } from "./LightStyle"; +import { iconStyle } from "./styleComponents"; +import { Image } from "semantic-ui-react"; export default class Sensor extends Component { constructor(props) { super(props); this.state = { - turnedOn: false, value: 0, + motion: false, }; this.units = ""; this.stateCallback = (e) => { this.setState(Object.assign(this.state, e)); }; + this.iconOn = "/img/lightOn.svg"; + this.iconOff = "/img/lightOff.svg"; + call.socketSubscribe(this.props.device.id, this.stateCallback); } @@ -57,24 +63,38 @@ export default class Sensor extends Component { }; componentDidMount() { - switch (this.props.device.sensor) { - case "TEMPERATURE": - this.units = "ºC"; - break; - case "HUMIDITY": - this.units = "%"; - break; - case "LIGHT": - this.units = "lm"; - break; - default: - this.units = ""; + if (this.props.device.kind === "sensor") { + switch (this.props.device.sensor) { + case "TEMPERATURE": + this.units = "ºC"; + break; + case "HUMIDITY": + this.units = "%"; + break; + case "LIGHT": + this.units = "lm"; + break; + default: + this.units = ""; + } + this.setState({ + value: this.props.device.value, + }); + } else { + this.setState({ + detected: this.props.device.detected, + motion: true, + }); } - this.setState({ - value: this.props.device.value, - }); } + getIcon = () => { + if (this.state.detected) { + return this.iconOn; + } + return this.iconOff; + }; + render() { return ( @@ -85,32 +105,38 @@ export default class Sensor extends Component { this.props.onChangeData(id, newSettings) } /> - - - - - - {+(Math.round(this.state.value + "e+2") + "e-2")} - {this.units} - - - {this.setName()} - - + {this.state.motion ? ( +
{} : this.onClickDevice}> + +
Motion Sensor
+
+ ) : ( + + + + + {+(Math.round(this.state.value + "e+2") + "e-2")} + {this.units} + + + {this.setName()} + + + )}
); }