125 lines
3.0 KiB
JavaScript
125 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import Filters from './Filters';
|
|
import Listings from './Listings';
|
|
import { pacSelectFirst } from '../helpers/googleMaps';
|
|
|
|
class Main extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const uluru = {lat: 43.845031, lng: 18.4019262};
|
|
const map = new google.maps.Map(this.refs.map, {
|
|
zoom: 13,
|
|
center: uluru,
|
|
streetViewControl: false,
|
|
mapTypeControl: false
|
|
});
|
|
const marker = new google.maps.Marker({
|
|
position: uluru,
|
|
map: map
|
|
});
|
|
|
|
var control = document.createElement('div');
|
|
control.classList.add('filters-btn-toggle');
|
|
control.innerHTML = '<button>Filters</button>';
|
|
control.style = "top: 200px;"
|
|
|
|
var input = document.getElementById('gmaps-places-input');
|
|
|
|
pacSelectFirst(input);
|
|
var options = {
|
|
componentRestrictions: {country: "BA"}
|
|
};
|
|
var searchBox = new google.maps.places.Autocomplete(input, options);
|
|
|
|
searchBox.addListener('place_changed', function() {
|
|
var place = searchBox.getPlace();
|
|
|
|
if (!place.geometry) {
|
|
return;
|
|
}
|
|
|
|
if (place.geometry.viewport) {
|
|
map.fitBounds(place.geometry.viewport);
|
|
|
|
} else {
|
|
map.setCenter(place.geometry.location);
|
|
map.setZoom(18);
|
|
}
|
|
});
|
|
|
|
control.addEventListener('click', (e) => {
|
|
this.setState({
|
|
mapClicked: true
|
|
});
|
|
});
|
|
control.index = 1;
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
|
|
this.map = map;
|
|
}
|
|
|
|
onCloseClick(e) {
|
|
if (this.state.mapClicked) {
|
|
setTimeout(() => {
|
|
google.maps.event.trigger(this.map, 'resize');
|
|
}, 100);
|
|
}
|
|
|
|
this.setState({
|
|
mapClicked: false
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const leftStyle = {};
|
|
const rightStyle = {};
|
|
|
|
let leftClass = 'left-base';
|
|
let rightClass = 'right-base';
|
|
|
|
if (this.state.mapClicked) {
|
|
leftClass = 'left-hidden';
|
|
rightClass = 'right-shown';
|
|
}
|
|
|
|
return (
|
|
<div id="container">
|
|
<div id="header">
|
|
<a className="hamburger-menu">K</a>
|
|
<span className="title">Kiwi</span>
|
|
<input
|
|
id="gmaps-places-input"
|
|
placeholder="Unesite adresu, naselje ili grad"
|
|
className="where-to"
|
|
type="text"></input>
|
|
<div className="view-types">
|
|
<a className="view-type-left">
|
|
<i className="btn-select-map fa fa-list"></i>
|
|
</a>
|
|
<a className="view-type-right">
|
|
<i className="view-type-map-icon fa fa-map-marker"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="right" style={rightStyle} className={rightClass}>
|
|
<div className="right-content">
|
|
<Filters onClose={this.onCloseClick.bind(this)}/>
|
|
<Listings />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="left" style={leftStyle} className={leftClass}>
|
|
<div id="map" ref="map">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default Main;
|