120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Row,
|
|
Col,
|
|
Tooltip
|
|
} from 'reactstrap';
|
|
import {
|
|
FaMapMarkerAlt
|
|
} from 'react-icons/fa';
|
|
import {
|
|
Link
|
|
} from 'react-router-dom';
|
|
import strToSlug from '../StrToSlug'
|
|
|
|
import '../css/Map.css'
|
|
|
|
const MapDimensions = {
|
|
width: 734,
|
|
height: 530,
|
|
};
|
|
|
|
export default class Map extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
selectedType: this.props.selectedType,
|
|
selectedVegetable: this.props.selectedVegetable,
|
|
Map: {
|
|
width: '20px',
|
|
height: '20px',
|
|
},
|
|
tooltipOpen: false
|
|
}
|
|
|
|
this.selectVegetable = this.selectVegetable.bind(this);
|
|
this.setMap = this.setMap.bind(this);
|
|
this.toggle = this.toggle.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
selectedType: newProps.selectedType,
|
|
selectedVegetable: newProps.selectedVegetable
|
|
}));
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('resize', this.setMap);
|
|
this.setMap();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('resize', this.setMap);
|
|
}
|
|
|
|
setMap() {
|
|
const width = document.getElementById('MapContainer').clientWidth;
|
|
let MapWidth = MapDimensions.width;
|
|
let MapHeight = MapDimensions.height;
|
|
|
|
if (width < MapDimensions.width) {
|
|
MapWidth = width;
|
|
MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);
|
|
}
|
|
|
|
this.setState({
|
|
Map: {
|
|
width: MapWidth,
|
|
height: MapHeight,
|
|
},
|
|
});
|
|
}
|
|
|
|
selectVegetable(vegetable) {
|
|
this.setState({
|
|
selectedVegetable: vegetable
|
|
})
|
|
this.props.selectVegetable(vegetable)
|
|
}
|
|
|
|
toggle(id) {
|
|
this.setState(prevState => ({
|
|
tooltipOpen: prevState.tooltipOpen === id ? false : id
|
|
}));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Row className="with-margin">
|
|
<Col className="with-border with-background">
|
|
<div id="MapContainer">
|
|
<div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
|
|
{
|
|
this.state.selectedType &&
|
|
this.state.selectedType.Vegetables &&
|
|
this.state.selectedType.Vegetables.map((vegetable, key) =>
|
|
(
|
|
<Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}
|
|
key={key}
|
|
className={`mapMarker ${this.state.selectedVegetable && this.state.selectedVegetable.id === vegetable.id ? 'selected' : ''}`}
|
|
style={{ left: `calc(${vegetable.lat}% - 16px)`, top: `calc(${vegetable.lng}% - 16px)` }}
|
|
onMouseOver={(e) => this.selectVegetable(vegetable)}
|
|
>
|
|
<Tooltip placement='top' isOpen={this.state.tooltipOpen === vegetable.id} target={'Tooltip-' + vegetable.id} toggle={() => this.toggle(vegetable.id)}>
|
|
{vegetable.name}
|
|
</Tooltip>
|
|
<FaMapMarkerAlt id={'Tooltip-' + vegetable.id} />
|
|
</Link>
|
|
)
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
} |