Add room feature completed

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>
+            <Grid.Row key={i}>
-            {e.map((e) => {
+            {e.map((e, i) => {
-              return(<Grid.Column>
+              return(<Grid.Column key={i}>
-                <Button icon={e} size="small"/>
+                <Button name={e} color={e === this.state.currentIcon ? "black" : null } icon={e} size="small" onClick={this.selectIcon}/>
               </Grid.Column>)
             })}
             </Grid.Row>

smart-hut/src/components/modalform.js

@@ -9,8 +9,48 @@ 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);
+  }
+
+  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(){
@@ -24,40 +64,44 @@ export default class ModalWindow extends Component {
 
       return (
         <div>
-        <Modal trigger={<Button icon labelPosition='left' inverted>
+        <Button icon labelPosition='left' inverted onClick={this.openModal}>
-          <Icon name='plus' size='middle'/>
+          <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="">
+          <Button color='red' onClick={this.closeModal}>
-            <Icon name='remove' /> No
+            <Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
           </Button>
-          <Button color='green' onClick="">
+          <Button color='green' onClick={this.addRoomModal}>
-            <Icon name='checkmark' /> Yes
+            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes" }
           </Button>
         </Modal.Actions>
           </Modal>

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>