diff --git a/smart-hut/public/avatar3.png b/smart-hut/public/avatar3.png new file mode 100644 index 0000000..ec160b5 Binary files /dev/null and b/smart-hut/public/avatar3.png differ diff --git a/smart-hut/public/title2.png b/smart-hut/public/title2.png new file mode 100644 index 0000000..b98cab7 Binary files /dev/null and b/smart-hut/public/title2.png differ diff --git a/smart-hut/public/title5.png b/smart-hut/public/title5.png new file mode 100644 index 0000000..c72b33b Binary files /dev/null and b/smart-hut/public/title5.png differ diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js new file mode 100644 index 0000000..355d08a --- /dev/null +++ b/smart-hut/src/components/HeaderController.js @@ -0,0 +1,191 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react' +import { Segment, Image } from 'semantic-ui-react' + +const ImageExampleWrapped = () => ( + + ) + + const ImageExampleWrapped2 = () => ( + + ) + +const ImageExampleWrapped3 = () => ( + + ) + +const HeaderExampleIconProp = () => ( +
+) + + + +const GridExampleInverted = () => ( + + + + + + + + + + + + + + + + + + + + Settings + + Document + Image + + + See profile... + + Logout + + + + + + ) + +export default class MyHeader extends React.Component { + 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 MenuExampleButtons = () => ( +// +// +// +// + +// +// +// +// +// +// +// +// +// +// +// ) + + + + + + + + +// class MenuExampleInvertedSegment extends Component { +// state = { activeItem: 'home' } + +// handleItemClick = (e, { name }) => this.setState({ activeItem: name }) + +// render() { +// const { activeItem } = this.state + +// return ( +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// New + +// +// Document +// Image +// +// +// Open +// Save... +// Edit Permissions +// +// Export +// Share +// +// +// +// +// +// +// ) +// } +// } \ No newline at end of file diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js new file mode 100644 index 0000000..5bcafb5 --- /dev/null +++ b/smart-hut/src/components/HomeNavbar.js @@ -0,0 +1,130 @@ +import _ from "lodash"; +import React, { Component } from "react"; +import { render } from "react-dom"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + 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} + ); + + +class HomeNavabarApp extends Component { + constructor(props) { + super(props); + this.state = { + logged : true, + email: "", + password : "" + }; + } + state = { + visible: false + }; + + handlePusher = () => { + const { visible } = this.state; + + if (visible) this.setState({ visible: false }); + }; + + handleToggle = () => this.setState({ visible: !this.state.visible }); + + render() { + const { children, leftItems, rightItems } = this.props; + const { visible } = this.state; + + return ( +
+ + + {children} + + + + + {children} + +
+ ); + } +} + +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/views/ConfirmForgotPassword.js b/smart-hut/src/views/ConfirmForgotPassword.js new file mode 100644 index 0000000..e364f0d --- /dev/null +++ b/smart-hut/src/views/ConfirmForgotPassword.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import HomeNavbar from "./../components/HomeNavbar"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive, + Header, + 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 ( + + ) + } + + return ( +

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

+ ) + } + } + + + const MessageReg = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +export default class ConfirmForgotPasswrod extends React.Component { + render () { + return ( + + ) + } +} \ No newline at end of file diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js new file mode 100644 index 0000000..9bec496 --- /dev/null +++ b/smart-hut/src/views/ConfirmRegistration.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import HomeNavbar from "./../components/HomeNavbar"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive, + Header, + 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 ( + + ) + } + + return ( +

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

+ ) + } + } + + + const MessageReg = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +export default class ConfirmRegistration extends React.Component { + 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 8caa9b7..c27746f 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -1,11 +1,13 @@ import React, {Component} from 'react'; import DevicePanel from "../components/dashboard/DevicePanel"; +import NavbarTest from './NavbarTest' +import MyHeader from '../components/HeaderController' import { call } from '../client_server'; import {Button} from 'semantic-ui-react'; import { Menu } from 'semantic-ui-react' import { Grid, Image, Icon } from 'semantic-ui-react' -import NavbarTest from './NavbarTest' + export default class Dashboard extends Component{ constructor(props) { @@ -19,7 +21,7 @@ export default class Dashboard extends Component{ this.handleItemClick = this.handleItemClick.bind(this); } - UNSAFE_componentWillMount() { + componentDidMount() { call.getAllRooms(this.props.token) .then(res => { res.data.forEach((e) => { @@ -60,19 +62,17 @@ export default class Dashboard extends Component{ render () { return( -
- - - +
+ + + - + - +
diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index 3746ed0..4937938 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import HomeNavbar from './../components/HomeNavbar'; import { Button, Container, + Divider, Grid, Header, Icon, @@ -88,30 +90,7 @@ class DesktopContainer extends Component { }} vertical > - - - - Home - - - - - - - - +