Done 4oh4 page
This commit is contained in:
Nicola Brunner
parent
f69ad0c5f5
commit
0de3b0257f
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user