From 953b1a609a8580fecbe0fb42f0e7b65b5b7ebfcc Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Fri, 13 Mar 2020 15:21:33 +0100
Subject: [PATCH] navbar is starting to work

---
 smart-hut/icons.js                      |  65 ++++++++++++++
 smart-hut/src/components/SelectIcons.js |  33 +++++++
 smart-hut/src/components/modalform.js   |  67 ++++++++++++++
 smart-hut/src/views/Navbar.js           | 115 ++++++++++++++++++++++++
 4 files changed, 280 insertions(+)
 create mode 100644 smart-hut/icons.js
 create mode 100644 smart-hut/src/components/SelectIcons.js
 create mode 100644 smart-hut/src/components/modalform.js
 create mode 100644 smart-hut/src/views/Navbar.js

diff --git a/smart-hut/icons.js b/smart-hut/icons.js
new file mode 100644
index 0000000..3bb4258
--- /dev/null
+++ b/smart-hut/icons.js
@@ -0,0 +1,65 @@
+1. Home
+'home'
+
+2. Bar
+'coffee', 'beer', 'glass martini'
+
+3. Filmroom
+'film', 'video'
+
+4. Musicroom
+'music', 'headphones'
+
+5. Office
+'fax', 'phone', 'laptop'
+
+6. Bathroom
+'bath', 'shower'
+
+7. Bedroom
+'bed', 'child'
+
+8. Garage
+'warehouse', 'car', 'bicycle', 'motorcycle'
+
+9. Cellar
+'archive', 'boxes', 'cubes'
+
+10. Game Room
+'chess', 'gamepad', 'futbol', 'table tennis'
+
+11. IT Rack
+'server'
+
+12. Livingroom
+'tv'
+
+13. Love Room
+'heart'
+
+14. Hobby Room
+'camera', 'trophy', 'wrench'
+
+15. Gallery
+'image'
+
+16. Library
+'book', 'university'
+
+17. Infirmary
+'medkit'
+
+18. Petroom
+'paw'
+
+19. Garden
+'tree'
+
+20. Kitchen
+'utensils'
+
+21. Toilette
+'female', 'male'
+
+22. Swimmingpool
+'life ring outline'
diff --git a/smart-hut/src/components/SelectIcons.js b/smart-hut/src/components/SelectIcons.js
new file mode 100644
index 0000000..e7d57a1
--- /dev/null
+++ b/smart-hut/src/components/SelectIcons.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
+
+export default class SelectIcons extends Component {
+  render(){
+    const myicons = [['home', 'coffee', 'beer', 'glass martini', 'film', 'video'],
+                    ['music', 'headphones', 'fax', 'phone', 'laptop','bath'],
+                    ['shower', 'bed', 'child', 'warehouse', 'car', 'bicycle'],
+                    ['motorcycle', 'archive', 'boxes', 'cubes', 'chess', 'gamepad'],
+                    ['futbol', 'table tennis', 'server', 'tv', 'heart', 'camera'],
+                    ['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
+                    ['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
+
+    var colums = 0;
+    return (
+      <Grid centered>
+      {
+        myicons.map((e, i) => {
+          return (
+            <Grid.Row>
+            {e.map((e) => {
+              return(<Grid.Column>
+                <Button icon={e} size="small"/>
+              </Grid.Column>)
+            })}
+            </Grid.Row>
+          )
+        })
+      }
+      </ Grid>
+    )
+  }
+}
diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js
new file mode 100644
index 0000000..6251c0d
--- /dev/null
+++ b/smart-hut/src/components/modalform.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
+import SelectIcons from "./SelectIcons";
+
+export default class ModalWindow extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedIcon: 'home',
+      name: "",
+      img: ""
+    }
+  }
+
+    render(){
+
+    const spaceDiv = {
+      background: '#f4f4f4',
+      padding: '10px 10px',
+      margin: '10px 0px'
+    }
+
+
+      return (
+        <div>
+        <Modal trigger={<Button icon labelPosition='left' inverted>
+          <Icon name='plus' size='middle'/>
+          ADD ROOM
+        </Button>} closeIcon>
+        <Header>{this.props.type == "new" ? "Add new room" : "Modify room" }</Header>
+        <Modal.Content>
+          <Form>
+          <p>Insert the name of the room:</p>
+            <Form.Field>
+              <Input label='Room name' placeholder='Room Name' type='text'/>
+            </Form.Field>
+            <p>Insert an image of the room:</p>
+            <Form.Field>
+              <Input label='Room image' type='file' />
+            </Form.Field>
+          </Form>
+
+          <div style={spaceDiv}>
+          <p>Select an icon:</p>
+          <SelectIcons/>
+          </div>
+
+          <Button icon labelPosition='left' inverted color='red'>
+            <Icon name='trash alternate' />
+            Delete room
+          </Button>
+
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color='red' onClick="">
+            <Icon name='remove' /> No
+          </Button>
+          <Button color='green' onClick="">
+            <Icon name='checkmark' /> Yes
+          </Button>
+        </Modal.Actions>
+          </Modal>
+        </div>
+    )
+  }
+}
diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
new file mode 100644
index 0000000..30a2f20
--- /dev/null
+++ b/smart-hut/src/views/Navbar.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
+import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
+import ModalWindow from "../components/modalform";
+
+class Navbar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: 'Home',
+      edited: ""
+    }
+  }
+
+  showForm = (event) => {
+    console.log(event.target.name);
+    if (event === "new"){
+      console.log("funziona");
+      return (<ModalWindow type="new"/>)
+    }
+  }
+
+  handleClick = (e, { i }) => {
+    this.setState({ activeItem: e.name,
+                    edited: i
+     });
+    this.props.handleItemClick(e)
+  }
+
+  render(){
+    const { activeItem } = this.state
+    return (
+      <div>
+      <Segment.Group>
+       <Responsive as={Segment}>
+          <Grid>
+            <Grid.Row>
+                <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
+            </Grid.Row>
+            <Grid.Row>
+                <Menu inverted fluid vertical>
+                  <Menu.Item
+                    name='Home'
+                    active={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>
+
+                  </ Menu.Item>
+
+                 {this.props.rooms ?
+                 this.props.rooms.map((e, i) => {
+                   return (
+                     <Menu.Item
+                       key={i}
+                       name={e.name}
+                       active={activeItem === e.name}
+                       onClick={this.handleClick}
+                      >
+                      <Grid>
+                        <Grid.Row>
+                          <Grid.Column width={1}>
+                            <Icon name="food" size="small"/>
+                          </Grid.Column>
+                          <Grid.Column width={12}>
+                            {e.name}
+                          </Grid.Column>
+                          <Grid.Column width={1}>
+                            <Icon name="pencil" size="small"/>
+                          </Grid.Column>
+                        </Grid.Row>
+                      </Grid>
+
+                      </ Menu.Item>
+
+                     )
+                   }) : null
+                  }
+
+                  <Menu.Item
+                    name='newM'
+                    active={activeItem === 'Plus'}
+                  >
+                  <Grid>
+                    <Grid.Row centered onClick={this.showForm} name='new'>
+
+                      <ModalWindow type="new"/>
+
+                    </Grid.Row>
+                  </Grid>
+
+                  </ Menu.Item>
+                 </Menu>
+                </Grid.Row>
+              </Grid>
+            </Responsive>
+            <Responsive as={Segment} maxWidth={768}>
+            //dropdown menu
+            </Responsive>
+          </Segment.Group>
+       </div>
+    );
+  }
+}
+
+export default Navbar;