API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 26th, 2020
764
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.37 KB | None | 0 0
raw download clone embed print report
  1. <section class="flight-booking-page">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-8">
  5. <h2>Review your trip <a href="javascript:void(0)" class="pull-right">Choose Another Fare</a></h2>
  6. <div class="details-card">
  7. <div class="">
  8. <ng-container *ngIf="data && data.trip_type=='one_way'">
  9. <div class="flight-row">
  10. <ul>
  11. <li>
  12. <img class="pull-left"
  13. [src]="'https://bookings.flightexpert.com/AirlineLogo/QR.gif'"
  14. alt="" width="40">
  15. <p>{{data.flightInfo.Segments[0][0].AirlineDetails.AirlineName + " (" + data.flightInfo.Segments[0][0].AirlineDetails.FlightNumber + ")"}}</p>
  16. <span>{{"Aircraft :" + data.flightInfo.Segments[0][0].AirlineDetails.Craft }}</span>
  17. <small>Seats Left {{data.flightInfo.Segments[0][0].NoOfSeatAvailable}}</small>
  18. </li>
  19. <li class="text-center ext-pad">
  20. <p>{{data.flightInfo.Segments[0][0].Origin.CityName + " (" + data.flightInfo.Segments[0][0].Origin.CityCode + ")"}}</p>
  21. <p>{{getTime(data.flightInfo.Segments[0][0].DepartureTime)}}</p>
  22. <span>{{getDate(data.flightInfo.Segments[0][0].DepartureTime)}}</span>
  23. </li>
  24. <li class="text-center ext-pad">
  25. <div class="data.flightInfo-duration">
  26. <span>
  27. <b>{{getTimeDuration(data.flightInfo.Segments[0][0].DepartureTime, data.flightInfo.Segments[0][data.flightInfo.Segments[0].length - 1].ArrivalTime)}}</b>
  28. <br/>({{data.flightInfo.Segments[0].length == 1 ? 'Non Stop' : (data.flightInfo.Segments[0].length == 2 ? 'One Stop' : 'Multi Stop')}}
  29. )
  30. </span>
  31. </div>
  32. </li>
  33. <li class="text-center ext-pad">
  34. <p>{{data.flightInfo.Segments[0][+data.flightInfo.Segments[0].length - 1].Destination.CityName + " (" + data.flightInfo.Segments[0][0].Destination.CityCode + ")"}}</p>
  35. <p>{{getTime(data.flightInfo.Segments[0][data.flightInfo.Segments[0].length - 1].ArrivalTime)}}</p>
  36. <span>{{getDate(data.flightInfo.Segments[0][data.flightInfo.Segments[0].length - 1].ArrivalTime)}}</span>
  37. </li>
  38. <li class="text-right ext-pad">
  39. <p><sup>TK</sup>{{data.flightInfo.Fare.PublishedFare}}</p>
  40. <span>{{(data.flightInfo.Segments[0][0].CabinClass || data.flightInfoCabinClass) + " (" + data.flightInfo.Segments[0][0].BookingClass + ")"}}</span>
  41. <small>{{data.flightInfo.NonRefundable ? "Non Refundable" : "Refundable"}}</small>
  42. </li>
  43. <li class="text-right">
  44. <!-- <button class="btn btn-block" (click)="bookNow(i,j)">Book Now</button>-->
  45. <button class="btn btn-block btn-details collapsed" data-toggle="collapse"
  46. [attr.data-target]="'#demo'">
  47. <span>Flight Details</span>
  48. <small>Hide Details</small>
  49. </button>
  50. </li>
  51. </ul>
  52. <div [id]="'demo'" class="collapse">
  53. <ng-container *ngFor="let segment of data.flightInfo.Segments[0]; let k = index">
  54. <div class="data.flightInfo_details_block">
  55. <div class="depart_badge">
  56. <span>Depart from {{segment.Origin.CityName}} to {{segment.Destination.CityName}}</span>
  57. </div>
  58. <div class="row">
  59. <div class="col-md-9">
  60. <div class="flight_name">
  61. <img class="pull-left"
  62. [src]="'https://bookings.flightexpert.com/AirlineLogo/QR.gif'"
  63. alt="" width="25">
  64. <h3>{{segment.AirlineDetails.AirlineName}}, {{segment.AirlineDetails.FlightNumber}}</h3>
  65. <p>Aircraft: {{segment.AirlineDetails.Craft}}</p>
  66. <p>{{(segment.CabinClass || data.flightInfoCabinClass) + " (" + segment.BookingClass + ")"}}</p>
  67. </div>
  68. </div>
  69. <div class="col-md-3">
  70. <div class="fare_rules">
  71. <!--(click)="fareRule(i,j,0, k)"-->
  72. <!-- <button type="button" class="btn btn-block btn-details" (click)="fareRule(0, k)" >Fare-->
  73. <!-- Rule-->
  74. <!-- </button>-->
  75. </div>
  76. </div>
  77. </div>
  78. <div class="clearfix"></div>
  79. <div class="flight-time">
  80. <div class="row">
  81. <div class="col-md-4">
  82. <h3>{{getTime(segment.DepartureTime)}}</h3>
  83. <p>{{getDate(segment.DepartureTime)}}</p>
  84. <small>{{segment.Origin.CityName}}, {{segment.Origin.AirportName}}</small>
  85. </div>
  86. <div class="col-md-4">
  87. <h3>{{getTime(segment.ArrivalTime)}}</h3>
  88. <p>{{getDate(segment.ArrivalTime)}}</p>
  89. <small>{{segment.Destination.CityName}}, {{segment.Destination.AirportName}}</small>
  90. </div>
  91. <div class="col-md-2">
  92. <img [src]="'assets/img/icons/checkin-laguage.svg'" alt="CheckIn">
  93. <div class="clearfix"></div>
  94. <span>Check-in</span>
  95. <h4>{{segment.IncludedBaggage}}</h4>
  96. </div>
  97. <div class="col-md-2">
  98. <img [src]="'assets/img/icons/cabin-laguage.svg'" alt="CheckIn">
  99. <div class="clearfix"></div>
  100. <span>Cabin</span>
  101. <h4>{{segment.CabinBaggage || "--"}}</h4>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="clearfix"></div>
  107. <div class="flight_change text-center"
  108. *ngIf="data.flightInfo.Segments[0].length > 1 && k !== data.flightInfo.Segments[0].length-1">
  109. <span>Change Flight From {{segment.Destination.CityName}}</span>
  110. </div>
  111. <div class="clearfix"></div>
  112. </ng-container>
  113. <!-- <div class="flight_details_block padding-off">-->
  114. <!-- <div class="depart_badge">-->
  115. <!-- <span>Return from Dubai to Dhaka</span>-->
  116. <!-- </div>-->
  117. <!-- <div class="row">-->
  118. <!-- <div class="col-md-9">-->
  119. <!-- <div class="flight_name">-->
  120. <!-- <img class="pull-left" [src]="'assets/img/icons/biman.png'" alt="" width="25">-->
  121. <!-- <h3>Biman, QZ112</h3>-->
  122. <!-- <p>Aircraft: 330</p>-->
  123. <!-- </div>-->
  124. <!-- </div>-->
  125. <!-- <div class="col-md-3">-->
  126. <!-- <div class="fare_rules">-->
  127. <!-- <button type="button" class="btn btn-block btn-details">Fare Rule</button>-->
  128. <!-- </div>-->
  129. <!-- </div>-->
  130. <!-- </div>-->
  131. <!-- <div class="clearfix"></div>-->
  132. <!-- <div class="flight-time">-->
  133. <!-- <div class="row">-->
  134. <!-- <div class="col-md-4">-->
  135. <!-- <h3>9:30am</h3>-->
  136. <!-- <p>Fri, 20 Jul</p>-->
  137. <!-- <small>Dhaka, Hazrat Shahjalal Int.</small>-->
  138. <!-- </div>-->
  139. <!-- <div class="col-md-4">-->
  140. <!-- <h3>15:45am</h3>-->
  141. <!-- <p>Fri, 20 Jul</p>-->
  142. <!-- <small>Doha, Doha Airport</small>-->
  143. <!-- </div>-->
  144. <!-- <div class="col-md-2">-->
  145. <!-- <img [src]="'assets/img/icons/checkin-laguage.svg'" alt="CheckIn">-->
  146. <!-- <div class="clearfix"></div>-->
  147. <!-- <span>Check-in</span>-->
  148. <!-- <h4>30 kg</h4>-->
  149. <!-- </div>-->
  150. <!-- <div class="col-md-2">-->
  151. <!-- <img [src]="'assets/img/icons/cabin-laguage.svg'" alt="CheckIn">-->
  152. <!-- <div class="clearfix"></div>-->
  153. <!-- <span>Cabin</span>-->
  154. <!-- <h4>07 kg</h4>-->
  155. <!-- </div>-->
  156. <!-- </div>-->
  157. <!-- </div>-->
  158. <!-- </div>-->
  159. </div>
  160. </div>
  161. <div class="clearfix"></div>
  162. </ng-container>
  163. </div>
  164. </div>
  165. <div class="clearfix"></div>
  166. <div class="details-card">
  167. <h2>Add Passenger</h2>
  168. <form [formGroup]="airTicketFormGroup">
  169. <div class="card-wrap">
  170. <ng-container *ngIf="passengers">
  171. <ng-container formArrayName="passengers" *ngFor="let passenger of passengers.controls; let i = index">
  172. <ng-container [formArrayName]="i">
  173. <div class="showtime-list-view">
  174. <h3>Passenger {{i + 1}} <span>({{passenger.get('Type').value}})</span></h3>
  175. </div>
  176. <!-- <div class="passenger_select custom-radio-fields pull-right text-right">-->
  177. <!-- <div class="radio-inline" *ngIf="i==0">-->
  178. <!-- <input [id]="'me'+i" type="radio" value="me" formControlName="ticketFor">-->
  179. <!-- <label [for]="'me'+i">ME</label>-->
  180. <!-- </div>-->
  181. <!-- <div class="radio-inline">-->
  182. <!-- <input [id]="'friend'+i" type="radio" value="friend" formControlName="ticketFor">-->
  183. <!-- <label [for]="'friend'+i">FRIEND</label>-->
  184. <!-- </div>-->
  185. <!-- <div class="radio-inline">-->
  186. <!-- <input [id]="'new'+i" type="radio" value="new-passenger" formControlName="ticketFor">-->
  187. <!-- <label [for]="'new'+i">NEW PASSENGER</label>-->
  188. <!-- </div>-->
  189. <!-- </div>-->
  190. <div class="clearfix"></div>
  191. <div class="passenger_form">
  192. <ul>
  193. <li class="passenger_form_input">
  194. <div class="form-group">
  195. <input type="text" class="form-control" formControlName="FirstName">
  196. <label for="">First Name</label>
  197. </div>
  198. </li>
  199. <li class="passenger_form_input">
  200. <div class="form-group">
  201. <input type="text" class="form-control" formControlName="LastName">
  202. <label for="">Last Name</label>
  203. </div>
  204. </li>
  205. <li class="passenger_form_input">
  206. <div class="form-group">
  207. <select name="" class="form-control" formControlName="Gender">
  208. <option value=""></option>
  209. <option value="1">Male</option>
  210. <option value="2">Female</option>
  211. <option value="3">Other</option>
  212. </select>
  213. <label for="">Gender</label>
  214. </div>
  215. </li>
  216. <li class="passenger_form_input">
  217. <div class="form-group">
  218. <input type="text" class="form-control" formControlName="Email">
  219. <label for="">Email Address</label>
  220. </div>
  221. </li>
  222. <li class="passenger_form_input">
  223. <div class="form-group">
  224. <input type="text" class="form-control" formControlName="CellPhone">
  225. <label for="">Phone Number</label>
  226. </div>
  227. </li>
  228. <li class="passenger_form_input">
  229. <div class="form-group">
  230. <input type="text" class="form-control" [id]="'DateOfBirth'+i" formControlName="DateOfBirth"
  231. readonly>
  232. <label for="">Date of Birth</label>
  233. </div>
  234. </li>
  235. <li class="passenger_form_input">
  236. <div class="form-group">
  237. <input type="text" class="form-control" formControlName="AddressLine1">
  238. <label for="">Address</label>
  239. </div>
  240. </li>
  241. <li class="passenger_form_input">
  242. <div class="form-group">
  243. <select name="" class="form-control" formControlName="country">
  244. <option value=""></option>
  245. <ng-container *ngFor="let country of countryList; let indx= index">
  246. <option [value]="indx">{{country.CountryName}}</option>
  247. </ng-container>
  248. </select>
  249. <label for="">Country</label>
  250. </div>
  251. </li>
  252. <li class="passenger_form_input">
  253. <div class="form-group">
  254. <input type="text" class="form-control" formControlName="City">
  255. <label for="">City</label>
  256. </div>
  257. </li>
  258. <li class="passenger_form_input">
  259. <div class="form-group">
  260. <input type="text" class="form-control" formControlName="PassportNo">
  261. <label for="">Passport Number</label>
  262. <!-- <span>Ranaa</span>-->
  263. </div>
  264. </li>
  265. <li class="passenger_form_input">
  266. <div class="form-group">
  267. <input type="text" class="form-control" formControlName="PassportExpiry">
  268. <label for="">Passport Exp.</label>
  269. </div>
  270. </li>
  271. </ul>
  272. <div class="clearfix"></div>
  273. <!-- <hr>-->
  274. <!-- <ul>-->
  275. <!-- <li class="passenger_form_input">-->
  276. <!-- <div class="form-group">-->
  277. <!-- <select name="" class="form-control" formControlName="meals">-->
  278. <!-- <option value=""></option>-->
  279. <!-- <option value="Male">Male</option>-->
  280. <!-- <option value="Female">Female</option>-->
  281. <!-- <option value="Other">Other</option>-->
  282. <!-- </select>-->
  283. <!-- <label for="">Meals</label>-->
  284. <!-- </div>-->
  285. <!-- </li>-->
  286. <!-- <li class="passenger_form_input">-->
  287. <!-- <div class="form-group">-->
  288. <!-- <select name="" class="form-control" formControlName="frequentFlayer">-->
  289. <!-- <option value=""></option>-->
  290. <!-- <option value="Male">Male</option>-->
  291. <!-- <option value="Female">Female</option>-->
  292. <!-- <option value="Other">Other</option>-->
  293. <!-- </select>-->
  294. <!-- <label for="">Frequent Flayer</label>-->
  295. <!-- </div>-->
  296. <!-- </li>-->
  297. <!-- <li class="passenger_form_input">-->
  298. <!-- <a href="javascript:void(0)">* Meal preferences subject to availability</a>-->
  299. <!-- </li>-->
  300. <!-- <li class="passenger_form_input">-->
  301. <!-- <div class="form-group">-->
  302. <!-- <select name="" class="form-control" formControlName="frequentFlayerNo">-->
  303. <!-- <option value=""></option>-->
  304. <!-- <option value="Male">Male</option>-->
  305. <!-- <option value="Female">Female</option>-->
  306. <!-- <option value="Other">Other</option>-->
  307. <!-- </select>-->
  308. <!-- <label for="">Frequent Flayer No.</label>-->
  309. <!-- </div>-->
  310. <!-- </li>-->
  311. <!-- </ul>-->
  312. <div class="clearfix"></div>
  313. <hr>
  314. </div>
  315. </ng-container>
  316. </ng-container>
  317. </ng-container>
  318. <ul class="mt-20 list-unstyled">
  319. <li class="passenger_form_input">
  320. <!-- <div class="form-group border-none">-->
  321. <!-- <div class="schedule-recharge checkbox checkbox-primary pr-10">-->
  322. <!-- <input id="checkbox_2" required="" type="checkbox">-->
  323. <!-- <label for="checkbox_2"> Save contact details for future use</label>-->
  324. <!-- </div>-->
  325. <!-- </div>-->
  326. </li>
  327. <li class="passenger_form_input">
  328. <button class="btn btn-primary btn-block" (click)="proceed()" [disabled]="this.airTicketFormGroup.invalid">Proceed</button>
  329. </li>
  330. </ul>
  331. </div>
  332. </form>
  333. </div>
  334. </div>
  335. <div class="col-md-4">
  336. <div class="details-card">
  337. <h2>Trip Summary</h2>
  338. <div class="card-wrap">
  339. <div class="desti-markup">
  340. <ul>
  341. <li class="text-left">
  342. <h3>DAC</h3>
  343. <p>Dhaka</p>
  344. </li>
  345. <li class="text-center">
  346. <img [src]="'assets/img/icons/plane.svg'" alt="">
  347. </li>
  348. <li class="text-right">
  349. <h3>DBX</h3>
  350. <p>Dubai</p>
  351. </li>
  352. </ul>
  353. </div>
  354. <div class="fare-summery">
  355. <div class="col-md-12" *ngFor="let fareBreakDown of data.flightInfo.FareBreakdown">
  356. <ul class="fare-summery-passenger">
  357. <li>
  358. <p>Passenger</p>
  359. <span>{{passengerType[+fareBreakDown.PassengerType]}}{{fareBreakDown.PassengerCount > 1 && passengerType[fareBreakDown.PassengerType] != 'Child' ? "s " : " " }}{{fareBreakDown.PassengerCount}}</span>
  360. </li>
  361. </ul>
  362. <h4>Fare Summary</h4>
  363. <ul>
  364. <li>
  365. <p>Base Fare</p>
  366. <span>{{fareBreakDown.BaseFare}}
  367. Tk</span>
  368. </li>
  369. <li>
  370. <p>Taxes & Fees</p>
  371. <span>{{fareBreakDown.Tax + fareBreakDown.YQTax + fareBreakDown.BranchVATAmount}} Tk</span>
  372. </li>
  373. <li>
  374. <p>Per Passenger</p>
  375. <span>{{(fareBreakDown.BaseFare / fareBreakDown.PassengerCount)}} Tk</span>
  376. </li>
  377. <li>
  378. <p>Total Pax Fare</p>
  379. <span>{{fareBreakDown.Tax + fareBreakDown.YQTax + fareBreakDown.BranchVATAmount + fareBreakDown.BaseFare}}
  380. Tk</span>
  381. </li>
  382. </ul>
  383. </div>
  384. </div>
  385. <div class="clearfix"></div>
  386. <div class="flight-summery-total">
  387. <div class="col-md-6">
  388. <div class="total-amount-text">
  389. <p>Total Price :</p>
  390. </div>
  391. </div>
  392. <div class="col-md-6">
  393. <div class="total-amount-num text-right">
  394. <p>{{data.flightInfo.Fare.PublishedFare}}TK</p>
  395. </div>
  396. </div>
  397. </div>
  398. <div class="clearfix"></div>
  399. </div>
  400. </div>
  401. </div>
  402. </div>
  403. </div>
  404. </section>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!