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

Beautified source code

Browse source
This commit is contained in:
Claudio Maggioni 2020-03-23 21:24:17 +01:00
parent 50e53e6fe9
commit 82924d6062
50 changed files with 2784 additions and 2478 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
smart-hut/public/index.html
View file

@ -1,21 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@ -24,13 +32,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@ -40,6 +48,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</html>

3
smart-hut/public/manifest.json
View file

@ -1,8 +1,7 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
],
"icons": [],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",

9
smart-hut/public/style.css
View file

@ -1,7 +1,6 @@
*{
margin: 0;
padding: 0;
font-family: "Lato", Helvetica, SansSerif, serif;
* {
margin: 0;
padding: 0;
font-family: "Lato", Helvetica, SansSerif, serif;
}
/*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/

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

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import React, { Component } from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./views/Home";
import Dashboard from "./views/Dashboard";
import Signup from "./views/Signup";
@ -10,9 +10,9 @@ import ChangePass from "./views/Forgot-pass-reset";
import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
import ConfirmRegistration from "./views/ConfirmRegistration";
import Instruction from "./views/Instruction";
import queryString from 'query-string';
import queryString from "query-string";
import { call } from './client_server';
import { call } from "./client_server";
/*let userJsonString = JSON.parse(localStorage.getItem("token"));
let date = new Date().getTime().toString();
@ -27,9 +27,9 @@ class App extends Component {
let loggedIn = false;
try {
try {
let userJsonString = localStorage.getItem("token");
let exp = localStorage.getItem("exp");
let exp = localStorage.getItem("exp");
let date = new Date().getTime();
if (userJsonString && exp && date < exp) {
loggedIn = true;
@ -37,13 +37,11 @@ class App extends Component {
localStorage.removeItem("token");
localStorage.removeItem("exp");
}
}catch(exception) {
} catch (exception) {}
}
this.state = {
loggedIn: loggedIn,
};
this.state = {
loggedIn: loggedIn,
};
this.auth = this.auth.bind(this);
this.logout = this.logout.bind(this);
@ -53,80 +51,88 @@ class App extends Component {
if (window.location) {
const values = queryString.parse(window.location.search);
this.setState({
query : values
query: values,
});
} else {
this.setState({
query : "ciao"
query: "ciao",
});
}
}
auth(data) {
return call.login(data.params)
.then(res => {
return call
.login(data.params)
.then((res) => {
if (res.data && res.status === 200) {
let expire = new Date().getTime()+60*60*5*1000;
let expire = new Date().getTime() + 60 * 60 * 5 * 1000;
localStorage.setItem("token", res.data.jwttoken);
localStorage.setItem("exp", expire)
localStorage.setItem("exp", expire);
call.setToken(res.data.jwttoken);
this.setState(
{
user: data.params.user,
token: res.data.jwttoken,
loggedIn: true,
}
);
this.setState({
user: data.params.user,
token: res.data.jwttoken,
loggedIn: true,
});
return res;
//this.props.history.push("/dashboard");
} else {
this.setState({
error: res.data.message
error: res.data.message,
});
return this.state.error;
}
}).catch(err => {
console.log(err);
return {status : "Errore"};
})
.catch((err) => {
console.log(err);
return { status: "Errore" };
});
};
}
logout() {
this.setState({
loggedIn : false,
loggedIn: false,
});
localStorage.removeItem("token");
localStorage.removeItem("exp");
};
}
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" >
{ this.state.loggedIn && this.state.token ? <Redirect tkn={this.state.token} to="/dashboard" /> : <Login auth={this.auth} /> }
<Route path="/login">
{this.state.loggedIn && this.state.token ? (
<Redirect tkn={this.state.token} to="/dashboard" />
) : (
<Login auth={this.auth} />
)}
</Route>
<Route path="/signup" exact component={Signup} />
<Route path="/dashboard" >
{this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
<Route path="/dashboard">
{this.state.loggedIn ? (
<Dashboard tkn={this.state.token} logout={this.logout} />
) : (
<Redirect to="/login" />
)}
</Route>
<Route path="/forgot-password" >
<ForgotPass />
<Route path="/forgot-password">
<ForgotPass />
</Route>
<Route path="/sent-email" >
<ConfirmForgotPasswrod />
<Route path="/sent-email">
<ConfirmForgotPasswrod />
</Route>
<Route path="/sent-email-reg" >
<ConfirmRegistration />
<Route path="/sent-email-reg">
<ConfirmRegistration />
</Route>
<Route path="/instruction" >
<Instruction />
<Route path="/instruction">
<Instruction />
</Route>
<Route path="/forgot-pass-reset" > </Route>
<Route path="/password-reset" >
<ChangePass query={this.state.query}/>
<Route path="/forgot-pass-reset"> </Route>
<Route path="/password-reset">
<ChangePass query={this.state.query} />
</Route>
<Route component={FourOhFour} />
</Switch>
@ -136,4 +142,3 @@ class App extends Component {
}
export default App;

7
smart-hut/src/App.test.js
View file

@ -1,8 +1,8 @@
import React from 'react';
import { render } from '@testing-library/react';
import React from "react";
import { render } from "@testing-library/react";
import { Router } from "react-router";
import { createMemoryHistory } from "history";
import App from './App';
import App from "./App";
test("redirects to homepage", () => {
const history = createMemoryHistory();
@ -13,4 +13,3 @@ test("redirects to homepage", () => {
);
expect(history.location.pathname).toBe("/");
});

173
smart-hut/src/client_server.js
View file

@ -1,6 +1,6 @@
import axios from 'axios';
import axios from "axios";
let config = 'http://localhost:8080/';
let config = "http://localhost:8080/";
var tkn = localStorage.getItem("token");
// requests data devices
@ -25,75 +25,104 @@ var tkn = localStorage.getItem("token");
*/
export var call = {
setToken: function(token) {
tkn = token;
},
login: function(data, headers) {
return axios.post(config +'auth/login', data)
},
register: function(data, headers) {
return axios.post(config + 'register', data)
},
initResetPassword: function(data, headers) {
return axios.post(config + 'register/init-reset-password', data)
},
resetPassword: function(data, headers) {
return axios.put(config + 'register/reset-password', data)
},
getAllRooms: function(token) {
if (!token){
token = tkn;
}
return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } })
},
getAllDevices: function(token) {
if (!token){
token = tkn;
}
return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } });
},
getAllDevicesByRoom: function(id, token) {
if (!token){
token = tkn;
}
return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } });
},
createRoom: function(data, headers) {
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
},
updateRoom: function(data, headers) {
return axios.put(config + 'room/'+ data.id, data, { headers: { Authorization : "Bearer " + tkn } })
},
deleteRoom: function(data, headers) {
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
},
devicePost: function(data, headers) {
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
.then(res => {
if (res.status === 200 && (data.device === "switch")) {
data.params.lights.forEach(e => {
let urlUp = config + data.device + '/' + res.data.id + '/lights?switchableId=' + e;
axios.post(urlUp, {}, { headers: { Authorization : "Bearer " + tkn } })
});
}
return res;
})
},
deviceUpdate: function(data, typeDevice) {
let url = 'device';
if (typeDevice) {
url = typeDevice;
}
return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } })
},
deviceDelete: function(data, headers) {
return axios.delete(config + data.device + '/' + data.id, { headers: { Authorization : "Bearer " + tkn } })
},
deviceGetById: function(data, headers) {
return axios.get(config + data.device + '/' + data.id)
},
deviceGetAll: function(data, headers) {
return axios.get(config + data.device)
export var call = {
setToken: function (token) {
tkn = token;
},
login: function (data, headers) {
return axios.post(config + "auth/login", data);
},
register: function (data, headers) {
return axios.post(config + "register", data);
},
initResetPassword: function (data, headers) {
return axios.post(config + "register/init-reset-password", data);
},
resetPassword: function (data, headers) {
return axios.put(config + "register/reset-password", data);
},
getAllRooms: function (token) {
if (!token) {
token = tkn;
}
return axios.get(config + "room", {
headers: { Authorization: "Bearer " + token },
});
},
getAllDevices: function (token) {
if (!token) {
token = tkn;
}
return axios.get(config + "device", {
headers: { Authorization: "Bearer " + token },
});
},
getAllDevicesByRoom: function (id, token) {
if (!token) {
token = tkn;
}
return axios.get(config + "room/" + id + "/devices", {
headers: { Authorization: "Bearer " + token },
});
},
createRoom: function (data, headers) {
return axios.post(config + "room", data, {
headers: { Authorization: "Bearer " + tkn },
});
},
updateRoom: function (data, headers) {
return axios.put(config + "room/" + data.id, data, {
headers: { Authorization: "Bearer " + tkn },
});
},
deleteRoom: function (data, headers) {
return axios.delete(config + "room/" + data.id, {
headers: { Authorization: "Bearer " + tkn },
});
},
devicePost: function (data, headers) {
return axios
.post(config + data.device, data.params, {
headers: { Authorization: "Bearer " + tkn },
})
.then((res) => {
if (res.status === 200 && data.device === "switch") {
data.params.lights.forEach((e) => {
let urlUp =
config +
data.device +
"/" +
res.data.id +
"/lights?switchableId=" +
e;
axios.post(
urlUp,
{},
{ headers: { Authorization: "Bearer " + tkn } }
);
});
}
return res;
});
},
deviceUpdate: function (data, typeDevice) {
let url = "device";
if (typeDevice) {
url = typeDevice;
}
return axios.put(config + url, data, {
headers: { Authorization: "Bearer " + tkn },
});
},
deviceDelete: function (data, headers) {
return axios.delete(config + data.device + "/" + data.id, {
headers: { Authorization: "Bearer " + tkn },
});
},
deviceGetById: function (data, headers) {
return axios.get(config + data.device + "/" + data.id);
},
deviceGetAll: function (data, headers) {
return axios.get(config + data.device);
},
};

133
smart-hut/src/components/Banner.js
View file

@ -1,69 +1,82 @@
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Link from "@material-ui/core/Link";
const useStyles = makeStyles(theme => ({
mainFeaturedPost: {
position: 'relative',
backgroundColor: theme.palette.grey[800],
color: theme.palette.common.white,
marginBottom: theme.spacing(4),
backgroundImage: 'img/banner.jpg',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
},
overlay: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,.3)',
},
mainFeaturedPostContent: {
position: 'relative',
padding: theme.spacing(3),
[theme.breakpoints.up('md')]: {
padding: theme.spacing(6),
paddingRight: 0,
},
const useStyles = makeStyles((theme) => ({
mainFeaturedPost: {
position: "relative",
backgroundColor: theme.palette.grey[800],
color: theme.palette.common.white,
marginBottom: theme.spacing(4),
backgroundImage: "img/banner.jpg",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
},
overlay: {
position: "absolute",
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: "rgba(0,0,0,.3)",
},
mainFeaturedPostContent: {
position: "relative",
padding: theme.spacing(3),
[theme.breakpoints.up("md")]: {
padding: theme.spacing(6),
paddingRight: 0,
},
},
}));
export default function Banner(props) {
const classes = useStyles();
const { post } = props;
const classes = useStyles();
const { post } = props;
return (
<Paper className={classes.mainFeaturedPost} style={{ backgroundImage: `url(${post.image})` }}>
{/* Increase the priority of the hero background image */}
{<img style={{ display: 'none' }} src={post.image} alt={post.imageText} />}
<div className={classes.overlay} />
<Grid container>
<Grid item md={6}>
<div className={classes.mainFeaturedPostContent}>
<Typography component="h1" variant="h3" color="inherit" gutterBottom>
{post.title}
</Typography>
<Typography variant="h5" color="inherit" paragraph>
{post.description}
</Typography>
<Link variant="subtitle1" href="#">
{post.linkText}
</Link>
</div>
</Grid>
</Grid>
</Paper>
);
return (
<Paper
className={classes.mainFeaturedPost}
style={{ backgroundImage: `url(${post.image})` }}
>
{/* Increase the priority of the hero background image */}
{
<img
style={{ display: "none" }}
src={post.image}
alt={post.imageText}
/>
}
<div className={classes.overlay} />
<Grid container>
<Grid item md={6}>
<div className={classes.mainFeaturedPostContent}>
<Typography
component="h1"
variant="h3"
color="inherit"
gutterBottom
>
{post.title}
</Typography>
<Typography variant="h5" color="inherit" paragraph>
{post.description}
</Typography>
<Link variant="subtitle1" href="#">
{post.linkText}
</Link>
</div>
</Grid>
</Grid>
</Paper>
);
}
Banner.propTypes = {
post: PropTypes.object,
};
post: PropTypes.object,
};

12
smart-hut/src/components/Footer.js
View file

@ -1,9 +1,9 @@
import React from 'react';
import React from "react";
export default function Footer() {
return(
<div>
<p>This is the footer</p>
</div>
)
return (
<div>
<p>This is the footer</p>
</div>
);
}

133
smart-hut/src/components/Header.js
View file

@ -1,73 +1,78 @@
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import SearchIcon from "@material-ui/icons/Search";
import Typography from "@material-ui/core/Typography";
import Link from "@material-ui/core/Link";
const useStyles = makeStyles(theme => ({
toolbar: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
toolbarTitle: {
flex: 1,
},
toolbarSecondary: {
justifyContent: 'space-between',
overflowX: 'auto',
},
toolbarLink: {
padding: theme.spacing(1),
flexShrink: 0,
},
const useStyles = makeStyles((theme) => ({
toolbar: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
toolbarTitle: {
flex: 1,
},
toolbarSecondary: {
justifyContent: "space-between",
overflowX: "auto",
},
toolbarLink: {
padding: theme.spacing(1),
flexShrink: 0,
},
}));
export default function Header(props) {
const classes = useStyles();
const { sections, title } = props;
const classes = useStyles();
const { sections, title } = props;
return (
<React.Fragment>
<Toolbar className={classes.toolbar}>
<Typography
component="h2"
variant="h5"
color="inherit"
align="center"
noWrap
className={classes.toolbarTitle}
>
{title}
</Typography>
<Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
{sections.map(section => (
<Link
color="inherit"
noWrap
key={section.title}
variant="body2"
href={section.url}
className={classes.toolbarLink}
>
{section.title}
</Link>
))}
</Toolbar>
<Button size="small" variant="outlined" style={{margin: "0 1rem"}}>Login</Button>
return (
<React.Fragment>
<Toolbar className={classes.toolbar}>
<Typography
component="h2"
variant="h5"
color="inherit"
align="center"
noWrap
className={classes.toolbarTitle}
>
{title}
</Typography>
<Toolbar
component="nav"
variant="dense"
className={classes.toolbarSecondary}
>
{sections.map((section) => (
<Link
color="inherit"
noWrap
key={section.title}
variant="body2"
href={section.url}
className={classes.toolbarLink}
>
{section.title}
</Link>
))}
</Toolbar>
<Button size="small" variant="outlined" style={{ margin: "0 1rem" }}>
Login
</Button>
<Button variant="outlined" size="small">
Sign up
</Button>
</Toolbar>
</React.Fragment>
);
<Button variant="outlined" size="small">
Sign up
</Button>
</Toolbar>
</React.Fragment>
);
}
Header.propTypes = {
sections: PropTypes.array,
title: PropTypes.string,
};
sections: PropTypes.array,
title: PropTypes.string,
};

179
smart-hut/src/components/HeaderController.js
View file

@ -1,108 +1,96 @@
import React from "react";
import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import { Segment, Image } from 'semantic-ui-react'
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
const AvatarImage = () => (
<Image
src='avatar3.png'
style={{width: '25px', height: 'auto'}}
centered
/>
)
const IconHomeImage = () => (
<Image
src='smart-home.png'
style={{width: '50px', height: 'auto'}}
centered
as='a'
href='/'
/>
)
const TitleImage = () => (
<Image src='title7.png' size='medium' centered/>
)
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
);
const IconHomeImage = () => (
<Image
src="smart-home.png"
style={{ width: "50px", height: "auto" }}
centered
as="a"
href="/"
/>
);
const TitleImage = () => <Image src="title7.png" size="medium" centered />;
const GridExampleInverted = (props) => (
<Grid columns='equal' divided inverted padded>
<Grid.Row color='black' textAlign='center' >
<Grid.Column width={3} height={0.5}>
<Segment color='black' inverted>
<IconHomeImage />
</Segment>
</Grid.Column>
<Grid.Column>
<Segment color='black' inverted>
<Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center">
<Grid.Column width={3} height={0.5}>
<Segment color="black" inverted>
<IconHomeImage />
</Segment>
</Grid.Column>
<Grid.Column>
<Segment color="black" inverted>
<TitleImage />
</Segment>
</Grid.Column>
<Grid.Column width={2} heigth={1}>
<AvatarImage />
</Segment>
</Grid.Column>
<Grid.Column width={2} heigth={1}>
<AvatarImage />
<Divider />
<Dropdown item icon='setting' size='huge'>
<Dropdown.Menu>
<Dropdown.Item>
<Icon name='dropdown' />
<span className='text'>Settings</span>
<Dropdown.Menu>
<Dropdown.Item>Document</Dropdown.Item>
<Dropdown.Item>Image</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>See profile...</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item onClick={props.logout }>Logout</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Grid.Column>
</Grid.Row>
</Grid>
)
<Dropdown item icon="setting" size="huge">
<Dropdown.Menu>
<Dropdown.Item>
<Icon name="dropdown" />
<span className="text">Settings</span>
<Dropdown.Menu>
<Dropdown.Item>Document</Dropdown.Item>
<Dropdown.Item>Image</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>See profile...</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Grid.Column>
</Grid.Row>
</Grid>
);
export default class MyHeader extends React.Component {
render() {
return (
<div>
<GridExampleInverted logout={this.props.logout} />
</div>
);
}
render() {
return (
<div>
<GridExampleInverted logout={this.props.logout} />
</div>
);
}
}
// const navbar = {
// backgroundColor: "#20222b",
// color: "white",
// marginBottom: "4.6rem",
// padding: "3.2rem 0"
// };
// const navbar__buttons = {
// borderBottom: "1px solid lighten($light-blue, 10%)",
// display: "flex",
// justifyContent: "space-between",
// padding: "3.2rem 1.6rem"
// }
// const button = {
// background: "#8357c5",
// border: "none",
// borderBottom: "1px solid purple",
// color: "white",
// fontWeight: "500",
// padding: "1.2rem"
// }
// const navbar = {
// backgroundColor: "#20222b",
// color: "white",
// marginBottom: "4.6rem",
// padding: "3.2rem 0"
// };
// const navbar__buttons = {
// borderBottom: "1px solid lighten($light-blue, 10%)",
// display: "flex",
// justifyContent: "space-between",
// padding: "3.2rem 1.6rem"
// }
// const button = {
// background: "#8357c5",
// border: "none",
// borderBottom: "1px solid purple",
// color: "white",
// fontWeight: "500",
// padding: "1.2rem"
// }
// const MenuExampleButtons = () => (
// <Menu>
// <Menu.Item>
// <Button primary>Sign up</Button>
// </Menu.Item>
// <Menu.Item>
// <Button>Log-in</Button>
// </Menu.Item>
@ -115,21 +103,14 @@ export default class MyHeader extends React.Component {
// </Menu>
// )
// class MenuExampleInvertedSegment extends Component {
// state = { activeItem: 'home' }
// handleItemClick = (e, { name }) => this.setState({ activeItem: name })
// render() {
// const { activeItem } = this.state
// return (
// <Segment inverted>
// <Menu inverted secondary>
@ -165,7 +146,7 @@ export default class MyHeader extends React.Component {
// <Dropdown.Item>
// <Icon name='dropdown' />
// <span className='text'>New</span>
// <Dropdown.Menu>
// <Dropdown.Item>Document</Dropdown.Item>
// <Dropdown.Item>Image</Dropdown.Item>
@ -179,10 +160,10 @@ export default class MyHeader extends React.Component {
// <Dropdown.Item>Share</Dropdown.Item>
// </Dropdown.Menu>
// </Dropdown>
// <ImageExampleWrapped />
// <ImageExampleWrapped />
// <Menu.Item />
// </Menu>
// </Segment>
// )
// }
// }
// }

146
smart-hut/src/components/HomeNavbar.js
View file

@ -6,77 +6,81 @@ import {
Image,
Menu,
Sidebar,
Responsive
Responsive,
} from "semantic-ui-react";
const NavBarMobile = ({
children,
leftItems,
onPusherClick,
onToggle,
rightItems,
visible
}) => (
<Sidebar.Pushable>
<Sidebar
as={Menu}
animation="overlay"
icon="labeled"
inverted
items={leftItems}
vertical
visible={visible}
/>
<Sidebar.Pusher
dimmed={visible}
onClick={onPusherClick}
style={{ minHeight: "100vh" }}
>
<Menu fixed="top" inverted>
<Menu.Item>
<Image size="mini" src="smart-home_index.png" />
</Menu.Item>
<Menu.Item onClick={onToggle}>
<Icon name="sidebar" />
</Menu.Item>
<Menu.Menu position="right">
{_.map(rightItems, item => <Menu.Item {...item} />)}
</Menu.Menu>
</Menu>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
);
const NavBarDesktop = ({ leftItems, rightItems }) => (
<Menu fixed="top" inverted>
<Menu.Item>
<Image size="mini" src="smart-home_index.png" />
</Menu.Item>
{_.map(leftItems, item => <Menu.Item {...item} />)}
<Menu.Menu position="right">
{_.map(rightItems, item => <Menu.Item {...item} />)}
</Menu.Menu>
</Menu>
);
const NavBarChildren = ({ children }) => (
<Container style={{ marginTop: "5em" }}>{children}</Container>
);
children,
leftItems,
onPusherClick,
onToggle,
rightItems,
visible,
}) => (
<Sidebar.Pushable>
<Sidebar
as={Menu}
animation="overlay"
icon="labeled"
inverted
items={leftItems}
vertical
visible={visible}
/>
<Sidebar.Pusher
dimmed={visible}
onClick={onPusherClick}
style={{ minHeight: "100vh" }}
>
<Menu fixed="top" inverted>
<Menu.Item>
<Image size="mini" src="smart-home_index.png" />
</Menu.Item>
<Menu.Item onClick={onToggle}>
<Icon name="sidebar" />
</Menu.Item>
<Menu.Menu position="right">
{_.map(rightItems, (item) => (
<Menu.Item {...item} />
))}
</Menu.Menu>
</Menu>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
);
const NavBarDesktop = ({ leftItems, rightItems }) => (
<Menu fixed="top" inverted>
<Menu.Item>
<Image size="mini" src="smart-home_index.png" />
</Menu.Item>
{_.map(leftItems, (item) => (
<Menu.Item {...item} />
))}
<Menu.Menu position="right">
{_.map(rightItems, (item) => (
<Menu.Item {...item} />
))}
</Menu.Menu>
</Menu>
);
const NavBarChildren = ({ children }) => (
<Container style={{ marginTop: "5em" }}>{children}</Container>
);
class HomeNavabarApp extends Component {
constructor(props) {
super(props);
this.state = {
logged : true,
logged: true,
email: "",
password : ""
password: "",
};
}
state = {
visible: false
state = {
visible: false,
};
handlePusher = () => {
@ -113,17 +117,17 @@ class HomeNavabarApp extends Component {
}
}
const leftItems = [
{ as: "a", content: "Home", key: "home", href:"/" },
];
const rightItems = [
{ as: "a", content: "Login", key: "login", href:"/login" },
{ as: "a", content: "Sign up", key: "register", href:"/signup" }
];
const leftItems = [{ as: "a", content: "Home", key: "home", href: "/" }];
const rightItems = [
{ as: "a", content: "Login", key: "login", href: "/login" },
{ as: "a", content: "Sign up", key: "register", href: "/signup" },
];
const HomeNavbarApp = () => (
<HomeNavabarApp leftItems={leftItems} rightItems={rightItems}>
</HomeNavabarApp>
);
<HomeNavabarApp
leftItems={leftItems}
rightItems={rightItems}
></HomeNavabarApp>
);
export default HomeNavbarApp;

63
smart-hut/src/components/SelectIcons.js
View file

@ -1,49 +1,56 @@
import React, { Component } from 'react';
import { Button, Grid } from 'semantic-ui-react'
import React, { Component } from "react";
import { Button, Grid } from "semantic-ui-react";
export default class SelectIcons extends Component {
constructor(props) {
super(props);
this.state = {
currentIcon: this.props.currentIcon
}
currentIcon: this.props.currentIcon,
};
}
selectIcon = (e) => {
let el = e.target.name;
if (e.target.tagName === "I"){
if (e.target.tagName === "I") {
el = e.target.parentNode.name;
}
this.props.updateIcon(el);
this.setState({currentIcon : el})
}
this.setState({ currentIcon: el });
};
render(){
const myicons = [['home', 'coffee', 'beer', 'glass martini', 'film', 'video'],
['music', 'headphones', 'fax', 'phone', 'laptop','bath'],
['shower', 'bed', 'child', 'warehouse', 'car', 'bicycle'],
['motorcycle', 'archive', 'boxes', 'cubes', 'chess', 'gamepad'],
['futbol', 'table tennis', 'server', 'tv', 'heart', 'camera'],
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
render() {
const myicons = [
["home", "coffee", "beer", "glass martini", "film", "video"],
["music", "headphones", "fax", "phone", "laptop", "bath"],
["shower", "bed", "child", "warehouse", "car", "bicycle"],
["motorcycle", "archive", "boxes", "cubes", "chess", "gamepad"],
["futbol", "table tennis", "server", "tv", "heart", "camera"],
["trophy", "wrench", "image", "book", "university", "medkit"],
["paw", "tree", "utensils", "male", "female", "life ring outline"],
];
return (
<Grid centered>
{
myicons.map((e, i) => {
{myicons.map((e, i) => {
return (
<Grid.Row key={i}>
{e.map((e, i) => {
return(<Grid.Column key={i}>
<Button name={e} color={e === this.state.currentIcon ? "black" : null } icon={e} size="small" onClick={this.selectIcon}/>
</Grid.Column>)
})}
{e.map((e, i) => {
return (
<Grid.Column key={i}>
<Button
name={e}
color={e === this.state.currentIcon ? "black" : null}
icon={e}
size="small"
onClick={this.selectIcon}
/>
</Grid.Column>
);
})}
</Grid.Row>
)
})
}
</ Grid>
)
);
})}
</Grid>
);
}
}

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

@ -1,176 +1,178 @@
import React, {Component} from 'react';
import {
Grid,
} from "semantic-ui-react";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import DeviceType from './devices/DeviceTypeController';
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import { editButtonStyle, panelStyle } from "./devices/styleComponents";
import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
import DeviceType from "./devices/DeviceTypeController";
import NewDevice from "./devices/NewDevice";
import SettingsModal from "./devices/SettingsModal";
import { call } from '../../client_server';
import { call } from "../../client_server";
export default class DevicePanel extends Component {
constructor(props) {
super(props);
this.state = {
editMode : false,
};
this.addDevice = this.addDevice.bind(this);
}
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
openModal = (settingsDeviceId) => {
this.setState(prevState => ({
openSettingsModal: !prevState.openSettingsModal,
settingsDeviceId: settingsDeviceId
}))
}
changeDeviceData = (deviceId, newSettings) => {
console.log(newSettings.name, " <-- new name --> ", deviceId );
this.props.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,
};
getDevices() {
if (this.props.activeItem === -1) {
call.getAllDevices()
.then(res => {
if ( res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
console.log(err);
});
} else {
call.getAllDevicesByRoom(this.props.activeItem)
.then(res => {
if (res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
this.addDevice = this.addDevice.bind(this);
}
});
}
}
editModeController = (e) =>
this.setState((prevState) => ({ editMode: !prevState.editMode }));
async addDevice(data) {
const ds = await this.props.addDevice(data);
this.setState({
devices: ds
});
this.forceUpdate();
}
openModal = (settingsDeviceId) => {
this.setState((prevState) => ({
openSettingsModal: !prevState.openSettingsModal,
settingsDeviceId: settingsDeviceId,
}));
};
updateDevice = (data) => {
const roomId = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0].roomId;
console.log(roomId)
data["id"] = this.state.settingsDeviceId;
data["roomId"] = roomId;
console.log(data);
call.deviceUpdate(data)
.then(res => {
if (res.status === 200) {
this.getDevices();
this.forceUpdate();
changeDeviceData = (deviceId, newSettings) => {
console.log(newSettings.name, " <-- new name --> ", deviceId);
this.props.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];
}
}).catch(err => {
})
}
removeDevice = () => {
const item = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0];
const data = {
device: item.kind,
id: this.state.settingsDeviceId
};
call.deviceDelete(data)
.then(res => {
if (res.status === 200) {
this.openModal();
this.getDevices();
this.forceUpdate();
}
}).catch(err => {
}
}
}
return null;
});
this.forceUpdate();
};
getDevices() {
if (this.props.activeItem === -1) {
call
.getAllDevices()
.then((res) => {
if (res.status === 200) {
this.setState({
devices: res.data,
});
}
})
.catch((err) => {
console.log(err);
});
} else {
call
.getAllDevicesByRoom(this.props.activeItem)
.then((res) => {
if (res.status === 200) {
this.setState({
devices: res.data,
});
}
})
.catch((err) => {});
}
}
async addDevice(data) {
const ds = await this.props.addDevice(data);
this.setState({
devices: ds,
});
this.forceUpdate();
}
updateDevice = (data) => {
const roomId = this.props.devices.filter(
(d) => d.id === this.state.settingsDeviceId
)[0].roomId;
console.log(roomId);
data["id"] = this.state.settingsDeviceId;
data["roomId"] = roomId;
console.log(data);
call
.deviceUpdate(data)
.then((res) => {
if (res.status === 200) {
this.getDevices();
this.forceUpdate();
}
})
.catch((err) => {});
};
removeDevice = () => {
const item = this.props.devices.filter(
(d) => d.id === this.state.settingsDeviceId
)[0];
const data = {
device: item.kind,
id: this.state.settingsDeviceId,
};
call
.deviceDelete(data)
.then((res) => {
if (res.status === 200) {
this.openModal();
this.getDevices();
this.forceUpdate();
}
})
.catch((err) => {});
};
render() {
const edit = {
mode: this.state.editMode,
openModal: this.openModal,
};
const ds = this.state.devices ? this.state.devices : this.props.devices;
return (
<div style={panelStyle}>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
<Grid doubling columns={4} divided="vertically">
{this.state.openSettingsModal ?
<SettingsModal openModal={this.openModal}
updateDevice={this.updateDevice}
removeDevice={this.removeDevice}
device={ds.filter(d => d.id === this.state.settingsDeviceId)[0]}/> : ""
}
{
ds ?
ds.map((e, i) => {
return (
<Grid.Column key={i}>
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={edit}/>
</Grid.Column>
)
})
:
null
}
{
this.props.activeItem !== -1 ?
<Grid.Column>
<NewDevice addDevice={this.addDevice} devices={ds}/>
</Grid.Column>
:
null
}
</Grid>
</div>
)
}
}
render() {
const edit = {
mode: this.state.editMode,
openModal: this.openModal,
};
const ds = this.state.devices ? this.state.devices : this.props.devices;
return (
<div style={panelStyle}>
<button style={editButtonStyle} onClick={this.editModeController}>
Edit
</button>
<Grid doubling columns={4} divided="vertically">
{this.state.openSettingsModal ? (
<SettingsModal
openModal={this.openModal}
updateDevice={this.updateDevice}
removeDevice={this.removeDevice}
device={ds.filter((d) => d.id === this.state.settingsDeviceId)[0]}
/>
) : (
""
)}
{ds
? ds.map((e, i) => {
return (
<Grid.Column key={i}>
<DeviceType
type={e.kind}
onChangeData={this.changeDeviceData}
device={e}
edit={edit}
/>
</Grid.Column>
);
})
: null}
{this.props.activeItem !== -1 ? (
<Grid.Column>
<NewDevice addDevice={this.addDevice} devices={ds} />
</Grid.Column>
) : null}
</Grid>
</div>
);
}
}

