templates/fos/parcels/daily_transaction.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 %}
  10. <!-- Second Nav -->
  11. <nav class="navbar-second navbar navbar-default navbar-static-top" role="navigation">
  12. <div class="container-fluid">
  13. <div class="navbar-header">
  14. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  15. data-target="#bs-example-navbar-collapse-1">
  16. <span class="sr-only">Toggle navigation</span>
  17. <span class="icon-bar"></span>
  18. <span class="icon-bar"></span>
  19. <span class="icon-bar"></span>
  20. </button>
  21. <!-- Brand -->
  22. {% block current %}
  23. <span class="navbar-brand" href="#"><i class="fa fa-gears"></i> Transactions</span>
  24. {% endblock %}
  25. </div>
  26. <div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
  27. <ul class="nav navbar-nav animated fadeIn">
  29. {% block secondarylinkblock %}
  32. {# <li class=""><a href="#"><i class="fa fa-user"></i> My Daily Summary</a></li>
  34. <li class=""><a href="#"><i class="fa fa-users"></i> All Daily Summary</a></li>#}
  36. {#<li><a href="{{ path('new-parcel') }}"><i class="fa fa-plus-circle"></i> Un-Loaded Parcels</a></li>#}
  37. <li class="active"><a href="#"><i class="fa fa-arrow-circle-down"></i> <i class="fa fa-money-bill"></i> All Transactions</a></li>
  39. {% endblock %}
  42. </ul>
  43. <ul class="nav navbar-nav navbar-right">
  44. <li class=""><a></a></li>
  45. {#<li><p class="navbar-text"></p></li>#}
  46. </ul>
  47. </div><!-- /.navbar-collapse -->
  48. </div><!-- /.container-fluid -->
  49. </nav>
  51. {% endblock %}
  54. {% block main %}
  56. <div class="row">
  57. <div class="col">
  58. <table id="transactions"
  59. style="width:100%; font-weight:normal; text-transform: uppercase;"
  60. singleSelect=true
  61. rownumbers=true
  62. pageSize=30
  63. fitColumns=true>
  65. <thead>
  66. <tr>
  67. </tr>
  68. </thead>
  69. </table>
  70. </div>
  71. </div>
  74. {% endblock %}
  77. {% block javascript %}
  78. {#<script type="text/javascript" src="{{ asset('fos/scripts/daily_transactions.js') }}"></script>#}
  79. <script >
  80. $('#transactions').datagrid({
  81. url:'transactions/transaction-list',
  82. method: 'post',
  83. pageSize:20,
  84. singleSelect: true,
  85. rownumbers:true,
  86. remoteFilter:true,
  87. pagination:true,
  88. fitColumns:true,
  89. collapsible:true,
  90. showFooter: true,
  91. loadMsg: 'Loading Transaction',
  92. view: detailview,
  93. detailFormatter: function(index, row) {
  94. return '<div class="ddv" style="padding: 5px 0"></div>';
  95. },
  96. rowStyler: function(index,row){
  97. if (row.is_cancelled === '1'){
  98. return 'background-color:#ff7518;color:#fff;font-weight:bold;';
  99. }
  100. },
  101. onExpandRow: function (index, row) {
  102. var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
  103. ddv.panel({
  104. height: 'auto',
  105. border: false,
  106. cache: false,
  107. href: 'transactions/details/' + row.id,
  108. onLoad: function () {
  109. $('#transactions').datagrid('fixDetailRowHeight', index);
  110. }
  111. })
  112. },
  113. /* filterStringify: function(data){
  114. $.map(data, function(item){
  115. if (item.field == 'd.accountDate'){
  116. item.value = $.fn.datebox.defaults.parser(item.value).getTime();
  117. }
  118. });
  119. return JSON.stringify(data);
  120. },*/
  121. columns: [[
  122. {field:'b.id',title:'WayBill',width:20,formatter:function(value,row,index){
  123. return row.id;
  124. }},
  125. {field:'c.account_date',title:'Date',width:20,formatter:function(value,row,index){
  126. return row.account_date;
  127. }},
  128. {field:'d.id',title:'Destination',width:30,formatter:function(value,row,index){
  129. return row.station_name;
  130. }},
  131. {field:'b.sender_name',title:'Sender',width:60,formatter:function(value,row,index){
  132. return row.sender_name;
  133. }},
  134. {field:'b.sender_phone_number',title:'Sender Phone',width:30,formatter:function(value,row,index){
  135. return row.sender_phone_number;
  136. }},
  137. {field:'b.receiver_name',title:'Sending To',width:60,formatter:function(value,row,index){
  138. return row.receiver_name;
  139. }},
  140. {field:'b.receiver_phone_number',title:'Receiver Phone',width:30,formatter:function(value,row,index){
  141. return row.receiver_phone_number;
  142. }},
  143. {field:'a.payment_method',title:'Via',width:30,formatter:function(value,row,index){
  144. return row.payment_method;
  145. }},
  146. {field:'f.transaction_id',title:'MPESA',width:30,formatter:function(value,row,index){
  147. return row.transaction_id;
  148. }},
  149. {field:'a.amount',title:'Amount',width:20,formatter:function(value,row,index){
  150. return row.amount;
  151. }}
  152. ]]
  153. });
  156. $(function(){
  157. var transactionDataGrid = $('#transactions').datagrid();
  159. var isStationLoaded = 0;
  161. var isToStationLoaded = 0;
  163. transactionDataGrid.datagrid('enableFilter', [
  164. {
  165. field:'fromStation',
  166. type: 'combobox',
  167. options:{
  168. method: 'GET',
  169. mode:'remote',
  170. panelHeight: 'auto',
  171. valueField:'id',
  172. textField:'station_name',
  173. url:'/form/stations',
  175. onSelect:function(value){
  177. console.log(value.id);
  178. // alert(value.station_name);
  179. if (value.id === -1){
  180. transactionDataGrid.datagrid('removeFilterRule', 'w.fromStation');
  181. }else {
  182. transactionDataGrid.datagrid('addFilterRule', {
  183. field: 'w.fromStation',
  184. op: 'equal',
  185. value: value.id
  186. });
  187. }
  188. transactionDataGrid.datagrid('doFilter');
  189. },
  190. onLoadSuccess: function(items){
  192. if (items.length && isStationLoaded === 0){
  193. isStationLoaded = 1;
  194. var opts = $(this).combobox('options');
  195. $(this).combobox('select', items[items.length-1][opts.valueField]);
  196. }
  197. }
  199. }
  200. },
  201. {
  202. field:'toStation',
  203. type: 'combobox',
  204. options:{
  205. method: 'GET',
  206. mode:'remote',
  207. panelHeight: 'auto',
  208. valueField:'id',
  209. textField:'station_name',
  210. url:'/form/stations',
  212. onSelect:function(value){
  213. console.log(value.id);
  214. if (value.id === -1){
  215. transactionDataGrid.datagrid('removeFilterRule', 'w.toStation');
  216. } else {
  217. transactionDataGrid.datagrid('addFilterRule', {
  218. field: 'w.toStation',
  219. op: 'equal',
  220. value: value.id
  221. });
  222. }
  224. transactionDataGrid.datagrid('doFilter');
  226. },
  227. onLoadSuccess: function(items){
  229. if (items.length && isToStationLoaded === 0){
  230. isToStationLoaded = 1;
  231. var opts = $(this).combobox('options');
  232. $(this).combobox('select', items[items.length-1][opts.valueField]);
  233. }
  234. }
  236. }
  237. },{
  238. field:'d.accountDate',
  239. type:'datebox',
  240. options:{
  241. precision:1,
  242. formatter: function(date) {
  243. var y = date.getFullYear();
  244. var m = date.getMonth()+1;
  245. var d = date.getDate();
  246. return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  247. },
  248. parser: function(s) {
  249. if (!s) return new Date();
  250. var ss = (s.split('-'));
  251. var y = parseInt(ss[0],10);
  252. var m = parseInt(ss[1],10);
  253. var d = parseInt(ss[2],10);
  254. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  255. return new Date(y,m-1,d);
  256. } else {
  257. return new Date();
  258. }
  259. }
  260. },
  261. op:['equal','less','greater']
  262. },
  263. {
  264. field:'a.payment_method',
  265. type:'label',
  266. options:{precision:1},
  267. op:['less','greater','equal']
  268. },
  269. {
  270. field:'f.transaction_id',
  271. type:'textbox'
  272. },
  273. {
  274. field:'t.amount',
  275. type:'numberbox',
  276. options:{precision:1},
  277. op:['less','greater','equal']
  278. }
  279. ]);
  281. });
  284. function formatAmount(val,row){
  286. return val.toLocaleString();
  287. }
  288. </script>
  289. {% endblock %}