146 lines
3.2 KiB
JavaScript
146 lines
3.2 KiB
JavaScript
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
|