32
smart-hut/src/components/dashboard/devices/DeviceSettings.js
View file

@ -1,34 +1,26 @@
import React, {Component} from "react";
import {editModeIconStyle, editModeStyle} from "./styleComponents";
import React, { Component } from "react";
import { editModeIconStyle, editModeStyle } from "./styleComponents";
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
displayForm: true,
}
};
};
}
displayForm = () => {
this.setState((prevState) => ({displayForm: !prevState.displayForm}));
this.setState((prevState) => ({ displayForm: !prevState.displayForm }));
};
render() {
const view = (
<div onClick={() => this.props.edit.openModal(this.props.deviceId)}>
<span style={editModeStyle}>
<img
src="/img/settings.svg"
alt=""
style={editModeIconStyle}/>
</span>
</div>
<div onClick={() => this.props.edit.openModal(this.props.deviceId)}>
<span style={editModeStyle}>
<img src="/img/settings.svg" alt="" style={editModeIconStyle} />
</span>
</div>
);
return (
<React.Fragment>
{this.props.edit.mode ? view : ("")}
</React.Fragment>
)
};
return <React.Fragment>{this.props.edit.mode ? view : ""}</React.Fragment>;
}
}

57
smart-hut/src/components/dashboard/devices/DeviceTypeController.js
View file

