Use module for Vegetable
This commit is contained in:
parent
b5303c37d4
commit
d8fac4b708
4 changed files with 491 additions and 284 deletions
343
src/Vegetable.js
343
src/Vegetable.js
|
@ -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
145
src/Vegetable/Carousel.js
Normal 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
142
src/Vegetable/Main.js
Normal 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
145
src/Vegetable/Map.js
Normal 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
|
Loading…
Reference in a new issue