v0.1

src/App.css

@@ -26,6 +26,11 @@
   margin: 0;
 }
 
+.Vegetable input {
+  margin: 0;
+  min-width: auto;
+}
+
 .container {
   border-radius: 12px;
   background: #fafafa;

src/App.js

@@ -5,6 +5,7 @@ import {
 } from 'react-router-dom';
 import Categories from './Categories';
 import Category from './Category';
+import Vegetable from './Vegetable';
 
 import requireAuth from './requireAuth';
 import Login from './Login';
@@ -20,10 +21,7 @@ class App extends Component {
             <Route exact path="/" component={requireAuth(Login, false)} />
             <Route exact path="/categories" component={requireAuth(Categories)} />
             <Route exact path="/categories/:categoryId" component={requireAuth(Category)} />
-            {/*
             <Route exact path="/categories/:categoryId/vegetables/:vegetableId" component={requireAuth(Vegetable)} />
-
-        */}
           </Switch>
         </Router>
       </div>

src/Categories.js

@@ -7,7 +7,7 @@ import {
   Button,
   Input,
 } from 'reactstrap';
-import { FaTrashAlt } from 'react-icons/fa';
+import { FaTrashAlt, FaPlus } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import Header from './Header';
 import API from './Api';
@@ -104,8 +104,8 @@ class Categories extends Component {
                 </td>
               </tr>
             ))}
-            <tr>
-              <td colSpan="4">
+          </tbody>
+        </Table>
         <Form inline onSubmit={this.addCategory}>
           <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
             <Input
@@ -116,12 +116,12 @@ class Categories extends Component {
               onChange={this.handleChange}
             />
           </FormGroup>
-                  <Button color="primary">Ajouter</Button>
+          <Button color="primary">
+            <FaPlus />
+            {' '}
+Ajouter
+          </Button>
         </Form>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
       </Container>
     );
   }

src/Category.js

@@ -7,7 +7,7 @@ import {
   Button,
   Input,
 } from 'reactstrap';
-import { FaTrashAlt } from 'react-icons/fa';
+import { FaTrashAlt, FaPlus, FaEdit } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import Header from './Header';
 import API from './Api';