@ -1,28 +1,63 @@
import React from 'react';
import React from "react";
import Light from "./Light";
import SmartPlug from "./SmartPlug";
import Sensor from "./Sensor";
import DefaultDimmer from "./Dimmer";
import Switcher from "./Switch";
const DeviceType = (props) => {
switch(props.type) {
switch (props.type) {
case "regularLight":
return (<Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />)
return (
<Light
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
case "sensor":
return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
return (
<Sensor
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
case "buttonDimmer":
return <DefaultDimmer onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
return (
<DefaultDimmer
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
case "smartPlug":
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
return (
<SmartPlug
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
case "switch":
return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
return (
<Switcher
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
case "dimmableLight":
return (<Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />)
return (
<Light
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
/>
);
default:
return ""
return "";
}
}
};
export default DeviceType;

37
smart-hut/src/components/dashboard/devices/DigitalSensor.js
View file

@ -6,13 +6,17 @@
* 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 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";
import { Image } from "semantic-ui-react";
import { imageStyle, nameStyle } from "./DigitalSensorStyle";
export default class DigitalSensor extends Component {
constructor(props) {
@ -22,26 +26,24 @@ export default class DigitalSensor extends Component {
};
this.iconOn = "/img/sensorOn.svg";
this.iconOff = "/img/sensorOff.svg"
this.iconOff = "/img/sensorOff.svg";
}
setName = () => {
if(this.props.device.name.length > 15){
return this.props.device.name.slice(0,12) + "..."
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){
if (this.state.value) {
return this.iconOn;
}
return this.iconOff;
};
componentDidMount() {
}
componentDidMount() {}
render() {
return (
@ -49,10 +51,13 @@ export default class DigitalSensor extends Component {
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<Image src={this.getIcon()} style={imageStyle}/>
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<Image src={this.getIcon()} style={imageStyle} />
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
)
);
}
}

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

@ -5,13 +5,13 @@ export const imageStyle = {
top: "20%",
left: "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",
color: "black",
position: "absolute",
top: "40%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};

60
smart-hut/src/components/dashboard/devices/Dimmer.js
View file

@ -7,46 +7,36 @@
The user can change the state of a dimmer through an intuitive UI in SmartHut .
**/
import React, {Component} from 'react';
import React, { Component } from "react";
export class StatefulDimmer extends Component{
constructor(props){
super(props);
this.state = {
intensityLevel : 0,
pointingLDevices:[]
}
}
export class StatefulDimmer extends Component {
constructor(props) {
super(props);
this.state = {
intensityLevel: 0,
pointingLDevices: [],
};
}
componentDidMount() {
}
componentDidMount() {}
render() {
return(
<div>
This is a Dimmer
</div>
)
}
render() {
return <div>This is a Dimmer</div>;
}
}
export default 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 :[]
}
}
export default 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() {
}
componentDidMount() {}
render() {
return(
<div>
This is a Dimmer
</div>
)
}
render() {
return <div>This is a Dimmer</div>;
}
}

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

@ -6,13 +6,23 @@
* be shown accordingly in the SmartHut views (house view and room views).
*/
import React, {Component} from "react";
import {iconStyle, StyledDiv} from "./styleComponents";
import React, { Component } from "react";
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, nameStyle} from "./LightStyle";
import { call } from '../../../client_server';
import { Image } from "semantic-ui-react";
import {
CircularInput,
CircularProgress,
CircularThumb,
CircularTrack,
} from "react-circular-input";
import {
valueStyle,
intensityLightStyle,
style,
nameStyle,
} from "./LightStyle";
import { call } from "../../../client_server";
export default class Light extends Component {
constructor(props) {
@ -21,27 +31,26 @@ export default class Light extends Component {
turnedOn: false,
};
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg"
this.iconOff = "/img/lightOff.svg";
}
onClickDevice = () => {
this.props.device.on = !this.state.turnedOn;
call.deviceUpdate(this.props.device, 'regularLight')
.then(res => {
if (res.status === 200 ){
this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
}
})
call.deviceUpdate(this.props.device, "regularLight").then((res) => {
if (res.status === 200) {
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
}
});
};
setIntensity = (newValue) => {
this.props.device.intensity = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
call.deviceUpdate(this.props.device, 'dimmableLight')
.then(res => {
if (res.status === 200 ) {
this.setState({intensity: newValue});
}
})
this.props.device.intensity =
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
call.deviceUpdate(this.props.device, "dimmableLight").then((res) => {
if (res.status === 200) {
this.setState({ intensity: newValue });
}
});
};
getIcon = () => {
@ -54,53 +63,69 @@ export default class Light extends Component {
componentDidMount() {
if (this.props.device.hasOwnProperty("intensity")) {
this.setState({
intensity: this.props.device.intensity
intensity: this.props.device.intensity,
});
}
this.setState({
turnedOn: this.props.device.on
turnedOn: this.props.device.on,
});
// Get the state and update it
}
render() {
const intensityLightView = (
<CircularInput
value={+(Math.round(this.props.device.intensity/100 + "e+2") + "e-2")}
value={+(Math.round(this.props.device.intensity / 100 + "e+2") + "e-2")}
onChange={this.setIntensity}
style={style}
>
<CircularTrack/>
<CircularProgress/>
<CircularThumb/>
<CircularTrack />
<CircularProgress />
<CircularThumb />
<text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
<text
style={valueStyle}
x={100}
y={100}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{Math.round(this.props.device.intensity)}%
</text>
<text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
<text
style={intensityLightStyle}
x={100}
y={150}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.props.device.name}
</text>
</CircularInput>
);
const normalLightView = (
<div onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle}/>
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} />
<h5 style={nameStyle}>{this.props.device.name}</h5>
</div>
);
return (
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
{this.props.device.intensity >= 0 ? (intensityLightView) : (normalLightView)}
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
{this.props.device.intensity >= 0
? intensityLightView
: normalLightView}
</StyledDiv>
)
);
}
}

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

@ -1,23 +1,29 @@
export const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
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)",
fill: "#3e99ff",
fontSize: "2.5rem",
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
export const intensityLightStyle = {
fill: "#3e99ff",
fontSize: "1.2rem",
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
fill: "#3e99ff",
fontSize: "1.2rem",
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
export const nameStyle = {
fontSize : "1rem",
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)",
color : "black"
fontSize: "1rem",
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)",
color: "black",
};

