templates/parcels/daily_accounts.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block stylesheets %}
  3. {{ parent() }}
  4. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  5. <style>
  6. fieldset {
  7. border: 1px dashed black;
  8. width: 100%;
  9. }
  10. .datagrid-ftable .datagrid-cell {
  11. font-size: 18px;
  12. font-family: "monospace", sans-serif;
  13. }
  14. .datagrid-ftable .datagrid-row {
  15. background: #cccccc;
  16. }
  17. .search-row {
  18. margin-top: 20px;
  19. margin-bottom: 10px;
  20. }
  21. .dates {
  22. border: 1px solid #e4e0bf;
  23. padding: 10px 10px 10px 0px;
  24. margin: 1px 1px 1px 1px;
  25. }
  26. .daterangepicker {
  27. z-index: 10000;
  28. }
  29. .error_response {
  30. font-size: 13px;
  31. font-weight: normal;
  32. color: red;
  33. font-family: "Nova Flat", sans-serif;
  34. }
  35. </style>
  36. {% endblock %}
  37. {% block parcelsLink %}
  38. <li class="nav-item dropdown">
  39. <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  40. <i class="fas fa-gift"></i> Parcels
  41. </a>
  42. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  43. <a class="dropdown-item" href="{{ path('bos_all_parcels') }}"><i class="fas fa-plus-circle"></i> All Parcels</a>
  44. <div class="dropdown-divider"></div>
  45. <a class="dropdown-item" href="#"> <i class="fas fa-money-bill"></i> Transactions</a>
  46. <div class="dropdown-divider"></div>
  47. <a class="dropdown-item" href="{{ path('daily_accounts') }}"><i class="fas fa-calendar"></i> Daily Accounts</a>
  48. </div>
  49. </li>
  50. {% endblock %}
  51. {% block main %}
  52. <div class="main-sub-nav col-lg-11 col-md-11 col-sm-12 col-xs-12 alert alert-light">
  53. <ul class="nav nav-tabs">
  54. <li class="nav-item">
  55. <a class="nav-link " href="{{ path('bos_all_parcels') }}"><i class="fas fa-gift"></i> <i class="fas fa-list"></i> Parcels</a>
  56. </li>
  57. <li class="nav-item">
  58. <a class="nav-link" href="{{ path('bos_all_transactions') }}"><i class="fas fa-list"></i> <i class="fas fa-money-bill"></i> Transactions</a>
  59. </li>
  60. <li class="nav-item"> <a class="nav-link active" href="">Daily Accounts</a></li>
  61. <li class="nav-item">
  62. <a class="nav-link" href="{{ path('daily_accounts_expenses') }}"><i class="fas fa-money-bill"></i><i class="fas fa-list"></i> Expenses</a>
  63. </li>
  64. <li class="nav-item"> <a class="nav-link" href="{{ path('bos_all_cancelled_transactions') }}">Cancelled</a></li>
  65. </ul>
  66. <div class="main">
  67. <div class="search-row row">
  68. {#<div class="col-lg-1 col-md-1">
  69. <label for="date_search">Vehicle</label><br>
  70. <input type="text" class="" style="width:100px">
  71. </div>#}
  72. <div class="dates col-lg-4 col-md-4">
  73. <div class="row">
  74. <div class="col-lg-6 col-md-6" style="">
  75. <label for="date_search">From Date </label><br>
  76. <input id="from_date" class="easyui-datebox from_date" data-options="formatter:myformatter,parser:myparser" name="from_date" style="width:150px">
  77. </div>
  78. <div class="col-lg-6 col-md-6" style="">
  79. <label for="date_search">To Date </label><br>
  80. <input id="to_date" class="easyui-datebox form-control" data-options="formatter:myformatter,parser:myparser" name="to_date" style="width:150px">
  81. </div>
  82. </div>
  83. </div>
  84. <div class="col-lg-1 col-md-1" style="">
  85. <button onclick="search()" style="margin-top: 30px; font-family: 'Nova Flat', serif, FontAwesome" class="btn btn-success btn-sm"><i class="fa fa-search"></i> search </button>
  86. </div>
  87. <div class="col-lg-2 col-md-2" style="">
  88. <button onclick="getCSV()" style="margin-top: 30px; font-family: 'Nova Flat', serif, FontAwesome" class="btn btn-success btn-sm"><i class="fa fa-search"></i> export to excel </button>
  89. </div>
  90. </div>
  91. <div class="row">
  92. <table id="accounts"
  93. style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
  94. toolbar="#tb"
  95. singleSelect=true
  96. rownumbers=true
  97. pageSize=30
  98. fitColumns=true>
  99. <thead>
  100. <tr>
  101. </tr>
  102. </thead>
  103. </table>
  104. </div>
  105. </div>
  106. </div>
  107. <div id="reports" class="easyui-dialog"
  108. title="Basic Dialog"
  109. data-options="
  110. iconCls:'fa fa-file',
  111. title: 'GENERATE REPORTS',
  112. border: false,
  113. closed: true,
  114. cache: false,
  115. closable: true,
  116. modal: true"
  117. style="width:800px;height:400px;padding:10px">
  118. <div id="report_tabs" class="easyui-tabs"
  119. data-options="tabPosition: 'left', headerWidth: 200, plain: true"
  120. style="width:100%;">
  121. <div title="WEEKLY REPORT"
  122. style="padding:10px ">
  123. <div class="row">
  124. <div>Please select the date parameters of your report</div>
  125. </div>
  126. <hr>
  127. <div class="row">
  128. <div class="col-lg-6 col-md-6">
  129. <form name="weeklyReportForm" id="weeklyReportForm">
  130. <label for="date_times">DATES BETWEEN</label>
  131. <input class="form-control" type="text" name="date_times"/>
  132. <hr>
  133. <button type="submit" class="btn btn-success">OK</button>
  134. </form>
  135. <span id="reportError" class="error_response"></span>
  136. </div>
  137. </div>
  138. </div>
  139. <div title="TRANSACTIONS REPORT" style="padding:10px">
  140. <ul>
  141. <li>COMING UP</li>
  142. </ul>
  143. </div>
  144. </div>
  145. </div>
  146. {% endblock %}
  147. {% block javascripts %}
  148. {{ parent() }}
  149. <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  150. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  151. <script>
  152. function search(){
  153. $('#accounts').datagrid('load',{
  154. from_date: $('#from_date').val(),
  155. to_date: $('#to_date').val()
  156. });
  157. console.log($('#from_date').val());
  158. console.log($('#to_date').val());
  159. }
  160. function getCSV(){
  161. $(".se-pre-con").fadeIn("slow");
  162. /*var fromDate = $('#from_date').val();
  163. var toDate = $('#to_date').val();
  164. var data = JSON.stringify({
  165. "from": $('#from_date').val(),
  166. "to": $('#to_date').val()
  167. });*/
  168. var fromDate = $('#from_date').val();
  169. var toDate = $('#to_date').val();
  170. if(fromDate == null || toDate == null || fromDate === '' || toDate === '' ){
  171. fromDate = 0;
  172. toDate = 0;
  173. }
  174. let filters = $('#accounts').datagrid('options').filterRules;
  175. console.log(JSON.stringify(filters));
  176. $.ajax({
  177. type: 'POST',
  178. // contentType: 'application/json',
  179. contentType: 'application/x-www-form-urlencoded',
  180. data: {
  181. filterRules: JSON.stringify(filters)
  182. },
  183. url: '/daily_accounts/reports/excel/'+fromDate+'/'+toDate ,
  184. dataType: "text",
  185. cache: false,
  186. success: function(data, textStatus, jqXHR){
  187. var min=4;
  188. var max=5;
  189. var random = Math.floor(Math.random() * (+max - +min)) + +min;
  190. $(".se-pre-con").fadeOut("slow");
  191. var s = window.open('reports/'+data,'data:application/vnd.ms-excel; charset=utf-8,');
  192. // var s = window.open(data, 'text')
  193. },
  194. error: function(jqXHR, textStatus, errorThrown){
  195. $(".se-pre-con").fadeOut("slow");
  196. alert('updatePerson error: ' + errorThrown);
  197. },
  198. complete: function () {
  199. $(".se-pre-con").fadeOut("slow");
  200. }
  201. });
  202. }
  203. $('#accounts').datagrid({
  204. url:'json/daily_accounts',
  205. method: 'post',
  206. pageSize:20,
  207. singleSelect: true,
  208. rownumbers:true,
  209. remoteFilter:true,
  210. pagination:true,
  211. fitColumns:true,
  212. collapsible:true,
  213. showFooter: true,
  214. view: detailview,
  215. detailFormatter: function(index, row) {
  216. return '<div class="ddv_bos" style="padding: 5px 0; width: auto;"></div>';
  217. },
  218. onExpandRow: function (index, row) {
  219. var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv_bos');
  220. ddv.panel({
  221. height: 'auto',
  222. border: true,
  223. cache: false,
  224. href: '/daily_accounts/' + row.id,
  225. onLoad: function () {
  226. $('#accounts').datagrid('fixDetailRowHeight', index);
  227. }
  228. })
  229. },
  230. columns: [[
  231. {field:'a.account_date',title:'Date',width:30,formatter:function(value,row,index){
  232. return row.account_date;
  233. }},
  234. {field:'station_name',title:'Station',width:30,formatter:function(value,row,index){
  235. return row.station_name;
  236. }},/*
  237. {field:'user',title:'Sending Clerk',width:50,formatter:function(value,row,index){
  238. var name = row.user.person.first_name+" "+row.user.person.second_name+" "+row.user.person.sir_name;
  239. return name;
  240. }},*/
  241. {field:'transactions',title:'transactions',width:20,formatter:function(value,row,index){
  242. return row.transactions.toLocaleString();
  243. }},
  244. {field:'amount',title:'Amount',width:30,formatter:function(value,row,index){
  245. return row.amount.toLocaleString();
  246. }},
  247. {field:'expenses',title:'Expenses',width:30,formatter:function(value,row,index){
  248. return row.expenses ? row.expenses.toLocaleString(): 0;
  249. }}
  250. ]]
  251. });
  252. $(function(){
  253. let applicants_dg = $('#accounts').datagrid();
  254. let townIsLoaded = 0;
  255. applicants_dg.datagrid('enableFilter', [
  256. {
  257. field:'station_name',
  258. type: 'combobox',
  259. options:{
  260. method: 'GET',
  261. mode:'remote',
  262. panelHeight: 'auto',
  263. valueField:'id',
  264. textField:'station_name',
  265. url:'bos/form/towns',
  266. onSelect:function(value){
  267. if (value.id === -1){
  268. applicants_dg.datagrid('removeFilterRule', 'station');
  269. }else {
  270. applicants_dg.datagrid('addFilterRule', {
  271. field: 'a.station_id',
  272. op: 'equal',
  273. value: value.id
  274. });
  275. }
  276. applicants_dg.datagrid('doFilter');
  277. },
  278. onLoadSuccess: function(items){
  279. // if (items.length && townIsLoaded === 0){
  280. // townIsLoaded = 1;
  281. // var opts = $(this).combobox('options');
  282. // $(this).combobox('select', items[items.length-1][opts.valueField]);
  283. // }
  284. }
  285. }
  286. },
  287. {
  288. field:'a.account_date',
  289. type:'datebox',
  290. options:{
  291. precision:1,
  292. formatter: function(date) {
  293. var y = date.getFullYear();
  294. var m = date.getMonth()+1;
  295. var d = date.getDate();
  296. return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  297. },
  298. parser: function(s) {
  299. if (!s) return new Date();
  300. var ss = (s.split('-'));
  301. var y = parseInt(ss[0],10);
  302. var m = parseInt(ss[1],10);
  303. var d = parseInt(ss[2],10);
  304. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  305. return new Date(y,m-1,d);
  306. } else {
  307. return new Date();
  308. }
  309. }
  310. },
  311. op:['equal','less','greater']
  312. },
  313. {
  314. field: 'expenses',
  315. type: 'label'
  316. },
  317. {
  318. field: 'amount',
  319. type: 'label'
  320. },
  321. {
  322. field: 'transactions',
  323. type: 'label'
  324. }
  325. ]);
  326. });
  327. function myformatter(date){
  328. var y = date.getFullYear();
  329. var m = date.getMonth()+1;
  330. var d = date.getDate();
  331. return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  332. }
  333. function myparser(s){
  334. if (!s) return new Date();
  335. var ss = (s.split('-'));
  336. var y = parseInt(ss[0],10);
  337. var m = parseInt(ss[1],10);
  338. var d = parseInt(ss[2],10);
  339. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  340. return new Date(y,m-1,d);
  341. } else {
  342. return new Date();
  343. }
  344. }
  345. $(function() {
  346. $('input[name="date_times"]').daterangepicker({
  347. opens: 'left',
  348. minYear: 2018
  349. }, function(start, end, label) {
  350. console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  351. });
  352. });
  353. // $("#weekly_report_submit").click(function (event) {
  354. // event.preventDefault();
  355. // getWeeklyReport();
  356. //
  357. // });
  358. weeklyReportForm.onsubmit = async (e) => {
  359. e.preventDefault();
  360. $(".se-pre-con").fadeIn("slow");
  361. fetch('daily_', {
  362. method: 'POST',
  363. body: new FormData(weeklyReportForm)
  364. }).then(response => {
  365. if(response.status === 417){
  366. console.log(response);
  367. let error = response.json();
  368. error.then(jsonError => {
  369. console.log(jsonError.message);
  370. reportError.innerHTML = jsonError.message;
  371. });
  372. console.log(response.json());
  373. }else{
  374. console.log(response);
  375. let file = response.blob();
  376. file.then(pdf => {
  377. const pdfUrl = URL.createObjectURL(pdf);
  378. window.open(pdfUrl);
  379. });
  380. }
  381. $(".se-pre-con").fadeOut("slow");
  382. });
  383. };
  384. </script>
  385. {% endblock %}