From 182e1d6a48b6fb334130669931f90ee71b115a69 Mon Sep 17 00:00:00 2001 From: christiancp Date: Sun, 15 Mar 2020 15:50:25 +0100 Subject: [PATCH] Almost all the devices in the dashboard are implemented, along with the settings and add new device feature --- smart-hut/public/img/smart-plug-off.svg | 1 + smart-hut/public/img/smart-plug.svg | 1 + .../src/components/dashboard/DevicePanel.js | 173 +++++++++++------- .../components/dashboard/devices/Device.js | 113 ++++-------- .../dashboard/devices/DeviceSettings.js | 73 ++++++++ .../components/dashboard/devices/Dimmer.js | 52 ++++++ .../src/components/dashboard/devices/Light.js | 92 ++++++++++ .../dashboard/devices/LightStyle.js | 14 ++ .../components/dashboard/devices/NewDevice.js | 135 +++++++++----- .../components/dashboard/devices/Sensor.js | 115 ++++++------ .../dashboard/devices/SensorStyle.js | 23 +++ .../components/dashboard/devices/SmartPlug.js | 60 ++++++ .../dashboard/devices/SmartPlugStyle.js | 19 ++ .../components/dashboard/devices/Switcher.js | 0 .../dashboard/devices/TypesOfDevices.js | 9 +- .../components/dashboard/devices/constants.js | 5 + .../dashboard/devices/styleComponents.js | 59 +++++- 17 files changed, 690 insertions(+), 254 deletions(-) create mode 100644 smart-hut/public/img/smart-plug-off.svg create mode 100644 smart-hut/public/img/smart-plug.svg create mode 100644 smart-hut/src/components/dashboard/devices/DeviceSettings.js create mode 100644 smart-hut/src/components/dashboard/devices/Dimmer.js create mode 100644 smart-hut/src/components/dashboard/devices/Light.js create mode 100644 smart-hut/src/components/dashboard/devices/LightStyle.js create mode 100644 smart-hut/src/components/dashboard/devices/SensorStyle.js create mode 100644 smart-hut/src/components/dashboard/devices/SmartPlug.js create mode 100644 smart-hut/src/components/dashboard/devices/SmartPlugStyle.js create mode 100644 smart-hut/src/components/dashboard/devices/Switcher.js create mode 100644 smart-hut/src/components/dashboard/devices/constants.js diff --git a/smart-hut/public/img/smart-plug-off.svg b/smart-hut/public/img/smart-plug-off.svg new file mode 100644 index 0000000..40e2e99 --- /dev/null +++ b/smart-hut/public/img/smart-plug-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/smart-plug.svg b/smart-hut/public/img/smart-plug.svg new file mode 100644 index 0000000..946abec --- /dev/null +++ b/smart-hut/public/img/smart-plug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index 20171bd..52c877e 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -1,85 +1,134 @@ import React, {Component} from 'react'; import { - Grid, + Grid, } from "semantic-ui-react"; import Device from "./devices/Device"; import NewDevice from "./devices/NewDevice"; -import {LightDevice, TemperatureSensor} from "./devices/TypesOfDevices"; +import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices"; import {editButtonStyle, panelStyle} from "./devices/styleComponents"; +import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants"; +import Light from "./devices/Light"; +import SmartPlug from "./devices/SmartPlug"; +import Sensor from "./devices/Sensor"; + + +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", + }, +]; class Panel extends Component { - constructor(props) { - super(props); - this.state = { - editMode : false + 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(); }; - } - editModeController = (e) => { - this.setState((prevState) => ({ editMode: !prevState.editMode })); - }; - render() { - const devices = [ - { - "name": "Bedroom Light", - ...LightDevice - }, - { - "name": "Bathroom Light", - ...LightDevice - }, - { - "name": "Desktop Light", - ...LightDevice - }, - { - "name": "Entrance Light", - ...LightDevice - }, - { - "name": "Bedroom", - ...TemperatureSensor - } - ]; - - return ( -
- - - {devices.map((e, i) => { - 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/Device.js b/smart-hut/src/components/dashboard/devices/Device.js index 3ca57de..d1fb1f0 100644 --- a/smart-hut/src/components/dashboard/devices/Device.js +++ b/smart-hut/src/components/dashboard/devices/Device.js @@ -1,87 +1,48 @@ import React, {Component} from 'react'; -import styled from 'styled-components'; import {Image} from "semantic-ui-react"; -import Sensor from './Sensor'; -import {editModeIconStyle, editModeStyle} from "./styleComponents"; +import {iconStyle, nameStyle, StyledDiv} from "./styleComponents"; +import Settings from './DeviceSettings'; -const StyledDiv = styled.div` - background-color : white; - padding : 3rem; - width: 10rem; - height: 10rem; - border-radius : 100%; - border : none; - position : relative; - box-shadow: 3px 2px 10px 5px #ccc; - transition : all .3s ease-out; - :hover{ - background-color : #f2f2f2; - } - :active{ - transform : translate(0.3px, 0.8px); - box-shadow: 0.5px 0.5px 7px 3.5px #ccc; - } -`; - -const iconStyle = { - width: "4rem", - height: "auto", - position: "absolute", - top: "20%", - left: "50%", - transform: "translateX(-50%)", - filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" -}; - -const nameStyle = { - position: "absolute", - top: "50%", - left: "50%", - transform: "translateX(-50%)" -} export default class Device extends Component { - constructor(props) { - super(props); - this.state = { - turnOnOff: "off", - icon: this.props.device.img + constructor(props) { + super(props); + this.state = { + turnOnOff: "off", + icon: this.props.device.img + } } - } - onClickDevice = () => { - if (this.props.device.type === "light") { - if (this.state.turnOnOff === "on") { - this.setState({ - turnOnOff: "off", - icon: this.props.device.img - }); - } else { - this.setState({ - turnOnOff: "on", - icon: this.props.device.imgClick - }); - } + onClickDevice = () => { + if (!this.props.edit) { + if (this.props.device.type === "light") { + if (this.state.turnOnOff === "on") { + this.setState({ + turnOnOff: "off", + icon: this.props.device.img + }); + } else { + this.setState({ + turnOnOff: "on", + icon: this.props.device.imgClick + }); + } + } + } + }; + render() { + return ( + { + } : this.onClickDevice} style={{textAlign: "center"}}> + this.props.onChangeData(id, newSettings)}/> + +
{this.props.device.name}
+ + ) } - }; - - render() { - if (this.props.device.type === "temperature_sensor") { - return ( - - {this.props.edit ? () : ("")} - - - ) - } - return ( - - {this.props.edit ? () : ("")} - -
{this.props.device.name}
- - ) - } } diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettings.js b/smart-hut/src/components/dashboard/devices/DeviceSettings.js new file mode 100644 index 0000000..7fe9884 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/DeviceSettings.js @@ -0,0 +1,73 @@ +import React, {Component} from "react"; +import {Button, Form} from "semantic-ui-react"; +import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents"; + +class SettingsForm extends Component { + constructor(props) { + super(props); + this.state = {} + }; + + onChangeHandler = (event) => { + let nam = event.target.name; + let val = event.target.value; + this.setState({[nam]: val}); + }; + + saveChanges = () => { + let newName = this.state["new-name"]; + this.props.onChangeData(this.props.id, {"name": newName}); + }; + + render() { + return ( +
+ + + + + +
+ ) + } +} + + +export default class Settings extends Component { + constructor(props) { + super(props); + this.state = { + displayForm: false, + } + }; + + displayForm = () => { + this.setState((prevState) => ({displayForm: !prevState.displayForm})); + }; + + render() { + const view = ( +
+ {this.state.displayForm ? ( + ) : ("")} +
+ + {!this.state.displayForm ? ( + ) + : +

×

+ } + +
+
+ ); + 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)}/> + +

