All the devices are implemented
This commit is contained in:
christiancp
parent
b2503156a9
commit
744f1b5710
17 changed files with 394 additions and 121 deletions
1
smart-hut/public/img/sensorOff.svg
Normal file
1
smart-hut/public/img/sensorOff.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m437.066 74.981c-5.857-5.858-15.355-5.858-21.213 0s-5.858 15.355 0 21.213c42.656 42.655 66.147 99.409 66.147 159.806s-23.491 117.151-66.147 159.806c-5.858 5.857-5.858 15.355 0 21.213 5.868 5.868 15.365 5.848 21.213 0 48.322-48.321 74.934-112.608 74.934-181.019s-26.612-132.698-74.934-181.019z"/><path d="m391.646 120.4c-5.858-5.857-15.356-5.857-21.213 0-5.857 5.858-5.857 15.355 0 21.213 30.533 30.531 47.349 71.155 47.349 114.387s-16.815 83.855-47.349 114.387c-5.858 5.858-5.858 15.355 0 21.213 5.856 5.856 15.353 5.859 21.213 0 36.2-36.198 56.136-84.355 56.136-135.601s-19.937-99.402-56.136-135.599z"/><path d="m346.193 165.852c-5.858-5.857-15.356-5.857-21.213 0-5.858 5.858-5.857 15.356 0 21.213 18.4 18.398 28.533 42.88 28.533 68.934s-10.133 50.536-28.533 68.934c-5.858 5.857-5.858 15.355 0 21.213 5.857 5.857 15.354 5.859 21.213 0 24.066-24.065 37.32-56.08 37.32-90.148s-13.254-66.081-37.32-90.146z"/><path d="m30 256c0-60.397 23.491-117.151 66.147-159.806 5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.354-5.858-21.213 0-48.322 48.321-74.934 112.608-74.934 181.019s26.612 132.698 74.934 181.019c5.856 5.857 15.355 5.859 21.213 0 5.858-5.858 5.858-15.355 0-21.213-42.656-42.655-66.147-99.409-66.147-159.806z"/><path d="m94.219 256c0-43.232 16.815-83.855 47.349-114.387 5.858-5.858 5.858-15.355 0-21.213-5.857-5.858-15.355-5.857-21.213 0-36.2 36.197-56.136 84.355-56.136 135.6s19.936 99.403 56.136 135.601c5.866 5.865 15.363 5.85 21.213 0 5.857-5.858 5.857-15.355 0-21.213-30.534-30.532-47.349-71.156-47.349-114.388z"/><path d="m187.021 165.853c-5.857-5.858-15.355-5.858-21.213 0-24.066 24.065-37.32 56.08-37.32 90.148s13.254 66.083 37.32 90.148c5.866 5.865 15.363 5.85 21.213 0 5.858-5.858 5.857-15.356 0-21.213-18.4-18.398-28.533-42.88-28.533-68.934s10.133-50.536 28.533-68.934c5.857-5.859 5.857-15.357 0-21.215z"/><path d="m256 192.8c-34.849 0-63.2 28.352-63.2 63.2s28.352 63.2 63.2 63.2 63.2-28.352 63.2-63.2-28.351-63.2-63.2-63.2z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
smart-hut/public/img/sensorOn.svg
Normal file
1
smart-hut/public/img/sensorOn.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m415.853 437.019c-5.858-5.858-5.858-15.355 0-21.213 42.656-42.655 66.147-99.409 66.147-159.806s-23.491-117.151-66.147-159.806c-5.858-5.857-5.858-15.355 0-21.213 5.857-5.858 15.355-5.858 21.213 0 48.322 48.321 74.934 112.608 74.934 181.019s-26.612 132.698-74.934 181.019c-5.848 5.848-15.345 5.868-21.213 0z" fill="#7affe4"/><path d="m370.432 391.6c-5.857-5.858-5.857-15.355 0-21.213 30.533-30.531 47.349-71.155 47.349-114.387s-16.815-83.855-47.349-114.387c-5.858-5.858-5.858-15.355 0-21.213 5.857-5.857 15.355-5.858 21.213 0 36.2 36.198 56.136 84.355 56.136 135.601s-19.936 99.403-56.136 135.601c-5.86 5.858-15.356 5.855-21.213-.002z" fill="#00ddc1"/><path d="m324.979 346.148c-5.858-5.858-5.857-15.356 0-21.213 18.4-18.398 28.533-42.88 28.533-68.934s-10.133-50.536-28.533-68.934c-5.858-5.857-5.858-15.355 0-21.213 5.857-5.857 15.355-5.858 21.213 0 24.066 24.065 37.32 56.08 37.32 90.148s-13.254 66.083-37.32 90.148c-5.858 5.857-15.356 5.854-21.213-.002z" fill="#7affe4"/><path d="m415.853 437.019c5.868 5.868 15.365 5.848 21.213 0 48.322-48.321 74.934-112.608 74.934-181.019h-30c0 60.397-23.491 117.151-66.147 159.806-5.858 5.858-5.858 15.355 0 21.213z" fill="#00ddc1"/><path d="m370.432 391.6c5.856 5.856 15.353 5.859 21.213 0 36.2-36.198 56.136-84.355 56.136-135.601h-30c0 43.232-16.815 83.855-47.349 114.387-5.857 5.859-5.857 15.356 0 21.214z" fill="#00b4bc"/><path d="m324.979 346.148c5.857 5.857 15.354 5.859 21.213 0 24.066-24.065 37.32-56.08 37.32-90.148h-30c0 26.054-10.133 50.536-28.533 68.934-5.857 5.858-5.857 15.355 0 21.214z" fill="#00ddc1"/><path d="m74.934 437.019c-48.322-48.321-74.934-112.608-74.934-181.019s26.612-132.698 74.934-181.019c5.858-5.858 15.355-5.857 21.213 0 5.858 5.858 5.858 15.355 0 21.213-42.656 42.655-66.147 99.409-66.147 159.806s23.491 117.151 66.147 159.806c5.858 5.857 5.858 15.355 0 21.213-5.858 5.859-15.357 5.857-21.213 0z" fill="#7affe4"/><path d="m120.354 391.601c-36.199-36.198-56.135-84.355-56.135-135.601s19.936-99.403 56.136-135.601c5.858-5.857 15.356-5.857 21.213 0 5.857 5.858 5.857 15.355 0 21.213-30.534 30.533-47.349 71.156-47.349 114.388s16.815 83.855 47.349 114.387c5.858 5.858 5.858 15.355 0 21.213-5.85 5.85-15.347 5.866-21.214.001z" fill="#00ddc1"/><path d="m165.807 346.148c-24.066-24.065-37.32-56.08-37.32-90.148s13.254-66.083 37.32-90.148c5.858-5.858 15.356-5.857 21.213 0 5.858 5.858 5.857 15.356 0 21.213-18.4 18.398-28.533 42.88-28.533 68.934s10.133 50.536 28.533 68.934c5.858 5.857 5.858 15.355 0 21.213-5.85 5.852-15.347 5.867-21.213.002z" fill="#7affe4"/><path d="m96.147 437.019c5.858-5.858 5.858-15.355 0-21.213-42.656-42.655-66.147-99.409-66.147-159.806h-30c0 68.411 26.612 132.698 74.934 181.019 5.856 5.857 15.355 5.859 21.213 0z" fill="#00ddc1"/><path d="m141.568 391.6c5.857-5.858 5.857-15.355 0-21.213-30.534-30.531-47.349-71.155-47.349-114.387h-30c0 51.246 19.936 99.403 56.136 135.601 5.866 5.865 15.363 5.849 21.213-.001z" fill="#00b4bc"/><path d="m187.021 346.148c5.858-5.858 5.857-15.356 0-21.213-18.4-18.398-28.533-42.88-28.533-68.934h-30c0 34.068 13.254 66.083 37.32 90.148 5.865 5.864 15.362 5.849 21.213-.001z" fill="#00ddc1"/><circle cx="256" cy="256" fill="#00ddc1" r="63.2"/><path d="m256 319.2c34.849 0 63.2-28.352 63.2-63.2h-126.4c0 34.849 28.351 63.2 63.2 63.2z" fill="#00b4bc"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
48
smart-hut/public/img/switchOff.svg
Normal file
48
smart-hut/public/img/switchOff.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M336.709,74.843c-10.322-3.944-21.88,1.219-25.825,11.537c-3.945,10.316,1.22,21.879,11.536,25.824
|
||||
C393.115,139.239,442,207.384,442,286c0,102.561-83.439,186-186,186S70,388.561,70,286c0-78.659,48.908-146.766,119.573-173.793
|
||||
c10.317-3.946,15.481-15.509,11.536-25.825c-3.947-10.317-15.512-15.48-25.825-11.536C89.185,107.777,30,190.692,30,286
|
||||
c0,124.922,101.09,226,226,226c124.922,0,226-101.09,226-226C482,190.65,422.778,107.759,336.709,74.843z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,0c-11.046,0-20,8.954-20,20v195.851c0,11.046,8.954,20,20,20s20-8.955,20-20V20C276,8.954,267.046,0,256,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
48
smart-hut/public/img/switchOn.svg
Normal file
48
smart-hut/public/img/switchOn.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="30" y1="258" x2="482" y2="258" gradientTransform="matrix(1 0 0 -1 0 514)">
|
||||
<stop offset="0" style="stop-color:#80D8FF"/>
|
||||
<stop offset="0.16" style="stop-color:#88D1FF"/>
|
||||
<stop offset="0.413" style="stop-color:#9FBEFE"/>
|
||||
<stop offset="0.725" style="stop-color:#C4A0FD"/>
|
||||
<stop offset="1" style="stop-color:#EA80FC"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_1_);" d="M256,512C131.09,512,30,410.922,30,286c0-95.308,59.185-178.223,145.284-211.154
|
||||
c10.313-3.944,21.878,1.219,25.825,11.536c3.945,10.316-1.219,21.879-11.536,25.825C118.908,139.234,70,207.341,70,286
|
||||
c0,102.561,83.439,186,186,186s186-83.439,186-186c0-78.616-48.885-146.761-119.58-173.796
|
||||
c-10.316-3.945-15.481-15.508-11.536-25.824c3.945-10.318,15.503-15.481,25.825-11.537C422.778,107.759,482,190.65,482,286
|
||||
C482,410.91,380.922,512,256,512z M276,215.851V20c0-11.046-8.954-20-20-20s-20,8.954-20,20v195.851c0,11.046,8.954,20,20,20
|
||||
C267.046,235.851,276,226.896,276,215.851z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -98,7 +98,8 @@ class App extends Component {
|
|||
</Route>
|
||||
<Route path="/signup" exact component={Signup} />
|
||||
<Route path="/dashboard" >
|
||||
{this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
|
||||
//TODO Change this back the exclamation
|
||||
{!this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
|
||||
</Route>
|
||||
<Route path="/forgot-password" >
|
||||
<ForgotPass />
|
||||
|
|
|
|||
|
|
@ -10,46 +10,53 @@ 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,
|
||||
"id": 1,
|
||||
"name": "Bedroom Light",
|
||||
"type" : "light",
|
||||
"hasIntensity" : true,
|
||||
"intensityLevel" : 0.20,
|
||||
"type": "light",
|
||||
"hasIntensity": true,
|
||||
"intensityLevel": 0.20,
|
||||
...LightDevice
|
||||
},
|
||||
{
|
||||
"id" : 2,
|
||||
"id": 2,
|
||||
"name": "Bathroom Light",
|
||||
"type" : "light",
|
||||
"type": "light",
|
||||
...LightDevice
|
||||
},
|
||||
{
|
||||
"id" : 3,
|
||||
"id": 3,
|
||||
"name": "Desktop Light",
|
||||
"type" : "light",
|
||||
"type": "light",
|
||||
...LightDevice
|
||||
},
|
||||
{
|
||||
"id" : 4,
|
||||
"id": 4,
|
||||
"name": "Entrance Light",
|
||||
"type" : "light",
|
||||
"type": "light",
|
||||
...LightDevice
|
||||
},
|
||||
{
|
||||
"id" : 5,
|
||||
"id": 5,
|
||||
"name": "Smart Plug",
|
||||
"type" : "smartplug",
|
||||
"type": "smartplug",
|
||||
...SmartPlugDevice
|
||||
},
|
||||
{
|
||||
"id" : 6,
|
||||
"id": 6,
|
||||
"name": "Bedroom Thermometer",
|
||||
"type" : "temperature-sensor",
|
||||
"type": "temperature-sensor",
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Bedroom Alarm",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
class Panel extends Component {
|
||||
|
|
@ -57,27 +64,26 @@ class Panel extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
editMode : false,
|
||||
devices : devices,
|
||||
editMode: false,
|
||||
devices: devices,
|
||||
};
|
||||
}
|
||||
|
||||
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
||||
editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode}));
|
||||
|
||||
changeDeviceData = (deviceId, newSettings) => {
|
||||
console.log(newSettings.name, " <-- new name --> ", deviceId );
|
||||
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])){
|
||||
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{
|
||||
} else {
|
||||
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
device[prop] = newSettings[prop];
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +110,9 @@ class Panel extends Component {
|
|||
<Grid.Column>
|
||||
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<NewDevice/>
|
||||
</Grid.Column>
|
||||
|
|
|
|||
58
smart-hut/src/components/dashboard/devices/DigitalSensor.js
Normal file
58
smart-hut/src/components/dashboard/devices/DigitalSensor.js
Normal file
|
|
@ -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 (
|
||||
<StyledDiv style={{textAlign: "center"}}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
|
||||
<Image src={this.getIcon()} style={imageStyle}/>
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
</StyledDiv>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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%)"
|
||||
};
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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%)"
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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%)"
|
||||
};
|
||||
|
|
|
|||
56
smart-hut/src/components/dashboard/devices/Switch.js
Normal file
56
smart-hut/src/components/dashboard/devices/Switch.js
Normal file
|
|
@ -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 (
|
||||
<StyledDiv onClick={this.props.edit ? () => {} : this.onClickDevice} style={{textAlign: "center"}}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
|
||||
<Image src={this.getIcon()} style={imageStyle}/>
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
</StyledDiv>
|
||||
)
|
||||
}
|
||||
}
|
||||
17
smart-hut/src/components/dashboard/devices/SwitchStyle.js
Normal file
17
smart-hut/src/components/dashboard/devices/SwitchStyle.js
Normal file
|
|
@ -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%)"
|
||||
};
|
||||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -59,13 +59,14 @@ export default class Dashboard extends Component{
|
|||
|
||||
render () {
|
||||
return(
|
||||
// TODO poner esto otra vez igual que antes.
|
||||
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||
<Grid >
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column>
|
||||
<MyHeader />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
{/*<Grid.Row color='black'>*/}
|
||||
{/* <Grid.Column>*/}
|
||||
{/* <MyHeader />*/}
|
||||
{/* </Grid.Column>*/}
|
||||
{/*</Grid.Row>*/}
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column width={3}>
|
||||
<Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue