templates/bus/seat_detail.html.twig line 1

Open in your IDE?
  1. <fieldset style="border: 1px solid #dfffdf;padding: 15px;">
  2. <legend></legend>
  3. <div>
  4. SEAT NUMBER:- <b>{{ seat.seatNumber }}</b>
  5. </div>
  6. <hr>
  7. <div id="form" class="form">
  8. {% if booking %}
  9. <div id="bookingData" class="form">
  10. <table class="table table-sm table-bordered">
  11. <tr>
  12. <th COLSPAN="2" style="text-align: center;">BOOKED</th>
  13. </tr>
  14. <tr>
  15. <th>BOOKED ON</th>
  16. <td>{{ booking.createdAt | date(" l jS F \\a\\t g:ia") }}</td>
  17. </tr>
  18. <tr>
  19. <th>PASSENGER</th>
  20. <td>{{ booking.passenger }}</td>
  21. </tr>
  22. <tr>
  23. <th>PHONE</th>
  24. <td>{{ booking.phone }}</td>
  25. </tr>
  26. <tr>
  27. <th>SEAT</th>
  28. <td>{{ booking.seat.seatNumber }}</td>
  29. </tr>
  30. <tr>
  31. <th>FROM</th>
  32. <td>{{ booking.origin.station.stationName }}</td>
  33. </tr>
  34. <tr>
  35. <th>TO</th>
  36. <td>{{ booking.destination.station.stationName }}</td>
  37. </tr>
  38. <tr>
  39. <th>BOOKED BY</th>
  40. <td>{{ booking.createdBy.person.preferredName }} in {{ bookingStation.station }}</td>
  41. </tr>
  42. <tr>
  43. <th>PAID</th>
  44. <td>KES{{ booking.amount | number_format }}</td>
  45. </tr>
  46. <tr>
  47. <td colspan="2">
  48. <button type="button" class="btn btn-success print" onclick="print('/bus/ticket/{{ booking.id }}')">
  49. <i class="fa fa-print"></i>
  50. Print Ticket
  51. </button>
  52. {# <a href="{{ path('generateTicket', {'ticketId': booking.id }) }}" target="_blank">Ticket</a>#}
  53. </td>
  54. </tr>
  55. </table>
  56. </div>
  57. {% elseif seat.status == 'RESERVED' %}
  58. <table border="1" style="width: 100%">
  59. <thead>
  60. <tr>
  61. <th colspan="2" style="text-align: center;">STATUS - {{ seat.status }}</th>
  62. </tr>
  63. </thead>
  64. <tbody>
  65. <tr>
  66. <td style="text-align: right; width: 40%; padding-right: 20px;">Reserved for</td>
  67. <td>{{ reservation.station.stationName }}</td>
  68. </tr>
  69. <tr>
  70. <td style="text-align: right; width: 40%; padding-right: 20px;">Reserved by</td>
  71. <td>{{ reservation.reservedBy.person.preferredName }}[{{ reservation.reservingStation.stationName }}]</td>
  72. </tr>
  73. {% if user_station.station.id == reservation.reservingStation.id %}
  74. <tr>
  75. <td colspan="2" style="text-align: center;">
  76. <button class="btn btn-warning" onclick="cancelReservation({{ seat.seatNumber }})"><i class="fas fa-window-close"></i> Cancel Reservation</button>
  77. </td>
  78. </tr>
  79. {% endif %}
  80. </tbody>
  81. </table>
  82. {% else %}
  83. {{ form_start(bookingForm, {'attr':{'class':'booking', 'id':'booking_form'}}) }}
  84. <div id="formfields">
  85. {#<div class="row">
  86. <div class="col-lg-10">
  87. <div class="form-group">
  88. <label for="basicpill-firstname-input">Where are you booking from?<span class="require">*</span></label> <br>
  89. {{ form_widget(bookingForm.bookingFrom,{'attr':{'class':'form-control form-select', 'placeholder':''}} ) }}
  90. <div class="invalid-feedback">
  91. {{ form_errors(bookingForm.bookingFrom) }}
  92. </div>
  93. </div>
  94. </div>
  95. </div>#}
  96. <div class="row">
  97. <div class="col-lg-6">
  98. <div class="form-group">
  99. <label for="basicpill-firstname-input">Name<span class="require">*</span></label> <br>
  100. {{ form_widget(bookingForm.passenger,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
  101. <div class="invalid-feedback">
  102. {{ form_errors(bookingForm.passenger) }}
  103. </div>
  104. </div>
  105. </div>
  106. <div class="col-lg-6">
  107. <div class="form-group">
  108. <label for="basicpill-firstname-input">Phone<span class="require">*</span></label><br>
  109. {{ form_widget(bookingForm.phone,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
  110. <div class="invalid-feedback">
  111. {{ form_errors(bookingForm.phone) }}
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. {# {{ form_widget(bookingForm.seat,{'attr':{'class':'form-select', 'hidden':true}} ) }}#}
  117. {# <div class="row">#}
  118. {# <div class="col-lg-10">#}
  119. {# <div class="form-group">#}
  120. {# <label for="basicpill-firstname-input">Seat<span class="require">*</span></label>#}
  121. {# #}
  122. {# <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">#}
  123. {# {% for error in form_errors(bookingForm.seat) %}#}
  124. {# <li class="parsley-required">{{ error }}</li>#}
  125. {# {% endfor %}#}
  126. {# </ul>#}
  127. {# </div>#}
  128. {# </div>#}
  129. {# </div>#}
  130. <div class="row">
  131. <div class="col-lg-6">
  132. <div class="form-group">
  133. <label for="basicpill-firstname-input">From<span class="require">*</span></label> <br>
  134. {{ form_widget(bookingForm.origin,{'attr':{'class':'form-select','placeholder':''}} ) }}
  135. <div class="invalid-feedback">
  136. {{ form_errors(bookingForm.origin) }}
  137. </div>
  138. </div>
  139. </div>
  140. <div class="col-lg-6">
  141. <div class="form-group">
  142. <label for="basicpill-firstname-input">To<span class="require">*</span></label> <br>
  143. {{ form_widget(bookingForm.destination,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
  144. <div class="invalid-feedback">
  145. {{ form_errors(bookingForm.destination) }}
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="row">
  151. <div class="col-lg-6">
  152. <div class="form-group">
  153. <label for="basicpill-firstname-input">Amount<span class="require">*</span></label> <br>
  154. {{ form_widget(bookingForm.amount,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
  155. <div class="invalid-feedback">
  156. {{ form_errors(bookingForm.amount) }}
  157. </div>
  158. </div>
  159. </div>
  160. <div class="col-lg-6">
  161. <div class="form-group">
  162. <label for="basicpill-firstname-input">Paid Via<span class="require">*</span></label> <br>
  163. {{ form_widget(bookingForm.paidVia,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
  164. <div class="invalid-feedback">
  165. {{ form_errors(bookingForm.paidVia) }}
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <div id="mpesa_id">
  171. {% if bookingForm.mpesa is defined %}
  172. <div class="row">
  173. <div class="col-lg-12">
  174. <div class="form-group">
  175. <label for="basicpill-firstname-input">Mpesa<span class="require">*</span></label> <br>
  176. {{ form_widget(bookingForm.mpesa,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
  177. <button id="refresh_btn" type="button" class="btn btn-success" style="height: 35px;"><i class="fas fa-circle-notch"></i></button>
  178. <div class="invalid-feedback">
  179. {{ form_errors(bookingForm.mpesa) }}
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. {% endif %}
  185. </div>
  186. </div>
  187. <div class="row" style="margin-top: 10px;">
  188. <div class="col-lg-12">
  189. <div class="form-group">
  190. <button type="submit" class="btn btn-success">Save</button>
  191. <button type="button" class="btn btn-warning btn-outline-success" onclick="hideForm(this)">Cancel</button>
  192. </div>
  193. </div>
  194. </div>
  195. {{ form_end(bookingForm) }}
  196. {% endif %}
  197. </div>
  198. </fieldset>
  199. <script>
  200. $(document).ready(function (){
  201. let $paymentType = $('#booking_paidVia');
  202. let $token = $('#booking__token');
  203. $(document).on('change', '#booking_paidVia', function () {
  204. let $form = $(this).closest('form');
  205. let data = {};
  206. data[$token.attr('name')] = $token.val();
  207. data[$paymentType.attr('name')] = $paymentType.val();
  208. console.log(data);
  209. if($("#booking_paidVia").length === 0) {
  210. console.log('#booking_paidVia not available');
  211. }else{
  212. console.log($('#booking_paidVia').html());
  213. }
  214. $.post($form.attr('action'), data).then(function (response){
  215. if(document.getElementById('booking_paidVia')){
  216. // console.log(response);
  217. if($("div#mpesa_id").length === 0) {
  218. console.log('div#mpesa_id not available');
  219. }else{
  220. console.log('div#mpesa_id available');
  221. }
  222. // console.log($($.parseHTML(response)).find("div#mpesa_id"));
  223. // console.log($(response).find("div#mpesa_id").html());
  224. // $('div#mpesa_id').replaceWith($(response).find('div#mpesa_id'));
  225. $('div#mpesa_id').html($(response).find("div#mpesa_id"));
  226. $token = $('#booking__token');
  227. }
  228. })
  229. });
  230. $(document).on('click', '#refresh_btn', function () {
  231. let $form = $(this).closest('form');
  232. let data = {};
  233. data[$token.attr('name')] = $token.val();
  234. data[$paymentType.attr('name')] = $paymentType.val();
  235. $.post($form.attr('action'), data).then(function (response){
  236. if(document.getElementById('booking_paidVia')){
  237. $('div#mpesa_id').html($(response).find('div#mpesa_id'));
  238. $token = $('#booking__token');
  239. }
  240. })
  241. });
  242. $(document).on('submit','form#booking_form',function( event ) {
  243. // $(document).on('submit','form#payment', function (event){
  244. event.preventDefault();
  245. let bookingForm = document.querySelector('#booking_form');
  246. let elements = bookingForm.elements;
  247. let data = {};
  248. for (let i=0;i<elements.length; i++){
  249. console.log(elements[i].id);
  250. data[elements[i].name] = elements[i].value;
  251. /*if(elements[i].name === 'payment[shared]'){
  252. data[elements[i].name] = $('#'+elements[i].id).is(':checked') ? 1: 0;
  253. }else{
  254. data[elements[i].name] = elements[i].value;
  255. }*/
  256. }
  257. console.log(data);
  258. let $form = $(this).closest('form');
  259. Swal.fire({
  260. title: 'Are you sure?',
  261. text: "Do you want to complete booking",
  262. icon: 'warning',
  263. showCancelButton: true,
  264. confirmButtonColor: '#3085d6',
  265. cancelButtonColor: '#d33',
  266. confirmButtonText: 'Yes!'
  267. }).then((result) => {
  268. if (result.isConfirmed) {
  269. $(".se-pre-con").fadeTo(100, 1).slideDown(100, function(){
  270. });
  271. $.post($form.attr('action'), data).then(function (response){
  272. // $('div#formfields').html('');
  273. // $('div#form').html($($.parseHTML(response)).find("div#form"));
  274. // $('tbody#tableBody').html($($.parseHTML(response)).find("tbody#tableBody"));
  275. // $('bodybus').html(response);
  276. // console.log(response);
  277. $('div#bus').html($($.parseHTML(response)).find("div#bus"));
  278. // console.log($('body#bus').html($($.parseHTML(response)).find("body#bus")));
  279. $('.seats li input').click(function(){
  280. let k = $(this).val();
  281. console.log('Awesome '+k);
  282. makeSelection(k);
  283. });
  284. makeSelection({{ seat.seatNumber }})
  285. seats.datagrid('reload');
  286. Swal.fire(
  287. 'Done!',
  288. 'booking successful',
  289. 'success'
  290. );
  291. /*$(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
  292. });*/
  293. }).fail(function (error){
  294. let response = error.responseText;
  295. $('div#formfields').html('');
  296. $('div#formfields').html($($.parseHTML(response)).find("div#formfields"));
  297. $(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
  298. Swal.fire(
  299. 'Failed!',
  300. 'Booking failed, Try again',
  301. 'error'
  302. );
  303. });
  304. });
  305. }
  306. })
  307. });
  308. });
  309. function cancelReservation(index){
  310. Swal.fire({
  311. title: 'Are you sure?',
  312. text: "Do you want to cancel reservation",
  313. icon: 'warning',
  314. showCancelButton: true,
  315. confirmButtonColor: '#3085d6',
  316. cancelButtonColor: '#d33',
  317. confirmButtonText: 'Yes!'
  318. }).then((result) => {
  319. if (result.isConfirmed) {
  320. $(".se-pre-con").fadeTo(100, 1).slideDown(100, function(){
  321. });
  322. $.get('/bus/trip/{{ trip.id }}/seat/'+index+'/cancel_reservation').then(function (response){
  323. console.log($($.parseHTML(response)).find("div#seatDetails"));
  324. // $('div#mpesa_id').replaceWith($(response).find('div#mpesa_id'));
  325. $('div#bus').html($($.parseHTML(response)).find("div#bus"));
  326. // $('div#seatDetails').html(response);
  327. $('.seats li input').click(function(){
  328. let k = $(this).val();
  329. console.log('Awesome '+k);
  330. makeSelection(k);
  331. });
  332. makeSelection({{ seat.seatNumber }})
  333. seats.datagrid('reload');
  334. Swal.fire(
  335. 'Done!',
  336. 'cancellation successful',
  337. 'success'
  338. );
  339. //
  340. // $(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
  341. //
  342. // });
  343. }).fail(function (error){
  344. let response = error.responseText;
  345. // $('div#formfields').html('');
  346. // $('div#formfields').html($($.parseHTML(response)).find("div#formfields"));
  347. $(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
  348. Swal.fire(
  349. 'Failed!',
  350. 'Cancellation failed, Try again',
  351. 'error'
  352. );
  353. });
  354. });
  355. }
  356. })
  357. }
  358. function print(url){
  359. // $(".se-pre-con").fadeIn("slow");
  360. // printJS(url);
  361. printJS({
  362. printable: url,
  363. type:'pdf',
  364. showModal:true,
  365. modalMessage: 'Downloading receipt please wait!',
  366. onError: function (error) {
  367. console.log(error);
  368. alert('Could not generate receipt please try again ')
  369. }
  370. });
  371. }
  372. </script>