From 0de3b0257f734917e5321f03a48183a57b9a5fd8 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Sat, 21 Mar 2020 12:33:01 +0100
Subject: [PATCH] Done 4oh4 page

---
 smart-hut/src/views/FourOhFour.js | 117 ++++++++++++++++++++++++------
 smart-hut/src/views/Navbar.js     |  88 +++++++++++++++++++---
 2 files changed, 174 insertions(+), 31 deletions(-)

diff --git a/smart-hut/src/views/FourOhFour.js b/smart-hut/src/views/FourOhFour.js
index 2aa89f5..3913981 100644
--- a/smart-hut/src/views/FourOhFour.js
+++ b/smart-hut/src/views/FourOhFour.js
@@ -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>
         )
     }
-}
\ No newline at end of file
+}
diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index de3f183..8e4363d 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -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>
     );