105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import Filters from './Filters';
|
|
import Listings from './Listings';
|
|
|
|
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');
|
|
var options = {
|
|
componentRestrictions: {country: "BA"}
|
|
};
|
|
var searchBox = new google.maps.places.Autocomplete(input, options);
|
|
searchBox.addListener('places_changed', function() {
|
|
console.log('search changed', searchBox.getPlaces());
|
|
});
|
|
control.addEventListener('click', (e) => {
|
|
this.setState({
|
|
mapClicked: true
|
|
});
|
|
});
|
|
control.index = 1;
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
|
|
|
|
}
|
|
|
|
onCloseClick(e) {
|
|
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="Kuda?"
|
|
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">
|
|
<div className="filters-close-button">
|
|
<button onClick={this.onCloseClick.bind(this)}>Close me!</button>
|
|
</div>
|
|
<Filters />
|
|
<Listings />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="left" style={leftStyle} className={leftClass}>
|
|
<div id="map" ref="map">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default Main;
|