276
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -1,19 +1,27 @@
import React, {Component} from 'react';
import styled from 'styled-components';
import {Button, Dropdown, Form, Icon, Image, Input, Modal} from "semantic-ui-react";
import React, { Component } from "react";
import styled from "styled-components";
import {
Button,
Dropdown,
Form,
Icon,
Image,
Input,
Modal,
} from "semantic-ui-react";
const StyledDiv = styled.div`
background-color : #ff4050;
padding : 3rem;
background-color: #ff4050;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius : 100%;
border : none;
position : relative;
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
:hover{
background-color : #ff2436;
transition: all 0.3s ease-out;
:hover {
background-color: #ff2436;
}
`;
@ -22,15 +30,18 @@ export default class NewDevice extends Component {
super(props);
this.state = {
step: 1,
openModal : false
openModal: false,
};
this.baseState = this.state
this.baseState = this.state;
this.createDevice = this.createDevice.bind(this);
}
handleOpen = () => {this.setState({openModal : true})};
handleClose = () => {this.setState({openModal : false})};
handleOpen = () => {
this.setState({ openModal: true });
};
handleClose = () => {
this.setState({ openModal: false });
};
resetState = () => {
this.setState(this.baseState);
@ -38,44 +49,42 @@ export default class NewDevice extends Component {
};
nextStep = () => {
this.setState((prevState) => ({step: prevState.step + 1}));
this.setState((prevState) => ({ step: prevState.step + 1 }));
};
previousStep = () => {
this.setState((prevState) => ({step: prevState.step - 1}));
this.setState((prevState) => ({ step: prevState.step - 1 }));
};
setTypeOfDevice = (e, d) => {
if (d.value === "dimmableLight"){
this.setState({typeOfDevice: d.value,
intensity: 0,});
} else {
this.setState({typeOfDevice: d.value,});
}
if (d.value === "dimmableLight") {
this.setState({ typeOfDevice: d.value, intensity: 0 });
} else {
this.setState({ typeOfDevice: d.value });
}
};
setDeviceName = (e, d) => {
this.setState({deviceName: d.value});
this.setState({ deviceName: d.value });
};
setTypeOfSensor = (e, d) => {
this.setState({typeOfSensor: d.value});
this.setState({ typeOfSensor: d.value });
};
setLightsDimmerSwitch = (e, d) => {
this.setState({lightsAttached : d.value});
this.setState({ lightsAttached: d.value });
};
createDevice() {
// Connect to the backend and create device here.
const data = {
params: {
"name": this.state.deviceName,
name: this.state.deviceName,
},
device: this.state.typeOfDevice
device: this.state.typeOfDevice,
};
}
switch(this.state.typeOfDevice) {
switch (this.state.typeOfDevice) {
case "dimmableLight":
data.params["intensity"] = 1;
break;
@ -86,52 +95,51 @@ export default class NewDevice extends Component {
case "switch":
data.params["lights"] = this.state.lightsAttached;
break;
default:
default:
break;
}
console.log(data)
console.log(data);
this.props.addDevice(data);
this.resetState();
};
}
render() {
const deviceOptions = [
{
key: 'light',
text: 'Normal Light',
value: 'regularLight',
image: {avatar: true, src: '/img/lightOn.svg'},
key: "light",
text: "Normal Light",
value: "regularLight",
image: { avatar: true, src: "/img/lightOn.svg" },
},
{
key: 'intensity-light',
text: 'Intensity Light',
value: 'dimmableLight',
image: {avatar: true, src: '/img/intensity-light.svg'},
key: "intensity-light",
text: "Intensity Light",
value: "dimmableLight",
image: { avatar: true, src: "/img/intensity-light.svg" },
},
{
key: 'smart-plug',
text: 'Smart Plug',
value: 'smartPlug',
image: {avatar: true, src: '/img/smart-plug.svg'},
key: "smart-plug",
text: "Smart Plug",
value: "smartPlug",
image: { avatar: true, src: "/img/smart-plug.svg" },
},
{
key: 'sensor',
text: 'Sensor',
value: 'sensor',
image: {avatar: true, src: '/img/sensorOn.svg'},
key: "sensor",
text: "Sensor",
value: "sensor",
image: { avatar: true, src: "/img/sensorOn.svg" },
},
{
key: 'switch',
text: 'Switch',
value: 'switch',
image: {avatar: true, src: '/img/switchOn.svg'},
key: "switch",
text: "Switch",
value: "switch",
image: { avatar: true, src: "/img/switchOn.svg" },
},
{
key: 'dimmer',
text: 'Dimmer',
value: 'buttonDimmer',
image: {avatar: true, src: '/img/dimmer.svg'},
key: "dimmer",
text: "Dimmer",
value: "buttonDimmer",
image: { avatar: true, src: "/img/dimmer.svg" },
},
];
const sensorOptions = [
@ -139,41 +147,39 @@ export default class NewDevice extends Component {
key: "temperature",
text: "Temperature Sensor",
value: "TEMPERATURE",
image: {avatar: true, src: '/img/temperature-sensor.svg'},
image: { avatar: true, src: "/img/temperature-sensor.svg" },
},
{
key: "humidity",
text: "Humidity Sensor",
value: "HUMIDITY",
image: {avatar: true, src: '/img/humidity-sensor.svg'},
image: { avatar: true, src: "/img/humidity-sensor.svg" },
},
{
key: "light",
text: "Light Sensor",
value: "LIGHT",
image: {avatar: true, src: '/img/light-sensor.svg'},
image: { avatar: true, src: "/img/light-sensor.svg" },
},
{
key: "motion",
text: "Motion Sensor",
value: "motionSensor",
image: {avatar: true, src: '/img/sensorOn.svg'},
}
image: { avatar: true, src: "/img/sensorOn.svg" },
},
];
const availableLights = [];
this.props.devices.forEach(d => {
availableLights.push(
{
key: d.id,
text: d.name,
value: d.id,
}
)
this.props.devices.forEach((d) => {
availableLights.push({
key: d.id,
text: d.name,
value: d.id,
});
});
const step1 = (
<Dropdown
name="typeOfDevice"
placeholder='Select a Type of Device'
placeholder="Select a Type of Device"
fluid
selection
onChange={this.setTypeOfDevice}
@ -181,74 +187,114 @@ export default class NewDevice extends Component {
/>
);
const step2 = (typeOfDevice) => {
const deviceName = (<div>
<Form.Field>
<label>Device Name: </label>
<Input fluid size={"large"} onChange={this.setDeviceName} focus placeholder='Device Name'/>
</Form.Field>
</div>);
const sensorForm = (<Form.Field style={{marginTop : "1rem"}}>
const deviceName = (
<div>
<Form.Field>
<label>Device Name: </label>
<Input
fluid
size={"large"}
onChange={this.setDeviceName}
focus
placeholder="Device Name"
/>
</Form.Field>
</div>
);
const sensorForm = (
<Form.Field style={{ marginTop: "1rem" }}>
<label>Type of Sensor: </label>
<Dropdown
name="typeOfDevice"
placeholder='Select a Type of Sensor'
placeholder="Select a Type of Sensor"
fluid
selection
onChange={this.setTypeOfSensor}
options={sensorOptions}
/>
</Form.Field>);
const switchDimmerOptions = (<Form.Field style={{marginTop : "1rem"}}>
<label>Select the Lights You Want to Attach: </label>
<Dropdown
name="typeOfDevice"
placeholder='Select Lights'
fluid
multiple
onChange={this.setLightsDimmerSwitch}
options={availableLights}
/>
</Form.Field>);
</Form.Field>
);
const switchDimmerOptions = (
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select the Lights You Want to Attach: </label>
<Dropdown
name="typeOfDevice"
placeholder="Select Lights"
fluid
multiple
onChange={this.setLightsDimmerSwitch}
options={availableLights}
/>
</Form.Field>
);
return (
<Form>
{deviceName}
{this.state.typeOfDevice === "sensor" ? (sensorForm) : ""}
{this.state.typeOfDevice === "switch" || this.state.typeOfDevice === "dimmer" ?
(switchDimmerOptions) : ""
}
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
{this.state.typeOfDevice === "switch" ||
this.state.typeOfDevice === "dimmer"
? switchDimmerOptions
: ""}
</Form>
)
);
};
const steps = [step1, step2()];
return (
<Modal closeIcon open={this.state.openModal} onClose={this.resetState} trigger={<StyledDiv onClick={this.handleOpen}>
<Image src="/img/add.svg" style={{filter: "invert()"}}/>
</StyledDiv>} centered={true}>
<Modal
closeIcon
open={this.state.openModal}
onClose={this.resetState}
trigger={
<StyledDiv onClick={this.handleOpen}>
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
</StyledDiv>
}
centered={true}
>
<Modal.Header>Add a New Device</Modal.Header>
<Modal.Content>
{steps[this.state.step -1]}
</Modal.Content>
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
<Modal.Actions>
{this.state.step > 1 ? (
<Button onClick={this.previousStep} color="blue" icon labelPosition='left'>
<Icon name='left arrow'/>
<Button
onClick={this.previousStep}
color="blue"
icon
labelPosition="left"
>
<Icon name="left arrow" />
Back
</Button>
) : ""}
) : (
""
)}
{this.state.step < steps.length ? (
<Button color="blue" onClick={this.nextStep} icon labelPosition='right'>
<Button
color="blue"
onClick={this.nextStep}
icon
labelPosition="right"
>
Next
<Icon name='right arrow'/>
<Icon name="right arrow" />
</Button>
) : ""}
) : (
""
)}
{this.state.step === steps.length ? (
<Button onClick={this.createDevice} color="blue" icon labelPosition='right'>
<Icon name='up arrow'/>
<Button
onClick={this.createDevice}
color="blue"
icon
labelPosition="right"
>
<Icon name="up arrow" />
Finish
</Button>
) : ""}
) : (
""
)}
</Modal.Actions>
</Modal>
)
);
}
}

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

@ -6,7 +6,7 @@
* For this story, make the sensors return a constant value with some small random error.
*/
/*
/*
OPTIONAL STATE
error: 2.4
@ -19,11 +19,15 @@
errorStyle,
*/
import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import { sensorText, style, valueStyle} from "./SensorStyle";
import React, { Component } from "react";
import {
CircularInput,
CircularProgress,
CircularTrack,
} from "react-circular-input";
import { sensorText, style, valueStyle } from "./SensorStyle";
import Settings from "./DeviceSettings";
import {StyledDiv} from "./styleComponents";
import { StyledDiv } from "./styleComponents";
export default class Sensor extends Component {
constructor(props) {
@ -32,22 +36,22 @@ export default class Sensor extends Component {
turnedOn: false,
value: 0,
};
this.units = ""
this.units = "";
}
setName = () => {
if (this.props.device.name.length > 15) {
return this.props.device.name.slice(0, 12) + "..."
return this.props.device.name.slice(0, 12) + "...";
}
return this.props.device.name;
};
componentDidMount() {
switch(this.props.device.sensor) {
switch (this.props.device.sensor) {
case "TEMPERATURE":
this.units = "ºC";
break;
case "HUMIDITY" :
case "HUMIDITY":
this.units = "%";
break;
case "LIGHT":
@ -55,36 +59,49 @@ export default class Sensor extends Component {
break;
default:
this.units = "";
}
this.setState({
value : this.props.device.value
value: this.props.device.value,
});
}
render() {
return (
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<CircularInput
value={this.state.value / 100}
style={style}
>
<CircularTrack/>
<CircularProgress/>
<text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
{Math.round(this.state.value)}{this.units}
<CircularInput value={this.state.value / 100} style={style}>
<CircularTrack />
<CircularProgress />
<text
style={valueStyle}
x={100}
y={80}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{Math.round(this.state.value)}
{this.units}
</text>
<text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
<text
style={sensorText}
x={100}
y={150}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.setName()}
</text>
</CircularInput>
</StyledDiv>
)
);
}
}

43
smart-hut/src/components/dashboard/devices/SensorStyle.js
View file

@ -1,23 +1,28 @@
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 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)",
}
fill: "#ff4050",
fontSize: "1.5rem",
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};

87
smart-hut/src/components/dashboard/devices/SettingsModal.js
View file

@ -1,56 +1,73 @@
import React, {Component, useState} from 'react';
import {Button, Checkbox, Form, Icon, Header, Modal} from "semantic-ui-react";
import React, { Component, useState } from "react";
import { Button, Checkbox, Form, Icon, Header, Modal } from "semantic-ui-react";
const DeleteModal = (props) => (
<Modal trigger={<Button color='red'>Remove</Button>} closeIcon>
<Header icon='archive' content='Are you sure ?' />
<Modal trigger={<Button color="red">Remove</Button>} closeIcon>
<Header icon="archive" content="Are you sure ?" />
<Modal.Actions>
<Button color='red'>
<Icon name='remove' /> No
<Button color="red">
<Icon name="remove" /> No
</Button>
<Button onClick={() => props.removeDevice()} color='green'>
<Icon name='checkmark' /> Yes
<Button onClick={() => props.removeDevice()} color="green">
<Icon name="checkmark" /> Yes
</Button>
</Modal.Actions>
</Modal>
)
);
const SettingsForm = (props) => {
const handleInputChange = e => {
const {name, value} = e.target;
setValues({...values, [name]: value})
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const handleCheckboxChange = (e,d) => {
const {name, checked} = d;
setValues({...values, [name]: checked})
const handleCheckboxChange = (e, d) => {
const { name, checked } = d;
setValues({ ...values, [name]: checked });
};
const [values, setValues] = useState({name: ''});
const [values, setValues] = useState({ name: "" });
return (
<Form>
<Form.Field>
<label>New Name: </label>
<input autoComplete="off" name="name" onChange={handleInputChange} value={values.name} placeholder='Device name'/>
<input
autoComplete="off"
name="name"
onChange={handleInputChange}
value={values.name}
placeholder="Device name"
/>
</Form.Field>
{props.type === "smart-plug" ? (
<Form.Field>
<Checkbox slider name={"reset"} onClick={handleCheckboxChange} label='Reset Energy Consumption'/>
<Checkbox
slider
name={"reset"}
onClick={handleCheckboxChange}
label="Reset Energy Consumption"
/>
</Form.Field>
) : ""}
) : (
""
)}
<Form.Field>
<DeleteModal removeDevice={() => props.removeDevice(values)} />
</Form.Field>
<Button onClick={() => props.saveFunction(values)} color="blue" type='submit'>Save</Button>
<Button
onClick={() => props.saveFunction(values)}
color="blue"
type="submit"
>
Save
</Button>
</Form>
)
}
);
};
export default class SettingsModal extends Component {
constructor(props) {
super(props);
this.state = {
@ -59,7 +76,7 @@ export default class SettingsModal extends Component {
}
handleClose = () => {
this.setState({open: false});
this.setState({ open: false });
};
saveSettings = (device) => {
@ -72,19 +89,23 @@ export default class SettingsModal extends Component {
this.props.openModal();
};
render() {
const SettingsModal = () => (
<Modal open={true} onOpen={this.props.openModal} onClose={this.props.openModal}>
<Modal
open={true}
onOpen={this.props.openModal}
onClose={this.props.openModal}
>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>
<SettingsForm type={this.props.device.type} removeDevice={this.props.removeDevice} saveFunction={this.saveSettings}/>
<SettingsForm
type={this.props.device.type}
removeDevice={this.props.removeDevice}
saveFunction={this.saveSettings}
/>
</Modal.Content>
</Modal>
);
return (
<SettingsModal/>
)
return <SettingsModal />;
}
}

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

@ -4,59 +4,61 @@
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 {StyledDiv} from "./styleComponents";
import React, { Component } from "react";
import { StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle";
import { call } from '../../../client_server';
import { Image } from "semantic-ui-react";
import { energyConsumedStyle, imageStyle, nameStyle } from "./SmartPlugStyle";
import { call } from "../../../client_server";
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.props.device.on = !this.state.turnedOn;
call.deviceUpdate(this.props.device, 'smartPlug')
.then(res => {
if (res.status === 200 ){
this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
}
})
constructor(props) {
super(props);
this.state = {
turnedOn: false,
energyConsumed: 0, // kWh
};
this.iconOn = "/img/smart-plug.svg";
this.iconOff = "/img/smart-plug-off.svg";
}
getIcon = () => {
if(this.state.turnedOn){
return this.iconOn;
}
return this.iconOff;
};
onClickDevice = () => {
this.props.device.on = !this.state.turnedOn;
call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
if (res.status === 200) {
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
}
});
};
componentDidMount() {
this.setState({
turnedOn : this.props.device.on,
energyConsumed : this.props.device.totalConsumption
})
getIcon = () => {
if (this.state.turnedOn) {
return this.iconOn;
}
return this.iconOff;
};
render(){
return (
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<Image src={this.getIcon()} style={imageStyle}/>
<h4 style={energyConsumedStyle}>{this.state.energyConsumed} KWh</h4>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
)
}
componentDidMount() {
this.setState({
turnedOn: this.props.device.on,
energyConsumed: this.props.device.totalConsumption,
});
}
render() {
return (
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<Image src={this.getIcon()} style={imageStyle} />
<h4 style={energyConsumedStyle}>{this.state.energyConsumed} KWh</h4>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
);
}
}

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

@ -1,27 +1,26 @@
export const energyConsumedStyle = {
color : "black",
fontSize : "1.3rem",
position: "absolute",
top: "30%",
left: "50%",
transform: "translateX(-50%)"
color: "black",
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))"
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))",
};
export const nameStyle = {
color : "black",
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)"
color: "black",
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)",
};

