Merge branch 'base64' into 'dev'

Resolve "convert img to base64"

Closes #49

See merge request sa4-2020/the-sanmarinoes/frontend!59

smart-hut/src/components/HeaderController.js

@@ -5,14 +5,11 @@ import {
   BrowserView,
   MobileView,
   isBrowser,
-  isMobile
+  isMobile,
 } from "react-device-detect";
 
 const AvatarImage = () => (
-  <Image 
-  src="avatar3.png" 
-  style={{ width: "25px", height: "auto" }} 
-  centered />
+  <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
 );
 
 const IconHomeImage = () => (
@@ -35,15 +32,9 @@ const IconHomeImageMobile = () => (
   />
 );
 
-const TitleImage = () => (
-  <Image 
-    src="title7.png" 
-    size="medium" 
-    centered 
-  />
-);
+const TitleImage = () => <Image src="title7.png" size="medium" centered />;
 
-const BrowserStructure = (props) => ( 
+const BrowserStructure = (props) => (
   <Grid columns="equal" divided inverted padded>
     <Grid.Row color="black" textAlign="center">
       <Grid.Column width={3} height={0.5}>
@@ -76,10 +67,10 @@ const BrowserStructure = (props) => (
         </Dropdown>
       </Grid.Column>
     </Grid.Row>
-  </Grid> 
+  </Grid>
 );
 
-const MobileStructure = (props) => ( 
+const MobileStructure = (props) => (
   <Grid columns="equal" divided inverted padded>
     <Grid.Row color="black" textAlign="center">
       <Segment color="black" inverted>
@@ -90,36 +81,29 @@ const MobileStructure = (props) => (
       <Grid.Column>
         <IconHomeImage />
       </Grid.Column>
-      <Grid.Column >
-      <AvatarImage />
-      <Divider />
-      <Dropdown item icon="setting" size="huge">
-        <Dropdown.Menu>
-          <Dropdown.Item>
-            <Icon name="dropdown" />
-            <span className="text">Settings</span>
-            <Dropdown.Menu>
-              <Dropdown.Item>Document</Dropdown.Item>
-              <Dropdown.Item>Image</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown.Item>
-          <Dropdown.Item>See profile...</Dropdown.Item>
-          <Dropdown.Divider />
-          <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
+      <Grid.Column>
+        <AvatarImage />
+        <Divider />
+        <Dropdown item icon="setting" size="huge">
+          <Dropdown.Menu>
+            <Dropdown.Item>
+              <Icon name="dropdown" />
+              <span className="text">Settings</span>
+              <Dropdown.Menu>
+                <Dropdown.Item>Document</Dropdown.Item>
+                <Dropdown.Item>Image</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown.Item>
+            <Dropdown.Item>See profile...</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </Grid.Column>
-  </Grid.Row>
-  </Grid> 
+    </Grid.Row>
+  </Grid>
 );
 
-
-
-
-
-
-
-
 export default class MyHeader extends React.Component {
   render() {
     return (

smart-hut/src/components/SelectIcons.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Grid } from "semantic-ui-react";
+import { Button, Grid, Responsive } from "semantic-ui-react";
 
 export default class SelectIcons extends Component {
   constructor(props) {
@@ -30,7 +30,7 @@ export default class SelectIcons extends Component {
     ];
 
     return (
-      <Grid centered>
+      <Grid centered relaxed>
         {myicons.map((e, i) => {
           return (
             <Grid.Row key={i}>

smart-hut/src/components/modalform.js

@@ -7,20 +7,28 @@ import {
   Input,
   Icon,
   Responsive,
+  Image,
 } from "semantic-ui-react";
 import SelectIcons from "./SelectIcons";
 
+const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
+
 export default class ModalWindow extends Component {
   constructor(props) {
     super(props);
+
+    console.table(this.props);
+
     this.state = {
       id: "",
       selectedIcon: "",
       name: this.props.type === "new" ? "" : this.props.idRoom.name,
-      img: this.props.type === "new" ? "" : this.props.idRoom.images,
+      img: this.props.type === "new" ? null : this.props.idRoom.image,
       openModal: false,
     };
 
+    this.fileInputRef = React.createRef();
+
     this.addRoomModal = this.addRoomModal.bind(this);
     this.updateIcon = this.updateIcon.bind(this);
   }
@@ -72,6 +80,16 @@ export default class ModalWindow extends Component {
     this.setState({ selectedIcon: e });
   }
 
+  getBase64(file, callback) {
+    let reader = new FileReader();
+    reader.readAsDataURL(file.target.files[0]);
+    reader.onload = () => {
+      this.state.img = reader.result;
+      this.setState(this.state);
+    };
+    reader.onerror = console.error;
+  }
+
   render() {
     const spaceDiv = {
       background: "#f4f4f4",
@@ -91,6 +109,16 @@ export default class ModalWindow extends Component {
             <Icon name="pencil" size="small" onClick={this.openModal} />
           )}
         </Responsive>
+        <Responsive maxWidth={768}>
+          {this.props.type === "new" ? (
+            <Button icon fluid labelPosition="left" onClick={this.openModal}>
+              <Icon name="plus" size="small" />
+              ADD ROOM
+            </Button>
+          ) : (
+            <Icon name="pencil" size="small" onClick={this.openModal} />
+          )}
+        </Responsive>
         <Responsive maxWidth={768}>
           {this.props.type === "new" ? (
             <Button icon fluid labelPosition="left" onClick={this.openModal}>
@@ -124,12 +152,20 @@ export default class ModalWindow extends Component {
               </Form.Field>
               <p>Insert an image of the room:</p>
               <Form.Field>
-                <Input
+                <Image
+                  src={this.state.img == null ? NO_IMAGE : this.state.img}
+                  size="small"
+                  onClick={() => this.fileInputRef.current.click()}
+                />
+
+                <input
+                  ref={this.fileInputRef}
+                  hidden
                   label="Room image"
                   type="file"
                   name="img"
-                  onChange={this.changeSomething}
-                  value={this.state.img}
+                  accept="image/png, image/jpeg"
+                  onChange={this.getBase64.bind(this)}
                 />
               </Form.Field>
             </Form>
@@ -174,18 +210,6 @@ export default class ModalWindow extends Component {
               <Icon name="checkmark" />{" "}
               {this.props.type === "new" ? "Add room" : "Save changes"}
             </Button>
-
-            <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>