Merge branch '404' into 'dev'

Resolve "404"

Closes #42

See merge request sa4-2020/the-sanmarinoes/frontend!45
This commit is contained in:
Claudio Maggioni 2020-03-21 14:19:19 +01:00
commit 37506df76b
2 changed files with 174 additions and 31 deletions

View file

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

View file

@ -1,5 +1,5 @@
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 ModalWindow from "../components/modalform";
@ -8,16 +8,15 @@ class Navbar extends Component {
super(props);
this.state = {
activeItem: 'Home',
activeItemName: 'Home',
edited: "",
editMode : false
}
}
editModeController = (e) => {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
};
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
handleClick = (e, {id}) => {
handleClick = (e, {id, name}) => {
console.log(id);
let obj = undefined;
this.props.rooms.forEach((e) => {
@ -25,8 +24,10 @@ class Navbar extends Component {
obj = e;
}
});
this.setState({ activeItem: id,
activeRoom: obj
this.setState({
activeItem: id,
activeRoom: obj,
activeItemName: name
});
this.props.handleItemClick(id)
}
@ -36,7 +37,7 @@ class Navbar extends Component {
return (
<div>
<Segment.Group>
<Responsive as={Segment}>
<Responsive as={Segment} minWidth={768}>
<Grid>
<Grid.Row color='black'>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
@ -82,7 +83,7 @@ class Navbar extends Component {
{e.name}
</Grid.Column>
<Grid.Column floated="right">
{this.state.edit ?
{this.state.editMode ?
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null
}
@ -110,9 +111,76 @@ class Navbar extends Component {
</Grid.Row>
</Grid>
</Responsive>
<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>
</Segment.Group>
</div>
);