templates/fos/parcels/view_parcel.html.twig line 1

Open in your IDE?
  1. {% extends 'fos/base.html.twig' %}
  2. {% block firstnav %}
  3. {{ render(controller('App\\Parcels\\DefaultController::nav')) }}
  4. {% endblock %}
  5. {% block secondnav %}
  6. <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
  7. <link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
  10. integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
  11. crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js" integrity="sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  13. {# <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>#}
  14. <!-- Second Nav -->
  15. <nav class="navbar-second navbar navbar-default navbar-static-top" role="navigation">
  16. <div class="container-fluid">
  17. <div class="navbar-header">
  18. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  19. data-target="#bs-example-navbar-collapse-1">
  20. <span class="sr-only">Toggle navigation</span>
  21. <span class="icon-bar"></span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. </button>
  25. <!-- Brand -->
  26. {% block current %}
  27. <span class="navbar-brand" href="#"><i class="fa fa-gears"></i> PARCEL TO {{ transaction.wayBill.toStation }}</span>
  28. {% endblock %}
  29. </div>
  30. <div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
  31. <ul class="nav navbar-nav animated fadeIn">
  32. {% block secondarylinkblock %}
  33. {#<li><a href="{{ path('new-parcel') }}"><i class="fa fa-plus-circle"></i> Register Parcel</a></li>#}
  34. {#<li class=""><a href="#"><i class="fa fa-th-list"></i> Parcels</a></li>#}
  35. <li class=""><a href="{{ app.request.headers.get('referer') }}"><i class="fa fa-arrow-circle-left"></i> Back</a></li>
  36. {#<li class="active"><a href=""><i class="fa fa-plus-circle"></i> View Parcel #{{ transaction.waybill.parcel.id }}</a></li>#}
  37. {% endblock %}
  38. </ul>
  39. <ul class="nav navbar-nav navbar-right">
  40. <li class=""><a></a></li>
  41. {#<li><p class="navbar-text"></p></li>#}
  42. </ul>
  43. </div><!-- /.navbar-collapse -->
  44. </div><!-- /.container-fluid -->
  45. </nav>
  46. {% endblock %}
  47. {% block stylesheets %}
  48. <style>
  49. /*@import "../../../../../web/assets/css/print.css";*/
  50. h6{
  51. font-weight: bold;
  52. }
  53. h3 {
  54. /*font-size: 20px;*/
  55. }
  56. h5,h3,h4,p {
  57. padding: 0px;
  58. font-family: "Amaranth", sans-serif;
  59. background: #ffffff;
  60. }
  61. legend {
  62. border: none;
  63. padding: 5px;
  64. }
  65. .print-area h5, .print-area h3, .print-area h4 {
  66. padding: 0px;
  67. font-family: "Nova Flat", sans-serif;
  68. background: #ffffff;
  69. border: none;
  70. margin: 0;
  71. }
  72. .print-area p {
  73. font-size: 12px;
  74. padding: 4px;
  75. margin: 0px;
  76. line-height: 10px;
  77. border: none;
  78. }
  79. hr {
  80. margin-top: 1px;
  81. margin-bottom: 1px;
  82. border-top: 2px dashed rgba(0, 0, 0, 0.99);
  83. }
  84. .print-area hr {
  85. border-top: 1px dashed rgba(0, 0, 0, 0.99);
  86. }
  87. .print-area {
  88. width: 28%;
  89. background: white;
  90. /*border: 1px dotted;*/
  91. padding: 2%;
  92. display: none;
  93. /*background-color: firebrick;*/
  94. }
  95. .print-area table {
  96. font-family: 'Fjord One', serif;
  97. }
  98. element.style {
  99. }
  100. fieldset {
  101. display: block;
  102. margin-left: 0px;
  103. margin-right: 2px;
  104. border-top: 1px dotted black;
  105. }
  106. .kkk fieldset{
  107. float: right;
  108. width: 40%;
  109. }
  110. .detail{
  111. padding: 0px;
  112. font-size: 11px;
  113. border: none;
  114. }
  115. @media print {
  116. .sf-toolbar, .sf-display-none, .sf-minitoolbar {
  117. display: none;
  118. }
  119. .print-area {
  120. display: block;
  121. }
  122. @page {
  123. margin: 0 !important;
  124. }
  125. html {
  126. margin: 0 !important;
  127. }
  128. body {margin:0 !important;}
  129. .print-area {
  130. width: 100%;
  131. }
  132. .pro {
  133. display: none;
  134. }
  135. .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  136. display: none;
  137. }
  138. /*.page-break {display: block; page-break-before: always }*/
  139. .page-break {
  140. page-break-before: avoid;
  141. }
  142. .page-break {
  143. page-break-after: always;
  144. }
  145. pre, blockquote {
  146. page-break-inside: avoid;
  147. }
  148. }
  149. .parcel {
  150. font-family: 'Big Shoulders Text', cursive;
  151. margin-bottom: 10px;
  152. margin-left: 10px;
  153. }
  154. .parcel h3, .parcel span{
  155. font-family: 'Merriweather', serif;
  156. margin-top: 15px;
  157. }
  158. .sender_receiver .col-lg-6 + fieldset {
  159. box-shadow: 5px 3px 20px #888888;
  160. }
  161. .sender_receiver fieldset{
  162. background-color: beige;
  163. border-top: 1px solid #d3cece;
  164. }
  165. .sender_receiver fieldset legend{
  166. background-color: beige;
  167. border: 1px solid #d3cece;
  168. }
  169. .sender_receiver fieldset h5{
  170. background: none;
  171. }
  172. .destinations {
  173. float: left;
  174. width: 50%;
  175. padding: 10px;
  176. font-family: 'Open Sans', sans-serif;
  177. margin-bottom: 15px;
  178. }
  179. .destinations h4, .destinations b {
  180. font-family: 'Merriweather', serif;
  181. }
  182. .destinations h3 {
  183. margin-bottom: 10px;
  184. }
  185. .description {
  186. font-size: 37px;
  187. margin-left: 10px;
  188. }
  189. .all_parcels{
  190. text-transform: uppercase;
  191. -ms-transform: rotate(90deg);
  192. -moz-transform: rotate(90deg);
  193. -webkit-transform: rotate(90deg);
  194. -o-transform: rotate(90deg);
  195. margin-top: 115px;
  196. width: 430px;
  197. margin-left: -60px;
  198. }
  199. .payment button, .print, .payment a {
  200. width: 150px;
  201. border-radius: 30px;
  202. }
  203. .payment .cash {
  204. float: right;
  205. }
  206. .payment .cash img {
  207. height: 20px;
  208. }
  209. </style>
  210. {% endblock %}
  211. {% block main %}
  212. <div class="row pro" style="padding: 10px 0px 20px 20px; /*border-right: 1px solid #888888;*/ background: #FFFFFF; /*box-shadow: 5px 3px 20px #888888;*/">
  213. <h3 style="font-family:Serif;margin-top: 30px;">WayBill: {{ transaction.wayBill.id }} - {{ transaction.cuInvoiceNumber }}</h3>
  214. <div class="col-lg-6 pro">
  215. <div class="row sender_receiver">
  216. <div class="col-lg-6">
  217. <fieldset style="box-shadow: 5px 5px 0px #888888;">
  218. <legend class="top-legend">SENDER</legend>
  219. <div class="row">
  220. <div class="col-lg-12">
  221. <fieldset>
  222. <legend>Name</legend>
  223. <h5>{{ transaction.waybill.senderName | upper }}</h5>
  224. </fieldset>
  225. </div>
  226. </div>
  227. <div class="row">
  228. <div class="col-lg-12">
  229. <fieldset>
  230. <legend>Phone</legend>
  231. <h5>{{ transaction.waybill.senderPhoneNumber }}</h5>
  232. </fieldset>
  233. </div>
  234. </div>
  235. <div class="row">
  236. <div class="col-lg-12">
  237. <fieldset>
  238. <legend>From</legend>
  239. <h5>{{ transaction.waybill.fromStation }}</h5>
  240. </fieldset>
  241. </div>
  242. </div>
  243. </fieldset>
  244. </div>
  245. <div class="col-lg-6">
  246. <fieldset style="box-shadow:5px 5px 0px #888888">
  247. <legend class="top-legend">RECEIVER</legend>
  248. <div class="row">
  249. <div class="col-lg-12">
  250. <fieldset>
  251. <legend>Name</legend>
  252. <h5>{{ transaction.wayBill.receiverName | upper }}</h5>
  253. </fieldset>
  254. </div>
  255. </div>
  256. <div class="row">
  257. <div class="col-lg-12">
  258. <fieldset>
  259. <legend>Phone</legend>
  260. <h5>{{ transaction.waybill.receiverPhoneNumber }}</h5>
  261. </fieldset>
  262. </div>
  263. </div>
  264. <div class="row">
  265. <div class="col-lg-12">
  266. <fieldset>
  267. <legend>To</legend>
  268. <h5>{{ transaction.waybill.toStation }}</h5>
  269. </fieldset>
  270. </div>
  271. </div>
  272. </fieldset>
  273. </div>
  274. </div>
  275. </div>
  276. <div class="receipt" >
  277. <div class="row pro">
  278. <div class="col-lg-4 col-md-6">
  279. <fieldset align="center" style="border: 1px dotted black; padding-bottom: 10px;">
  280. <legend>Cost</legend>
  281. <table width="90%" style="text-align: center; align-content: center;">
  282. <tr>
  283. <td align="left"><h5 align="left" style="border: none;">{{ transaction.taxPercentage }}% V.A.T</h5></td>
  284. <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;">{{ (transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  285. </tr>
  286. <tr style="">
  287. <td align="left"><h5 align="left" style="border: none;">COST</h5></td>
  288. <td align="right" style="font-family: 'Fjord One', Serif;font-weight: bolder;">{{ (transaction.grossAmount - transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  289. </tr>
  290. {% for expense in transaction.wayBillExpenses %}
  291. {% if expense.expenseType.isAutomatic == false %}
  292. <tr style="border-bottom: 1px solid black;">
  293. <td align="left"><h5 align="left" style="border: none;">{{ expense.expenseType.expenseName | upper }}</h5></td>
  294. <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;border-right: none;">-{{ expense.amount }}</td>
  295. </tr>
  296. {#{% set expenseAmount = (expenseAmount + expense.amount) %}#}
  297. {% endif %}
  298. {% endfor %}
  299. <tr style="border-bottom: 2px double black;border-top: 2px double black;">
  300. <td align="right"><h4 align="left" style="border: none;">TOTAL</h4></td>
  301. <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;">KSH {{ (transaction.stationBalance ) | number_format }}</td>
  302. </tr>
  303. </table>
  304. </fieldset>
  305. <p style="border:none;">Transaction by: {{ transaction.waybill.createdBy.person.secondName }} {{ transaction.waybill.createdBy.person.sirName }}</p>
  306. {% if transaction.isCancelled == false %}
  307. {% if transaction.isComplete == false or is_granted('ROLE_BOS_USER') or is_granted('ROLE_STATION_ADMIN') %}
  308. {{ form_start(cancelForm) }}
  309. <button type="submit" class="btn btn-sm btn-warning ">cancel transaction</button>
  310. {{ form_end(cancelForm) }}
  311. {% endif %}
  312. {% endif %}
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. <div class="row">
  318. <div class="row">
  319. {% if transaction.isPaid %}
  320. {% if transaction.isCancelled != true %}
  321. <div class="col-lg">
  322. {#{% if transaction.isCancelled == false and isCancellable == true %}#}
  323. <div class="row pro kkk" style="padding: 10px 0px 20px 20px; background: #FFFFFF; margin-left: auto">
  324. <div class="col-lg-12">
  325. <fieldset>
  326. <legend>Print</legend>
  327. {% if isCashCanChangeMpesa %}
  328. <a href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}" class="btn btn-success" style="float: left;">
  329. <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  330. change payment to M-PESA
  331. </a>
  332. {%endif%}
  333. <div align="right">
  334. {#<a href="{{ path('pdf_report', {'id': transaction.waybill.id }) }}" class="btn btn-success" target="_blank"><i class="fa fa-print"></i> Print</a>#}
  335. {#<a href="javascript:window.print()" class="btn btn-success" target="_blank"><i class="fa fa-print"></i> Print</a>#}
  336. {% if tims is not null %}
  337. {% if tims.type == 'TYPEC' and tims.supplierCode == 'PARGAMON' %}
  338. {# {% if tims.type == 'TYPEC' and tims.supplierCode == 'PARGAMON' and is_granted('ROLE_BOS_USER')%}#}
  339. <a href="{{ path('receipt_action', {'waybill_': transaction.wayBill.id }) }}" download="application/pdf">
  340. <button type="button" class="btn btn-success print">
  341. <i class="fa fa-print"></i>
  342. Print PDF
  343. </button>
  344. </a>
  345. {% elseif tims.type == 'TYPEC' and tims.supplierCode == 'TREMOL' %}
  346. <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/g03/{{ transaction.wayBill.id }}')">
  347. <i class="fa fa-print"></i>
  348. Print Receipt
  349. </button>
  350. {% else %}
  351. <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/{{ transaction.wayBill.id }}')">
  352. <i class="fa fa-print"></i>
  353. Print Receipt
  354. </button>
  355. {% endif %}
  356. {% else %}
  357. ----
  358. <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/{{ transaction.wayBill.id }}')">
  359. <i class="fa fa-print"></i>
  360. Print Receipt
  361. </button>
  362. {% endif %}
  363. {# <button type="button" class="btn btn-success print" onclick="printReceipt()">#}
  364. {# <i class="fa fa-print"></i>#}
  365. {# Print#}
  366. {# </button>#}
  367. {# <button type="button" class="btn btn-success print" onclick="save()">#}
  368. {# <i class="fa fa-print"></i>#}
  369. {# Print#}
  370. {# </button>#}
  371. </div>
  372. </fieldset>
  373. </div>
  374. </div>
  375. {#{% endif %}#}
  376. </div>
  377. {% else %}
  378. <div class="col-lg">
  379. <fieldset>
  380. <legend>Print</legend>
  381. <div align="right">
  382. <button type="button" class="btn btn-danger print" style="width: auto" disabled>
  383. <i class="fa fa-print"></i>
  384. this transaction is cancelled
  385. </button>
  386. </div>
  387. </fieldset>
  388. <b></b>
  389. </div>
  390. {% endif %}
  391. {% else %}
  392. {% if transaction.isCancelled != true %}
  393. <div class="col-lg"s>
  394. <div class="row pro kkk" style="padding: 10px 0px 20px 20px; background: #FFFFFF; margin-left: auto">
  395. <div class="col-lg-12">
  396. <fieldset class="payment">
  397. <legend>Select Payment option</legend>
  398. {% if isMpesaAvailable %}
  399. <a href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}" class="btn btn-success" style="float: left;">
  400. <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  401. M-PESA
  402. </a>
  403. {%else%}
  404. <button {#href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}"#} class="btn btn-success" style="float: left;" disabled>
  405. <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  406. M-PESA
  407. </button>
  408. {%endif%}
  409. {{ form_start(cashPaymentOptionForm) }}
  410. <button type="submit" class="btn btn-warning cash">
  411. <i><img src="{{ asset('fos/images/money_icon.png') }}" alt=""></i>
  412. Cash
  413. </button>
  414. {{ form_end(cashPaymentOptionForm) }}
  415. </fieldset>
  416. </div>
  417. </div>
  418. </div>
  419. {% endif %}
  420. {% endif %}
  421. </div>
  422. </div>
  423. {# <div class="row" style="padding: 10px 0px 20px 20px; border-right: 1px solid #888888; background: #FFFFFF; box-shadow: 5px 3px 20px #888888;">
  424. {{ form_start(form) }}
  425. <fieldset>
  426. <legend>WayBill Expense</legend>
  427. <div class="row">
  428. <div class="col-lg-3 col-md-3">
  429. <label for="sender_name">Expense Type</label>
  430. {{ form_widget(form.expenseType,{'attr':{'class':'form-control' }} ) }}
  431. <div class="invalid-feedback">
  432. {{ form_errors(form.expenseType) }}
  433. </div>
  434. </div>
  435. <div class="col-lg-2 col-md-4">
  436. <label for="sender_name">Amount</label>
  437. {{ form_widget(form.amount,{'attr':{'class':'form-control' }} ) }}
  438. <div class="invalid-feedback">
  439. {{ form_errors(form.amount) }}
  440. </div>
  441. </div>
  442. </div>
  443. <div class="row" style="margin-top: 10px;">
  444. <div class="col-lg-1 col-md-1">
  445. <button type="submit" class="btn btn-success right-align">Save</button>
  446. </div>
  447. </div>
  448. </fieldset>
  449. {{ form_end(form) }}
  450. </div>#}
  451. <div class=" row pro">
  452. {% for parcel in parcels %}
  453. <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="background: #FFFFFF; /*box-shadow: 5px 3px 20px #888888;*/ margin-top: 10px; padding-top: 10px; margin-right: 20px;">
  454. <div class="col-lg-12">
  455. <fieldset>
  456. <legend>Parcel #{{ parcel.number }}</legend>
  457. <h5>{{ parcel.description }}</h5>
  458. </fieldset>
  459. <fieldset>
  460. <legend><i class="fa fa-arrow-circle-down"></i></legend>
  461. <fieldset>
  462. <legend>Location</legend>
  463. <h5>IN OFFICE :{{ transaction.wayBill.fromStation }}
  464. <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ transaction.wayBill.createdAt | date("F jS, Y \\a\\t g:ia") }}</p>
  465. {# {% if parcel.isEnRoute %}
  466. <p class="detail">To: <i class="fas fa-hand-point-right"></i>{{ parcel.enRouteFrom | date("F jS, Y \\a\\t g:ia") }}</p>
  467. {% endif %}#}
  468. </h5>
  469. </fieldset>
  470. {#{{ render(controller('App\\Parcels\\DefaultController::nav')) }}#}
  471. {{ render(controller('App\\Parcels\\ParcelController::getParcelDeliveryData',{'parcel_id':parcel.id})) }}
  472. {#{% if parcel.isEnRoute %}
  473. <fieldset>
  474. <legend>En route</legend>
  475. <h5>REG: {{ parcel.vehicle.regNumber }}
  476. <p class="detail">Loaded By: {{ transaction.waybill.createdBy.person.secondName }} {{ transaction.waybill.createdBy.person.sirName }}</p>
  477. {% if parcel.isEnRoute %}
  478. <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ parcel.enRouteFrom | date("F jS, Y \\a\\t g:ia") }}</p>
  479. {% endif %}
  480. {% if parcel.isReceived %}
  481. <p class="detail">To: <i class="fas fa-hand-point-right"></i>{{ parcel.receivedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  482. {% endif %}
  483. </h5>
  484. </fieldset>
  485. {% endif %}#}
  486. {#{% if parcel.isReceived %}
  487. <fieldset>
  488. <legend>Received By</legend>
  489. <h5>USER: {{ parcel.receivedBy.person.firstName | upper }} {{ parcel.receivedBy.person.secondName | upper }} {{parcel.receivedBy.person.sirName | upper }}
  490. {% if parcel.isReceived %}
  491. <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ parcel.receivedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  492. {% endif %}
  493. {% if transaction.wayBill.isCollected %}
  494. <p class="detail">to: <i class="fas fa-hand-point-right"></i>{{ parcel.collectedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  495. {% endif %}
  496. </h5>
  497. </fieldset>
  498. {% endif %}#}
  499. {#{% if parcel.isCollected %}
  500. <fieldset>
  501. <legend>Collected By</legend>
  502. <h5>National ID: {{ parcel.collectorNationalId }}</h5>
  503. <h5>USER: {{ parcel.collectedOfficerBy.person.firstName | upper }} {{ parcel.collectedOfficerBy.person.secondName | upper }} {{parcel.collectedOfficerBy.person.sirName | upper }}</h5>
  504. <p class="detail">At: <i class="fas fa-hand-point-right"></i>{{ parcel.collectedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  505. </fieldset>
  506. {% endif %}#}
  507. </fieldset>
  508. <div style="align-content: center; text-align: center;">
  509. <img alt="Coding Sips" src="/barcode?text={{ transaction.wayBill.id }}/{{ parcel.number }}&Codetype=Code128&size=60&print=true" />
  510. </div>
  511. </div>
  512. </div>
  513. {% endfor %}
  514. </div>
  515. {% if sms is defined and sms %}
  516. <hr>
  517. <div class="row">
  518. <table class="table table-bordered">
  519. <thead>
  520. <tr>
  521. <th>#</th>
  522. <th>RECEIVER</th>
  523. <th>STATUS</th>
  524. <th>Sent Via Phone</th>
  525. <th>MESSAGE</th>
  526. </tr>
  527. </thead>
  528. <tbody>
  529. {% for message in sms %}
  530. <tr>
  531. <td>{{ loop.index }} </td>
  532. <td>{{ message.recepient }}</td>
  533. <td>
  534. {% if message.status %}
  535. {% if message.status == 'Success' or message.status == 'Sent' %}
  536. <span class="alert-success">{{ message.status }}</span>
  537. {% else %}
  538. <span class="alert-danger">
  539. {{ message.status }}{#[{{ message.statusCode }}]#} <br>
  540. {% if message.statusCode < 1000 %}
  541. {{ statusChart[message.statusCode] }} [{{ message.statusCode }}]
  542. {% endif %}
  543. </span>
  544. {% endif %}
  545. {% else %}
  546. <span>N/A</span>
  547. {% endif %}
  548. </td>
  549. <td>
  550. {% if message.status != 'Success' or message.status != 'Sent' %}
  551. {% if message.manuallySent %}
  552. <i class="fas fa-check-circle" style="color: green;"></i>
  553. {% endif %}
  554. {% endif %}
  555. </td>
  556. <td>{{ message.sms }}</td>
  557. </tr>
  558. {% endfor %}
  559. </tbody>
  560. </table>
  561. </div>
  562. {% endif %}
  563. <div class="print-area" id="print-area">
  564. </div>
  565. <script>
  566. let printReceipt = async () => {
  567. $(".se-pre-con").fadeIn("slow");
  568. let completeTransaction = await fetch("{{ path('register_transaction_as_complete', {'id': transaction.wayBill.id }) }}", {
  569. method: 'POST'
  570. }).then(response => {
  571. response.json().then(json => {
  572. if(response.status === 200){
  573. printJS({
  574. printable:'print-area',
  575. type: 'html',
  576. css:'../../../../../assets/css/print.css'});
  577. }else{
  578. console.log('error occurred');
  579. }
  580. })
  581. }).finally(() => {
  582. $(".se-pre-con").fadeOut("slow");
  583. });
  584. };
  585. jQuery(document).bind("keyup keydown", function(e){
  586. if(e.ctrlKey && e.keyCode === 80){
  587. console.log("printing ...");
  588. printReceipt();
  589. }
  590. });
  591. window.jsPDF = window.jspdf.jsPDF;
  592. function download() {
  593. let renderHtml = $('#print-area').html();
  594. let pdf = new jsPDF('p','mm', [254, 80]);
  595. pdf.html(renderHtml, {
  596. callback: function (pdf) {
  597. window.open(pdf.output('bloburl'));
  598. }
  599. });
  600. }
  601. // download();
  602. // $( document ).ready(function() {
  603. // window.jsPDF = window.jspdf.jsPDF;
  604. //
  605. // // Default export is a4 paper, portrait, using millimeters for units
  606. // var doc = window.jsPDF;
  607. // var specialElementHandlers = {
  608. // '#editor': function (element, renderer) {
  609. // return true;
  610. // }
  611. // };
  612. //
  613. // doc.html($('.receipt-print').html(), 15, 15, {
  614. // 'width': 170,
  615. // 'elementHandlers': specialElementHandlers
  616. // });
  617. // doc.save('sample-file.pdf');
  618. // });
  619. function save() {
  620. var content = ["your-content-here"];
  621. var bl = new Blob(content, {type: "application/pdf"});
  622. var a = document.createElement("a");
  623. a.href = URL.createObjectURL("http://localhost:8000/fos/receipt/{{ transaction.wayBill.id }}");
  624. a.download = "{{ transaction.wayBill.id }}.pdf";
  625. a.hidden = true;
  626. document.body.appendChild(a);
  627. a.click();
  628. }
  629. function print(url){
  630. // $(".se-pre-con").fadeIn("slow");
  631. // printJS(url);
  632. printJS({
  633. printable: url,
  634. type:'pdf',
  635. showModal:true,
  636. modalMessage: 'Downloading receipt please wait!',
  637. onError: function (error) {
  638. console.log(error);
  639. alert('Could not generate receipt please try again ')
  640. }
  641. });
  642. }
  643. </script>
  644. {% endblock %}