+ );
+ return (
+
+ {this.props.edit ? view : ("")}
+
+ )
+ };
+}
diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js
new file mode 100644
index 0000000..078fe94
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Dimmer.js
@@ -0,0 +1,52 @@
+/**
+ Users can add dimmers, a particular kind of switch that can also modify the intensity level of a given light.
+ There are two types of dimmers:
+ • A dimmer with state stores a given intensity level and sets the light to that level. <-- StatefulDimmer
+ • A dimmer without state can just increase or decrease the intensity of a light. <-- DefualtDimmer
+
+ The user can change the state of a dimmer through an intuitive UI in SmartHut .
+ **/
+
+import React, {Component} from 'react';
+
+export class StatefulDimmer extends Component{
+ constructor(props){
+ super(props);
+ this.state = {
+ intensityLevel : 0,
+ pointingLDevices:[]
+ }
+ }
+
+ componentDidMount() {
+ }
+
+ render() {
+ return(
+
+ This is a Dimmer
+
+ )
+ }
+}
+
+export class DefaultDimmer extends Component{
+ // As far as I am concern, even though this dimmer doesn't have state, internally it's needed
+ constructor(props){
+ super(props);
+ this.state = {
+ pointingDevices :[]
+ }
+ }
+
+ componentDidMount() {
+ }
+
+ render() {
+ return(
+
+ This is a Dimmer
+
+ )
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
new file mode 100644
index 0000000..69a7df8
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -0,0 +1,92 @@
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, {Component} from "react";
+import {iconStyle, StyledDiv, nameStyle} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import {Image} from "semantic-ui-react";
+import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
+import {valueStyle, intensityLightStyle, style} from "./LightStyle";
+
+export default class Light extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ turnedOn: false,
+ hasIntensity : false
+ };
+ this.iconOn = "/img/lightOn.svg";
+ this.iconOff = "/img/lightOff.svg"
+ }
+
+ onClickDevice = () => {
+ this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
+ };
+
+ setIntensity = (newValue) => {
+ this.setState({intensityLevel : newValue});
+ };
+
+ getIcon = () => {
+ if(this.state.turnedOn){
+ return this.iconOn;
+ }
+ return this.iconOff;
+ };
+
+ componentDidMount() {
+ if(this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
+ this.setState({
+ hasIntensity: this.props.device.hasIntensity,
+ intensityLevel: this.props.device.intensityLevel
+ });
+ }
+ // Get the state and update it
+
+ }
+
+
+ render() {
+ const intensityLightView = (
+
+
+
+
+
+
+ {Math.round(this.state.intensityLevel*100)}%
+
+
+ {this.props.device.name}
+
+
+ );
+
+ const normalLightView = (
+ {
+ } : this.onClickDevice} style={{textAlign: "center"}}>
+ this.props.onChangeData(id, newSettings)}/>
+
+
{this.props.device.name}
+
+ );
+
+ return (
+
+ {this.state.hasIntensity ? (intensityLightView) : (normalLightView)}
+
+ )
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js
new file mode 100644
index 0000000..046abee
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/LightStyle.js
@@ -0,0 +1,14 @@
+export const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
+export const valueStyle = {
+ fill: "#3e99ff",
+ fontSize: "2.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const intensityLightStyle = {
+ fill: "#3e99ff",
+ fontSize: "1.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
index 4b30f3f..ddf4e4d 100644
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -1,17 +1,8 @@
import React, {Component} from 'react';
-import styled, {keyframes} from 'styled-components';
-import {Image} from "semantic-ui-react";
-
-const rotateAddButton = keyframes`
- 0% {
- transform : translate(0px, 0px) rotate(0deg);
- box-shadow: 3px 2px 10px 5px #ccc;
- }
- 100% {
- transform : translate(0.3px, 0.8px) rotate(90deg);
- box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
- }
-`;
+import styled from 'styled-components';
+import {Button, Dropdown, Form, Image} from "semantic-ui-react";
+import {addDeviceFormStyle} from "./styleComponents";
+import {deviceList} from "./TypesOfDevices";
const StyledDiv = styled.div`
background-color : #ff4050;
@@ -26,48 +17,92 @@ const StyledDiv = styled.div`
:hover{
background-color : #ff2436;
}
- :active{
- animation-name: ${rotateAddButton};
- animation-duration: 0.5s;
- animation-timing-function: ease;
- animation-delay: 0s;
- animation-direction: normal;
- animation-play-state: running;
- animation-fill-mode: forwards;
- }
`;
-const iconStyle = {
- width : "4rem",
- height : "auto",
- position : "absolute",
- top : "20%",
- left : "50%",
- transform : "translateX(-50%)"
+
+class NewDeviceForm extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ formSelector = (option) => {
+ switch (option) {
+ case "Light":
+ return ;
+ case "Sensor":
+ return "This is a sensor form";
+ default:
+ return "This is a default text"
+ }
+ };
+
+ render() {
+ let options = [];
+ deviceList.forEach((e, i) => {
+ options.push({key: i, text: e, value: e})
+ });
+
+ return (
+
+ );
+ }
+}
+
+
+class LightForm extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {}
+ }
+
+ render() {
+ let options = [
+ {
+ key: 1,
+ value: "common",
+ text: "Normal Light"
+ },
+ {
+ key: 1,
+ value: "intensity",
+ text: "Supports intensity level"
+ }
+ ]
+ return (
+
+
+
+
+ );
+ };
};
-const nameStyle = {
- position : "absolute",
- top : "50%",
- left : "50%",
- transform : "translateX(-50%)"
-}
-
export default class NewDevice extends Component {
- constructor(props) {
- super(props);
- this.state = {
+ constructor(props) {
+ super(props);
+ this.state = {
+ openForm: false
+ }
}
- }
- onClickDevice = (event) => {
- console.log(this.props.children);
- };
+ onClickDevice = (event) => {
+ this.setState((prevState) => ({openForm: !prevState.openForm}));
+ };
- render() {
- return (
-
-
-
- )
- }
+ render() {
+ return (
+
+
+ {this.state.openForm ? (
+
+ ) : ""}
+
+ )
+ }
}
diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js
index d603ec1..5aaa7e5 100644
--- a/smart-hut/src/components/dashboard/devices/Sensor.js
+++ b/smart-hut/src/components/dashboard/devices/Sensor.js
@@ -1,67 +1,56 @@
-import React, {useState} from "react";
-import {
- CircularInput,
- CircularTrack,
- CircularProgress,
- CircularThumb,
- useCircularInputContext,
-} from 'react-circular-input'
+/**
+ * Users can add sensors in their rooms.
+ * Sensors typically measure physical quantities in a room.
+ * You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
+ * Sensors have an internal state that cannot be changed by the user.
+ * For this story, make the sensors return a constant value with some small random error.
+ */
+
+import React, {Component} from "react";
+import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
+import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
+
+export default class Light extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ turnedOn: false,
+ value: 20,
+ error : 2.4
+ };
+ this.units = "ºC"
+ }
+
+ setName = () => {
+ if(this.props.device.name.length > 15){
+ return this.props.device.name.slice(0,12) + "..."
+ }
+ return this.props.device.name;
+ };
+
+ componentDidMount() {
+ }
-// Example of a custom component to display text on top of the thumb
+ render() {
+ return (
+
+
+
-function TemperatureDisplay() {
- const {getPointFromValue, value} = useCircularInputContext();
- const {x, y} = getPointFromValue();
- const style = {
- fontFamily: "Lato",
- fontSize: "1.2rem",
- color: "white",
-
- };
-
- return (
-
- {Math.round(value * 100)}
-
- )
+
+ {Math.round(this.state.value)}{this.units}
+
+
+ ±{this.state.error}
+
+
+ {this.setName()}
+
+
+ )
+ }
}
-
-export default function Sensor(props) {
- const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
- const valueStyle = {
- fill: "#3e99ff",
- fontSize: "2.5rem",
- fontFamily: "Lato",
- textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
- }
-
- const nameStyle = {
- fill: "#3e99ff",
- fontSize: "1.5rem",
- fontFamily: "Lato",
- textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
- }
- const [value, setValue] = useState(0.25);
-
- return (
-
-
-
-
-
-
- {Math.round(value * props.device.maxValue)}{props.device.units}
-
-
- {props.device.name}
-
-
- )
-}
-
-
diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js
new file mode 100644
index 0000000..ae32c75
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js
@@ -0,0 +1,23 @@
+export const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
+
+export const sensorText = {
+ fill: "#3e99ff",
+ fontSize: "1.2rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+}
+
+export const valueStyle = {
+ fill: "#3e99ff",
+ fontSize: "2.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+
+export const errorStyle = {
+ fill: "#ff4050",
+ fontSize: "1.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+}
diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js
new file mode 100644
index 0000000..cd175c1
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js
@@ -0,0 +1,60 @@
+/**
+
+ A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the
+ SmartHut interface or by a switch.
+ The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours
+ 2
+ (kWh) . The user can reset this value.
+
+ **/
+
+import React, {Component} from 'react';
+import {iconStyle, nameStyle, StyledDiv} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import {Image} from "semantic-ui-react";
+import {energyConsumedStyle, imageStyle} from "./SmartPlugStyle";
+
+export default class SmartPlug extends Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ turnedOn: false,
+ energyConsumed : 0 // kWh
+ };
+ this.iconOn = "/img/smart-plug.svg";
+ this.iconOff = "/img/smart-plug-off.svg"
+ }
+
+ onClickDevice = () => {
+ this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
+ };
+
+ getIcon = () => {
+ if(this.state.turnedOn){
+ return this.iconOn;
+ }
+ return this.iconOff;
+ };
+
+ resetEnergyConsumedValue = () => {
+ // In the settings form there must be an option to restore this value
+ // along with the rename feature.
+ }
+
+ componentDidMount() {
+ }
+
+ render(){
+ return (
+ {} : this.onClickDevice} style={{textAlign: "center"}}>
+ this.props.onChangeData(id, newSettings)}/>
+
+
) : ("")}
-