diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js
index 52c877e..b4b403d 100644
--- a/smart-hut/src/components/dashboard/DevicePanel.js
+++ b/smart-hut/src/components/dashboard/DevicePanel.js
@@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {
- Grid,
+ Grid,
} from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
@@ -10,125 +10,134 @@ import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import Light from "./devices/Light";
import SmartPlug from "./devices/SmartPlug";
import Sensor from "./devices/Sensor";
+import DigitalSensor from "./devices/DigitalSensor";
+import Switch from "./devices/Switch";
const devices = [
- {
- "id" : 1,
- "name": "Bedroom Light",
- "type" : "light",
- "hasIntensity" : true,
- "intensityLevel" : 0.20,
- ...LightDevice
- },
- {
- "id" : 2,
- "name": "Bathroom Light",
- "type" : "light",
- ...LightDevice
- },
- {
- "id" : 3,
- "name": "Desktop Light",
- "type" : "light",
- ...LightDevice
- },
- {
- "id" : 4,
- "name": "Entrance Light",
- "type" : "light",
- ...LightDevice
- },
- {
- "id" : 5,
- "name": "Smart Plug",
- "type" : "smartplug",
- ...SmartPlugDevice
- },
- {
- "id" : 6,
- "name": "Bedroom Thermometer",
- "type" : "temperature-sensor",
- },
+ {
+ "id": 1,
+ "name": "Bedroom Light",
+ "type": "light",
+ "hasIntensity": true,
+ "intensityLevel": 0.20,
+ ...LightDevice
+ },
+ {
+ "id": 2,
+ "name": "Bathroom Light",
+ "type": "light",
+ ...LightDevice
+ },
+ {
+ "id": 3,
+ "name": "Desktop Light",
+ "type": "light",
+ ...LightDevice
+ },
+ {
+ "id": 4,
+ "name": "Entrance Light",
+ "type": "light",
+ ...LightDevice
+ },
+ {
+ "id": 5,
+ "name": "Smart Plug",
+ "type": "smartplug",
+ ...SmartPlugDevice
+ },
+ {
+ "id": 6,
+ "name": "Bedroom Thermometer",
+ "type": "temperature-sensor",
+ },
+ {
+ "id": 7,
+ "name": "Bedroom Alarm",
+ },
+
];
class Panel extends Component {
- constructor(props) {
- super(props);
- this.state = {
- editMode : false,
- devices : devices,
- };
- }
-
- editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
-
- changeDeviceData = (deviceId, newSettings) => {
- console.log(newSettings.name, " <-- new name --> ", deviceId );
- this.state.devices.map(device => {
- if(device.id === deviceId){
- for(let prop in newSettings){
- if(device.hasOwnProperty(prop)){
- if(prop==="name"){
- if(checkMaxLength(newSettings[prop])){
- device[prop] = newSettings[prop];
- }
- else{
- alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
- }
- }else{
- device[prop] = newSettings[prop];
- }
-
- }
- }
- }
- return null;
- });
- this.forceUpdate();
+ constructor(props) {
+ super(props);
+ this.state = {
+ editMode: false,
+ devices: devices,
};
+ }
+
+ editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode}));
+
+ changeDeviceData = (deviceId, newSettings) => {
+ console.log(newSettings.name, " <-- new name --> ", deviceId);
+ this.state.devices.map(device => {
+ if (device.id === deviceId) {
+ for (let prop in newSettings) {
+ if (device.hasOwnProperty(prop)) {
+ if (prop === "name") {
+ if (checkMaxLength(newSettings[prop])) {
+ device[prop] = newSettings[prop];
+ } else {
+ alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
+ }
+ } else {
+ device[prop] = newSettings[prop];
+ }
+
+ }
+ }
+ }
+ return null;
+ });
+ this.forceUpdate();
+ };
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
}
export default class DevicePanel extends Component {
- constructor(props) {
- super(props);
- this.state = {
- shownRoom: "All"
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ shownRoom: "All"
}
+ }
- render() {
- return (
-
- )
- }
+ render() {
+ return (
+
+ )
+ }
}
diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensor.js b/smart-hut/src/components/dashboard/devices/DigitalSensor.js
new file mode 100644
index 0000000..a39e6b3
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/DigitalSensor.js
@@ -0,0 +1,58 @@
+/**
+ * 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";
+import {StyledDiv} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import {Image} from "semantic-ui-react";
+import {imageStyle, nameStyle} from "./DigitalSensorStyle";
+
+export default class DigitalSensor extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: false, // This value is a boolean, was this type of sensor returns presence/absence
+ };
+
+ this.iconOn = "/img/sensorOn.svg";
+ this.iconOff = "/img/sensorOff.svg"
+ }
+
+ setName = () => {
+ if(this.props.device.name.length > 15){
+ return this.props.device.name.slice(0,12) + "..."
+ }
+ return this.props.device.name;
+ };
+
+ getIcon = () => {
+ if(this.state.value){
+ return this.iconOn;
+ }
+ return this.iconOff;
+ };
+
+ componentDidMount() {
+ }
+
+
+ render() {
+ return (
+
+ this.props.onChangeData(id, newSettings)}/>
+
+ {this.props.device.name}
+
+ )
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js
new file mode 100644
index 0000000..f0fdf12
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js
@@ -0,0 +1,17 @@
+export const imageStyle = {
+ width: "3.5rem",
+ height: "auto",
+ position: "absolute",
+ top: "20%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
+};
+
+export const nameStyle = {
+ color : "black",
+ position: "absolute",
+ top: "40%",
+ left: "50%",
+ transform: "translateX(-50%)"
+};
diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
index 69a7df8..9817af9 100644
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -7,11 +7,11 @@
*/
import React, {Component} from "react";
-import {iconStyle, StyledDiv, nameStyle} from "./styleComponents";
+import {iconStyle, StyledDiv} 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";
+import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";
export default class Light extends Component {
constructor(props) {
diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js
index 046abee..528a2c1 100644
--- a/smart-hut/src/components/dashboard/devices/LightStyle.js
+++ b/smart-hut/src/components/dashboard/devices/LightStyle.js
@@ -8,7 +8,15 @@ export const valueStyle = {
export const intensityLightStyle = {
fill: "#3e99ff",
- fontSize: "1.5rem",
+ fontSize: "1.2rem",
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
+
+export const nameStyle = {
+ fontSize : "1.2rem",
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translateX(-50%)"
+};
diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js
index 5aaa7e5..2b80d19 100644
--- a/smart-hut/src/components/dashboard/devices/Sensor.js
+++ b/smart-hut/src/components/dashboard/devices/Sensor.js
@@ -10,7 +10,7 @@ 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 {
+export default class Sensor extends Component {
constructor(props) {
super(props);
this.state = {
diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js
index cd175c1..b5bde7f 100644
--- a/smart-hut/src/components/dashboard/devices/SmartPlug.js
+++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js
@@ -7,12 +7,11 @@
(kWh) . The user can reset this value.
**/
-
import React, {Component} from 'react';
-import {iconStyle, nameStyle, StyledDiv} from "./styleComponents";
+import {StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
-import {energyConsumedStyle, imageStyle} from "./SmartPlugStyle";
+import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle";
export default class SmartPlug extends Component {
constructor(props){
diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
index 4ee42fd..ea74700 100644
--- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
@@ -1,6 +1,7 @@
import {iconStyle} from "./styleComponents";
export const energyConsumedStyle = {
+ color : "black",
fontSize : "1.3rem",
position: "absolute",
top: "30%",
@@ -17,3 +18,11 @@ export const imageStyle = {
transform: "translateX(-50%)",
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
};
+
+export const nameStyle = {
+ color : "black",
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translateX(-50%)"
+};
diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js
new file mode 100644
index 0000000..4cc0021
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Switch.js
@@ -0,0 +1,56 @@
+/**
+ * Users can add on-off switches. A on-off switch can turn on (or off) lights.
+ * If a light has an intensity level, when it gets switched back on, it gets the last available
+ * intensity level that was set by the user (or 100% if no such level exists).
+ * The user can change the state of a switch through the SmartHut interface.
+ */
+
+import React, {Component} from 'react';
+import {StyledDiv} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import {Image} from "semantic-ui-react";
+import {imageStyle, nameStyle} from "./SwitchStyle";
+
+export default class Switch extends Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ turnedOn: false,
+ pointingLights : []
+ };
+ this.iconOn = "/img/switchOn.svg";
+ this.iconOff = "/img/switchOff.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)}/>
+
+ {this.props.device.name}
+
+ )
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
new file mode 100644
index 0000000..98e75c2
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
@@ -0,0 +1,17 @@
+export const imageStyle = {
+ width: "4.5rem",
+ height: "auto",
+ position: "absolute",
+ top: "15%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
+};
+
+export const nameStyle = {
+ color : "black",
+ position: "absolute",
+ top: "45%",
+ left: "50%",
+ transform: "translateX(-50%)"
+};
diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js
index 01c4083..6d3e289 100644
--- a/smart-hut/src/components/dashboard/devices/styleComponents.js
+++ b/smart-hut/src/components/dashboard/devices/styleComponents.js
@@ -16,9 +16,9 @@ export const editButtonStyle = {
export const panelStyle = {
position : "relative",
backgroundColor: "#fafafa",
- height: "100%",
+ height: "100vh",
width: "auto",
- padding: "3rem",
+ padding: "0rem 3rem",
};
export const editModeStyle = {
diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js
index 30f36e0..c0d7411 100644
--- a/smart-hut/src/views/Dashboard.js
+++ b/smart-hut/src/views/Dashboard.js
@@ -56,21 +56,22 @@ export default class Dashboard extends Component{
handleItemClick(el) {
//da fare richiesta get della room e settare activeItem
}
-
+
render () {
return(
+ // TODO poner esto otra vez igual que antes.
-
-
-
-
-
+ {/**/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/**/}
-
+