smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

All the devices are implemented

Browse source
This commit is contained in:
christiancp 2020-03-17 17:38:03 +01:00
parent b2503156a9
commit 744f1b5710
17 changed files with 394 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
smart-hut/public/img/sensorOff.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
smart-hut/public/img/sensorOn.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

48
smart-hut/public/img/switchOff.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

48
smart-hut/public/img/switchOn.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
smart-hut/src/App.js
View file

@ -98,7 +98,8 @@ class App extends Component {
</Route> </Route>
<Route path="/signup" exact component={Signup} /> <Route path="/signup" exact component={Signup} />
<Route path="/dashboard" > <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>
<Route path="/forgot-password" > <Route path="/forgot-password" >
<ForgotPass /> <ForgotPass />

13
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -10,6 +10,8 @@ import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import Light from "./devices/Light"; import Light from "./devices/Light";
import SmartPlug from "./devices/SmartPlug"; import SmartPlug from "./devices/SmartPlug";
import Sensor from "./devices/Sensor"; import Sensor from "./devices/Sensor";
import DigitalSensor from "./devices/DigitalSensor";
import Switch from "./devices/Switch";
const devices = [ const devices = [
@ -50,6 +52,11 @@ const devices = [
"name": "Bedroom Thermometer", "name": "Bedroom Thermometer",
"type": "temperature-sensor", "type": "temperature-sensor",
}, },
{
"id": 7,
"name": "Bedroom Alarm",
},
]; ];
class Panel extends Component { class Panel extends Component {
@ -73,8 +80,7 @@ class Panel extends Component {
if (prop === "name") { if (prop === "name") {
if (checkMaxLength(newSettings[prop])) { if (checkMaxLength(newSettings[prop])) {
device[prop] = newSettings[prop]; device[prop] = newSettings[prop];
} } else {
else{
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters."); alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
} }
} else { } else {
@ -104,6 +110,9 @@ class Panel extends Component {
<Grid.Column> <Grid.Column>
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/> <Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
</Grid.Column> </Grid.Column>
<Grid.Column>
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={this.state.editMode}/>
</Grid.Column>
<Grid.Column> <Grid.Column>
<NewDevice/> <NewDevice/>
</Grid.Column> </Grid.Column>

58
smart-hut/src/components/dashboard/devices/DigitalSensor.js Normal file
View 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>
)
}
}

17
smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js Normal file
View file

@ -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%)"
};

4
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -7,11 +7,11 @@
*/ */
import React, {Component} from "react"; import React, {Component} from "react";
import {iconStyle, StyledDiv, nameStyle} from "./styleComponents"; import {iconStyle, StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react"; import {Image} from "semantic-ui-react";
import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input"; 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 { export default class Light extends Component {
constructor(props) { constructor(props) {

10
smart-hut/src/components/dashboard/devices/LightStyle.js
View file

@ -8,7 +8,15 @@ export const valueStyle = {
export const intensityLightStyle = { export const intensityLightStyle = {
fill: "#3e99ff", fill: "#3e99ff",
fontSize: "1.5rem", fontSize: "1.2rem",
fontFamily: "Lato", fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", 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%)"
};

2
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -10,7 +10,7 @@ import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input"; import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle"; import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
export default class Light extends Component { export default class Sensor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {

5
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -7,12 +7,11 @@
(kWh) . The user can reset this value. (kWh) . The user can reset this value.
**/ **/
import React, {Component} from 'react'; import React, {Component} from 'react';
import {iconStyle, nameStyle, StyledDiv} from "./styleComponents"; import {StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react"; import {Image} from "semantic-ui-react";
import {energyConsumedStyle, imageStyle} from "./SmartPlugStyle"; import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle";
export default class SmartPlug extends Component { export default class SmartPlug extends Component {
constructor(props){ constructor(props){

9
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
View file

@ -1,6 +1,7 @@
import {iconStyle} from "./styleComponents"; import {iconStyle} from "./styleComponents";
export const energyConsumedStyle = { export const energyConsumedStyle = {
color : "black",
fontSize : "1.3rem", fontSize : "1.3rem",
position: "absolute", position: "absolute",
top: "30%", top: "30%",
@ -17,3 +18,11 @@ export const imageStyle = {
transform: "translateX(-50%)", transform: "translateX(-50%)",
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" 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
View 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
View 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%)"
};

4
smart-hut/src/components/dashboard/devices/styleComponents.js
View file

@ -16,9 +16,9 @@ export const editButtonStyle = {
export const panelStyle = { export const panelStyle = {
position : "relative", position : "relative",
backgroundColor: "#fafafa", backgroundColor: "#fafafa",
height: "100%", height: "100vh",
width: "auto", width: "auto",
padding: "3rem", padding: "0rem 3rem",
}; };
export const editModeStyle = { export const editModeStyle = {

11
smart-hut/src/views/Dashboard.js
View file

@ -59,13 +59,14 @@ export default class Dashboard extends Component{
render () { render () {
return( return(
// TODO poner esto otra vez igual que antes.
<div style={{height : "110vh", background: '#1b1c1d'}}> <div style={{height : "110vh", background: '#1b1c1d'}}>
<Grid > <Grid >
<Grid.Row color='black'> {/*<Grid.Row color='black'>*/}
<Grid.Column> {/* <Grid.Column>*/}
<MyHeader /> {/* <MyHeader />*/}
</Grid.Column> {/* </Grid.Column>*/}
</Grid.Row> {/*</Grid.Row>*/}
<Grid.Row color='black'> <Grid.Row color='black'>
<Grid.Column width={3}> <Grid.Column width={3}>
<Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/> <Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>