Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filter mobil sudah ditambah

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-03 03:52:03 +07:00
parent 77481d791d
commit bef6d01338
2 changed files with 102 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/common/pages/Car/CarSearch.js
View File

@ -3,7 +3,7 @@ import {inject, observer} from 'mobx-react';
import { import {
FlatButton FlatButton
} from 'material-ui'; } from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker } from 'antd'; import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, TimePicker } from 'antd';
import {startCase} from 'lodash'; import {startCase} from 'lodash';
import LoadingDialog from "../LoadingDialog"; import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced'; import Loader from 'react-loader-advanced';
@ -13,6 +13,8 @@ import EmptyComponent from '../EmptyComponent';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back'; import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import Search from 'material-ui/svg-icons/action/search'; import Search from 'material-ui/svg-icons/action/search';
const format = 'HH:mm';
@inject('appstate') @inject('appstate')
@observer @observer
export default class CarSearch extends React.Component { export default class CarSearch extends React.Component {
@ -79,25 +81,30 @@ export default class CarSearch extends React.Component {
<p>Max. Points</p> <p>Max. Points</p>
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} /> <Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
<p>Rating Bintang</p> <p style={{marginTop: 25}}>Kelas Point</p>
<Rate />
<p style={{marginTop: 25}}>Fasilitas</p>
<Checkbox.Group style={{ width: '100%' }} > <Checkbox.Group style={{ width: '100%' }} >
<Row> <Row>
<Col span={16}><Checkbox style={{}} value="Air Conditioning">Air Conditioning</Checkbox></Col> <Col span={16}><Checkbox style={{}} value="Mini">Mini</Checkbox></Col>
<Col span={16}><Checkbox style={{}} value="Check All">Check All</Checkbox></Col> <Col span={16}><Checkbox style={{}} value="Special">Special</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> </Row>
</Checkbox.Group> </Checkbox.Group>
<p style={{marginTop: 25}}>Penyejuk Mobil</p>
<Checkbox.Group style={{ width: '100%' }} >
<Row>
<Col span={16}><Checkbox style={{}} value="Air Conditional">Air Conditional</Checkbox></Col>
</Row>
</Checkbox.Group>
<p style={{marginTop: 25}}>Penyejuk Mobil</p>
<Checkbox.Group style={{ width: '100%' }} >
<Row>
<Col span={16}><Checkbox style={{}} value="Automatic">Automatic</Checkbox></Col>
</Row>
<Row>
<Col span={16}><Checkbox style={{}} value="Manual">Manual</Checkbox></Col>
</Row>
</Checkbox.Group>
</Card> </Card>
</div> </div>
@ -118,56 +125,91 @@ export default class CarSearch extends React.Component {
{(this.state.changeSearch == true) ? ( {(this.state.changeSearch == true) ? (
<Row> <Row>
<Card title="Ganti pencarian mobil" style={{marginLeft:20}}> <Card title="Ganti pencarian mobil" style={{marginLeft:20}}>
<div className="row"> <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
<div className="col s12 l9 m9"> <div className="col s12 l4 m4">
<p className="label-form" style={{marginBottom:5}}>Where</p> <p className="label-form" style={{marginBottom:5}}>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" style={{marginBottom:5}}>City</p>
<Select <Select
allowClear allowClear
showSearch showSearch
showArrow={false} showArrow={false}
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder="City or airport" placeholder="Select City"
optionFilterProp="children" optionFilterProp="children"
onChange={this.whereHandleChange} onChange={this.whereHandleChange}
onFocus={this.whereHandleFocus} onFocus={this.whereHandleFocus}
onBlur={this.whereHandleBlur} onBlur={this.whereHandleBlur}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
> >
<Option value="jakarta">Jakarta</Option> <Option value="Jakarta">Jakarta</Option>
<Option value="bali">Bali</Option> <Option value="Bali">Bali</Option>
<Option value="surabaya">Surabaya</Option> <Option value="Surabaya">Surabaya</Option>
</Select> </Select>
</div> </div>
<div className="col s12 m3 l3"> <div className="col s12 m4 l4">
<p className="label-form" style={{marginBottom:5}}>Rooms</p> <p className="label-form" style={{marginBottom:5}}>Lokasi</p>
<Select <Select
allowClear allowClear
showSearch showSearch
showArrow={false} showArrow={false}
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder="Select" placeholder="Select Location"
optionFilterProp="children" optionFilterProp="children"
onChange={this.roomsHandleChange} onChange={this.whereHandleChange}
onFocus={this.roomsHandleFocus} onFocus={this.whereHandleFocus}
onBlur={this.roomsHandleBlur} onBlur={this.whereHandleBlur}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
> >
<Option value="jakarta">1 Adult, 0 Children</Option> <Option value="Jakarta Airport">Jakarta Airport</Option>
<Option value="bali">2 Adult, 0 Children</Option> <Option value="Jakarta Downtown">Jakarta Downtown</Option>
<Option value="surabaya">More options</Option> <Option value="Monas">Monas</Option>
</Select> </Select>
</div> </div>
</div> </div>
<div className="row"> <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
<div className="col s12 m3 l3"> <div className="col s12 l3 m3">
<p className="label-form" style={{marginBottom:5}}>Check-in</p> <p className="label-form" style={{marginBottom:5}}>Start Date</p>
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} /> <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
</div> </div>
<div className="col s12 m3 l3"> <div className="col s12 m3 l3">
<p className="label-form" style={{marginBottom:5}}>Check-out</p> <p className="label-form" style={{marginBottom:5}}>Start Time</p>
<TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />
</div>
<div className="col s12 m3 l3" style={{marginBottom:5}}>
<p className="label-form" style={{marginBottom:5}}>Until Date</p>
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} /> <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
</div> </div>
</div> <div className="col s12 m3 l3" style={{marginBottom:5}}>
<p className="label-form" style={{marginBottom:5}}>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="row">
<div className="col s0 l10"></div> <div className="col s0 l10"></div>
<div className="col s12 l2"> <div className="col s12 l2">

2
src/common/pages/Car/index.js
View File

@ -153,7 +153,7 @@ export default class CarComponent extends React.Component {
</div> </div>
</div> </div>
<div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}> <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
<div className="col s12 l3 m3"> <div className="col s12 l3 m3">
<p className="label-form">Start Date</p> <p className="label-form">Start Date</p>
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} /> <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
</div> </div>