Added 404 images, finished modify in feature in navbar

smart-hut/src/components/modalform.js

@@ -7,7 +7,8 @@ export default class ModalWindow extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedIcon: 'home',
+      id : "",
+      selectedIcon: "",
       name: "",
       img: "",
       openModal: false
@@ -23,14 +24,26 @@ export default class ModalWindow extends Component {
       "name" : this.state.name,
       "images" : this.state.img
     }
-
-    console.log(this.props, data);
     this.props.addRoom(data);
     this.closeModal();
   }
 
+  modifyRoomModal = (e) => {
+    let data = {
+      "icon" : this.state.selectedIcon,
+      "name" : this.state.name,
+      "images" : this.state.img
+    }
+    this.props.updateRoom(data);
+    this.closeModal();
+  }
+
   deleteRoom = (e) => {
-    console.log(e);
+    let data = {
+      "id" : this.state.id
+    }
+    this.props.deleteRoom(data);
+    this.closeModal();
   }
 
   changeSomething = (event) => {
@@ -49,7 +62,6 @@ export default class ModalWindow extends Component {
    }
 
   updateIcon(e) {
-    console.log(e);
     this.setState({selectedIcon : e})
   }
 
@@ -64,10 +76,16 @@ export default class ModalWindow extends Component {
 
       return (
         <div>
+
+        {this.props.type == "new" ?
         <Button icon labelPosition='left' inverted onClick={this.openModal}>
           <Icon name='plus' size='small'/>
           ADD ROOM
         </Button>
+         :
+         <Icon name="pencil" size="small" onClick={this.openModal}/>
+        }
+
         <Modal
         onClose={this.closeModal}
         open={this.state.openModal}>
@@ -76,16 +94,19 @@ export default class ModalWindow extends Component {
           <Form>
           <p>Insert the name of the room:</p>
             <Form.Field>
-              <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}/>
+              <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
+              value={this.props.type == "new" ? null : this.props.idRoom.name }/>
             </Form.Field>
             <p>Insert an image of the room:</p>
             <Form.Field>
-              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}/>
+              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
+              value={this.props.type == "new" ? null : this.props.idRoom.images }/>
             </Form.Field>
           </Form>
 
           <div style={spaceDiv}>
           <p>Select an icon:</p>
+          {this.props.selectedIcon == "new" ? "home" : this.props.idRoom.icon }
           <SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
           </div>
 
@@ -100,9 +121,12 @@ export default class ModalWindow extends Component {
           <Button color='red' onClick={this.closeModal}>
             <Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
           </Button>
-          <Button color='green' onClick={this.addRoomModal}>
+
-            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes" }
+
+          <Button color='green' onClick={this.props.type == "new" ? this.addRoomModal : this.modifyRoomModal}>
+            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes"}
           </Button>
+
         </Modal.Actions>
           </Modal>
         </div>

smart-hut/src/views/Navbar.js

@@ -8,17 +8,14 @@ class Navbar extends Component {
     super(props);
     this.state = {
       activeItem: 'Home',
-      edited: ""
+      edited: "",
+      editMode : false
     }
   }
 
-  showForm = (event) => {
+  editModeController = (e) => {
-    console.log(event);
+    this.setState((prevState) => ({ editMode: !prevState.editMode }));
-    if (event === "new"){
+  };
-      console.log("funziona");
-      return (<ModalWindow type="new"/>)
-    }
-  }
 
   handleClick = (e, { i }) => {
     this.setState({ activeItem: e.name,
@@ -50,7 +47,7 @@ class Navbar extends Component {
                         <Icon name="home" size="small"/>
                       </Grid.Column>
                       <Grid.Column>
-                        Home
+                        HOME
                       </Grid.Column>
                     </Grid.Row>
                   </Grid>
@@ -69,20 +66,21 @@ class Navbar extends Component {
                       >
                       <Grid>
                         <Grid.Row>
-                          <Grid.Column width={1}>
+                          <Grid.Column>
                             <Icon name={e.icon} size="small"/>
                           </Grid.Column>
-                          <Grid.Column width={12}>
+                          <Grid.Column width={8}>
                             {e.name}
                           </Grid.Column>
-                          <Grid.Column width={1}>
+                          <Grid.Column floated="right">
-                            <Icon name="pencil" size="small"/>
+                          {this.state.edit ?
+                            <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
+                            : null
+                          }
                           </Grid.Column>
                         </Grid.Row>
                       </Grid>
-
                       </ Menu.Item>
-
                      )
                    }) : null
                   }
@@ -91,11 +89,10 @@ class Navbar extends Component {
                     name='newM'
                     active={activeItem === 'Plus'}
                   >
+
                   <Grid>
-                    <Grid.Row centered onClick={this.showForm} name='new'>
+                    <Grid.Row centered name='new'>
-
                       <ModalWindow type="new" addRoom={this.props.addRoom}/>
-
                     </Grid.Row>
                   </Grid>