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

Ajout de la galerie par végétal

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%; max-width : 100%;
} }
#mainPicture { #mainPicture, #Pictures {
display: none; display: none;
} }
.carousel-inner img {
max-width: 100%;
}

350
src/Vegetable.js
View File

@ -15,13 +15,16 @@ import {
Nav, Nav,
NavItem, NavItem,
NavLink, NavLink,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
} from 'reactstrap'; } from 'reactstrap';
import classnames from 'classnames'; import classnames from 'classnames';
import { import {
FaPlus,
FaEdit, FaEdit,
FaMapMarkerAlt, FaMapMarkerAlt,
FaFileImage,
} from 'react-icons/fa'; } from 'react-icons/fa';
import Navigation from './Navigation'; import Navigation from './Navigation';
import Header from './Header'; import Header from './Header';
@ -38,35 +41,45 @@ class Vegetable extends Component {
constructor(props) { constructor(props) {
super(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 = { this.state = {
Vegetable: { Vegetable: {
name: '', name: '',
lat: 0, lat: 0,
lng: 0, lng: 0,
description: '', description: '',
Pictures: [],
}, },
imagePreviewUrl: '', imagePreviewUrl: '',
imagesPreviewUrls: [],
Map: { Map: {
width: '20px', width: '20px',
height: '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); this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
} }
toggle(tab) { toggle(tab) {
if (this.state.activeTab !== tab) { if (this.state.activeTab !== tab) {
this.setState({ this.setState({
activeTab: tab activeTab: tab,
}, () => { }, () => {
this.setMap(); this.setMap();
}); });
@ -114,6 +127,34 @@ class Vegetable extends Component {
reader.readAsDataURL(file); 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) { updateVegetable(event) {
event.preventDefault(); // Let's stop this event. event.preventDefault(); // Let's stop this event.
event.stopPropagation(); // Really this time. event.stopPropagation(); // Really this time.
@ -134,7 +175,21 @@ class Vegetable extends Component {
// this.setState({ Category: res.data }); // this.setState({ Category: res.data });
}) })
.catch(() => { .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) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
const item = res.data; const item = res.data;
let images = [];
if (item.description === null) { if (item.description === null) {
item.description = ' '; 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) => { .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() { render() {
const { const {
imagePreviewUrl activeIndex,
} = this.state;
const {
imagePreviewUrl,
} = this.state; } = this.state;
let $imagePreview = null; let $imagePreview = null;
if (imagePreviewUrl) { if (imagePreviewUrl) {
@ -222,112 +322,146 @@ class Vegetable extends Component {
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1"> <TabPane tabId="1">
<Row> <Row>
<Col sm="12"> <Col xs={12} sm={4}>
<Row> <FormGroup row>
<Col xs={12} sm={4}> <Label for="name" sm={4}>Nom</Label>
<FormGroup row> <Col sm={8}>
<Label for="name" sm={4}>Nom</Label> <Input
<Col sm={8}> type="text"
<Input name="name"
type="text" id="name"
name="name" value={this.state.Vegetable.name}
id="name" placeholder="Nom"
value={this.state.Vegetable.name} onChange={this.handleChange}
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="mainPicture" sm={4}>Photo principale</Label>
<Col sm={8}>
<Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
<FaPlus />
{' '}
Photo
</Label>
<Input
type="file"
id="mainPicture"
onChange={e => this.onImageChange(e)}
/>
</Col>
</FormGroup>
</Col> </Col>
<Col xs={12} sm={8}> </FormGroup>
<div className="imgPreview"> <FormGroup row>
{$imagePreview} <Label for="description" sm={4}>Description</Label>
</div> <Col sm={8}>
<Input
type="textarea"
name="description"
id="description"
value={this.state.Vegetable.description}
placeholder="Description"
onChange={this.handleChange}
/>
</Col> </Col>
</Row> </FormGroup>
<FormGroup row>
<Label for="mainPicture" sm={4}>Photo principale</Label>
<Col sm={8}>
<Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
<FaFileImage />
</Label>
<Input
type="file"
id="mainPicture"
onChange={e => this.onImageChange(e)}
/>
</Col>
</FormGroup>
</Col>
<Col xs={12} sm={8}>
<div className="imgPreview">
{$imagePreview}
</div>
</Col> </Col>
</Row> </Row>
</TabPane> </TabPane>
<TabPane tabId="2"> <TabPane tabId="2">
<Row> <Row>
<Col sm="12"> <Col xs={12} sm={4}>
<Row> <FormGroup row>
<Col xs={12} sm={4}> <Label for="lat" sm={4}>Latitude (%)</Label>
<FormGroup row> <Col sm={8}>
<Label for="lat" sm={4}>Latitude (%)</Label> <Input
<Col sm={8}> type="number"
<Input min="0"
type="number" max="100"
min="0" step="1"
max="100" name="lat"
step="1" id="lat"
name="lat" value={this.state.Vegetable.lat}
id="lat" placeholder="Latitude"
value={this.state.Vegetable.lat} onChange={this.handleChange}
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>
</Col> </Col>
<Col xs={12} sm={8}> </FormGroup>
<div id="MapContainer"> <FormGroup row>
<div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}> <Label for="lng" sm={4}>Longitude (%)</Label>
<div className="mapMarker" style={{ left: `calc(${this.state.Vegetable.lat}% - 16px)`, top: `calc(${this.state.Vegetable.lng}% - 16px)` }}><FaMapMarkerAlt /></div> <Col sm={8}>
</div> <Input
</div> type="number"
min="0"
max="100"
step="1"
name="lng"
id="lng"
value={this.state.Vegetable.lng}
placeholder="Longitude"
onChange={this.handleChange}
/>
</Col> </Col>
</Row> </FormGroup>
</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>
</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> </Col>
</Row> </Row>
</TabPane> </TabPane>
</TabContent> </TabContent>
<Button color="primary" style={{ marginTop: '16px' }}> <Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
<FaEdit /> <FaEdit />
{' '} {' '}
Mettre à jour Mettre à jour