diff --git a/src/Vegetable.css b/src/Vegetable.css
index 0f308da..9f22d80 100644
--- a/src/Vegetable.css
+++ b/src/Vegetable.css
@@ -29,6 +29,10 @@ top: 33%;
max-width : 100%;
}
-#mainPicture {
+#mainPicture, #Pictures {
display: none;
}
+
+.carousel-inner img {
+ max-width: 100%;
+}
diff --git a/src/Vegetable.js b/src/Vegetable.js
index 795b3f4..b1ca544 100644
--- a/src/Vegetable.js
+++ b/src/Vegetable.js
@@ -15,13 +15,16 @@ import {
Nav,
NavItem,
NavLink,
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
} from 'reactstrap';
import classnames from 'classnames';
-
import {
- FaPlus,
FaEdit,
FaMapMarkerAlt,
+ FaFileImage,
} from 'react-icons/fa';
import Navigation from './Navigation';
import Header from './Header';
@@ -38,35 +41,45 @@ 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.toggle = this.toggle.bind(this);
-
this.state = {
Vegetable: {
name: '',
lat: 0,
lng: 0,
description: '',
+ Pictures: [],
},
imagePreviewUrl: '',
+ imagesPreviewUrls: [],
Map: {
width: '20px',
height: '20px',
},
- activeTab: '1'
+ activeTab: '1',
+ activeIndex: 0,
};
+ 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.onPictureChange = this.onPictureChange.bind(this);
+ this.toggle = this.toggle.bind(this);
+ this.next = this.next.bind(this);
+ this.previous = this.previous.bind(this);
+ this.goToIndex = this.goToIndex.bind(this);
+ this.onExiting = this.onExiting.bind(this);
+ this.onExited = this.onExited.bind(this);
+ this.postPicture = this.postPicture.bind(this);
+
this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
- activeTab: tab
+ activeTab: tab,
}, () => {
this.setMap();
});
@@ -114,6 +127,34 @@ class Vegetable extends Component {
reader.readAsDataURL(file);
}
+ onPictureChange(e) {
+ e.preventDefault();
+
+ const reader = new FileReader();
+ const file = e.target.files[0];
+
+ reader.onloadend = () => {
+ this.setState(prevState => ({
+ Vegetable: {
+ ...prevState.Vegetable,
+ Pictures: [
+ ...prevState.Vegetable.Pictures,
+ file
+ ]
+ },
+ imagesPreviewUrls: [
+ ...prevState.imagesPreviewUrls,
+ reader.result
+ ],
+ activeIndex: prevState.imagesPreviewUrls.length
+ }));
+ };
+
+ this.postPicture(file);
+
+ reader.readAsDataURL(file);
+ }
+
updateVegetable(event) {
event.preventDefault(); // Let's stop this event.
event.stopPropagation(); // Really this time.
@@ -134,7 +175,21 @@ class Vegetable extends Component {
// this.setState({ Category: res.data });
})
.catch(() => {
- alert('Impossile de mettre à jour cette catégorie');
+ alert('Impossile de mettre à jour ce végétal');
+ });
+ }
+
+ postPicture(picture) {
+ const fd = new FormData();
+
+ fd.append('picture', picture);
+
+ API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures`, fd)
+ .then((res) => {
+ // this.setState({ Category: res.data });
+ })
+ .catch(() => {
+ alert('Impossile d\'ajouter cette image');
});
}
@@ -143,12 +198,23 @@ class Vegetable extends Component {
.then((res) => {
if (res.status === 200) {
const item = res.data;
+ let images = [];
+
if (item.description === null) {
item.description = ' ';
}
- this.setState({
- Vegetable: item
- });
+
+ if (item.Pictures.length > 0) {
+ for (let i = 0; i < item.Pictures.length; i += 1) {
+ images.push(item.Pictures[i].url);
+ }
+ }
+
+ this.setState(prevState => ({
+ ...prevState,
+ Vegetable: item,
+ imagesPreviewUrls: images
+ }));
}
})
.catch((e) => {
@@ -174,9 +240,43 @@ class Vegetable extends Component {
});
}
+ onExiting() {
+ this.animating = true;
+ }
+
+ onExited() {
+ this.animating = false;
+ }
+
+ next() {
+ if (this.animating) return;
+ const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
+ this.setState({
+ activeIndex: nextIndex,
+ });
+ }
+
+ previous() {
+ if (this.animating) return;
+ const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
+ this.setState({
+ activeIndex: nextIndex,
+ });
+ }
+
+ goToIndex(newIndex) {
+ if (this.animating) return;
+ this.setState({
+ activeIndex: newIndex,
+ });
+ }
+
render() {
const {
- imagePreviewUrl
+ activeIndex,
+ } = this.state;
+ const {
+ imagePreviewUrl,
} = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
@@ -222,112 +322,146 @@ class Vegetable extends Component {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.onImageChange(e)}
- />
-
-
+
+
+
+
+
-
-
- {$imagePreview}
-
+
+
+
+
+
-
+
+
+
+
+
+ this.onImageChange(e)}
+ />
+
+
+
+
+
+ {$imagePreview}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.onPictureChange(e)}
+ />
+
+
+
+
+ {this.state.imagesPreviewUrls
+ && this.state.imagesPreviewUrls.length > 0
+ ? (
+
+ {this.state.imagesPreviewUrls.map( (item, key) => (
+
+
+
+ ))}
+
+
+ )
+ : (null)
+ }
-