diff --git a/hooks/pre-commit.sh b/hooks/pre-commit.sh new file mode 100755 index 0000000..2b233cc --- /dev/null +++ b/hooks/pre-commit.sh @@ -0,0 +1,12 @@ +#!/bin/sh + +FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed 's| |\\ |g') +[ -z "$FILES" ] && exit 0 + +# Prettify all selected files +echo "$FILES" | xargs ./smart-hut/node_modules/.bin/prettier --write + +# Add back the modified/prettified files to staging +echo "$FILES" | xargs git add + +exit 0 diff --git a/hooks/setup.sh b/hooks/setup.sh new file mode 100755 index 0000000..31662da --- /dev/null +++ b/hooks/setup.sh @@ -0,0 +1,14 @@ +#!/bin/sh + +git config --unset core.hooksPath + +if [[ -z $(which realpath) ]]; then + this_dir="$(pwd)/hooks" +else + this_dir="$(dirname $(realpath "$0"))" +fi + +hook_script="$this_dir/pre-commit.sh" +ln -svf "$hook_script" "$this_dir/../.git/hooks/pre-commit" + +echo "Commit hook installed" diff --git a/smart-hut/icons.js b/smart-hut/icons.txt similarity index 100% rename from smart-hut/icons.js rename to smart-hut/icons.txt diff --git a/smart-hut/package.json b/smart-hut/package.json index 310d82f..19f6bcd 100644 --- a/smart-hut/package.json +++ b/smart-hut/package.json @@ -43,5 +43,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "2.0.1" } } diff --git a/smart-hut/public/index.html b/smart-hut/public/index.html index 378b944..3c85f6b 100644 --- a/smart-hut/public/index.html +++ b/smart-hut/public/index.html @@ -1,21 +1,29 @@ - - - - - - - - - - - - - - React App - + React App + - - -
- - - + diff --git a/smart-hut/public/manifest.json b/smart-hut/public/manifest.json index 43d793f..ead4e20 100644 --- a/smart-hut/public/manifest.json +++ b/smart-hut/public/manifest.json @@ -1,8 +1,7 @@ { "short_name": "React App", "name": "Create React App Sample", - "icons": [ - ], + "icons": [], "start_url": ".", "display": "standalone", "theme_color": "#000000", diff --git a/smart-hut/public/style.css b/smart-hut/public/style.css index 297e85a..a212602 100644 --- a/smart-hut/public/style.css +++ b/smart-hut/public/style.css @@ -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));*/ - diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 74b97a4..7ea3911 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -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 ( - - { this.state.loggedIn && this.state.token ? : } + + {this.state.loggedIn && this.state.token ? ( + + ) : ( + + )} - - {this.state.loggedIn ? : } + + {this.state.loggedIn ? ( + + ) : ( + + )} - - + + - - + + - - + + - - + + - - - + + + @@ -136,4 +142,3 @@ class App extends Component { } export default App; - diff --git a/smart-hut/src/App.test.js b/smart-hut/src/App.test.js index dd1c60a..18413f8 100644 --- a/smart-hut/src/App.test.js +++ b/smart-hut/src/App.test.js @@ -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("/"); }); - diff --git a/smart-hut/src/client_server.js b/smart-hut/src/client_server.js index 4d56e34..f6f7a34 100644 --- a/smart-hut/src/client_server.js +++ b/smart-hut/src/client_server.js @@ -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); + }, }; diff --git a/smart-hut/src/components/Banner.js b/smart-hut/src/components/Banner.js index 7de0d7f..5ff1efd 100644 --- a/smart-hut/src/components/Banner.js +++ b/smart-hut/src/components/Banner.js @@ -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 ( - - {/* Increase the priority of the hero background image */} - {{post.imageText}} -
- - -
- - {post.title} - - - {post.description} - - - {post.linkText} - -
-
-
- - ); + return ( + + {/* Increase the priority of the hero background image */} + { + {post.imageText} + } +
+ + +
+ + {post.title} + + + {post.description} + + + {post.linkText} + +
+
+
+ + ); } Banner.propTypes = { - post: PropTypes.object, -}; \ No newline at end of file + post: PropTypes.object, +}; diff --git a/smart-hut/src/components/Footer.js b/smart-hut/src/components/Footer.js index 226ee05..acf9ebb 100644 --- a/smart-hut/src/components/Footer.js +++ b/smart-hut/src/components/Footer.js @@ -1,9 +1,9 @@ -import React from 'react'; +import React from "react"; export default function Footer() { - return( -
-

This is the footer

-
- ) + return ( +
+

This is the footer

+
+ ); } diff --git a/smart-hut/src/components/Header.js b/smart-hut/src/components/Header.js index db3ca02..b9bde06 100644 --- a/smart-hut/src/components/Header.js +++ b/smart-hut/src/components/Header.js @@ -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 ( - - - - {title} - - - {sections.map(section => ( - - {section.title} - - ))} - - + return ( + + + + {title} + + + {sections.map((section) => ( + + {section.title} + + ))} + + - - - - - ); + + + + ); } Header.propTypes = { - sections: PropTypes.array, - title: PropTypes.string, -}; \ No newline at end of file + sections: PropTypes.array, + title: PropTypes.string, +}; diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js index 2eea9e8..0f28214 100644 --- a/smart-hut/src/components/HeaderController.js +++ b/smart-hut/src/components/HeaderController.js @@ -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 = () => ( - - ) - - const IconHomeImage = () => ( - - ) - -const TitleImage = () => ( - - ) + +); +const IconHomeImage = () => ( + +); +const TitleImage = () => ; const GridExampleInverted = (props) => ( - - - - - - - - - + + + + + + + + + - - - - + + + + - - - - - Settings - - Document - Image - - - See profile... - - Logout - - - - - - ) + + + + + Settings + + Document + Image + + + See profile... + + Logout + + + + + +); export default class MyHeader extends React.Component { - render() { - return ( -
- -
- ); - } + render() { + return ( +
+ +
+ ); } +} - - - // 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 = () => ( // // // // - + // // // @@ -115,21 +103,14 @@ export default class MyHeader extends React.Component { // // ) - - - - - - - // class MenuExampleInvertedSegment extends Component { // state = { activeItem: 'home' } - + // handleItemClick = (e, { name }) => this.setState({ activeItem: name }) - + // render() { // const { activeItem } = this.state - + // return ( // // @@ -165,7 +146,7 @@ export default class MyHeader extends React.Component { // // // New - + // // Document // Image @@ -179,10 +160,10 @@ export default class MyHeader extends React.Component { // Share // // -// +// // // // // ) // } -// } \ No newline at end of file +// } diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js index 651e1a0..401cf72 100644 --- a/smart-hut/src/components/HomeNavbar.js +++ b/smart-hut/src/components/HomeNavbar.js @@ -6,77 +6,81 @@ import { Image, Menu, Sidebar, - Responsive + Responsive, } from "semantic-ui-react"; - const NavBarMobile = ({ - children, - leftItems, - onPusherClick, - onToggle, - rightItems, - visible - }) => ( - - - - - - - - - - - - {_.map(rightItems, item => )} - - - {children} - - - ); - - const NavBarDesktop = ({ leftItems, rightItems }) => ( - - - - - {_.map(leftItems, item => )} - - {_.map(rightItems, item => )} - - - ); - - const NavBarChildren = ({ children }) => ( - {children} - ); - - + children, + leftItems, + onPusherClick, + onToggle, + rightItems, + visible, +}) => ( + + + + + + + + + + + + {_.map(rightItems, (item) => ( + + ))} + + + {children} + + +); + +const NavBarDesktop = ({ leftItems, rightItems }) => ( + + + + + {_.map(leftItems, (item) => ( + + ))} + + {_.map(rightItems, (item) => ( + + ))} + + +); + +const NavBarChildren = ({ children }) => ( + {children} +); + 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 = () => ( - - - ); + +); export default HomeNavbarApp; diff --git a/smart-hut/src/components/SelectIcons.js b/smart-hut/src/components/SelectIcons.js index eaf671d..0f0dc92 100644 --- a/smart-hut/src/components/SelectIcons.js +++ b/smart-hut/src/components/SelectIcons.js @@ -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 ( - { - myicons.map((e, i) => { + {myicons.map((e, i) => { return ( - {e.map((e, i) => { - return( - - - {this.state.openSettingsModal ? - d.id === this.state.settingsDeviceId)[0]}/> : "" - } - { - ds ? - ds.map((e, i) => { - - return ( - - - - ) - }) - : - null - } - { - this.props.activeItem !== -1 ? - - - - : - null - } - -
- ) - } - -} - + render() { + const edit = { + mode: this.state.editMode, + openModal: this.openModal, + }; + const ds = this.state.devices ? this.state.devices : this.props.devices; + return ( +
+ + + {this.state.openSettingsModal ? ( + d.id === this.state.settingsDeviceId)[0]} + /> + ) : ( + "" + )} + {ds + ? ds.map((e, i) => { + return ( + + + + ); + }) + : null} + {this.props.activeItem !== -1 ? ( + + + + ) : null} + +
+ ); + } +} diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettings.js b/smart-hut/src/components/dashboard/devices/DeviceSettings.js index c8e2fce..5967b39 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceSettings.js +++ b/smart-hut/src/components/dashboard/devices/DeviceSettings.js @@ -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 = ( -
this.props.edit.openModal(this.props.deviceId)}> - - - -
+
this.props.edit.openModal(this.props.deviceId)}> + + + +
); - return ( - - {this.props.edit.mode ? view : ("")} - - ) - }; + return {this.props.edit.mode ? view : ""}; + } } diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js index 0ff8741..d54b346 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js +++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js @@ -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 () + return ( + + ); case "sensor": - return + return ( + + ); case "buttonDimmer": - return + return ( + + ); case "smartPlug": - return + return ( + + ); case "switch": - return + return ( + + ); case "dimmableLight": - return () + return ( + + ); default: - return "" + return ""; } -} +}; export default DeviceType; diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensor.js b/smart-hut/src/components/dashboard/devices/DigitalSensor.js index cbc026c..7268057 100644 --- a/smart-hut/src/components/dashboard/devices/DigitalSensor.js +++ b/smart-hut/src/components/dashboard/devices/DigitalSensor.js @@ -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 { this.props.onChangeData(id, newSettings)}/> - + onChangeData={(id, newSettings) => + this.props.onChangeData(id, newSettings) + } + /> +
{this.props.device.name}
- ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js index f0fdf12..f83c954 100644 --- a/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js +++ b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js @@ -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%)", }; diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js index 862095a..f49c9cb 100644 --- a/smart-hut/src/components/dashboard/devices/Dimmer.js +++ b/smart-hut/src/components/dashboard/devices/Dimmer.js @@ -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( -
- This is a Dimmer -
- ) - } + render() { + return
This is a Dimmer
; + } } -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( -
- This is a Dimmer -
- ) - } + render() { + return
This is a Dimmer
; + } } diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 952a6b9..bb2195d 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -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 = ( - - - + + + - + {Math.round(this.props.device.intensity)}% - + {this.props.device.name} ); const normalLightView = ( -
{ - } : this.onClickDevice}> - +
{} : this.onClickDevice}> +
{this.props.device.name}
); - + return ( 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} - ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index a6e672d..b68164f 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -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", }; diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index d3a6a03..6d5f4ff 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -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 = ( ); const step2 = (typeOfDevice) => { - const deviceName = (
- - - - -
); - const sensorForm = ( + const deviceName = ( +
+ + + + +
+ ); + const sensorForm = ( + - ); - const switchDimmerOptions = ( - - - ); +
+ ); + const switchDimmerOptions = ( + + + + + ); return (
{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 + : ""}
- ) + ); }; const steps = [step1, step2()]; return ( - - - } centered={true}> + + + + } + centered={true} + > Add a New Device - - {steps[this.state.step -1]} - + {steps[this.state.step - 1]} {this.state.step > 1 ? ( - - ) : ""} + ) : ( + "" + )} {this.state.step < steps.length ? ( - - ) : ""} + ) : ( + "" + )} {this.state.step === steps.length ? ( - - ) : ""} + ) : ( + "" + )} - ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index d2168b1..22c62e5 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -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 ( this.props.onChangeData(id, newSettings)}/> + onChangeData={(id, newSettings) => + this.props.onChangeData(id, newSettings) + } + /> - - - - - {Math.round(this.state.value)}{this.units} + + + + + {Math.round(this.state.value)} + {this.units} - + {this.setName()} - ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js index ae32c75..cb49676 100644 --- a/smart-hut/src/components/dashboard/devices/SensorStyle.js +++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js @@ -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)", +}; diff --git a/smart-hut/src/components/dashboard/devices/SettingsModal.js b/smart-hut/src/components/dashboard/devices/SettingsModal.js index 3166cc2..1c460d2 100644 --- a/smart-hut/src/components/dashboard/devices/SettingsModal.js +++ b/smart-hut/src/components/dashboard/devices/SettingsModal.js @@ -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) => ( - Remove} closeIcon> -
+ Remove} closeIcon> +
- - -) +); 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 (
- + - + {props.type === "smart-plug" ? ( - + - ) : ""} + ) : ( + "" + )} props.removeDevice(values)} /> - +
- ) -} + ); +}; 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 = () => ( - + Settings of {this.props.device.name} - + ); - return ( - - ) + return ; } - } diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index 658e6e8..1f1f850 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -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 ( - {} : this.onClickDevice}> - this.props.onChangeData(id, newSettings)}/> - -