54
smart-hut/src/components/dashboard/devices/Switch.js
View file

@ -5,19 +5,19 @@
* The user can change the state of a switch through the SmartHut interface.
*/
import React, {Component} from 'react';
import {StyledDiv} from "./styleComponents";
import React, { Component } from "react";
import { StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
import {imageStyle, nameStyle} from "./SwitchStyle";
import { call } from '../../../client_server';
import { Image } from "semantic-ui-react";
import { imageStyle, nameStyle } from "./SwitchStyle";
import { call } from "../../../client_server";
export default class Switch extends Component {
constructor(props){
constructor(props) {
super(props);
this.state = {
turnedOn: false,
pointingLights : []
pointingLights: [],
};
this.iconOn = "/img/switchOn.svg";
this.iconOff = "/img/switchOff.svg";
@ -26,25 +26,24 @@ export default class Switch extends Component {
onClickDevice = () => {
this.props.device.on = !this.state.turnedOn;
let state = "";
if(this.props.device.on) {
state = "ON"
if (this.props.device.on) {
state = "ON";
} else {
state = "OFF"
state = "OFF";
}
let data = {
"type" : state,
"id" : this.props.device.id
}
call.deviceUpdate(data, 'switch/operate')
.then(res => {
if (res.status === 200 ){
this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
}
})
type: state,
id: this.props.device.id,
};
call.deviceUpdate(data, "switch/operate").then((res) => {
if (res.status === 200) {
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
}
});
};
getIcon = () => {
if(this.state.turnedOn){
if (this.state.turnedOn) {
return this.iconOn;
}
return this.iconOff;
@ -52,20 +51,23 @@ export default class Switch extends Component {
componentDidMount() {
this.setState({
turnedOn: this.props.device.on
})
turnedOn: this.props.device.on,
});
}
render(){
render() {
return (
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<Image src={this.getIcon()} style={imageStyle}/>
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<Image src={this.getIcon()} style={imageStyle} />
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
)
);
}
}

6
smart-hut/src/components/dashboard/devices/SwitchStyle.js
View file

@ -5,13 +5,13 @@ export const imageStyle = {
top: "15%",
left: "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",
color: "black",
position: "absolute",
top: "45%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};

22
smart-hut/src/components/dashboard/devices/TypesOfDevices.js
View file

@ -1,18 +1,24 @@
export const LightDevice = {
img : "/img/lightOff.svg",
imgClick : "/img/lightOn.svg"
img: "/img/lightOff.svg",
imgClick: "/img/lightOn.svg",
};
export const SmartPlugDevice = {
img : "/img/smart-plug.svg",
imgClick : "/img/smart-plug-off.svg"
img: "/img/smart-plug.svg",
imgClick: "/img/smart-plug-off.svg",
};
export const TemperatureSensor = {
type : "temperature_sensor",
img : "",
imgClick : "",
type: "temperature_sensor",
img: "",
imgClick: "",
units: "ºC",
};
export const deviceList = ["Light", "Dimmer", "Switcher", "Smart Plug", "Sensor"];
export const deviceList = [
"Light",
"Dimmer",
"Switcher",
"Smart Plug",
"Sensor",
];

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

@ -1,5 +1,5 @@
export const DEVICE_NAME_MAX_LENGTH = 15;
export function checkMaxLength(name){
return !(name.length > DEVICE_NAME_MAX_LENGTH);
export function checkMaxLength(name) {
return !(name.length > DEVICE_NAME_MAX_LENGTH);
}

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

@ -1,20 +1,20 @@
import styled from "styled-components";
export const editButtonStyle = {
position : "absolute",
position: "absolute",
top: "0",
right : "0",
backgroundColor : "#3e99ff",
borderRadius : "0 0 0 20px",
padding : ".4rem 1.2rem",
outline : "none",
color : "white",
fontFamily : "Lato",
textTransform : "uppercase"
right: "0",
backgroundColor: "#3e99ff",
borderRadius: "0 0 0 20px",
padding: ".4rem 1.2rem",
outline: "none",
color: "white",
fontFamily: "Lato",
textTransform: "uppercase",
};
export const panelStyle = {
position : "relative",
position: "relative",
backgroundColor: "#fafafa",
height: "100vh",
width: "auto",
@ -22,26 +22,26 @@ export const panelStyle = {
};
export const editModeStyle = {
position : "absolute",
position: "absolute",
top: "15%",
right: "0",
width : "1.5rem",
height : "1.5rem",
backgroundColor : "black",
width: "1.5rem",
height: "1.5rem",
backgroundColor: "black",
borderRadius: "100%",
zIndex : "1000",
cursor : "pointer",
zIndex: "1000",
cursor: "pointer",
};
export const editModeIconStyle = {
position : "absolute",
position: "absolute",
top: "50%",
left: "50%",
transform : "translate(-50%, -50%)",
transform: "translate(-50%, -50%)",
width: "0.75rem",
height : "0.75rem",
borderRadius : "20%",
zIndex : "101"
height: "0.75rem",
borderRadius: "20%",
zIndex: "101",
};
export const iconStyle = {
@ -51,50 +51,49 @@ export const iconStyle = {
top: "20%",
left: "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 = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};
export const formStyle = {
position : "absolute",
position: "absolute",
zIndex: "1000",
width : "80rem",
height : "10rem",
padding : "1rem",
margin : "1rem",
borderRadius : "10%",
boxShadow : "1px 1px 5px 2px #5d5d5d",
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",
maxWidth: "400px",
background: "#3e99ff",
paddingRight: "5rem",
};
export const StyledDiv = styled.div`
background-color : white;
padding : 3rem;
background-color: white;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius : 100%;
border : none;
position : relative;
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
text-align : center;
:hover{
background-color : #f2f2f2;
transition: all 0.3s ease-out;
text-align: center;
:hover {
background-color: #f2f2f2;
}
:active{
transform : translate(0.3px, 0.8px);
:active {
transform: translate(0.3px, 0.8px);
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
}
`;

243
smart-hut/src/components/modalform.js
View file

@ -1,18 +1,25 @@
import React, { Component } from 'react';
import { Button, Header, Modal, Form, Input, Icon, Responsive } from 'semantic-ui-react'
import React, { Component } from "react";
import {
Button,
Header,
Modal,
Form,
Input,
Icon,
Responsive,
} from "semantic-ui-react";
import SelectIcons from "./SelectIcons";
export default class ModalWindow extends Component {
constructor(props) {
super(props);
this.state = {
id : "",
id: "",
selectedIcon: "",
name: "",
img: "",
openModal: false
}
openModal: false,
};
this.addRoomModal = this.addRoomModal.bind(this);
this.updateIcon = this.updateIcon.bind(this);
@ -20,128 +27,160 @@ export default class ModalWindow extends Component {
addRoomModal = (e) => {
let data = {
"icon" : this.state.selectedIcon,
"name" : this.state.name,
"image" : this.state.img
}
icon: this.state.selectedIcon,
name: this.state.name,
image: this.state.img,
};
this.props.addRoom(data);
this.closeModal();
}
};
modifyRoomModal = (e) => {
let data = {
"icon" : this.state.selectedIcon === "" ? this.props.idRoom.icon : this.state.selectedIcon ,
"name" : this.state.name === ""? this.props.idRoom.name : this.state.name,
"image" : this.state.img
}
icon:
this.state.selectedIcon === ""
? this.props.idRoom.icon
: this.state.selectedIcon,
name: this.state.name === "" ? this.props.idRoom.name : this.state.name,
image: this.state.img,
};
this.props.updateRoom(data);
this.closeModal();
}
};
deleteRoom = (e) => {
this.props.deleteRoom();
this.closeModal();
}
};
changeSomething = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
closeModal = (e) => {
this.setState({ openModal: false });
this.updateIcon("home");
};
closeModal = (e) => {
this.setState({openModal:false});
this.updateIcon('home');
}
openModal = (e) => {
this.setState({openModal:true})
}
openModal = (e) => {
this.setState({ openModal: true });
};
updateIcon(e) {
this.setState({selectedIcon : e})
this.setState({ selectedIcon: e });
}
render(){
render() {
const spaceDiv = {
background: '#f4f4f4',
padding: '10px 10px',
margin: '10px 0px'
}
background: "#f4f4f4",
padding: "10px 10px",
margin: "10px 0px",
};
return (
<div>
<Responsive minWidth={768} >
{this.props.type === "new" ?
<Button icon labelPosition='left' inverted onClick={this.openModal}>
<Icon name='plus' size='small'/>
return (
<div>
<Responsive minWidth={768}>
{this.props.type === "new" ? (
<Button icon labelPosition="left" inverted onClick={this.openModal}>
<Icon name="plus" size="small" />
ADD ROOM
</Button>
:
<Icon name='pencil' size='small' onClick={this.openModal} />
}
</Responsive>
<Responsive maxWidth={768} >
{
this.props.type === "new" ?
<Button icon fluid labelPosition='left' onClick={this.openModal}>
<Icon name='plus' size='small'/>
ADD ROOM
</Button>
:
<Button icon fluid labelPosition='left' onClick={this.openModal}>
<Icon name='pencil' size='small'/>
EDIT ROOM
</Button>
}
</Responsive>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.props.type === "new" ? (
<Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="plus" size="small" />
ADD ROOM
</Button>
) : (
<Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="pencil" size="small" />
EDIT ROOM
</Button>
)}
</Responsive>
<Modal
onClose={this.closeModal}
open={this.state.openModal}>
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
<Modal.Content>
<Form>
<p>Insert the name of the room:</p>
<Form.Field>
<Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
value={this.props.type === "new" ? "" : this.props.idRoom.name }/>
</Form.Field>
<p>Insert an image of the room:</p>
<Form.Field>
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}
value={this.props.type === "new" ? "" : this.props.idRoom.images }/>
</Form.Field>
</Form>
<Modal onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.props.type === "new" ? "Add new room" : "Modify room"}
</Header>
<Modal.Content>
<Form>
<p>Insert the name of the room:</p>
<Form.Field>
<Input
label="Room name"
placeholder="Room Name"
name="name"
type="text"
onChange={this.changeSomething}
value={
this.props.type === "new" ? "" : this.props.idRoom.name
}
/>
</Form.Field>
<p>Insert an image of the room:</p>
<Form.Field>
<Input
label="Room image"
type="file"
name="img"
onChange={this.changeSomething}
value={
this.props.type === "new" ? "" : this.props.idRoom.images
}
/>
</Form.Field>
</Form>
<div style={spaceDiv}>
<p>Select an icon:</p>
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
</div>
<div style={spaceDiv}>
<p>Select an icon:</p>
<SelectIcons
updateIcon={this.updateIcon}
currentIcon={
this.props.type === "new" ? "home" : this.props.idRoom.icon
}
/>
</div>
{this.props.type === "modify" ?
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
<Icon name='trash alternate' />
Delete room
</Button> : null }
{this.props.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteRoom}
>
<Icon name="trash alternate" />
Delete room
</Button>
) : null}
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.props.type === "new" ? "Cancel" : "Discard changes"}
</Button>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.closeModal}>
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
</Button>
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</div>
)
<Button
color="green"
onClick={
this.props.type === "new"
? this.addRoomModal
: this.modifyRoomModal
}
>
<Icon name="checkmark" />{" "}
{this.props.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</div>
);
}
}

16
smart-hut/src/index.js
View file

@ -1,15 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
//React Router
//import { BrowserRouter, Route, Switch } from "react-router-dom";
const index = (
<App />
);
const index = <App />;
ReactDOM.render(
index
, document.getElementById('root'));
ReactDOM.render(index, document.getElementById("root"));
serviceWorker.unregister();

44
smart-hut/src/serviceWorker.js
View file

@ -11,9 +11,9 @@
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@ -21,7 +21,7 @@ const isLocalhost = Boolean(
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
@ -31,7 +31,7 @@ export function register(config) {
return;
}
window.addEventListener('load', () => {
window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
@ -42,8 +42,8 @@ export function register(config) {
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://bit.ly/CRA-PWA"
);
});
} else {
@ -57,21 +57,21 @@ export function register(config) {
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
"New content is available and will be used when all " +
"tabs for this page are closed. See https://bit.ly/CRA-PWA."
);
// Execute callback
@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
console.log("Content is cached for offline use.");
// Execute callback
if (config && config.onSuccess) {
@ -93,25 +93,25 @@ function registerValidSW(swUrl, config) {
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
.catch((error) => {
console.error("Error during service worker registration:", error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' }
headers: { "Service-Worker": "script" },
})
.then(response => {
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
const contentType = response.headers.get("content-type");
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
(contentType != null && contentType.indexOf("javascript") === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
@ -123,18 +123,18 @@ function checkValidServiceWorker(swUrl, config) {
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
"No internet connection found. App is running in offline mode."
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready
.then(registration => {
.then((registration) => {
registration.unregister();
})
.catch(error => {
.catch((error) => {
console.error(error.message);
});
}

2
smart-hut/src/setupTests.js
View file

@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
import "@testing-library/jest-dom/extend-expect";

143
smart-hut/src/views/ConfirmForgotPassword.js
View file

@ -1,100 +1,79 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import {
Image,
Divider,
Message,
Grid
} from "semantic-ui-react";
import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true }
handleDismiss = () => {
this.setState({ visible: false })
setTimeout(() => {
this.setState({ visible: true })
}, 2000)
}
render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header='Link has been sent!'
content='An e-mail has been sent your address, please follow the
instruction to create a new password'
/>
)
}
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
render() {
if (this.state.visible) {
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
)
<Message
onDismiss={this.handleDismiss}
header="Link has been sent!"
content="An e-mail has been sent your address, please follow the
instruction to create a new password"
/>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
}
}
const MessageReg = () => (
<Grid>
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}>
</Grid.Column>
<Grid.Column width={10}>
<Image src='title5.png' />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src='./img/logo.png' />
</Grid.Column>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
</Grid>
)
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmForgotPasswrod extends React.Component {
render () {
return (
<MessageReg />
)
render() {
return <MessageReg />;
}
}
}

143
smart-hut/src/views/ConfirmRegistration.js
View file

@ -1,100 +1,79 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import {
Image,
Divider,
Message,
Grid
} from "semantic-ui-react";
import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true }
handleDismiss = () => {
this.setState({ visible: false })
setTimeout(() => {
this.setState({ visible: true })
}, 2000)
}
render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header='Congratulation!'
content='An e-mail has been sent your address, please confirm
your registration by following the enclosed link'
/>
)
}
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
render() {
if (this.state.visible) {
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
)
<Message
onDismiss={this.handleDismiss}
header="Congratulation!"
content="An e-mail has been sent your address, please confirm
your registration by following the enclosed link"
/>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
}
}
const MessageReg = () => (
<Grid>
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}>
</Grid.Column>
<Grid.Column width={10}>
<Image src='title5.png' />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src='./img/logo.png' />
</Grid.Column>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
</Grid>
)
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmRegistration extends React.Component {
render () {
return (
<MessageReg />
)
render() {
return <MessageReg />;
}
}
}

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

@ -1,10 +1,10 @@
import React, {Component} from 'react';
import React, { Component } from "react";
import DevicePanel from "../components/dashboard/DevicePanel";
import Navbar from './Navbar'
import MyHeader from '../components/HeaderController'
import Navbar from "./Navbar";
import MyHeader from "../components/HeaderController";
import { call } from '../client_server';
import { Grid, Responsive } from 'semantic-ui-react'
import { call } from "../client_server";
import { Grid, Responsive } from "semantic-ui-react";
/*
rooms -> actual rooms
activeItem -> the current room in view
@ -14,7 +14,7 @@ import { Grid, Responsive } from 'semantic-ui-react'
id of Home is -1
*/
export default class Dashboard extends Component{
export default class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
@ -33,41 +33,43 @@ export default class Dashboard extends Component{
getDevices() {
if (this.state.activeItem === -1) {
call.getAllDevices()
.then(res => {
if ( res.status === 200) {
console.log(res.data)
this.setState({
devices: res.data
});
}
}).catch(err => {
console.log(err);
call
.getAllDevices()
.then((res) => {
if (res.status === 200) {
console.log(res.data);
this.setState({
devices: res.data,
});
}
})
.catch((err) => {
console.log(err);
});
} else {
call.getAllDevicesByRoom(this.state.activeItem)
.then(res => {
if (res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
call
.getAllDevicesByRoom(this.state.activeItem)
.then((res) => {
if (res.status === 200) {
this.setState({
devices: res.data,
});
}
})
.catch((err) => {});
}
}
}
getRooms() {
call.getAllRooms(this.props.tkn)
.then(res => {
this.setState({
rooms: res.data
getRooms() {
call
.getAllRooms(this.props.tkn)
.then((res) => {
this.setState({
rooms: res.data,
});
})
}).catch(err => {
});
}
.catch((err) => {});
}
componentDidMount() {
this.getRooms();
@ -75,69 +77,77 @@ getRooms() {
}
addRoom(data) {
call.createRoom(data)
.then(res => {
call
.createRoom(data)
.then((res) => {
if (res.status === 200 && res.data) {
this.getRooms();
}
}).catch(err => {
})
.catch((err) => {
console.log(err);
});
};
}
deleteRoom() {
let data = {
id : this.state.activeItem
}
call.deleteRoom(data)
.then(res => {
id: this.state.activeItem,
};
call
.deleteRoom(data)
.then((res) => {
//remove room in state.rooms
this.getRooms();
}).catch(err => {
})
.catch((err) => {
console.log(err);
});
}
updateRoom(data) {
data.id = this.state.activeItem;
call.updateRoom(data)
.then(res => {
call
.updateRoom(data)
.then((res) => {
if (res.status === 200 && res.data) {
this.getRooms();
this.forceUpdate();
}
}).catch(err => {
})
.catch((err) => {});
}
handleItemClick(id) {
// el -> obj of name and id
//da fare richiesta get della room e settare activeItem
this.setState({
activeItem: id
activeItem: id,
});
if ( id === -1) {
call.getAllDevices(this.props.tkn)
.then(res => {
if ( res.status === 200) {
if (id === -1) {
call
.getAllDevices(this.props.tkn)
.then((res) => {
if (res.status === 200) {
this.setState({
devices: res.data
devices: res.data,
});
}
}).catch(err => {
})
.catch((err) => {
console.log(err);
});
} else {
call.getAllDevicesByRoom(id, this.props.tkn)
.then(res => {
call
.getAllDevicesByRoom(id, this.props.tkn)
.then((res) => {
if (res.status === 200) {
this.setState({
devices: res.data
devices: res.data,
});
this.forceUpdate();
}
}).catch(err => {
})
.catch((err) => {
console.log(err);
});
}
@ -145,59 +155,79 @@ getRooms() {
addDevice(data) {
data.params["roomId"] = this.state.activeItem;
call.devicePost(data, this.props.tkn)
.then(res => {
this.setState(state => ({
devices: state.devices.concat([res.data])
}));
return this.state.devices;
}).catch(err => {
});
call
.devicePost(data, this.props.tkn)
.then((res) => {
this.setState((state) => ({
devices: state.devices.concat([res.data]),
}));
return this.state.devices;
})
.catch((err) => {});
}
render () {
return(
<div style={{height : "110vh", background: '#1b1c1d'}}>
<Responsive minWidth={768} >
<Grid >
<Grid.Row color='black'>
render() {
return (
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column width={3}>
<Navbar addRoom={this.addRoom} updateRoom={this.updateRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
</Grid.Column>
<Grid.Row color="black">
<Grid.Column width={3}>
<Navbar
addRoom={this.addRoom}
updateRoom={this.updateRoom}
deleteRoom={this.deleteRoom}
rooms={this.state.rooms}
handleItemClick={this.handleItemClick}
/>
</Grid.Column>
<Grid.Column width={13}>
<DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column>
</Grid.Row>
<Grid.Column width={13}>
<DevicePanel
tkn={this.props.tkn}
activeItem={this.state.activeItem}
addDevice={this.addDevice}
devices={this.state.devices}
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
<Responsive maxWidth={768} >
<Responsive maxWidth={768}>
<Grid inverted>
<Grid.Row color='black'>
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column color='black'>
<Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
</Grid.Column>
</Grid.Row>
<Grid.Row >
<Grid.Column >
<DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column>
</Grid.Row>
</Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
<Navbar
addRoom={this.addRoom}
deleteRoom={this.deleteRoom}
rooms={this.state.rooms}
handleItemClick={this.handleItemClick}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<DevicePanel
tkn={this.props.tkn}
activeItem={this.state.activeItem}
addDevice={this.addDevice}
devices={this.state.devices}
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</div>
)
);
}
}

33
smart-hut/src/views/DashboardTest.js
View file

@ -1,22 +1,17 @@
import React, {Component} from 'react';
import {Button } from 'semantic-ui-react';
import React, { Component } from "react";
import { Button } from "semantic-ui-react";
export default class Dashboard extends Component {
handleLogOut = (e) => {
console.log(this.props);
this.props.logout();
};
handleLogOut = (e) => {
console.log(this.props);
this.props.logout();
};
render() {
return (
<Button
circular
style={{margin: "2em"}}
onClick={this.handleLogOut}
>
Go Home </Button>
)
}
}
render() {
return (
<Button circular style={{ margin: "2em" }} onClick={this.handleLogOut}>
Go Home{" "}
</Button>
);
}
}

206
smart-hut/src/views/Forgot-pass-reset.js
View file

@ -1,102 +1,122 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
import { call } from '../client_server';
import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Icon,
Message,
} from "semantic-ui-react";
import { call } from "../client_server";
import { Redirect } from "react-router-dom";
export default class ChangePass extends Component {
constructor(props) {
super(props);
this.state = {
password: "",
error: {
state: false,
message: "",
},
};
this.handleChangePassword = this.handleChangePassword.bind(this);
}
export default class ChangePass extends Component {
constructor(props) {
super(props);
this.state = {
password: "",
error: {
state: false,
message: "",
}
}
this.handleChangePassword = this.handleChangePassword.bind(this);
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
checkpassword = (e) => {
if (e.target.value !== this.state.password) {
this.setState({
error: {
state: true,
message: "Passwords do not match.",
},
});
}
};
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
handleChangePassword = (e) => {
const params = {
confirmationToken: this.props.query.token,
password: this.state.password,
};
checkpassword = (e) => {
if (e.target.value !== this.state.password) {
this.setState({error: {
state : true,
message : "Passwords do not match.",
}});
call
.resetPassword(params)
.then((res) => {
if (res.status !== 200) {
this.setState({ error: { state: true, message: "Errore" } });
} else {
return <Redirect to="/" />;
}
};
// else set a message that an email has been sent
})
.catch((err) => {
console.log(err);
});
};
handleChangePassword = (e) => {
const params = {
"confirmationToken" : this.props.query.token ,
"password" : this.state.password
}
call.resetPassword(params)
.then(res => {
if (res.status !== 200){
this.setState({ error: { state: true,
message: "Errore"}});
} else {
return <Redirect to="/" />
}
// else set a message that an email has been sent
}).catch(err => {
console.log(err);
});
};
render() {
return (
<React.Fragment>
<Button
circular
style={{margin: "2em"}}
href="/"
render() {
return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Reset Password
</Header>
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
<Icon name='arrow alternate circle left'/>
Go Home </Button>
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
<Grid.Column style={{maxWidth: 450}}>
<Header as='h2' color='blue' textAlign='center'>
<Image src='img/logo.png'/> Reset Password
</Header>
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
<Message
error
header='Change Password Error'
content= {this.state.error.message}
/>
<Form.Input
icon='address card outline'
iconPosition='left'
placeholder='Reset your password'
name="password"
type='password'
onChange={this.onChangeHandler}
required
/>
<Form.Input
icon='address card outline'
iconPosition='left'
placeholder='Confirm Password'
name="confirm-password"
type='password'
onChange={this.checkpassword}
required
/>
<Button color='blue' fluid size='large' onClick={this.handleChangePassword}>
Confirm password
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
)
}
}
<Message
error
header="Change Password Error"
content={this.state.error.message}
/>
<Form.Input
icon="address card outline"
iconPosition="left"
placeholder="Reset your password"
name="password"
type="password"
onChange={this.onChangeHandler}
required
/>
<Form.Input
icon="address card outline"
iconPosition="left"
placeholder="Confirm Password"
name="confirm-password"
type="password"
onChange={this.checkpassword}
required
/>
<Button
color="blue"
fluid
size="large"
onClick={this.handleChangePassword}
>
Confirm password
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}

188
smart-hut/src/views/Forgot-password.js
View file

@ -1,90 +1,108 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
import {Redirect } from "react-router-dom";
import { call } from '../client_server';
import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Icon,
Message,
} from "semantic-ui-react";
import { Redirect } from "react-router-dom";
import { call } from "../client_server";
export default class ForgotPass extends Component {
constructor(props) {
super(props);
this.state = {
user: "",
error: {
state: false,
message: "",
},
success: false,
};
}
export default class ForgotPass extends Component {
constructor(props) {
super(props);
this.state = {
user: "",
error: {
state: false,
message: "",
},
success: false,
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
handleSendEmail = (e) => {
e.preventDefault();
const params = {
email: this.state.user,
};
call
.initResetPassword(params)
.then((res) => {
console.log(res);
if (res.status === 200) {
this.setState({ success: true });
}
if (res.status === "Errore") {
this.setState({ error: { state: true, message: "Errore" } });
}
//set a message that an email has been sent
})
.catch((err) => {
console.log(err);
});
};
render() {
if (this.state.success) {
return <Redirect to="sent-email" />;
}
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
};
handleSendEmail = (e) => {
e.preventDefault();
const params = {
"email" : this.state.user,
}
call.initResetPassword(params)
.then(res => {
console.log(res);
if (res.status === 200) {
this.setState({success : true});
}
if (res.status === "Errore") {
this.setState({ error: { state: true,
message: "Errore"}});
}
//set a message that an email has been sent
}).catch(err => {
console.log(err);
});
};
render() {
if (this.state.success) {
return <Redirect to="sent-email" />
}
return (
<React.Fragment>
<Button
circular
style={{margin: "2em"}}
href="/"
return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Reset Password
</Header>
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
<Icon name='arrow alternate circle left'/>
Go Home </Button>
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
<Grid.Column style={{maxWidth: 450}}>
<Header as='h2' color='blue' textAlign='center'>
<Image src='img/logo.png'/> Reset Password
</Header>
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
<Message
error
header='Send E-mail Error'
content= {this.state.error.message}
/>
<Form.Input
icon='address card outline'
iconPosition='left'
placeholder='Username or E-mail'
name="user"
type='text'
onChange={this.onChangeHandler}
required
/>
<Button color='blue' fluid size='large' onClick={this.handleSendEmail}>
Send E-mail
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
)
}
}
<Message
error
header="Send E-mail Error"
content={this.state.error.message}
/>
<Form.Input
icon="address card outline"
iconPosition="left"
placeholder="Username or E-mail"
name="user"
type="text"
onChange={this.onChangeHandler}
required
/>
<Button
color="blue"
fluid
size="large"
onClick={this.handleSendEmail}
>
Send E-mail
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}

138
smart-hut/src/views/ForgotPassword.js
View file

@ -11,97 +11,81 @@ import {
Header,
Divider,
Message,
Grid
Grid,
} from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true }
handleDismiss = () => {
this.setState({ visible: false })
setTimeout(() => {
this.setState({ visible: true })
}, 2000)
}
render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header='Link has been sent!'
content='An e-mail has been sent your address, please follow the
instruction to create a new password'
/>
)
}
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
render() {
if (this.state.visible) {
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
)
<Message
onDismiss={this.handleDismiss}
header="Link has been sent!"
content="An e-mail has been sent your address, please follow the
instruction to create a new password"
/>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
}
}
const MessageReg = () => (
<Grid>
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}>
</Grid.Column>
<Grid.Column width={10}>
<Image src='title5.png' />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src='./img/logo.png' />
</Grid.Column>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
</Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}>
</Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}>
</Grid.Column>
</Grid.Row>
</Grid>
)
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ForgotPasswrod extends React.Component {
render () {
return (
<MessageReg />
)
render() {
return <MessageReg />;
}
}
}

209
smart-hut/src/views/FourOhFour.js
View file

@ -1,110 +1,127 @@
import React, {Component} from 'react';
import { Grid, Button, Segment, Responsive, Image} from 'semantic-ui-react';
import {Link } from "react-router-dom";
import MyHeader from '../components/HeaderController'
export default class FourOhFour extends Component {
import React, { Component } from "react";
import { Grid, Button, Segment, Responsive, Image } from "semantic-ui-react";
import { Link } from "react-router-dom";
import MyHeader from "../components/HeaderController";
export default class FourOhFour extends Component {
constructor(props) {
super(props);
const meme = ['1.jpeg', '2.jpeg', '3.png', '4.jpeg', '5.jpeg', '6.jpg', '7.jpg',
'8.jpg', '9.jpeg', '10.jpg', '11.jpeg', '12.gif', '13.gif', '14.gif'];
const meme = [
"1.jpeg",
"2.jpeg",
"3.png",
"4.jpeg",
"5.jpeg",
"6.jpg",
"7.jpg",
"8.jpg",
"9.jpeg",
"10.jpg",
"11.jpeg",
"12.gif",
"13.gif",
"14.gif",
];
var arrayNum = Math.floor(Math.random() * 13) + 1;
var path = 'img/room_404_meme/' + meme[arrayNum];
this.state = {meme : path};
var path = "img/room_404_meme/" + meme[arrayNum];
this.state = { meme: path };
}
render() {
return (
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<div style={{height : "110vh", background: '#1b1c1d'}}>
<Grid >
<Grid.Row color='black'>
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column width={16}>
<Segment inverted color='red'>
<Grid>
<Grid.Row>
<Grid.Column textAlign='center'>
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={8}>
<Image centered src={this.state.meme} size='medium' />
</Grid.Column>
<Grid.Column width={8}>
<p>
Hey what are you doing here?
Looks like you are lost, this room does not exist. Maybe you were looking for
the kitchen, or the garage, or the bedroom, or your love room... so don't
wait here and let's go back to our main room! ...or refresh this page
some times...
</p>
<Button fluid inverted color='white'>
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
<div style={{background: '#1b1c1d'}}>
<Grid >
<Grid.Row color='black'>
render() {
return (
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column width={16}>
<Segment inverted color='red'>
<Grid>
<Grid.Row>
<Grid.Column textAlign='center'>
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<Image centered src={this.state.meme} size='medium' />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={8}>
<Image centered src={this.state.meme} size="medium" />
</Grid.Column>
<Grid.Column width={8}>
<p>
Hey what are you doing here?
Looks like you are lost, this room does not exist. Maybe you were looking for
the kitchen, or the garage, or the bedroom, or your love room... so don't
wait here and let's go back to our main room! ...or refresh this page
some times...
Hey what are you doing here? Looks like you are
lost, this room does not exist. Maybe you were
looking for the kitchen, or the garage, or the
bedroom, or your love room... so don't wait here and
let's go back to our main room! ...or refresh this
page some times...
</p>
<Button fluid inverted color='white'>
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
</Responsive>
</Segment.Group>
)
}
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
<div style={{ background: "#1b1c1d" }}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<Image centered src={this.state.meme} size="medium" />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<p>
Hey what are you doing here? Looks like you are
lost, this room does not exist. Maybe you were
looking for the kitchen, or the garage, or the
bedroom, or your love room... so don't wait here and
let's go back to our main room! ...or refresh this
page some times...
</p>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
</Responsive>
</Segment.Group>
);
}
}

455
smart-hut/src/views/Home.js
View file

@ -1,271 +1,270 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import HomeNavbar from './../components/HomeNavbar';
import PropTypes from "prop-types";
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import {
Button,
Container,
Grid,
Header,
Icon,
Image,
List,
Menu,
Responsive,
Segment,
Sidebar,
Visibility,
} from 'semantic-ui-react';
Button,
Container,
Grid,
Header,
Icon,
Image,
List,
Menu,
Responsive,
Segment,
Sidebar,
Visibility,
} from "semantic-ui-react";
// Heads up!
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
// For more advanced usage please check Responsive docs under the "Usage" section.
const getWidth = () => {
const isSSR = typeof window === 'undefined';
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
}
const isSSR = typeof window === "undefined";
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
};
/* eslint-disable react/no-multi-comp */
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
* such things.
*/
const HomepageHeading = ({ mobile }) => (
<Container text>
<Header
as='h1'
content='SmartHut'
inverted
style={{
fontSize: mobile ? '2em' : '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: mobile ? '1.5em' : '3em',
}}
/>
<Header
as='h2'
content='Keep your Home fully Connected'
inverted
style={{
fontSize: mobile ? '1.5em' : '1.7em',
fontWeight: 'normal',
marginTop: mobile ? '0.5em' : '1.5em',
}}
/>
<Button size='huge' color="orange" href="/signup">
Get Started
<Icon name='right arrow' />
</Button>
</Container>
)
<Container text>
<Header
as="h1"
content="SmartHut"
inverted
style={{
fontSize: mobile ? "2em" : "4em",
fontWeight: "normal",
marginBottom: 0,
marginTop: mobile ? "1.5em" : "3em",
}}
/>
<Header
as="h2"
content="Keep your Home fully Connected"
inverted
style={{
fontSize: mobile ? "1.5em" : "1.7em",
fontWeight: "normal",
marginTop: mobile ? "0.5em" : "1.5em",
}}
/>
<Button size="huge" color="orange" href="/signup">
Get Started
<Icon name="right arrow" />
</Button>
</Container>
);
HomepageHeading.propTypes = {
mobile: PropTypes.bool,
}
mobile: PropTypes.bool,
};
class DesktopContainer extends Component {
state = {};
hideFixedMenu = () => this.setState({ fixed: false })
showFixedMenu = () => this.setState({ fixed: true })
state = {};
hideFixedMenu = () => this.setState({ fixed: false });
showFixedMenu = () => this.setState({ fixed: true });
render() {
const { children } = this.props
render() {
const { children } = this.props;
return (
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
<Visibility
once={false}
onBottomPassed={this.showFixedMenu}
onBottomPassedReverse={this.hideFixedMenu}
>
<Segment
basic
textAlign='center'
style={{
minHeight: 700,
padding: '1em 0em',
background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
backgroundSize: "cover",
}}
vertical
>
<HomeNavbar />
<HomepageHeading />
</Segment>
</Visibility>
return (
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
<Visibility
once={false}
onBottomPassed={this.showFixedMenu}
onBottomPassedReverse={this.hideFixedMenu}
>
<Segment
basic
textAlign="center"
style={{
minHeight: 700,
padding: "1em 0em",
background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
backgroundSize: "cover",
}}
vertical
>
<HomeNavbar />
<HomepageHeading />
</Segment>
</Visibility>
{children}
</Responsive>
)
}
{children}
</Responsive>
);
}
}
DesktopContainer.propTypes = {
children: PropTypes.node,
}
children: PropTypes.node,
};
class MobileContainer extends Component {
state = {}
state = {};
handleSidebarHide = () => this.setState({ sidebarOpened: false })
handleSidebarHide = () => this.setState({ sidebarOpened: false });
handleToggle = () => this.setState({ sidebarOpened: true })
handleToggle = () => this.setState({ sidebarOpened: true });
render() {
const { children } = this.props;
const { sidebarOpened } = this.state;
render() {
const { children } = this.props;
const { sidebarOpened } = this.state;
return (
<Responsive
as={Sidebar.Pushable}
getWidth={getWidth}
maxWidth={Responsive.onlyMobile.maxWidth}
>
<Sidebar
as={Menu}
animation='push'
inverted
onHide={this.handleSidebarHide}
vertical
visible={sidebarOpened}
>
<Menu.Item as='a' active>
Home
</Menu.Item>
<Menu.Item as='a'>Log in</Menu.Item>
<Menu.Item as='a'>Sign Up</Menu.Item>
</Sidebar>
return (
<Responsive
as={Sidebar.Pushable}
getWidth={getWidth}
maxWidth={Responsive.onlyMobile.maxWidth}
>
<Sidebar
as={Menu}
animation="push"
inverted
onHide={this.handleSidebarHide}
vertical
visible={sidebarOpened}
>
<Menu.Item as="a" active>
Home
</Menu.Item>
<Menu.Item as="a">Log in</Menu.Item>
<Menu.Item as="a">Sign Up</Menu.Item>
</Sidebar>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign='center'
style={{ minHeight: 350, padding: '1em 0em' }}
vertical
>
<Container>
<Menu inverted pointing secondary size='large'>
<Menu.Item onClick={this.handleToggle}>
<Icon name='sidebar' />
</Menu.Item>
<Menu.Item position='right'>
<Button as='a' inverted>
Log in
</Button>
<Button as='a' inverted style={{ marginLeft: '0.5em' }}>
Sign Up
</Button>
</Menu.Item>
</Menu>
</Container>
<HomepageHeading mobile />
</Segment>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign="center"
style={{ minHeight: 350, padding: "1em 0em" }}
vertical
>
<Container>
<Menu inverted pointing secondary size="large">
<Menu.Item onClick={this.handleToggle}>
<Icon name="sidebar" />
</Menu.Item>
<Menu.Item position="right">
<Button as="a" inverted>
Log in
</Button>
<Button as="a" inverted style={{ marginLeft: "0.5em" }}>
Sign Up
</Button>
</Menu.Item>
</Menu>
</Container>
<HomepageHeading mobile />
</Segment>
{children}
</Sidebar.Pusher>
</Responsive>
)
}
{children}
</Sidebar.Pusher>
</Responsive>
);
}
}
MobileContainer.propTypes = {
children: PropTypes.node,
}
children: PropTypes.node,
};
const ResponsiveContainer = ({ children }) => (
<div>
<DesktopContainer>{children}</DesktopContainer>
<MobileContainer>{children}</MobileContainer>
</div>
)
<div>
<DesktopContainer>{children}</DesktopContainer>
<MobileContainer>{children}</MobileContainer>
</div>
);
ResponsiveContainer.propTypes = {
children: PropTypes.node,
}
children: PropTypes.node,
};
const Home = () => (
<ResponsiveContainer>
<Segment style={{ padding: '8em 0em' }} vertical>
<Grid container stackable verticalAlign='middle'>
<Grid.Row>
<Grid.Column width={8}>
<Header as='h3' style={{ fontSize: '2em' }}>
We help you keep your home connected
</Header>
<p style={{ fontSize: '1.33em' }}>
In a few steps your home will be fully connected with SmartHut.
</p>
<Header as='h3' style={{ fontSize: '2em' }}>
Choose between a wide range of devices
</Header>
<p style={{ fontSize: '1.33em' }}>
SmartHut is a leading worldwide company in technology innovation.
Explore our website to find the best devices for each room of your home!
</p>
</Grid.Column>
<Grid.Column floated='right' width={6}>
<Image bordered rounded size='large' src='/img/banner.jpg' />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column textAlign='center'>
<Button size='huge'>Check It Out</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
<ResponsiveContainer>
<Segment style={{ padding: "8em 0em" }} vertical>
<Grid container stackable verticalAlign="middle">
<Grid.Row>
<Grid.Column width={8}>
<Header as="h3" style={{ fontSize: "2em" }}>
We help you keep your home connected
</Header>
<p style={{ fontSize: "1.33em" }}>
In a few steps your home will be fully connected with SmartHut.
</p>
<Header as="h3" style={{ fontSize: "2em" }}>
Choose between a wide range of devices
</Header>
<p style={{ fontSize: "1.33em" }}>
SmartHut is a leading worldwide company in technology innovation.
Explore our website to find the best devices for each room of your
home!
</p>
</Grid.Column>
<Grid.Column floated="right" width={6}>
<Image bordered rounded size="large" src="/img/banner.jpg" />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column textAlign="center">
<Button size="huge">Check It Out</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
<Segment style={{ padding: '8em 0em' }} vertical>
<Container text>
<Header as='h3' style={{ fontSize: '2em' }}>
Have you ever dreamt about a smart home?
</Header>
<p style={{ fontSize: '1.33em' }}>
Let us carrying you into the future. With SmartHut, being at home
will be a refreshing experience. With just a few clicks, you will be
able the set the illumination of your entire place.
Follow the intelligent light, follow SmartHut.
</p>
<Button as='a' size='large'>
Read More
</Button>
</Container>
</Segment>
<Segment style={{ padding: "8em 0em" }} vertical>
<Container text>
<Header as="h3" style={{ fontSize: "2em" }}>
Have you ever dreamt about a smart home?
</Header>
<p style={{ fontSize: "1.33em" }}>
Let us carrying you into the future. With SmartHut, being at home will
be a refreshing experience. With just a few clicks, you will be able
the set the illumination of your entire place. Follow the intelligent
light, follow SmartHut.
</p>
<Button as="a" size="large">
Read More
</Button>
</Container>
</Segment>
<Segment inverted vertical style={{ padding: '5em 0em' }}>
<Container>
<Grid divided inverted stackable>
<Grid.Row>
<Grid.Column width={3}>
<Header inverted as='h4' content='About' />
<List link inverted>
<List.Item as='a'>Sitemap</List.Item>
<List.Item as='a'>Contact Us</List.Item>
<List.Item as='a'>Religious Ceremonies</List.Item>
<List.Item as='a'>Gazebo Plans</List.Item>
</List>
</Grid.Column>
<Grid.Column width={3}>
<Header inverted as='h4' content='Services' />
<List link inverted>
<List.Item as='a'>Banana Pre-Order</List.Item>
<List.Item as='a'>DNA FAQ</List.Item>
<List.Item as='a'>How To Access</List.Item>
<List.Item as='a'>Favorite X-Men</List.Item>
</List>
</Grid.Column>
<Grid.Column width={7}>
<Header as='h4' inverted>
SmartHut
</Header>
<p>
Keep your Home connected.
</p>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</Segment>
</ResponsiveContainer>
)
<Segment inverted vertical style={{ padding: "5em 0em" }}>
<Container>
<Grid divided inverted stackable>
<Grid.Row>
<Grid.Column width={3}>
<Header inverted as="h4" content="About" />
<List link inverted>
<List.Item as="a">Sitemap</List.Item>
<List.Item as="a">Contact Us</List.Item>
<List.Item as="a">Religious Ceremonies</List.Item>
<List.Item as="a">Gazebo Plans</List.Item>
</List>
</Grid.Column>
<Grid.Column width={3}>
<Header inverted as="h4" content="Services" />
<List link inverted>
<List.Item as="a">Banana Pre-Order</List.Item>
<List.Item as="a">DNA FAQ</List.Item>
<List.Item as="a">How To Access</List.Item>
<List.Item as="a">Favorite X-Men</List.Item>
</List>
</Grid.Column>
<Grid.Column width={7}>
<Header as="h4" inverted>
SmartHut
</Header>
<p>Keep your Home connected.</p>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</Segment>
</ResponsiveContainer>
);
export default Home;

154
smart-hut/src/views/Instruction.js
View file

@ -1,22 +1,17 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import {
Container,
Header,
Divider,
Grid
} from "semantic-ui-react";
import { Container, Header, Divider, Grid } from "semantic-ui-react";
const ContainerExampleAlignment = () => (
<div>
<HomeNavbar />
<Container textAlign='justified'>
<Header as="h1"> Instructions Page </Header>
<Grid>
<Grid.Row height={15}></Grid.Row>
</Grid>
<Container textAlign="justified">
<Header as="h1"> Instructions Page </Header>
<Grid>
<Grid.Row height={15}></Grid.Row>
</Grid>
</Container>
<Container textAlign='justified'>
<Container textAlign="justified">
<b>First Step</b>
<Divider />
<p>
@ -36,74 +31,71 @@ const ContainerExampleAlignment = () => (
</p>
<Divider />
</Container>
<Container textAlign='justified'>
<b>Second Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
<Container textAlign='justified'>
<b>Third Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
<Container textAlign='justified'>
<b>Last Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
<Container textAlign="justified">
<b>Second Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
<Container textAlign="justified">
<b>Third Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
<Container textAlign="justified">
<b>Last Step</b>
<Divider />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi.
</p>
<Divider />
</Container>
</div>
)
);
export default class Insturction extends Component{
render() {
return(
<ContainerExampleAlignment />
)
}
}
export default class Insturction extends Component {
render() {
return <ContainerExampleAlignment />;
}
}

155
smart-hut/src/views/Login.js
View file

@ -1,101 +1,130 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Icon, Checkbox, Input} from 'semantic-ui-react';
import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Message,
Icon,
Checkbox,
Input,
} from "semantic-ui-react";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
user: "",
password : "",
password: "",
fireRedirect: false,
error : { state : false,
message: ""},
error: { state: false, message: "" },
};
}
handleLogin = (e) => {
e.preventDefault();
const params = {
"usernameOrEmail": this.state.user,
"password": this.state.password,
const params = {
usernameOrEmail: this.state.user,
password: this.state.password,
};
this.props.auth({
user: this.state.user,
params : params,
}).then(res => {
if (res.status === 200) {
} else {
this.setState({error: { state: true,
message: "Errore"}});
}
}).catch(err => {
console.log(err);
});
this.props
.auth({
user: this.state.user,
params: params,
})
.then((res) => {
if (res.status === 200) {
} else {
this.setState({ error: { state: true, message: "Errore" } });
}
})
.catch((err) => {
console.log(err);
});
};
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
this.setState({ [nam]: val });
};
toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
toggle = () =>
this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
render() {
return (
<React.Fragment>
<Button
circular
style={{margin: "2em"}}
href="/"
>
<Icon name='arrow alternate circle left'/>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home
</Button>
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
<Grid.Column style={{maxWidth: 450}}>
<Header as='h2' color='blue' textAlign='center'>
<Image src='img/logo.png'/> Log-in to SmartHut
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Log-in to SmartHut
</Header>
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
<Message
error
header='Login Error'
content= {this.state.error.message}
/>
<Form.Input
control={Input}
type="text"
icon='user'
name="user"
iconPosition='left'
placeholder='Username or E-mail'
onChange={this.onChangeHandler}
/>
<Form.Input
icon='lock'
iconPosition='left'
placeholder='Password'
name="password"
type='password'
onChange={this.onChangeHandler}
/>
<Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
<Message
error
header="Login Error"
content={this.state.error.message}
/>
<Form.Input
control={Input}
type="text"
icon="user"
name="user"
iconPosition="left"
placeholder="Username or E-mail"
onChange={this.onChangeHandler}
/>
<Form.Input
icon="lock"
iconPosition="left"
placeholder="Password"
name="password"
type="password"
onChange={this.onChangeHandler}
/>
<Checkbox
type="checkbox"
name="rememberme"
onClick={this.toggle}
label="Remember me"
style={{ margin: "1.5em 0", float: "left" }}
/>
<Button color='blue' fluid size='large' onClick={this.handleLogin}>
Login
<Button
color="blue"
fluid
size="large"
onClick={this.handleLogin}
>
Login
</Button>
</Form>
<Message>
<p><a href="/forgot-password">Forgot Password?</a></p>
<p>New to us? <a href='/signup'> Sign Up</a></p>
<p>
<a href="/forgot-password">Forgot Password?</a>
</p>
<p>
New to us? <a href="/signup"> Sign Up</a>
</p>
</Message>
</Grid.Column>
</Grid>
</React.Fragment>
)
);
}
}

299
smart-hut/src/views/Navbar.js
View file

@ -1,22 +1,30 @@
import React, { Component } from 'react';
import { Menu, Grid, Icon, Responsive, Segment, Dropdown } from "semantic-ui-react";
import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
import React, { Component } from "react";
import {
Menu,
Grid,
Icon,
Responsive,
Segment,
Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {
activeItemName: 'Home',
activeItemName: "Home",
activeItem: -1,
edited: "",
editMode : false
}
editMode: false,
};
}
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
editModeController = (e) =>
this.setState((prevState) => ({ editMode: !prevState.editMode }));
handleClick = (e, {id, name}) => {
handleClick = (e, { id, name }) => {
let obj = undefined;
this.props.rooms.forEach((e) => {
if (e.id === id) {
@ -25,162 +33,161 @@ class Navbar extends Component {
});
this.setState({
activeItem: id,
activeRoom: obj,
activeItemName: name
});
this.props.handleItemClick(id)
}
activeItem: id,
activeRoom: obj,
activeItemName: name,
});
this.props.handleItemClick(id);
};
render(){
render() {
//const { activeItem } = this.state
return (
<div style={{background: '#1b1c1d!important'}}>
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<Grid>
<Grid.Row color='black'>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
</Grid.Row>
<Grid.Row color='black'>
<div style={{ background: "#1b1c1d!important" }}>
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<Grid>
<Grid.Row color="black">
<button
style={editButtonStyle}
onClick={this.editModeController}
>
Edit
</button>
</Grid.Row>
<Grid.Row color="black">
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={-1}
name='Home'
name="Home"
active={this.state.activeItem === -1}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
HOME
</Grid.Column>
</Grid.Row>
</Grid>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>HOME</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
</ Menu.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Menu.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name={e.icon} size="small"/>
</Grid.Column>
<Grid.Column width={8}>
{e.name}
</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ?
<ModalWindow type="modify" idRoom={e} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null
}
</Grid.Column>
</Grid.Row>
</Grid>
</ Menu.Item>
)
}) : null
}
{this.props.rooms
? this.props.rooms.map((e, i) => {
return (
<Menu.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name={e.icon} size="small" />
</Grid.Column>
<Grid.Column width={8}>{e.name}</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ? (
<ModalWindow
type="modify"
idRoom={e}
updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom}
/>
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
);
})
: null}
<Menu.Item
name='newM'
active={this.state.activeItem === 'newM'}
name="newM"
active={this.state.activeItem === "newM"}
>
<Grid>
<Grid.Row centered name="new">
<ModalWindow type="new" addRoom={this.props.addRoom} />
</Grid.Row>
</Grid>
</Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Grid>
<Grid.Row centered name='new'>
<ModalWindow type="new" addRoom={this.props.addRoom}/>
</Grid.Row>
</Grid>
<Responsive as={Segment} maxWidth={768}>
<Menu inverted>
<Dropdown item fluid text={this.state.activeItemName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
id={-1}
name="Home"
active={this.state.activeItem === "Home"}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>Home</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
</ Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
<Menu inverted>
<Dropdown item fluid text={this.state.activeItemName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
id={-1}
name='Home'
active={this.state.activeItem === 'Home'}
onClick={this.handleClick}>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
Home
</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column width={1}>
<Icon name={e.icon} size="small"/>
</Grid.Column>
<Grid.Column>
{e.name}
</Grid.Column>
</Grid.Row>
</Grid>
</ Dropdown.Item>
)
}) : null
}
</Dropdown.Menu>
</Dropdown>
</Menu >
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
{this.props.rooms
? this.props.rooms.map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column width={1}>
<Icon name={e.icon} size="small" />
</Grid.Column>
<Grid.Column>{e.name}</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
);
})
: null}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
<ModalWindow type="new" addRoom={this.props.addRoom} />
</Grid.Column>
{this.state.activeItem !== -1 ? (
<Grid.Column width={8}>
<ModalWindow
type="modify"
idRoom={this.state.activeRoom}
updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom}
/>
</Grid.Column>
{
this.state.activeItem !== -1 ?
<Grid.Column width={8}>
<ModalWindow type="modify" idRoom={this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
</Grid.Column>
: null
}
</Grid.Row>
</Grid>
</Responsive>
</Segment.Group>
</div>
) : null}
</Grid.Row>
</Grid>
</Responsive>
</Segment.Group>
</div>
);
}
}

