Use module for Vegetable

This commit is contained in:
dbroqua 2018-10-02 20:44:28 +02:00
parent b5303c37d4
commit d8fac4b708
4 changed files with 491 additions and 284 deletions

View file

@ -3,40 +3,27 @@ import React, {
} from 'react';
import {
Container,
Row,
Col,
Form,
FormGroup,
Button,
Label,
Input,
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
} from 'reactstrap';
import classnames from 'classnames';
import {
FaEdit,
FaMapMarkerAlt,
FaFileImage,
} from 'react-icons/fa';
import Navigation from './Navigation';
import Header from './Header';
import API from './Api';
import VegetableMain from './Vegetable/Main'
import VegetableCarousel from './Vegetable/Carousel'
import VegetableMap from './Vegetable/Map'
import './Vegetable.css';
const Map = {
width: 734,
height: 530,
};
class Vegetable extends Component {
constructor(props) {
super(props);
@ -51,27 +38,17 @@ class Vegetable extends Component {
},
imagePreviewUrl: '',
imagesPreviewUrls: [],
Map: {
width: '20px',
height: '20px',
},
activeTab: '1',
activeIndex: 0,
availableProperties: []
};
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.changeMainPicture = this.changeMainPicture.bind(this);
this.addPicture = this.addPicture.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.updateValueFromChild = this.updateValueFromChild.bind(this);
this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
}
@ -80,26 +57,11 @@ class Vegetable extends Component {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab,
}, () => {
this.setMap();
});
}
}
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;
updateValueFromChild(name, value) {
this.setState(prevState => ({
Vegetable: {
...prevState.Vegetable,
@ -108,51 +70,33 @@ class Vegetable extends Component {
}));
}
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);
changeMainPicture(file, reader) {
this.setState(prevState => ({
Vegetable: {
...prevState.Vegetable,
mainPictureImported: file,
},
imagePreviewUrl: reader.result,
}));
}
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
}));
};
addPicture(file, reader) {
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) {
@ -194,6 +138,19 @@ class Vegetable extends Component {
}
getVegetable(categoryId, vegetableId) {
API.get('properties')
.then(res => {
//availableProperties
if (res.status === 200) {
this.setState({
availableProperties: res.data.rows
});
}
})
.catch(e => {
alert('Erreur lors de la récupération des types de propriétés');
});
API.get(`types/${categoryId}/vegetables/${vegetableId}`)
.then((res) => {
if (res.status === 200) {
@ -222,71 +179,7 @@ class Vegetable extends Component {
});
}
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,
},
});
}
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 {
activeIndex,
} = this.state;
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 (
<div>
<Header />
@ -321,143 +214,25 @@ class Vegetable extends Component {
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<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="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>
</Row>
<VegetableMain
Vegetable={this.state.Vegetable}
imagePreviewUrl={this.state.imagePreviewUrl}
updateValue={this.updateValueFromChild}
changeMainPicture={this.changeMainPicture}
/>
</TabPane>
<TabPane tabId="2">
<Row>
<Col xs={12} sm={4}>
<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>
</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>
<VegetableMap
Vegetable={this.state.Vegetable}
updateValue={this.updateValueFromChild}
/>
</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>
<VegetableCarousel
addPicture={this.addPicture}
imagesPreviewUrls={this.state.imagesPreviewUrls}
activeIndex={this.state.activeIndex}
/>
</TabPane>
</TabContent>

145
src/Vegetable/Carousel.js Normal file
View file

@ -0,0 +1,145 @@
import React, {
Component,
} from 'react';
import {
Row,
Col,
FormGroup,
Label,
Input,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
} from 'reactstrap';
import {
FaFileImage,
} from 'react-icons/fa';
class VegetableCarousel extends Component {
constructor(props) {
super(props);
this.state = {
imagesPreviewUrls: this.props.imagesPreviewUrls,
activeIndex: 0
};
this.onPictureChange = this.onPictureChange.bind(this);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
this.onExited = this.onExited.bind(this);
this.onExiting = this.onExiting.bind(this);
}
componentWillReceiveProps(nextProps) {
if ( nextProps.imagesPreviewUrls) {
this.setState({
imagesPreviewUrls: nextProps.imagesPreviewUrls
});
}
if ( nextProps.activeIndex) {
this.setState({
activeIndex: nextProps.activeIndex
});
}
}
onPictureChange(e) {
e.preventDefault();
const reader = new FileReader();
const file = e.target.files[0];
reader.onloadend = () => {
this.props.addPicture(file, reader);
};
reader.readAsDataURL(file);
}
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,
});
}
onExiting() {
this.animating = true;
}
onExited() {
this.animating = false;
}
render() {
const {
activeIndex,
} = this.state;
return (
<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>
)
}
}
export default VegetableCarousel;

142
src/Vegetable/Main.js Normal file
View file

@ -0,0 +1,142 @@
import React, {
Component,
} from 'react';
import {
Row,
Col,
FormGroup,
Label,
Input,
} from 'reactstrap';
import {
FaFileImage,
} from 'react-icons/fa';
class VegetableMain extends Component {
constructor(props) {
super(props);
this.state = {
Vegetable: {
name: '',
lat: 0,
lng: 0,
description: '',
Pictures: [],
},
imagePreviewUrl: '',
};
this.handleChange = this.handleChange.bind(this);
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
if (nextProps.Vegetable) {
this.setState({
Vegetable: nextProps.Vegetable
});
}
if (nextProps.imagePreviewUrl) {
this.setState({
imagePreviewUrl: nextProps.imagePreviewUrl
});
}
}
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,
},
}));
this.props.updateValue(name, value)
}
onImageChange(e) {
e.preventDefault();
const reader = new FileReader();
const file = e.target.files[0];
reader.onloadend = () => {
this.props.changeMainPicture(file, reader);
};
reader.readAsDataURL(file);
}
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 (
<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="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>
</Row>
);
}
}
export default VegetableMain;

145
src/Vegetable/Map.js Normal file
View file

@ -0,0 +1,145 @@
import React, {
Component,
} from 'react';
import {
Row,
Col,
FormGroup,
Label,
Input,
} from 'reactstrap';
import {
FaMapMarkerAlt
} from 'react-icons/fa';
const Map = {
width: 734,
height: 530,
};
class VegetableMap extends Component {
constructor(props) {
super(props);
this.state = {
Vegetable: {
name: '',
lat: 0,
lng: 0,
description: '',
Pictures: [],
},
Map: {
width: '20px',
height: '20px',
},
};
this.setMap = this.setMap.bind(this);
this.handleChange = this.handleChange.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.Vegetable) {
this.setState({
Vegetable: nextProps.Vegetable
});
}
setTimeout( () => {
this.setMap();
}, 200);
}
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,
},
}));
this.props.updateValue(name, value)
}
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() {
return (
<Row>
<Col xs={12} sm={4}>
<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>
</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>
)
}
}
export default VegetableMap