{this.state.energyConsumed} KWh

-
{this.props.device.name}
-
- ) - } + componentDidMount() { + this.setState({ + turnedOn: this.props.device.on, + energyConsumed: this.props.device.totalConsumption, + }); + } + + render() { + return ( + {} : this.onClickDevice}> + + this.props.onChangeData(id, newSettings) + } + /> + +

{this.state.energyConsumed} KWh

+
{this.props.device.name}
+
+ ); + } } diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js index 26b4b9e..5b99c8b 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js @@ -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%)", }; diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js index ea41295..5af695d 100644 --- a/smart-hut/src/components/dashboard/devices/Switch.js +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -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 ( {} : this.onClickDevice}> this.props.onChangeData(id, newSettings)}/> - + onChangeData={(id, newSettings) => + this.props.onChangeData(id, newSettings) + } + /> +
{this.props.device.name}
- ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js index 98e75c2..0bf76b1 100644 --- a/smart-hut/src/components/dashboard/devices/SwitchStyle.js +++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js @@ -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%)", }; diff --git a/smart-hut/src/components/dashboard/devices/TypesOfDevices.js b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js index ebe8ba2..6f3e2ba 100644 --- a/smart-hut/src/components/dashboard/devices/TypesOfDevices.js +++ b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js @@ -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", +]; diff --git a/smart-hut/src/components/dashboard/devices/constants.js b/smart-hut/src/components/dashboard/devices/constants.js index 8ae9813..9def90a 100644 --- a/smart-hut/src/components/dashboard/devices/constants.js +++ b/smart-hut/src/components/dashboard/devices/constants.js @@ -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); } diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js index 7ac67c2..2c7adbf 100644 --- a/smart-hut/src/components/dashboard/devices/styleComponents.js +++ b/smart-hut/src/components/dashboard/devices/styleComponents.js @@ -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; } `; diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js index 8ced527..1e83db8 100644 --- a/smart-hut/src/components/modalform.js +++ b/smart-hut/src/components/modalform.js @@ -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: this.props.type === 'new' ? '' : this.props.idRoom.name, - img: this.props.type === 'new' ? '' : this.props.idRoom.images, - openModal: false - } + name: this.props.type === "new" ? "" : this.props.idRoom.name, + img: this.props.type === "new" ? "" : this.props.idRoom.images, + openModal: false, + }; this.addRoomModal = this.addRoomModal.bind(this); this.updateIcon = this.updateIcon.bind(this); @@ -20,129 +27,168 @@ 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}); - console.log(this.state); - } + 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 ( -
- - {this.props.type === "new" ? - - : - - } - - - { - this.props.type === "new" ? - - : - - } - + ) : ( + + )} + + + {this.props.type === "new" ? ( + + ) : ( + + )} + - -
{this.props.type === "new" ? "Add new room" : "Modify room" }
- -
-

Insert the name of the room:

- - - -

Insert an image of the room:

- - - -
+ +
+ {this.props.type === "new" ? "Add new room" : "Modify room"} +
+ +
+

Insert the name of the room:

+ + + +

Insert an image of the room:

+ + + +
-
-

Select an icon:

- -
+
+

Select an icon:

+ +
- {this.props.type === "modify" ? - : null } + {this.props.type === "modify" ? ( + + ) : null} +
+ + -
- - + - - - - -
-
- ) + + +
+
+ ); } } diff --git a/smart-hut/src/index.js b/smart-hut/src/index.js index 840e490..12af31f 100644 --- a/smart-hut/src/index.js +++ b/smart-hut/src/index.js @@ -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 = ( - - ); +const index = ; -ReactDOM.render( - index - , document.getElementById('root')); +ReactDOM.render(index, document.getElementById("root")); serviceWorker.unregister(); diff --git a/smart-hut/src/serviceWorker.js b/smart-hut/src/serviceWorker.js index c4838eb..c7cd666 100644 --- a/smart-hut/src/serviceWorker.js +++ b/smart-hut/src/serviceWorker.js @@ -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); }); } diff --git a/smart-hut/src/setupTests.js b/smart-hut/src/setupTests.js index 74b1a27..5fdf001 100644 --- a/smart-hut/src/setupTests.js +++ b/smart-hut/src/setupTests.js @@ -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"; diff --git a/smart-hut/src/views/ConfirmForgotPassword.js b/smart-hut/src/views/ConfirmForgotPassword.js index 7de5e16..99b194b 100644 --- a/smart-hut/src/views/ConfirmForgotPassword.js +++ b/smart-hut/src/views/ConfirmForgotPassword.js @@ -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 ( - - ) - } - + state = { visible: true }; + + handleDismiss = () => { + this.setState({ visible: false }); + + setTimeout(() => { + this.setState({ visible: true }); + }, 2000); + }; + + render() { + if (this.state.visible) { return ( -

-
- The message will return in 2s -
-
-

- ) + + ); } + + return ( +

+
+ The message will return in 2s +
+
+

+ ); } +} - - const MessageReg = () => ( - +const MessageReg = () => ( + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - - - + + + + - - - - - - - - - - - - - - ) + + + + + + + +); export default class ConfirmForgotPasswrod extends React.Component { - render () { - return ( - - ) + render() { + return ; } -} \ No newline at end of file +} diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js index b1c5652..13af1b5 100644 --- a/smart-hut/src/views/ConfirmRegistration.js +++ b/smart-hut/src/views/ConfirmRegistration.js @@ -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 ( - - ) - } - + state = { visible: true }; + + handleDismiss = () => { + this.setState({ visible: false }); + + setTimeout(() => { + this.setState({ visible: true }); + }, 2000); + }; + + render() { + if (this.state.visible) { return ( -

-
- The message will return in 2s -
-
-

- ) + + ); } + + return ( +

+
+ The message will return in 2s +
+
+

+ ); } +} - - const MessageReg = () => ( - +const MessageReg = () => ( + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - - - + + + + - - - - - - - - - - - - - - ) + + + + + + + +); export default class ConfirmRegistration extends React.Component { - render () { - return ( - - ) + render() { + return ; } -} \ No newline at end of file +} diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 686ccab..4875a8c 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -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( -
- - - + render() { + return ( +
+ + + - - - - + + + + - - - - + + + + - + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
- ) + ); } } diff --git a/smart-hut/src/views/DashboardTest.js b/smart-hut/src/views/DashboardTest.js index cf35c09..a56453f 100644 --- a/smart-hut/src/views/DashboardTest.js +++ b/smart-hut/src/views/DashboardTest.js @@ -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 ( - - ) - } -} \ No newline at end of file + render() { + return ( + + ); + } +} diff --git a/smart-hut/src/views/Forgot-pass-reset.js b/smart-hut/src/views/Forgot-pass-reset.js index 0989b91..01d4560 100644 --- a/smart-hut/src/views/Forgot-pass-reset.js +++ b/smart-hut/src/views/Forgot-pass-reset.js @@ -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 ; } - }; + // 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 - } - // else set a message that an email has been sent - }).catch(err => { - console.log(err); - }); - }; - - render() { - return ( - - + + +
+ Reset Password +
+
- - Go Home - - -
- Reset Password -
- - - - - - -
-
-
- ) - } -} \ No newline at end of file + + + + + + +
+ + ); + } +} diff --git a/smart-hut/src/views/Forgot-password.js b/smart-hut/src/views/Forgot-password.js index 299405b..2ed14e6 100644 --- a/smart-hut/src/views/Forgot-password.js +++ b/smart-hut/src/views/Forgot-password.js @@ -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 ; } - - 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 - } - return ( - - + + +
+ Reset Password +
+
- - Go Home - - -
- Reset Password -
- - - - - -
-
-
- ) - } -} \ No newline at end of file + + + + + + + + ); + } +} diff --git a/smart-hut/src/views/ForgotPassword.js b/smart-hut/src/views/ForgotPassword.js index 7b3a2bd..b6ade3f 100644 --- a/smart-hut/src/views/ForgotPassword.js +++ b/smart-hut/src/views/ForgotPassword.js @@ -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 ( - - ) - } - + state = { visible: true }; + + handleDismiss = () => { + this.setState({ visible: false }); + + setTimeout(() => { + this.setState({ visible: true }); + }, 2000); + }; + + render() { + if (this.state.visible) { return ( -

-
- The message will return in 2s -
-
-

- ) + + ); } + + return ( +

+
+ The message will return in 2s +
+
+

+ ); } +} - - const MessageReg = () => ( - +const MessageReg = () => ( + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - - - + + + + - - - - - - - - - - - - - - ) + + + + + + + +); export default class ForgotPasswrod extends React.Component { - render () { - return ( - - ) + render() { + return ; } -} \ No newline at end of file +} diff --git a/smart-hut/src/views/FourOhFour.js b/smart-hut/src/views/FourOhFour.js index bc9ea5e..3934d03 100644 --- a/smart-hut/src/views/FourOhFour.js +++ b/smart-hut/src/views/FourOhFour.js @@ -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 ( - - -
- - - - - - - - - - - - -

404 Page Not Found

-
-
- - - - - -

- 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... -

- -
-
-
-
-
-
-
-
-
- - -
- - + render() { + return ( + + +
+ + - - - - - - -

404 Page Not Found

-
-
- - - - - - - + + + + + + +

404 Page Not Found

+
+
+ + + + +

- 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...

- -
-
-
-
-
-
-
-
-
-
- ) - } + +
+
+ + + + +
+
+ + +
+ + + + + + + + + + + + +

404 Page Not Found

+
+
+ + + + + + + +

+ 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... +

+ +
+
+
+
+
+
+
+
+
+
+ ); + } } diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index 2d03a91..f99e381 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -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 }) => ( - -
-
- - -) + +
+
+ + +); 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 ( - - - - - - - + return ( + + + + + + + - {children} - - ) - } + {children} + + ); + } } 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 ( - - - - Home - - Log in - Sign Up - + return ( + + + + Home + + Log in + Sign Up + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - {children} - - - ) - } + {children} + + + ); + } } MobileContainer.propTypes = { - children: PropTypes.node, -} + children: PropTypes.node, +}; const ResponsiveContainer = ({ children }) => ( -
- {children} - {children} -
-) +
+ {children} + {children} +
+); ResponsiveContainer.propTypes = { - children: PropTypes.node, -} + children: PropTypes.node, +}; const Home = () => ( - - - - - -
- We help you keep your home connected -
-

- In a few steps your home will be fully connected with SmartHut. -

-
- Choose between a wide range of devices -
-

- SmartHut is a leading worldwide company in technology innovation. - Explore our website to find the best devices for each room of your home! -

-
- - - -
- - - - - -
-
+ + + + + +
+ We help you keep your home connected +
+

+ In a few steps your home will be fully connected with SmartHut. +

+
+ Choose between a wide range of devices +
+

+ SmartHut is a leading worldwide company in technology innovation. + Explore our website to find the best devices for each room of your + home! +

+
+ + + +
+ + + + + +
+
- - -
- Have you ever dreamt about a smart home? -
-

- 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. -

- -
-
+ + +
+ Have you ever dreamt about a smart home? +
+

+ 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. +

+ +
+
- - - - - -
- - Sitemap - Contact Us - Religious Ceremonies - Gazebo Plans - - - -
- - Banana Pre-Order - DNA FAQ - How To Access - Favorite X-Men - - - -
- SmartHut -
-

- Keep your Home connected. -

-
- - - - - -) + + + + + +
+ + Sitemap + Contact Us + Religious Ceremonies + Gazebo Plans + + + +
+ + Banana Pre-Order + DNA FAQ + How To Access + Favorite X-Men + + + +
+ SmartHut +
+

Keep your Home connected.

+
+ + + + + +); export default Home; diff --git a/smart-hut/src/views/Instruction.js b/smart-hut/src/views/Instruction.js index e1ad53f..5dd4923 100644 --- a/smart-hut/src/views/Instruction.js +++ b/smart-hut/src/views/Instruction.js @@ -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 = () => (
- -
Instructions Page
- - - + +
Instructions Page
+ + +
- + First Step

@@ -36,74 +31,71 @@ const ContainerExampleAlignment = () => (

- - Second Step - -

- 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. -

- -
- - Third Step - -

- 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. -

- -
- -Last Step - -

- 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. -

- -
+ + Second Step + +

+ 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. +

+ +
+ + Third Step + +

+ 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. +

+ +
+ + Last Step + +

+ 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. +

+ +
-) +); - -export default class Insturction extends Component{ - render() { - return( - - ) - } -} \ No newline at end of file +export default class Insturction extends Component { + render() { + return ; + } +} diff --git a/smart-hut/src/views/Login.js b/smart-hut/src/views/Login.js index 39a976c..bd024eb 100644 --- a/smart-hut/src/views/Login.js +++ b/smart-hut/src/views/Login.js @@ -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 ( - - - -
- Log-in to SmartHut + + +
+ Log-in to SmartHut
-
- - - - + + + + + - -

Forgot Password?

-

New to us? Sign Up

+

+ Forgot Password? +

+

+ New to us? Sign Up +

- ) + ); } } diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js index 24d0c65..f094e9a 100644 --- a/smart-hut/src/views/Navbar.js +++ b/smart-hut/src/views/Navbar.js @@ -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 ( -
- - - - - - - +
+ + + + + + + - - - - - - - HOME - - - + + + + + + HOME + + + - - - {this.props.rooms ? - this.props.rooms.map((e, i) => { - return ( - - - - - - - - {e.name} - - - {this.state.editMode ? - - : null - } - - - - - ) - }) : null - } + {this.props.rooms + ? this.props.rooms.map((e, i) => { + return ( + + + + + + + {e.name} + + {this.state.editMode ? ( + + ) : null} + + + + + ); + }) + : null} + + + + + + + + + + - - - - - + + + + + + + + + + + Home + + + - - - - - - - - - - - - - - - - - - - Home - - - - - - {this.props.rooms ? - this.props.rooms.map((e, i) => { - return ( - - - - - - - - {e.name} - - - - - ) - }) : null - } - - - - - - - + {this.props.rooms + ? this.props.rooms.map((e, i) => { + return ( + + + + + + + {e.name} + + + + ); + }) + : null} + + + + + + + + {this.state.activeItem !== -1 ? ( + + - { - this.state.activeItem !== -1 ? - - - - : null - } - - - - - -
+ ) : null} +
+
+
+
+
); } } diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js index c59fc79..ddc761f 100644 --- a/smart-hut/src/views/Signup.js +++ b/smart-hut/src/views/Signup.js @@ -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 + return ; } return ( - + - - Go Home - - -
- Sign-up to SmartHut + +
+ Sign-up to SmartHut
-
- + + + /> + required + /> -
- ) + ); } } diff --git a/smart-hut/src/views/TestHeaderController.js b/smart-hut/src/views/TestHeaderController.js index b0afedb..3c8f681 100644 --- a/smart-hut/src/views/TestHeaderController.js +++ b/smart-hut/src/views/TestHeaderController.js @@ -3,9 +3,7 @@ import React from "react"; import HeaderController from "./../components/HeaderController"; export default class TestHeaderController extends React.Component { - render () { - return ( - - ) + render() { + return ; } -} \ No newline at end of file +} diff --git a/smart-hut/yarn.lock b/smart-hut/yarn.lock index c088873..209c546 100644 --- a/smart-hut/yarn.lock +++ b/smart-hut/yarn.lock @@ -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"