{this.state.energyConsumed} KWh

+
{this.props.device.name}
+ + ) + } +} diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js new file mode 100644 index 0000000..4ee42fd --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js @@ -0,0 +1,19 @@ +import {iconStyle} from "./styleComponents"; + +export const energyConsumedStyle = { + fontSize : "1.3rem", + position: "absolute", + top: "30%", + left: "50%", + transform: "translateX(-50%)" +}; + +export const imageStyle = { + width: "3.5rem", + height: "auto", + position: "absolute", + top: "10%", + left: "50%", + transform: "translateX(-50%)", + filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" +}; diff --git a/smart-hut/src/components/dashboard/devices/Switcher.js b/smart-hut/src/components/dashboard/devices/Switcher.js new file mode 100644 index 0000000..e69de29 diff --git a/smart-hut/src/components/dashboard/devices/TypesOfDevices.js b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js index 35320ac..ebe8ba2 100644 --- a/smart-hut/src/components/dashboard/devices/TypesOfDevices.js +++ b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js @@ -1,13 +1,18 @@ export const LightDevice = { - type : "light", img : "/img/lightOff.svg", imgClick : "/img/lightOn.svg" }; +export const SmartPlugDevice = { + img : "/img/smart-plug.svg", + imgClick : "/img/smart-plug-off.svg" +}; + export const TemperatureSensor = { type : "temperature_sensor", img : "", imgClick : "", units: "ºC", - maxValue : 30 }; + +export const deviceList = ["Light", "Dimmer", "Switcher", "Smart Plug", "Sensor"]; diff --git a/smart-hut/src/components/dashboard/devices/constants.js b/smart-hut/src/components/dashboard/devices/constants.js new file mode 100644 index 0000000..8ae9813 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/constants.js @@ -0,0 +1,5 @@ +export const DEVICE_NAME_MAX_LENGTH = 15; + +export function checkMaxLength(name){ + return !(name.length > DEVICE_NAME_MAX_LENGTH); +} diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js index f61fc12..01c4083 100644 --- a/smart-hut/src/components/dashboard/devices/styleComponents.js +++ b/smart-hut/src/components/dashboard/devices/styleComponents.js @@ -1,3 +1,5 @@ +import styled from "styled-components"; + export const editButtonStyle = { position : "absolute", top: "0", @@ -12,6 +14,7 @@ export const editButtonStyle = { }; export const panelStyle = { + position : "relative", backgroundColor: "#fafafa", height: "100%", width: "auto", @@ -38,4 +41,58 @@ export const editModeIconStyle = { height : "0.75rem", borderRadius : "20%", zIndex : "101" -} +}; + +export const iconStyle = { + width: "4rem", + 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 = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)" +}; + + +export const formStyle = { + position : "absolute", + zIndex: "1000", + width : "80rem", + height : "10rem", + padding : "1rem", + margin : "1rem", + borderRadius : "10%", + boxShadow : "1px 1px 5px 2px #5d5d5d", + backgroundColor: "#3e99ff", +}; + +export const addDeviceFormStyle = { + maxWidth : "400px", + background : "#3e99ff", + paddingRight : "5rem", +}; + +export const StyledDiv = styled.div` + background-color : white; + padding : 3rem; + width: 10rem; + height: 10rem; + border-radius : 100%; + border : none; + position : relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition : all .3s ease-out; + :hover{ + background-color : #f2f2f2; + } + :active{ + transform : translate(0.3px, 0.8px); + box-shadow: 0.5px 0.5px 7px 3.5px #ccc; + } +`;