var FormsDemo = React.createClass({
getInitialState: function() {
var now = new Date(),
departureDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3),
returnDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7);
return {
tripType: 'round',
origin: this.airports[0].code,
destination: this.airports[0].code,
filteredAirports: this.airports,
timeRange: [departureDate, returnDate],
adults: 1,
children: 0,
infant: 0,
tripClass: 'economy'
};
},
changeTripType: function(value, event) {
// set default time range depending on trip type
var returnDate = null,
departureDate = this.state.timeRange[0];
if (value == 'round') {
if (this.state.timeRange[1] != null) {
returnDate = this.state.timeRange[1];
} else {
returnDate = new Date(departureDate.getFullYear(), departureDate.getMonth(), departureDate.getDate() + 7);
}
}
// push changes to state
this.setState({
tripType: value,
timeRange: [departureDate, returnDate]
});
},
// select time range
rangeSet: function(event, inst) {
if (this.state.tripType == 'round') {
this.setState({ timeRange: inst.getVal() });
} else {
this.setState({ timeRange: [inst.getVal()[0], null] });
}
},
rangeChange: function(event, inst) {
var oneWay = this.state.tripType == 'oneway';
if (oneWay && event.control == 'calendar' && event.active == 'start') {
inst._isVisible = false;
inst.setActiveDate('start');
inst._isVisible = true;
}
if (inst._markup) {
inst._isValid = true;
inst._markup.find('.mbsc-fr-btn-s .mbsc-fr-btn').removeClass('mbsc-fr-btn-d');
}
},
rangeClose: function() {
if (this.state.tripType == 'oneway') {
return true;
}
},
// passenger numbers
adultsChange: function(event) {
this.setState({ adults: +event.target.value });
},
childrenChange: function(event) {
this.setState({ children: +event.target.value });
},
infantChange: function(event) {
this.setState({ infant: +event.target.value });
},
// trip class selection
tripClassChange: function(newClass) {
this.setState({ tripClass: newClass });
},
getRemoteData: function() {
return {
url: 'https://trial.mobiscroll.com/airports/',
remoteFilter: true,
dataType: 'jsonp',
processResponse: function (data) {
var i,
item,
ret = [];
if (data) {
for (i = 0; i < data.length; i++) {
item = data[i];
ret.push({
value: item.code,
text: item.name,
html: '<div style="font-size:16px;line-height:18px;">' + item.name + '</div><div style="font-size:10px;line-height:12px;">' + item.location + ', ' + item.code + '</div>'
});
}
}
return ret;
}
}
},
render: function() {
return <mobiscroll.Form theme=" " themeVariant=" " lang=" " className="md-flight-booking">
<div className="md-header">Book a flight</div>
<div className="md-ftype-cont">
<label>
Round trip
<input type="radio" data-role="segmented" checked={this.state.tripType == "round"} name="triptype" onChange={this.changeTripType.bind(this, 'round')} className="md-flight-type" />
</label>
<label>
One way
<input type="radio" data-role="segmented" checked={this.state.tripType == 'oneway'} name="triptype" onChange={this.changeTripType.bind(this, 'oneway')} className="md-flight-type md-one-way" />
</label>
</div>
<label>
Origin
<mobiscroll.Select
value={this.state.origin}
multiline={2}
height={50}
filter={true}
data={this.getRemoteData()}
placeholder="Please select..."
/>
</label>
<label>
Destination
<mobiscroll.Select
multiline={2}
height={50}
filter={true}
data={this.getRemoteData()}
placeholder="Please select..."
/>
</label>
<div className="md-time-range">
<label>
Leaving
<mobiscroll.Range
value={this.state.timeRange}
onSet={this.rangeSet}
onSetDate={this.rangeChange}
onBeforeClose={this.rangeClose}
className="md-leaving-date"
theme=" "
themeVariant=" "
lang=" "
display="bottom"
startInput=".md-leaving-date"
endInput=".md-return-date"
min={new Date()}
showSelector={false}
/>
</label>
<label>
Returning
<input type="text" className="md-return-date" disabled={this.state.tripType == 'oneway'} />
</label>
</div>
<mobiscroll.Stepper theme=" " themeVariant=" " value={this.state.adults} onChange={this.adultsChange} min={1} max={15} data-val="left">
Adults
<span className="mbsc-desc">From 14 years</span>
</mobiscroll.Stepper>
<mobiscroll.Stepper theme=" " themeVariant=" " value={this.state.children} onChange={this.childrenChange} min={0} max={15} data-val="left">
Children
<span className="mbsc-desc">2-14 years</span>
</mobiscroll.Stepper>
<mobiscroll.Stepper theme=" " themeVariant=" " value={this.state.infant} onChange={this.infantChange} min={0} max={10} data-val="left">
Infant
<span className="mbsc-desc">0-2 years</span>
</mobiscroll.Stepper>
<label>
Economy
<input type="radio" checked={this.state.tripClass == 'economy'} onChange={this.tripClassChange.bind(this, 'economy')} data-role="segmented" name="flight_type" />
</label>
<label>
Comfort
<input type="radio" checked={this.state.tripClass == 'comfort'} onChange={this.tripClassChange.bind(this, 'comfort')} data-role="segmented" name="flight_type" />
</label>
<label>
Business
<input type="radio" checked={this.state.tripClass == 'business'} onChange={this.tripClassChange.bind(this, 'business')} data-role="segmented" name="flight_type" />
</label>
<div className="mbsc-padding">
<button className="mbsc-btn-block">Find Flights</button>
</div>
</mobiscroll.Form>;
},
getAirportByCode: function(code) {
for(var i = 0; i < this.airports.length; i++) {
if (this.airports[i].code == code) {
return this.airports[i];
}
}
},
airports: [{
"code": "OCH",
"name": "A. L. Mangham Jr. Regional Airport",
"location": "Nacogdoches, Texas, United States"
}, {
"code": "APH",
"name": "A.P. Hill Army Airfield",
"location": "Fort A.P. Hill, Virginia, United States"
}, {
"code": "AAL",
"name": "Aalborg Airport",
"location": "Aalborg, Denmark"
}, {
"code": "AAP",
"name": "Aappilattoq (Qaasuitsup) Heliport",
"location": "Aappilattoq, Greenland"
} /*, ... Lot of data ... */]
});