@@ -80,6 +80,9 @@ class Category extends Component {
     event.stopPropagation(); // Really this time.
     API.post(`types/${this.state.Category.id}/vegetables/`, {
       name: this.state.name,
+      lat: 0,
+      lng: 0,
+      description: '',
     })
       .then((res) => {
         const Category = this.state.Category;
@@ -120,7 +123,11 @@ class Category extends Component {
               onChange={this.handleChange}
             />
           </FormGroup>
-          <Button color="primary">Mettre à jour</Button>
+          <Button color="primary">
+            <FaEdit />
+            {' '}
+Mettre à jour
+          </Button>
         </Form>
         <Table>
           <thead>
@@ -141,8 +148,8 @@ class Category extends Component {
                 </td>
               </tr>
             ))}
-            <tr>
-              <td colSpan="3">
+          </tbody>
+        </Table>
         <Form inline onSubmit={this.addVegetable}>
           <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
             <Input
@@ -152,12 +159,12 @@ class Category extends Component {
               onChange={this.handleChange}
             />
           </FormGroup>
-                  <Button color="primary">Ajouter</Button>
+          <Button color="primary">
+            <FaPlus />
+            {' '}
+Ajouter
+          </Button>
         </Form>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
       </Container>
     );
   }

src/Login.js

@@ -9,6 +9,7 @@ import {
   Input,
   Alert,
 } from 'reactstrap';
+import { FaSignInAlt } from 'react-icons/fa';
 import API, { setDefaults } from './Api';
 
 class Login extends Component {
@@ -101,7 +102,11 @@ class Login extends Component {
                   {this.state.message}
                 </Alert>
               ) : (null)}
-            <Button color="primary">Connexion</Button>
+            <Button color="primary">
+              <FaSignInAlt />
+              {' '}
+Connexion
+            </Button>
           </Form>
         </Col>
       </Row>

src/Vegetable.css

@@ -0,0 +1,21 @@
+.map {
+  width: 734px;
+  height: 530px;
+  background: url('/plan.jpg');
+  background-size: cover;
+  position: relative;
+}
+.mapMarker {
+position: absolute;
+left: 25%;
+top: 33%;
+}
+
+.mapMarker svg {
+  color: red;
+  font-size: 2rem;
+}
+
+.imgPreview img {
+  max-width : 100%;
+}

src/Vegetable.js

@@ -0,0 +1,262 @@
+import React, { Component } from 'react';
+import {
+  Container,
+  Row,
+  Col,
+  Form,
+  FormGroup,
+  Button,
+  Label,
+  Input,
+} from 'reactstrap';
+import { FaEdit, FaMapMarkerAlt } from 'react-icons/fa';
+import Header from './Header';
+import API from './Api';
+
+import './Vegetable.css';
+
+const Map = {
+  width: 734,
+  height: 530,
+};
+
+class Vegetable extends Component {
+  constructor(props) {
+    super(props);
+
+    this.getVegetable = this.getVegetable.bind(this);
+    this.updateVegetable = this.updateVegetable.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.setMap = this.setMap.bind(this);
+    this.onImageChange = this.onImageChange.bind(this);
+
+    this.state = {
+      Vegetable: {
+        name: '',
+        lat: 0,
+        lng: 0,
+        description: '',
+      },
+      imagePreviewUrl: '',
+      Map: {
+        width: '20px',
+        height: '20px',
+      },
+    };
+
+    this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.setMap);
+    this.setMap();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setMap);
+  }
+
+  handleChange(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState(prevState => ({
+      Vegetable: {
+        ...prevState.Vegetable,
+        [name]: value,
+      },
+    }));
+  }
+
+  onImageChange(e) {
+    e.preventDefault();
+
+    const reader = new FileReader();
+    const file = e.target.files[0];
+
+    reader.onloadend = () => {
+      this.setState(prevState => ({
+        Vegetable: {
+          ...prevState.Vegetable,
+          mainPictureImported: file,
+        },
+        imagePreviewUrl: reader.result,
+      }));
+    };
+
+    reader.readAsDataURL(file);
+  }
+
+  updateVegetable(event) {
+    event.preventDefault(); // Let's stop this event.
+    event.stopPropagation(); // Really this time.
+
+    const fd = new FormData();
+    //
+    //
+    if (this.state.imagePreviewUrl) {
+      fd.append('mainPicture', this.state.Vegetable.mainPictureImported);
+    }
+
+    Object.keys(this.state.Vegetable).map((objectKey) => {
+      if (objectKey !== 'mainPicture' && objectKey !== 'mainPictureImported') {
+        fd.append(objectKey, this.state.Vegetable[objectKey]);
+      }
+      return true;
+    });
+    console.log(this.state.Vegetable);
+    API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
+      .then((res) => {
+        // this.setState({ Category: res.data });
+      })
+      .catch(() => {
+        alert('Impossile de mettre à jour cette catégorie');
+      });
+  }
+
+  getVegetable(categoryId, vegetableId) {
+    API.get(`types/${categoryId}/vegetables/${vegetableId}`)
+      .then((res) => {
+        if (res.status === 200) {
+          const item = res.data;
+          if (item.description === null) {
+            item.description = ' ';
+          }
+          this.setState({ Vegetable: item });
+        }
+      })
+      .catch((e) => {
+        alert('Erreur lors de la récupération de ce végétal');
+      });
+  }
+
+  setMap() {
+    const width = document.getElementById('MapContainer').clientWidth;
+    let MapWidth = Map.width;
+    let MapHeight = Map.height;
+
+    if (width < Map.width) {
+      MapWidth = width;
+      MapHeight = Math.round(Map.height * MapWidth / Map.width);
+    }
+
+    this.setState({
+      Map: {
+        width: MapWidth,
+        height: MapHeight,
+      },
+    });
+  }
+
+  render() {
+    const { imagePreviewUrl } = this.state;
+    let $imagePreview = null;
+    if (imagePreviewUrl) {
+      $imagePreview = (<img src={imagePreviewUrl} alt="Preview" />);
+    } else if (this.state.Vegetable.mainPicture) {
+      $imagePreview = (<img src={this.state.Vegetable.mainPicture} alt="Preview" />);
+    } else {
+      $imagePreview = (<div className="previewText" />);
+    }
+
+    return (
+      <Container className="Vegetable">
+        <Header categoryId={this.state.Vegetable.Type ? this.state.Vegetable.Type.id : 1} categoryName={this.state.Vegetable.Type ? this.state.Vegetable.Type.name : null} vegetableId={this.state.Vegetable.id || 1} vegetableName={this.state.Vegetable.name} />
+        <Form onSubmit={this.updateVegetable}>
+          <Row>
+            <Col xs={12} sm={4}>
+              <FormGroup row>
+                <Label for="name" sm={4}>Nom</Label>
+                <Col sm={8}>
+                  <Input
+                    type="text"
+                    name="name"
+                    id="name"
+                    value={this.state.Vegetable.name}
+                    placeholder="Nom"
+                    onChange={this.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label for="description" sm={4}>Description</Label>
+                <Col sm={8}>
+                  <Input
+                    type="textarea"
+                    name="description"
+                    id="description"
+                    value={this.state.Vegetable.description}
+                    placeholder="Description"
+                    onChange={this.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label for="lat" sm={4}>Latitude (%)</Label>
+                <Col sm={8}>
+                  <Input
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="1"
+                    name="lat"
+                    id="lat"
+                    value={this.state.Vegetable.lat}
+                    placeholder="Latitude"
+                    onChange={this.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label for="lng" sm={4}>Longitude (%)</Label>
+                <Col sm={8}>
+                  <Input
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="1"
+                    name="lng"
+                    id="lng"
+                    value={this.state.Vegetable.lng}
+                    placeholder="Longitude"
+                    onChange={this.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label for="mainPicture" sm={4}>Photo principale</Label>
+                <Col sm={8}>
+                  <Input
+                    type="file"
+                    id="mainPicture"
+                    onChange={e => this.onImageChange(e)}
+                  />
+                </Col>
+              </FormGroup>
+              <div className="imgPreview">
+                {$imagePreview}
+              </div>
+
+            </Col>
+            <Col xs={12} sm={8}>
+              <div id="MapContainer">
+                <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
+                  <div className="mapMarker" style={{ left: `calc(${this.state.Vegetable.lat}% - 16px)`, top: `calc(${this.state.Vegetable.lng}% - 16px)` }}><FaMapMarkerAlt /></div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+
+          <Button color="primary" style={{ marginTop: '16px' }}>
+            <FaEdit />
+            {' '}
+Mettre à jour
+          </Button>
+        </Form>
+      </Container>
+    );
+  }
+}
+
+export default Vegetable;