rodivert/bo
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Ajout de la galerie par végétal

Browse source
This commit is contained in:
dbroqua 2018-09-20 10:12:05 +02:00
parent 62392b8597
commit a9575b79c1
2 changed files with 247 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Vegetable.css
View file

@ -29,6 +29,10 @@ top: 33%;
max-width : 100%;
}
#mainPicture {
#mainPicture, #Pictures {
display: none;
}
.carousel-inner img {
max-width: 100%;
}

186
src/Vegetable.js
View file

@ -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) {
@ -221,8 +321,6 @@ class Vegetable extends Component {
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<Row>
<Col xs={12} sm={4}>
<FormGroup row>
@ -255,9 +353,7 @@ class Vegetable extends Component {
<Label for="mainPicture" sm={4}>Photo principale</Label>
<Col sm={8}>
<Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
<FaPlus />
{' '}
Photo
<FaFileImage />
</Label>
<Input
type="file"
@ -273,12 +369,8 @@ class Vegetable extends Component {
</div>
</Col>
</Row>
</Col>
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="12">
<Row>
<Col xs={12} sm={4}>
<FormGroup row>
@ -322,12 +414,54 @@ class Vegetable extends Component {
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="3">
<Row>
<Col xs={12} sm={4}>
<FormGroup row>
<Col sm={12}>
<Label className="btn btn-success" for="Pictures" sm={12}>
<FaFileImage />
{' '}
Ajouter une photo
</Label>
<Input
type="file"
id="Pictures"
onChange={e => this.onPictureChange(e)}
/>
</Col>
</FormGroup>
</Col>
<Col xs={12} sm={8}>
{this.state.imagesPreviewUrls
&& this.state.imagesPreviewUrls.length > 0
? (<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous}
>
<CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{this.state.imagesPreviewUrls.map( (item, key) => (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={`Carousel_${key}`}
>
<img src={item} alt="Carousel" />
</CarouselItem>
))}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>)
: (null)
}
</Col>
</Row>
</TabPane>
</TabContent>
<Button color="primary" style={{ marginTop: '16px' }}>
<Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
<FaEdit />
{' '}
Mettre à jour