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 1/2] 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;

From 1a55fc7804239c9e883278bef5ca0794a0adfed3 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Sat, 14 Mar 2020 15:25:55 +0100
Subject: [PATCH 2/2] Add room feature completed

---
 smart-hut/src/components/SelectIcons.js | 26 +++++++--
 smart-hut/src/components/modalform.js   | 72 ++++++++++++++++++++-----
 smart-hut/src/views/Navbar.js           | 11 ++--
 3 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/smart-hut/src/components/SelectIcons.js b/smart-hut/src/components/SelectIcons.js
index e7d57a1..e9d23f6 100644
--- a/smart-hut/src/components/SelectIcons.js
+++ b/smart-hut/src/components/SelectIcons.js
@@ -2,6 +2,24 @@ 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 {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentIcon: this.props.currentIcon
+    }
+  }
+
+  selectIcon = (e) => {
+    let el = e.target.name;
+    if (e.target.tagName === "I"){
+      console.log(e.target.parentNode);
+      el = e.target.parentNode.name;
+    }
+    this.props.updateIcon(el);
+    this.setState({currentIcon : el})
+  }
+
   render(){
     const myicons = [['home', 'coffee', 'beer', 'glass martini', 'film', 'video'],
                     ['music', 'headphones', 'fax', 'phone', 'laptop','bath'],
@@ -17,10 +35,10 @@ export default class SelectIcons extends Component {
       {
         myicons.map((e, i) => {
           return (
-            <Grid.Row>
-            {e.map((e) => {
-              return(<Grid.Column>
-                <Button icon={e} size="small"/>
+            <Grid.Row key={i}>
+            {e.map((e, i) => {
+              return(<Grid.Column key={i}>
+                <Button name={e} color={e === this.state.currentIcon ? "black" : null } icon={e} size="small" onClick={this.selectIcon}/>
               </Grid.Column>)
             })}
             </Grid.Row>
diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js
index 6251c0d..3400d42 100644
--- a/smart-hut/src/components/modalform.js
+++ b/smart-hut/src/components/modalform.js
@@ -9,11 +9,51 @@ export default class ModalWindow extends Component {
     this.state = {
       selectedIcon: 'home',
       name: "",
-      img: ""
+      img: "",
+      openModal: false
     }
+
+    this.addRoomModal = this.addRoomModal.bind(this);
+    this.updateIcon = this.updateIcon.bind(this);
   }
 
-    render(){
+  addRoomModal = (e) => {
+    let data = {
+      "icon" : this.state.selectedIcon,
+      "name" : this.state.name,
+      "images" : this.state.img
+    }
+
+    console.log(this.props, data);
+    this.props.addRoom(data);
+    this.closeModal();
+  }
+
+  deleteRoom = (e) => {
+    console.log(e);
+  }
+
+  changeSomething = (event) => {
+   let nam = event.target.name;
+   let val = event.target.value;
+   this.setState({[nam]: val});
+   }
+
+   closeModal = (e) => {
+     this.setState({openModal:false});
+     this.updateIcon('home');
+   }
+
+   openModal = (e) => {
+     this.setState({openModal:true})
+   }
+
+  updateIcon(e) {
+    console.log(e);
+    this.setState({selectedIcon : e})
+  }
+
+  render(){
 
     const spaceDiv = {
       background: '#f4f4f4',
@@ -24,40 +64,44 @@ export default class ModalWindow extends Component {
 
       return (
         <div>
-        <Modal trigger={<Button icon labelPosition='left' inverted>
-          <Icon name='plus' size='middle'/>
+        <Button icon labelPosition='left' inverted onClick={this.openModal}>
+          <Icon name='plus' size='small'/>
           ADD ROOM
-        </Button>} closeIcon>
+        </Button>
+        <Modal
+        onClose={this.closeModal}
+        open={this.state.openModal}>
         <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'/>
+              <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}/>
             </Form.Field>
             <p>Insert an image of the room:</p>
             <Form.Field>
-              <Input label='Room image' type='file' />
+              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}/>
             </Form.Field>
           </Form>
 
           <div style={spaceDiv}>
           <p>Select an icon:</p>
-          <SelectIcons/>
+          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
           </div>
 
-          <Button icon labelPosition='left' inverted color='red'>
+          {this.props.type == "modify" ?
+          <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
             <Icon name='trash alternate' />
             Delete room
-          </Button>
+          </Button> : null }
 
         </Modal.Content>
         <Modal.Actions>
-          <Button color='red' onClick="">
-            <Icon name='remove' /> No
+          <Button color='red' onClick={this.closeModal}>
+            <Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
           </Button>
-          <Button color='green' onClick="">
-            <Icon name='checkmark' /> Yes
+          <Button color='green' onClick={this.addRoomModal}>
+            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes" }
           </Button>
         </Modal.Actions>
           </Modal>
diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index 30a2f20..c887f59 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -13,7 +13,7 @@ class Navbar extends Component {
   }
 
   showForm = (event) => {
-    console.log(event.target.name);
+    console.log(event);
     if (event === "new"){
       console.log("funziona");
       return (<ModalWindow type="new"/>)
@@ -34,10 +34,10 @@ class Navbar extends Component {
       <Segment.Group>
        <Responsive as={Segment}>
           <Grid>
-            <Grid.Row>
+            <Grid.Row color='black'>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
             </Grid.Row>
-            <Grid.Row>
+            <Grid.Row color='black'>
                 <Menu inverted fluid vertical>
                   <Menu.Item
                     name='Home'
@@ -61,6 +61,7 @@ class Navbar extends Component {
                  this.props.rooms.map((e, i) => {
                    return (
                      <Menu.Item
+                       id={e.id}
                        key={i}
                        name={e.name}
                        active={activeItem === e.name}
@@ -69,7 +70,7 @@ class Navbar extends Component {
                       <Grid>
                         <Grid.Row>
                           <Grid.Column width={1}>
-                            <Icon name="food" size="small"/>
+                            <Icon name={e.icon} size="small"/>
                           </Grid.Column>
                           <Grid.Column width={12}>
                             {e.name}
@@ -93,7 +94,7 @@ class Navbar extends Component {
                   <Grid>
                     <Grid.Row centered onClick={this.showForm} name='new'>
 
-                      <ModalWindow type="new"/>
+                      <ModalWindow type="new" addRoom={this.props.addRoom}/>
 
                     </Grid.Row>
                   </Grid>