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

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