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

Done 4oh4 page

Browse source
This commit is contained in:
Nicola Brunner 2020-03-21 12:33:01 +01:00 committed by Claudio Maggioni
parent f69ad0c5f5
commit 0de3b0257f
2 changed files with 174 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Menu, Grid, Icon, Responsive, Segment } from "semantic-ui-react"; import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment, Dropdown } from "semantic-ui-react";
import {editButtonStyle} from "../components/dashboard/devices/styleComponents"; import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform"; import ModalWindow from "../components/modalform";
@ -8,16 +8,15 @@ class Navbar extends Component {
super(props); super(props);
this.state = { this.state = {
activeItem: 'Home', activeItem: 'Home',
activeItemName: 'Home',
edited: "", edited: "",
editMode : false editMode : false
} }
} }
editModeController = (e) => { editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
this.setState((prevState) => ({ editMode: !prevState.editMode }));
};
handleClick = (e, {id}) => { handleClick = (e, {id, name}) => {
console.log(id); console.log(id);
let obj = undefined; let obj = undefined;
this.props.rooms.forEach((e) => { this.props.rooms.forEach((e) => {
@ -25,8 +24,10 @@ class Navbar extends Component {
obj = e; obj = e;
} }
}); });
this.setState({ activeItem: id, this.setState({
activeRoom: obj activeItem: id,
activeRoom: obj,
activeItemName: name
}); });
this.props.handleItemClick(id) this.props.handleItemClick(id)
} }
@ -36,7 +37,7 @@ class Navbar extends Component {
return ( return (
<div> <div>
<Segment.Group> <Segment.Group>
<Responsive as={Segment}> <Responsive as={Segment} minWidth={768}>
<Grid> <Grid>
<Grid.Row color='black'> <Grid.Row color='black'>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button> <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
@ -82,7 +83,7 @@ class Navbar extends Component {
{e.name} {e.name}
</Grid.Column> </Grid.Column>
<Grid.Column floated="right"> <Grid.Column floated="right">
{this.state.edit ? {this.state.editMode ?
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/> <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null : null
} }
@ -110,9 +111,76 @@ class Navbar extends Component {
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Responsive> </Responsive>
<Responsive as={Segment} maxWidth={768}>
<Responsive as={Segment} maxWidth={768}>
<Menu inverted>
<Dropdown item fluid text={this.state.activeItemName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
name='Home'
active={this.state.activeItem === 'Home'}
onClick={this.handleClick}>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
Home
</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column width={1}>
<Icon name={e.icon} size="small"/>
</Grid.Column>
<Grid.Column>
{e.name}
</Grid.Column>
</Grid.Row>
</Grid>
</ Dropdown.Item>
)
}) : null
}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid>
<Grid.Row>
<Grid.Column width={8}>
<Button icon fluid labelPosition='left'>
<Icon name='plus' size='small'/>
ADD ROOM
</Button>
</Grid.Column>
<Grid.Column width={8}>
<Button icon fluid labelPosition='left'>
<Icon name='pencil' size='small'/>
EDIT ROOM
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive> </Responsive>
</Segment.Group> </Segment.Group>
</div> </div>
); );