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

pencarian mobil sudah dibuat

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-03 03:38:33 +07:00
parent b9e3d7e4b3
commit 77481d791d
8 changed files with 594 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/icon/car-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 B

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

@ -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>

5
src/common/pages/App/routes.js
View File

@ -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
View 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
View 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
View 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%;
}
}

70
src/common/pages/Hotel/HotelSearch.js
View File

@ -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}}
>

4
src/common/routes.js
View File

@ -107,7 +107,9 @@ export const LINKS = {
CUSTOM_MENU : '/app/custom_menu',
PROMOTION:'/app/promotion',
HOTEL:'/app/hotel',
HOTEL_SEARCH:'/app/hotel/search'
HOTEL_SEARCH:'/app/hotel/search',
CAR:'/app/car',
CAR_SEARCH:'/app/car/search'
};
@inject('appstate')