pencarian mobil sudah dibuat
This commit is contained in:
@@ -398,7 +398,7 @@ export default class App extends React.Component {
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/car.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Car</span></MenuItem></Link>
|
||||
|
||||
@@ -27,7 +27,8 @@ import UploadAdminDetail from "../Items/FormItems/UploadAdmin";
|
||||
import Tasks from './../Tasks/index';
|
||||
import HotelComponent from '../Hotel';
|
||||
import HotelSearch from './../Hotel/HotelSearch';
|
||||
// import TasksDetail from './../Tasks/TaskDetail/index';
|
||||
import CarComponent from '../Car';
|
||||
import CarSearch from './../Car/CarSearch'
|
||||
import CustomerComponent from "../Customers/index";
|
||||
import CustomerDetail from "../CustomerDetail/index";
|
||||
import WalletCostumer from '../CustomerDetail/Wallet/index';
|
||||
@@ -75,6 +76,8 @@ export default class ComponentName extends React.Component {
|
||||
<Route exact component={WalletComponent} path={LINKS.WALLET}/>
|
||||
<Route exact component={HotelComponent} path={LINKS.HOTEL}/>
|
||||
<Route exact component={HotelSearch} path={LINKS.HOTEL_SEARCH}/>
|
||||
<Route exact component={CarComponent} path={LINKS.CAR}/>
|
||||
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||
<Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
|
||||
<Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
|
||||
|
||||
274
src/common/pages/Car/CarSearch.js
Normal file
274
src/common/pages/Car/CarSearch.js
Normal file
@@ -0,0 +1,274 @@
|
||||
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 CarSearch 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">
|
||||
<Row>
|
||||
<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="Ganti pencarian mobil" 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 }} />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
198
src/common/pages/Car/index.js
Normal file
198
src/common/pages/Car/index.js
Normal file
@@ -0,0 +1,198 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
AutoComplete,
|
||||
Avatar,
|
||||
Card,
|
||||
CardHeader,
|
||||
Dialog,
|
||||
Divider,
|
||||
FlatButton,
|
||||
FontIcon,
|
||||
IconMenu,
|
||||
MenuItem,
|
||||
RaisedButton,
|
||||
SelectField,
|
||||
TextField
|
||||
} from 'material-ui';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
DatePicker,
|
||||
Button,
|
||||
// Card,
|
||||
Slider,
|
||||
// Divider,
|
||||
Rate,
|
||||
Checkbox,
|
||||
Icon,
|
||||
TimePicker,
|
||||
// Avatar,
|
||||
Tag} from "antd"
|
||||
import moment from 'moment';
|
||||
import get from 'lodash.get';
|
||||
import Loader from 'react-loader-advanced';
|
||||
import LoadingDialog from "../LoadingDialog";
|
||||
import omit from 'lodash.omit';
|
||||
import {LINKS} from "../../routes";
|
||||
|
||||
import './style.scss';
|
||||
const format = 'HH:mm';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CarComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.appstate = props.appstate;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
console.log('COMPONENT GONE');
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row" style={{marginTop:50}}>
|
||||
|
||||
<div className="col s12 col-sm-noPadding">
|
||||
<Card className="animated fadeIn cardLite" style={{marginBottom: (window.innerWidth < 600) ? 0 : 10, height: (window.innerWidth < 600) ? "100%" : "auto"}}>
|
||||
<CardHeader
|
||||
title="Car"
|
||||
titleColor={"#ffffff"}
|
||||
style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
|
||||
subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
|
||||
subtitle="Sewa mobil dengan point anda"
|
||||
avatar={<Avatar backgroundColor={"transparent"}
|
||||
style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
|
||||
src="/assets/images/icon/car-icon.png"/>}
|
||||
/>
|
||||
<Divider/>
|
||||
<Loader
|
||||
show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
|
||||
messageStyle={{textAlign: 'center'}}
|
||||
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||
<div style={{padding: '24px 14px 14px 14px'}}>
|
||||
<div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
|
||||
<div className="col s12 l4 m4">
|
||||
<p className="label-form">Country</p>
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
showArrow={false}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select Country"
|
||||
optionFilterProp="children"
|
||||
onChange={this.whereHandleChange}
|
||||
onFocus={this.whereHandleFocus}
|
||||
onBlur={this.whereHandleBlur}
|
||||
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||
>
|
||||
<Option value="Indonesia">Indonesia</Option>
|
||||
<Option value="Amerika">Amerika</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="col s12 m4 l4">
|
||||
<p className="label-form">City</p>
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
showArrow={false}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select City"
|
||||
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 m4 l4">
|
||||
<p className="label-form">Lokasi</p>
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
showArrow={false}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select Location"
|
||||
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 Airport">Jakarta Airport</Option>
|
||||
<Option value="Jakarta Downtown">Jakarta Downtown</Option>
|
||||
<Option value="Monas">Monas</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
|
||||
<div className="col s12 l3 m3">
|
||||
<p className="label-form">Start Date</p>
|
||||
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
||||
</div>
|
||||
<div className="col s12 m3 l3">
|
||||
<p className="label-form">Start Time</p>
|
||||
<TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />
|
||||
</div>
|
||||
<div className="col s12 m3 l3">
|
||||
<p className="label-form">Until Date</p>
|
||||
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
||||
</div>
|
||||
<div className="col s12 m3 l3">
|
||||
<p className="label-form">End Time</p>
|
||||
<TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />,
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" style={{marginTop:10}}>
|
||||
<div className="col s12 m6 l6">
|
||||
<Checkbox style={{}} value="Usia pengendara 25 sampai 70 tahun?">Usia pengendara 25 sampai 70 tahun?</Checkbox>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<Checkbox style={{}} value="Kembali ke lokasi yang sama">Kembali ke lokasi yang sama</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s0 l10"></div>
|
||||
<div className="col s12 l2">
|
||||
<Button type="primary" onClick={() => {
|
||||
this.props.history.push(LINKS.CAR_SEARCH);
|
||||
console.log('car');
|
||||
}} icon="search">Search</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Loader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
50
src/common/pages/Car/style.scss
Normal file
50
src/common/pages/Car/style.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.wallet {
|
||||
margin-top: 35px;
|
||||
.container {
|
||||
padding: 25px;
|
||||
|
||||
.ant-card {
|
||||
background: #fff;
|
||||
border-radius: 0px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
}
|
||||
.ant-card-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 0px solid #e9e9e9;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.ant-card:hover {
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: transparent;
|
||||
}
|
||||
.ant-card-body-dashboard {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.label-form {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: rgb(153, 153, 153);
|
||||
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
.backgroundImage {
|
||||
height: 182px;
|
||||
background-image: url('/assets/images/material3.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
min-height: 75px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
FlatButton
|
||||
} from 'material-ui';
|
||||
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider } from 'antd';
|
||||
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';
|
||||
@@ -103,7 +103,7 @@ export default class HotelSearch extends React.Component {
|
||||
|
||||
<div className="col s9 m9 l9">
|
||||
<Row>
|
||||
<div style={{ marginBottom: '10px',display:'flex','justifyContent' :'space-between'}}>
|
||||
<div style={{ marginBottom: '10px',display:'flex','justifyContent' :'space-between', marginLeft:20}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
hoverColor="#f1f5f9"
|
||||
@@ -117,15 +117,73 @@ export default class HotelSearch extends React.Component {
|
||||
</div>
|
||||
{(this.state.changeSearch == true) ? (
|
||||
<Row>
|
||||
<div>
|
||||
ini form search
|
||||
</div>
|
||||
<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: 15 }} />
|
||||
<Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
|
||||
<Card
|
||||
style={{marginLeft:20,marginBottom:20}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user