159
smart-hut/src/views/Signup.js
View file

@ -1,40 +1,49 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Input, Message} from 'semantic-ui-react';
import {Redirect } from "react-router-dom";
import { call } from '../client_server';
import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Icon,
Input,
Message,
} from "semantic-ui-react";
import { Redirect } from "react-router-dom";
import { call } from "../client_server";
export default class Signup extends Component{
export default class Signup extends Component {
constructor(props) {
super(props);
this.state = {
completeName: "",
username: "",
email: "",
password : "",
error : { state : false,
message: ""},
success : false,
password: "",
error: { state: false, message: "" },
success: false,
};
}
handleRegistration = (e) => {
e.preventDefault();
const params = {
"email": this.state.email,
"name": this.state.completeName,
"password": this.state.password,
"username": this.state.username,
const params = {
email: this.state.email,
name: this.state.completeName,
password: this.state.password,
username: this.state.username,
};
call.register(params)
.then(res => {
if (res.status === 200 && res.data){
this.setState({success: true});
call
.register(params)
.then((res) => {
if (res.status === 200 && res.data) {
this.setState({ success: true });
} else {
this.setState({error: { state: true,
message: "Errore"}});
this.setState({ error: { state: true, message: "Errore" } });
}
}).catch(err => {
})
.catch((err) => {
//console.log(err);
});
};
@ -42,82 +51,92 @@ export default class Signup extends Component{
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
this.setState({ [nam]: val });
};
render() {
if (this.state.success) {
return <Redirect to="sent-email-reg" />
return <Redirect to="sent-email-reg" />;
}
return (
<React.Fragment>
<Button
circular
style={{margin: "2em"}}
href="/"
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Icon name='arrow alternate circle left'/>
Go Home </Button>
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
<Grid.Column style={{maxWidth: 450}}>
<Header as='h2' color='blue' textAlign='center'>
<Image src='img/logo.png'/> Sign-up to SmartHut
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Sign-up to SmartHut
</Header>
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
<Message
error
header='Singup Error'
content= {this.state.error.message}
/>
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
<Message
error
header="Singup Error"
content={this.state.error.message}
/>
<Form.Input
icon='address card outline'
iconPosition='left'
placeholder='First Name and Last Name'
icon="address card outline"
iconPosition="left"
placeholder="First Name and Last Name"
name="completeName"
type='text'
type="text"
onChange={this.onChangeHandler}
required
/>
<Form.Input
icon='user'
iconPosition='left'
placeholder='Username'
icon="user"
iconPosition="left"
placeholder="Username"
name="username"
type='text'
type="text"
onChange={this.onChangeHandler}
required
/>
/>
<Form.Input
control={Input}
type="name"
icon='envelope outline'
name="email"
iconPosition='left'
placeholder='E-mail'
onChange={this.onChangeHandler}
/*error={{
control={Input}
type="name"
icon="envelope outline"
name="email"
iconPosition="left"
placeholder="E-mail"
onChange={this.onChangeHandler}
/*error={{
content: 'Please enter a valid email address',
pointing: 'below',
}}*/
required
/>
required
/>
<Form.Input
icon='lock'
iconPosition='left'
placeholder='Password (at least 8 characters)'
name="password"
type='password'
onChange={this.onChangeHandler}
minLength={6}
required
/>
<Button color='blue' fluid size='large' onClick={this.handleRegistration}>
Register
icon="lock"
iconPosition="left"
placeholder="Password (at least 8 characters)"
name="password"
type="password"
onChange={this.onChangeHandler}
minLength={6}
required
/>
<Button
color="blue"
fluid
size="large"
onClick={this.handleRegistration}
>
Register
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
)
);
}
}

8
smart-hut/src/views/TestHeaderController.js
View file

@ -3,9 +3,7 @@ import React from "react";
import HeaderController from "./../components/HeaderController";
export default class TestHeaderController extends React.Component {
render () {
return (
<HeaderController/>
)
render() {
return <HeaderController />;
}
}
}

5
smart-hut/yarn.lock
View file

@ -8421,6 +8421,11 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
prettier@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.1.tgz#3f00ac71263be34684b2b2c8d7e7f63737592dac"
integrity sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==
pretty-bytes@^5.1.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"