275 lines
12 KiB
JavaScript
275 lines
12 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
FlatButton
|
|
} from 'material-ui';
|
|
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker } from 'antd';
|
|
import {startCase} from 'lodash';
|
|
import LoadingDialog from "../LoadingDialog";
|
|
import Loader from 'react-loader-advanced';
|
|
import './style.scss';
|
|
import {DIALOG} from "../../stores/global_ui";
|
|
import EmptyComponent from '../EmptyComponent';
|
|
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
|
import Search from 'material-ui/svg-icons/action/search';
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class HotelSearch extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
value: 1,
|
|
valueMinimal: 0,
|
|
valueMaximal: 0,
|
|
changeSearch:false,
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.authStore = props.appstate.auth;
|
|
this.globalUI = props.appstate.globalUI;
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
}
|
|
|
|
handleChangeMinimal = (valueMinimal) => {
|
|
this.setState({ valueMinimal });
|
|
};
|
|
|
|
handleChangeMaximal = (valueMaximal) => {
|
|
this.setState({ valueMaximal });
|
|
};
|
|
|
|
handleBlur = () => {
|
|
console.log('blur');
|
|
}
|
|
|
|
handleFocus = () => {
|
|
console.log('focus');
|
|
}
|
|
|
|
handleChangeSearch = () => {
|
|
this.setState({
|
|
changeSearch : true
|
|
})
|
|
}
|
|
|
|
handleChangeSearchFalse = () => {
|
|
this.setState({
|
|
changeSearch : false
|
|
})
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
const { valueMinimal, valueMaximal } = this.state;
|
|
|
|
return (
|
|
<div className="wallet containerMiddle">
|
|
<div className="row">
|
|
<div className="col l3 m3 s3 no-padding">
|
|
<Card title="Filter" bordered={true} style={{ width: '100%' }}>
|
|
<p>Min. Points</p>
|
|
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
|
|
|
|
<p>Max. Points</p>
|
|
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
|
|
|
|
<p>Rating Bintang</p>
|
|
<Rate />
|
|
|
|
<p style={{marginTop: 25}}>Fasilitas</p>
|
|
<Checkbox.Group style={{ width: '100%' }} >
|
|
<Row>
|
|
<Col span={16}><Checkbox style={{}} value="Air Conditioning">Air Conditioning</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Check All">Check All</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Bar">Bar</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Business Centre">Business Centre</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Coffee Shop">Coffee Shop</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Gym">Gym</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Internet Access">Internet Access</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Pool">Pool</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Restaurant">Restaurant</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Room Service">Room Service</Checkbox></Col>
|
|
<Col span={16}><Checkbox style={{}} value="Wi-Fi Access">Wi-Fi Access</Checkbox></Col>
|
|
</Row>
|
|
</Checkbox.Group>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col s9 m9 l9">
|
|
<div style={{ marginBottom: '10px',display:'flex','justifyContent' :'space-between', marginLeft:20}}>
|
|
<FlatButton
|
|
className="headerMenu"
|
|
hoverColor="#f1f5f9"
|
|
style={{ background: '#ffffff00' }}
|
|
onClick={() => this.props.history.goBack()}
|
|
label="Back"
|
|
primary={true}
|
|
icon={<NavigationArrowBack />}
|
|
/>
|
|
<Button onClick={this.state.changeSearch == false ? this.handleChangeSearch : this.handleChangeSearchFalse} icon="search">Ganti Pencarian</Button>
|
|
</div>
|
|
{(this.state.changeSearch == true) ? (
|
|
<Row>
|
|
<Card title="Cari & booking hotel disini" style={{marginLeft:20}}>
|
|
<div className="row">
|
|
<div className="col s12 l9 m9">
|
|
<p className="label-form" style={{marginBottom:5}}>Where</p>
|
|
<Select
|
|
allowClear
|
|
showSearch
|
|
showArrow={false}
|
|
style={{ width: '100%' }}
|
|
placeholder="City or airport"
|
|
optionFilterProp="children"
|
|
onChange={this.whereHandleChange}
|
|
onFocus={this.whereHandleFocus}
|
|
onBlur={this.whereHandleBlur}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
>
|
|
<Option value="jakarta">Jakarta</Option>
|
|
<Option value="bali">Bali</Option>
|
|
<Option value="surabaya">Surabaya</Option>
|
|
</Select>
|
|
</div>
|
|
<div className="col s12 m3 l3">
|
|
<p className="label-form" style={{marginBottom:5}}>Rooms</p>
|
|
<Select
|
|
allowClear
|
|
showSearch
|
|
showArrow={false}
|
|
style={{ width: '100%' }}
|
|
placeholder="Select"
|
|
optionFilterProp="children"
|
|
onChange={this.roomsHandleChange}
|
|
onFocus={this.roomsHandleFocus}
|
|
onBlur={this.roomsHandleBlur}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
>
|
|
<Option value="jakarta">1 Adult, 0 Children</Option>
|
|
<Option value="bali">2 Adult, 0 Children</Option>
|
|
<Option value="surabaya">More options</Option>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col s12 m3 l3">
|
|
<p className="label-form" style={{marginBottom:5}}>Check-in</p>
|
|
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
|
</div>
|
|
<div className="col s12 m3 l3">
|
|
<p className="label-form" style={{marginBottom:5}}>Check-out</p>
|
|
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col s0 l10"></div>
|
|
<div className="col s12 l2">
|
|
<Button type="primary" style={{}} onClick={() => {
|
|
this.props.history.push(LINKS.HOTEL_SEARCH);
|
|
console.log('hotel');
|
|
}} icon="search">Search</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Row>
|
|
) : (
|
|
<div />
|
|
)}
|
|
|
|
<Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
|
|
<Row>
|
|
<Card
|
|
style={{marginLeft:20,marginBottom:20}}
|
|
>
|
|
<Row>
|
|
<Col span={8}>
|
|
<img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000092523_wh_3" style={{width:'100%', height:190}} />
|
|
</Col>
|
|
<Col span={1} />
|
|
<Col span={15}>
|
|
<h2>Oasis Amir Hotel</h2>
|
|
<Rate disabled defaultValue={2} style={{marginTop:-20}}/>
|
|
<h4 style={{color:'grey'}}><Icon type="environment" />Senen, Jakarta</h4>
|
|
<div style={{marginBottom:10}}>
|
|
<Tag color="#f50">Air Conditional</Tag>
|
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
|
<Tag color="#87d068">Restaurant</Tag>
|
|
</div>
|
|
<h2 style={{color:'#f96d01'}}>5,390 Poin</h2>
|
|
<Col span={24}>
|
|
<Button type="primary" block style={{}}>Pilih</Button>
|
|
</Col>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
|
|
<Row>
|
|
<Card
|
|
style={{marginLeft:20,marginBottom:20}}
|
|
>
|
|
<Row>
|
|
<Col span={8}>
|
|
<img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000201429_wh_2" style={{width:'100%', height:190}} />
|
|
</Col>
|
|
<Col span={1} />
|
|
<Col span={15}>
|
|
<h2>Hotel Aston</h2>
|
|
<Rate disabled defaultValue={4} style={{marginTop:-20}}/>
|
|
<h4 style={{color:'grey'}}><Icon type="environment" />Kuningan, Jakarta</h4>
|
|
<div style={{marginBottom:10}}>
|
|
<Tag color="#f50">Air Conditional</Tag>
|
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
|
<Tag color="#87d068">Restaurant</Tag>
|
|
<Tag color="#108ee9">Pool</Tag>
|
|
</div>
|
|
<h2 style={{color:'#f96d01'}}>14,230 Poin</h2>
|
|
<Col span={24}>
|
|
<Button type="primary" block style={{}}>Pilih</Button>
|
|
</Col>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
<Row>
|
|
<Card
|
|
style={{marginLeft:20,marginBottom:20}}
|
|
>
|
|
<Row>
|
|
<Col span={8}>
|
|
<img alt="example" src="https://origin.pegipegi.com/jalan/images/pict2L/Y4/Y953534/Y953534020.jpg" style={{width:'100%', height:190}} />
|
|
</Col>
|
|
<Col span={1} />
|
|
<Col span={15}>
|
|
<h2>Hotel Horision</h2>
|
|
<Rate disabled defaultValue={5} style={{marginTop:-20}}/>
|
|
<h4 style={{color:'grey'}}><Icon type="environment" />Menteng, Jakarta</h4>
|
|
<div style={{marginBottom:10}}>
|
|
<Tag color="#f50">Air Conditional</Tag>
|
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
|
<Tag color="#87d068">Restaurant</Tag>
|
|
<Tag color="#108ee9">Pool</Tag>
|
|
</div>
|
|
<h2 style={{color:'#f96d01'}}>20,500 Poin</h2>
|
|
<Col span={24}>
|
|
<Button type="primary" block style={{}}>Pilih</Button>
|
|
</Col>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|