Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
210
src/common/pages/Service/Railink/Confirmation.js
Normal file
210
src/common/pages/Service/Railink/Confirmation.js
Normal file
@@ -0,0 +1,210 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton, RadioButtonGroup,
|
||||
Tabs, Tab, TextField, Dialog
|
||||
} from 'material-ui';
|
||||
import {withRouter} from 'react-router';
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class Confirmation 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;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const data = {
|
||||
ka_name: 'ARS (U2)',
|
||||
ka_number: '1',
|
||||
class: 'Executive (A)',
|
||||
departureStation: 'MEDAN (MDN)',
|
||||
destinationStation: 'KUALA NAMU (KLN)',
|
||||
departureDate: '22 Sep 2017, 03:30',
|
||||
destinationDate: '22 Sep 2017, 04:00',
|
||||
adultPrice: '100000',
|
||||
childPrice: '100000',
|
||||
totalBuy: '2'
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="animated fadeIn">
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Back"
|
||||
style={{marginLeft:'0px'}}
|
||||
onClick={this.props.onClickBack}
|
||||
>
|
||||
arrow_back
|
||||
</IconButton>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text="Confirmation"/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{padding: '14px'}}>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Railink Name</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.ka_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Class</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.class}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Departure Station</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.departureStation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Destination Station</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.destinationStation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Departure Date</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.departureDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Destination Date</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>{data.destinationDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l4">
|
||||
<p style={{fontWeight: 'bolder'}}>Ticket Price</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Adult</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>Rp. {data.adultPrice} x {data.totalBuy} {(data.totalBuy > 1) ? <span>Passengers</span> : <span>Passenger</span>}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p>Child</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>Rp. {data.childPrice} x {data.totalBuy} {(data.totalBuy > 1) ? <span>Passengers</span> : <span>Passenger</span>}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row hover">
|
||||
<div className="col l3">
|
||||
<p style={{fontWeight: 'bolder'}}>Total</p>
|
||||
</div>
|
||||
<div className="col l1">
|
||||
<p>:</p>
|
||||
</div>
|
||||
<div className="col l8">
|
||||
<p>Rp. {Number(data.adultPrice + data.childPrice)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col l12">
|
||||
<blockquote>
|
||||
<p style={{fontWeight: 'bolder'}}>Warning</p>
|
||||
<br />
|
||||
The above price does not include the admin fee.
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col m10" />
|
||||
<div className="col m2">
|
||||
<RaisedButton label="Confirm" primary={true} style={{marginTop: '30px'}} icon={ <FontIcon className="material-icons">check</FontIcon>} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
180
src/common/pages/Service/Railink/FormBook.js
Normal file
180
src/common/pages/Service/Railink/FormBook.js
Normal file
@@ -0,0 +1,180 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton, RadioButtonGroup,
|
||||
Tabs, Tab, TextField, Dialog
|
||||
} from 'material-ui';
|
||||
import {withRouter} from 'react-router';
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FormBook 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;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const data = {
|
||||
ka_name: 'ARS (U2)',
|
||||
ka_number: '1',
|
||||
class: 'Executive (A)',
|
||||
departureStation: 'MEDAN (MDN)',
|
||||
destinationStation: 'KUALA NAMU (KLN)',
|
||||
departureDate: '22 Sep 2017, 03:30',
|
||||
destinationDate: '22 Sep 2017, 04:00',
|
||||
adultPrice: '100,000',
|
||||
childPrice: '100,000',
|
||||
totalBuy: '2'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<div className="col s12 l7 left-panel">
|
||||
<div className="row">
|
||||
<Card>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Back"
|
||||
style={{marginLeft:'0px'}}
|
||||
onClick={this.props.onClickBack}
|
||||
>
|
||||
arrow_back
|
||||
</IconButton>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text="Booking Train"/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{padding: '14px'}}>
|
||||
<div className="row">
|
||||
<div className="col s12 m12 l12">
|
||||
<p className="label-form">Customer's Name</p>
|
||||
<TextField
|
||||
hintText="Your Name Here"
|
||||
fullWidth={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<p className="label-form">Phone Number</p>
|
||||
<TextField
|
||||
hintText="E.g 081167930404"
|
||||
fullWidth={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Email</p>
|
||||
<TextField hintText="E.g email@example.com" fullWidth={true}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col m6" />
|
||||
<div className="col m6" style={{textAlign:'right'}}>
|
||||
<RaisedButton label={"Proceed"} onClick={this.props.onConfirm} primary={true} style={{marginTop: '30px'}} icon={ <FontIcon className="material-icons">check</FontIcon>} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 l5">
|
||||
<Card>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Train'}/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{padding:'14px'}}>
|
||||
<div className="row">
|
||||
<div className="col m12">
|
||||
Train Name : {data.ka_name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col m6">
|
||||
<p>Train Number : {data.ka_number}</p>
|
||||
</div>
|
||||
<div className="col m6">
|
||||
<p className="passive">22 September 2017</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div>
|
||||
<div className="col l12">
|
||||
<div className="row">
|
||||
<div className="col l6 " style={{textAlign:'center'}}>
|
||||
<p className="top-text">{data.departureDate}</p>
|
||||
</div>
|
||||
<div className="col l6 ">
|
||||
<p className="top-text">{data.departureStation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col l6" style={{textAlign:'center', marginTop: '-10px'}}>
|
||||
<FontIcon className="material-icons" style={{color:'#B7B7B7'}}>directions_railway</FontIcon>
|
||||
<FontIcon className="material-icons" style={{color:'#B7B7B7'}}>arrow_downward</FontIcon>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col l6 " style={{textAlign:'center'}}>
|
||||
<p className="top-text">{data.destinationDate}</p>
|
||||
</div>
|
||||
<div className="col l6 ">
|
||||
<p className="top-text">{data.destinationStation}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
285
src/common/pages/Service/Railink/FormRailink.js
Normal file
285
src/common/pages/Service/Railink/FormRailink.js
Normal file
@@ -0,0 +1,285 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton, RadioButtonGroup,DropDownMenu,
|
||||
Tabs, Tab,
|
||||
} from 'material-ui';
|
||||
import { withRouter } from 'react-router';
|
||||
import { BrowserRouter as Router, Route } from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FormRailink extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
tabSelected: '/app/service/railink',
|
||||
returnDateDisabled:true,
|
||||
adult:1,
|
||||
children:0,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
handleRadioButton = (event,value) =>{
|
||||
let a;
|
||||
if(value == 'return'){
|
||||
a = false;
|
||||
}
|
||||
else{
|
||||
a = true;
|
||||
}
|
||||
this.setState({
|
||||
returnDateDisabled:a
|
||||
})
|
||||
};
|
||||
|
||||
handleDepatureRailink = (railink) =>{
|
||||
this.setState({
|
||||
depatureRailink : railink.value
|
||||
})
|
||||
};
|
||||
|
||||
handleDestinationRailink = (railink) =>{
|
||||
this.setState({
|
||||
destinationRailink : railink.value
|
||||
})
|
||||
};
|
||||
|
||||
handleChangeTab = (tabSelected) => {
|
||||
this.setState({
|
||||
tabSelected: tabSelected,
|
||||
});
|
||||
this.props.history.push(tabSelected);
|
||||
};
|
||||
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
handleAdult = (event, index, value) => {
|
||||
this.setState({
|
||||
adult: value
|
||||
});
|
||||
};
|
||||
|
||||
handleChild = (event, index, value) => {
|
||||
this.setState({
|
||||
children: value
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const raillinkConfig = {
|
||||
text : 'railink',
|
||||
value : 'value'
|
||||
}
|
||||
const railink = [,
|
||||
{railink: 'Kuala Namu', value: 1},
|
||||
{railink: 'Medan', value:2}
|
||||
];
|
||||
|
||||
|
||||
const adult = [
|
||||
<MenuItem key={1} value={1} primaryText="1"/>,
|
||||
<MenuItem key={2} value={2} primaryText="2"/>,
|
||||
<MenuItem key={3} value={3} primaryText="3"/>,
|
||||
<MenuItem key={4} value={4} primaryText="4"/>,
|
||||
];
|
||||
|
||||
const child = [
|
||||
<MenuItem key={0} value={0} primaryText="0"/>,
|
||||
<MenuItem key={1} value={1} primaryText="1"/>,
|
||||
<MenuItem key={2} value={2} primaryText="2"/>,
|
||||
<MenuItem key={3} value={3} primaryText="3"/>,
|
||||
<MenuItem key={4} value={4} primaryText="4"/>,
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={(this.state.value == 1)? 'Find Schedule' : 'Find Transaction Data'}/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<FontIcon className="muidocs-icon-custom-sort"/>
|
||||
<ToolbarSeparator/>
|
||||
<DropDownMenu value={this.state.value} onChange={this.handleChange}>
|
||||
<MenuItem value={1} primaryText="Schedule" />
|
||||
</DropDownMenu>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{padding: '14px'}}>
|
||||
<div className="row">
|
||||
<div className="col s12 l6">
|
||||
<div>
|
||||
<p className="label-form">Depature Station</p>
|
||||
<AutoComplete
|
||||
hintText="Choose Station"
|
||||
dataSource={railink}
|
||||
dataSourceConfig={raillinkConfig}
|
||||
filter={AutoComplete.caseInsensitiveFilter}
|
||||
onNewRequest={this.handleDepatureRailink}
|
||||
openOnFocus={true}
|
||||
menuStyle={{maxHeight: 300}}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 l6">
|
||||
<div>
|
||||
<p className="label-form">Destination Station</p>
|
||||
<AutoComplete
|
||||
hintText="Choose Station"
|
||||
dataSource={railink}
|
||||
dataSourceConfig={raillinkConfig}
|
||||
filter={AutoComplete.caseInsensitiveFilter}
|
||||
onNewRequest={this.handleDestinationRailink}
|
||||
openOnFocus={true}
|
||||
menuStyle={{maxHeight: 300}}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 l4">
|
||||
<div>
|
||||
<p className="label-form">Type journey</p>
|
||||
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light"
|
||||
style={{marginTop: 20, display: 'flex'}}
|
||||
defaultSelected='oneway'
|
||||
onChange={this.handleRadioButton}
|
||||
>
|
||||
<RadioButton
|
||||
value="oneway"
|
||||
label="Oneway"
|
||||
style={{width: 'auto', marginRight: 10}}
|
||||
/>
|
||||
<RadioButton
|
||||
value="return"
|
||||
label="Return"
|
||||
style={{width: 'auto'}}
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 l4">
|
||||
<div>
|
||||
<p className="label-form">Departure Date</p>
|
||||
<DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 l4">
|
||||
<div>
|
||||
<p className="label-form">Return Date</p>
|
||||
<DatePicker fullWidth={true} disabled={this.state.returnDateDisabled} style={{width: '100%'}} hintText="2017-08-17"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 l6">
|
||||
<p className="label-form" >Adult</p>
|
||||
<SelectField
|
||||
value={this.state.adult}
|
||||
onChange={this.handleAdult}
|
||||
fullWidth={true}
|
||||
>
|
||||
{adult}
|
||||
</SelectField>
|
||||
</div>
|
||||
<div className="col s12 l6">
|
||||
<p className="label-form">Child</p>
|
||||
<SelectField
|
||||
value={this.state.children}
|
||||
onChange={this.handleChild}
|
||||
fullWidth={true}
|
||||
>
|
||||
{child}
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s0 l10"></div>
|
||||
<div className="col s0 l2">
|
||||
<RaisedButton label="Find Schedule" primary={true} onClick={this.props.onClickFind} icon={ <FontIcon className="material-icons">search</FontIcon>}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<blockquote>
|
||||
<p>NOTES : </p>
|
||||
<ul style={{listStyleType: "disc"}}>
|
||||
<li>Railink Passengers are required to depart from Medan Railink Station to Railway Station at Kuala Namu Airport minimum <b>two hours</b> before the scheduled departure of domestic aircraft and <b>three hours</b> for international departure</li>
|
||||
<li>If the purchase of an Railink ticket is less than 2 hours before the scheduled departure time of the plane, the risk of delay in aircraft departure shall be borne by the Passenger</li>
|
||||
</ul>
|
||||
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
362
src/common/pages/Service/Railink/ListRailink.js
Normal file
362
src/common/pages/Service/Railink/ListRailink.js
Normal file
@@ -0,0 +1,362 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton, RadioButtonGroup,
|
||||
Tabs, Tab,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
} from 'material-ui';
|
||||
import {withRouter} from 'react-router';
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import WarningIcon from 'material-ui/svg-icons/alert/warning';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class ListRailink extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
expanded : false,
|
||||
flight_detail : null,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
}
|
||||
|
||||
handleFlightDetail = (key)=>{
|
||||
if(key == this.state.flight_detail){
|
||||
this.setState({
|
||||
flight_detail : 'x-0!',
|
||||
price_detail:'',
|
||||
})
|
||||
}
|
||||
else if(this.state.flight_detail == null){
|
||||
this.setState({
|
||||
flight_detail : key,
|
||||
price_detail:'',
|
||||
})
|
||||
}
|
||||
else{
|
||||
|
||||
this.setState({
|
||||
flight_detail : key,
|
||||
price_detail:'',
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const listData = [
|
||||
{
|
||||
'key' : 1,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.png',
|
||||
'desc' : {
|
||||
name: 'ARS (U2)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '03:30'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'04:00'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'key' : 2,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.png',
|
||||
'desc' : {
|
||||
name: 'ARS (U4)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '04:00'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'04:30'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'key' : 3,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.png',
|
||||
'desc' : {
|
||||
name: 'ARS (U6)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '04:30'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'05:00'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'key' : 4,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.pngg',
|
||||
'desc' : {
|
||||
name: 'ARS (U8)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '05:00'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'05:30'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'key' : 5,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.png',
|
||||
'desc' : {
|
||||
name: 'ARS (U10)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '05:30'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'06:00'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'key' : 6,
|
||||
'image' : 'http://akuntiket.com/img/logo_railink.png',
|
||||
'desc' : {
|
||||
name: 'ARS (U12)',
|
||||
depature : {
|
||||
station:'MEDAN (MDN)',
|
||||
time : '06:00'
|
||||
},
|
||||
destination : {
|
||||
station:'KUALA NAMU (KLN)',
|
||||
time:'06:30'
|
||||
},
|
||||
date : '22 Sep 2017',
|
||||
},
|
||||
seat: [
|
||||
{
|
||||
class: 'Executive Class (A)',
|
||||
adult: '100.000 IDR',
|
||||
child: '100.000 IDR',
|
||||
available: '130'
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Card className="animated fadeIn">
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Back"
|
||||
style={{marginLeft:'0px'}}
|
||||
onClick={this.props.onClickBack}
|
||||
>
|
||||
arrow_back
|
||||
</IconButton>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text="Find Schedule"/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div className="col m3" style={{padding:'10px'}}>
|
||||
<img src="http://akuntiket.com/img/logo_railink.png" className="img-responsive" />
|
||||
</div>
|
||||
<div className="col m9">
|
||||
<div style={{padding: '14px'}}>
|
||||
<div className="row">
|
||||
<p style={{marginLeft: '25px', marginTop: '5px'}}>
|
||||
MEDAN (MDN) - KUALA NAMU (KLN)
|
||||
</p>
|
||||
</div>
|
||||
<div className="row" style={{marginTop: '10px', marginBottom: '-10px'}}>
|
||||
<div className="col m6">
|
||||
<div className="row">
|
||||
<div className="col m6">
|
||||
<div className="row">
|
||||
<div className="col m2">
|
||||
<FontIcon className="material-icons" style={{color:'#B7B7B7'}}>access_time</FontIcon>
|
||||
</div>
|
||||
<div className="col m10">
|
||||
<p style={{marginTop: '5px'}}>
|
||||
22 Sep 2017
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col m6">
|
||||
<div className="row">
|
||||
<div className="col m2">
|
||||
<FontIcon className="material-icons" style={{color:'#B7B7B7'}}>people_outline</FontIcon>
|
||||
</div>
|
||||
<div className="col m10">
|
||||
<p style={{marginTop: '5px'}}>
|
||||
Adult : 1 | Child: 0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col m6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
{(listData.slice(0, listData.length)).map(item => {
|
||||
return (
|
||||
<div>
|
||||
<div style={{padding: '20px 14px 14px 27px'}}>
|
||||
<div className="row">
|
||||
<div className="col s12 l12">
|
||||
<p className="detail-flight-top">{item.desc.name.toUpperCase()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s12 l2">
|
||||
<p className="detail-flight-top">{item.desc.depature.time}</p>
|
||||
<p>{item.desc.depature.station}</p>
|
||||
</div>
|
||||
<div className="col s12 l1">
|
||||
<p><FontIcon className="material-icons" style={{color:'#B7B7B7', lineHeight: '50px'}}>directions_railway</FontIcon><FontIcon className="material-icons" style={{color:'#B7B7B7', lineHeight: '50px'}}>arrow_forward</FontIcon></p>
|
||||
</div>
|
||||
<div className="col s12 l2">
|
||||
<p className="detail-flight-top">{item.desc.destination.time}</p>
|
||||
<p>{item.desc.destination.station}</p>
|
||||
</div>
|
||||
<div className="col s12 l2">
|
||||
<p className="detail-flight-top">30 minute</p>
|
||||
<p>Direct</p>
|
||||
</div>
|
||||
<div className="col s12 l3">
|
||||
{(this.state.flight_detail !== item.key) ? <RaisedButton primary={true} label="Detail" onClick={()=>this.handleFlightDetail(item.key)} style={{width: '100px'}}/> : <RaisedButton primary={false} label="Detail" onClick={()=>this.handleFlightDetail(item.key)} style={{marginRight:'10px'}}/>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Card expanded={this.state.expanded} onExpandChange={this.handleFlightDetail} style={{boxShadow : 'none'}}>
|
||||
<CardText expandable={this.state.flight_detail !== item.key} className="detail-flight">
|
||||
<Table>
|
||||
<TableHeader adjustForCheckbox={false} displaySelectAll={false}>
|
||||
<TableRow>
|
||||
<TableHeaderColumn><p style={{textAlign: 'center'}}>Class</p></TableHeaderColumn>
|
||||
<TableHeaderColumn><p style={{textAlign: 'center'}}>Adult Price</p></TableHeaderColumn>
|
||||
<TableHeaderColumn><p style={{textAlign: 'center'}}>Child Price</p></TableHeaderColumn>
|
||||
<TableHeaderColumn><p style={{textAlign: 'center'}}>Available</p></TableHeaderColumn>
|
||||
<TableHeaderColumn><p style={{textAlign: 'center'}}>Action</p></TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false} showRowHover={true}>
|
||||
{(item.seat.slice(0, listData.length)).map(items => {
|
||||
return (
|
||||
<TableRow>
|
||||
<TableRowColumn><p style={{textAlign: 'center'}}>{items.class}</p></TableRowColumn>
|
||||
<TableRowColumn><p style={{textAlign: 'center'}}>{items.adult}</p></TableRowColumn>
|
||||
<TableRowColumn><p style={{textAlign: 'center'}}>{items.child}</p></TableRowColumn>
|
||||
<TableRowColumn><p style={{textAlign: 'center'}}>{items.available}</p></TableRowColumn>
|
||||
<TableRowColumn>{(items.available > 0) ? <div style={{textAlign: 'center'}}><RaisedButton primary={true} onClick={this.props.onClickBuy} label="Choose" /></div> : <p style={{color: '#F44336', textAlign: 'center'}}>N/A</p>}</TableRowColumn>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardText>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Divider/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
117
src/common/pages/Service/Railink/Railink.js
Normal file
117
src/common/pages/Service/Railink/Railink.js
Normal file
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton, RadioButtonGroup, DropDownMenu,
|
||||
Tabs, Tab,
|
||||
} from 'material-ui';
|
||||
import {withRouter} from 'react-router';
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
import FormRailink from "./FormRailink";
|
||||
import ListRailink from "./ListRailink";
|
||||
import FormBook from "./FormBook";
|
||||
import Confirmation from "./Confirmation";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class Railink extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 0
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
handleClickFind = () => {
|
||||
this.setState({
|
||||
value: 1
|
||||
})
|
||||
}
|
||||
|
||||
handleClickBack = () => {
|
||||
this.setState({
|
||||
value: 0
|
||||
})
|
||||
}
|
||||
|
||||
handleClickBook = () => {
|
||||
this.setState({
|
||||
value: 2
|
||||
})
|
||||
}
|
||||
|
||||
handleBackForm = () => {
|
||||
this.setState({
|
||||
value: 1
|
||||
})
|
||||
}
|
||||
|
||||
handleClickConfirmation = () => {
|
||||
this.setState({
|
||||
value: 3
|
||||
})
|
||||
};
|
||||
|
||||
handleClickBackConfirmation = () => {
|
||||
this.setState({
|
||||
value: 2
|
||||
})
|
||||
}
|
||||
|
||||
handleClickSeatMap = () => {
|
||||
this.setState({
|
||||
value: 4
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col s12">
|
||||
{(this.state.value == 0) ? <FormRailink onClickFind={this.handleClickFind}/> : ''}
|
||||
{(this.state.value == 1) ?
|
||||
<ListRailink onClickBack={this.handleClickBack} onClickBuy={this.handleClickBook}/> : ''}
|
||||
{(this.state.value == 2) ?
|
||||
<FormBook onClickBack={this.handleBackForm} onConfirm={this.handleClickConfirmation}/> : ''}
|
||||
{(this.state.value == 3) ? <Confirmation onClickBack={this.handleClickBackConfirmation}/> : ''}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user