{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
fieldset {
border: 1px dashed black;
width: 100%;
}
.datagrid-ftable .datagrid-cell {
font-size: 18px;
font-family: "monospace", sans-serif;
}
.datagrid-ftable .datagrid-row {
background: #cccccc;
}
.search-row {
margin-top: 20px;
margin-bottom: 10px;
}
.dates {
border: 1px solid #e4e0bf;
padding: 10px 10px 10px 0px;
margin: 1px 1px 1px 1px;
}
.daterangepicker {
z-index: 10000;
}
.error_response {
font-size: 13px;
font-weight: normal;
color: red;
font-family: "Nova Flat", sans-serif;
}
</style>
{% endblock %}
{% block parcelsLink %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-gift"></i> Parcels
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ path('bos_all_parcels') }}"><i class="fas fa-plus-circle"></i> All Parcels</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> <i class="fas fa-money-bill"></i> Transactions</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ path('daily_accounts') }}"><i class="fas fa-calendar"></i> Daily Accounts</a>
</div>
</li>
{% endblock %}
{% block main %}
<div class="main-sub-nav col-lg-11 col-md-11 col-sm-12 col-xs-12 alert alert-light">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " href="{{ path('bos_all_parcels') }}"><i class="fas fa-gift"></i> <i class="fas fa-list"></i> Parcels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('bos_all_transactions') }}"><i class="fas fa-list"></i> <i class="fas fa-money-bill"></i> Transactions</a>
</li>
<li class="nav-item"> <a class="nav-link active" href="">Daily Accounts</a></li>
<li class="nav-item">
<a class="nav-link" href="{{ path('daily_accounts_expenses') }}"><i class="fas fa-money-bill"></i><i class="fas fa-list"></i> Expenses</a>
</li>
<li class="nav-item"> <a class="nav-link" href="{{ path('bos_all_cancelled_transactions') }}">Cancelled</a></li>
</ul>
<div class="main">
<div class="search-row row">
{#<div class="col-lg-1 col-md-1">
<label for="date_search">Vehicle</label><br>
<input type="text" class="" style="width:100px">
</div>#}
<div class="dates col-lg-4 col-md-4">
<div class="row">
<div class="col-lg-6 col-md-6" style="">
<label for="date_search">From Date </label><br>
<input id="from_date" class="easyui-datebox from_date" data-options="formatter:myformatter,parser:myparser" name="from_date" style="width:150px">
</div>
<div class="col-lg-6 col-md-6" style="">
<label for="date_search">To Date </label><br>
<input id="to_date" class="easyui-datebox form-control" data-options="formatter:myformatter,parser:myparser" name="to_date" style="width:150px">
</div>
</div>
</div>
<div class="col-lg-1 col-md-1" style="">
<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>
</div>
<div class="col-lg-2 col-md-2" style="">
<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>
</div>
</div>
<div class="row">
<table id="accounts"
style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
toolbar="#tb"
singleSelect=true
rownumbers=true
pageSize=30
fitColumns=true>
<thead>
<tr>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div id="reports" class="easyui-dialog"
title="Basic Dialog"
data-options="
iconCls:'fa fa-file',
title: 'GENERATE REPORTS',
border: false,
closed: true,
cache: false,
closable: true,
modal: true"
style="width:800px;height:400px;padding:10px">
<div id="report_tabs" class="easyui-tabs"
data-options="tabPosition: 'left', headerWidth: 200, plain: true"
style="width:100%;">
<div title="WEEKLY REPORT"
style="padding:10px ">
<div class="row">
<div>Please select the date parameters of your report</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<form name="weeklyReportForm" id="weeklyReportForm">
<label for="date_times">DATES BETWEEN</label>
<input class="form-control" type="text" name="date_times"/>
<hr>
<button type="submit" class="btn btn-success">OK</button>
</form>
<span id="reportError" class="error_response"></span>
</div>
</div>
</div>
<div title="TRANSACTIONS REPORT" style="padding:10px">
<ul>
<li>COMING UP</li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
function search(){
$('#accounts').datagrid('load',{
from_date: $('#from_date').val(),
to_date: $('#to_date').val()
});
console.log($('#from_date').val());
console.log($('#to_date').val());
}
function getCSV(){
$(".se-pre-con").fadeIn("slow");
/*var fromDate = $('#from_date').val();
var toDate = $('#to_date').val();
var data = JSON.stringify({
"from": $('#from_date').val(),
"to": $('#to_date').val()
});*/
var fromDate = $('#from_date').val();
var toDate = $('#to_date').val();
if(fromDate == null || toDate == null || fromDate === '' || toDate === '' ){
fromDate = 0;
toDate = 0;
}
let filters = $('#accounts').datagrid('options').filterRules;
console.log(JSON.stringify(filters));
$.ajax({
type: 'POST',
// contentType: 'application/json',
contentType: 'application/x-www-form-urlencoded',
data: {
filterRules: JSON.stringify(filters)
},
url: '/daily_accounts/reports/excel/'+fromDate+'/'+toDate ,
dataType: "text",
cache: false,
success: function(data, textStatus, jqXHR){
var min=4;
var max=5;
var random = Math.floor(Math.random() * (+max - +min)) + +min;
$(".se-pre-con").fadeOut("slow");
var s = window.open('reports/'+data,'data:application/vnd.ms-excel; charset=utf-8,');
// var s = window.open(data, 'text')
},
error: function(jqXHR, textStatus, errorThrown){
$(".se-pre-con").fadeOut("slow");
alert('updatePerson error: ' + errorThrown);
},
complete: function () {
$(".se-pre-con").fadeOut("slow");
}
});
}
$('#accounts').datagrid({
url:'json/daily_accounts',
method: 'post',
pageSize:20,
singleSelect: true,
rownumbers:true,
remoteFilter:true,
pagination:true,
fitColumns:true,
collapsible:true,
showFooter: true,
view: detailview,
detailFormatter: function(index, row) {
return '<div class="ddv_bos" style="padding: 5px 0; width: auto;"></div>';
},
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv_bos');
ddv.panel({
height: 'auto',
border: true,
cache: false,
href: '/daily_accounts/' + row.id,
onLoad: function () {
$('#accounts').datagrid('fixDetailRowHeight', index);
}
})
},
columns: [[
{field:'a.account_date',title:'Date',width:30,formatter:function(value,row,index){
return row.account_date;
}},
{field:'station_name',title:'Station',width:30,formatter:function(value,row,index){
return row.station_name;
}},/*
{field:'user',title:'Sending Clerk',width:50,formatter:function(value,row,index){
var name = row.user.person.first_name+" "+row.user.person.second_name+" "+row.user.person.sir_name;
return name;
}},*/
{field:'transactions',title:'transactions',width:20,formatter:function(value,row,index){
return row.transactions.toLocaleString();
}},
{field:'amount',title:'Amount',width:30,formatter:function(value,row,index){
return row.amount.toLocaleString();
}},
{field:'expenses',title:'Expenses',width:30,formatter:function(value,row,index){
return row.expenses ? row.expenses.toLocaleString(): 0;
}}
]]
});
$(function(){
let applicants_dg = $('#accounts').datagrid();
let townIsLoaded = 0;
applicants_dg.datagrid('enableFilter', [
{
field:'station_name',
type: 'combobox',
options:{
method: 'GET',
mode:'remote',
panelHeight: 'auto',
valueField:'id',
textField:'station_name',
url:'bos/form/towns',
onSelect:function(value){
if (value.id === -1){
applicants_dg.datagrid('removeFilterRule', 'station');
}else {
applicants_dg.datagrid('addFilterRule', {
field: 'a.station_id',
op: 'equal',
value: value.id
});
}
applicants_dg.datagrid('doFilter');
},
onLoadSuccess: function(items){
// if (items.length && townIsLoaded === 0){
// townIsLoaded = 1;
// var opts = $(this).combobox('options');
// $(this).combobox('select', items[items.length-1][opts.valueField]);
// }
}
}
},
{
field:'a.account_date',
type:'datebox',
options:{
precision:1,
formatter: function(date) {
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
},
parser: function(s) {
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
},
op:['equal','less','greater']
},
{
field: 'expenses',
type: 'label'
},
{
field: 'amount',
type: 'label'
},
{
field: 'transactions',
type: 'label'
}
]);
});
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
$(function() {
$('input[name="date_times"]').daterangepicker({
opens: 'left',
minYear: 2018
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
// $("#weekly_report_submit").click(function (event) {
// event.preventDefault();
// getWeeklyReport();
//
// });
weeklyReportForm.onsubmit = async (e) => {
e.preventDefault();
$(".se-pre-con").fadeIn("slow");
fetch('daily_', {
method: 'POST',
body: new FormData(weeklyReportForm)
}).then(response => {
if(response.status === 417){
console.log(response);
let error = response.json();
error.then(jsonError => {
console.log(jsonError.message);
reportError.innerHTML = jsonError.message;
});
console.log(response.json());
}else{
console.log(response);
let file = response.blob();
file.then(pdf => {
const pdfUrl = URL.createObjectURL(pdf);
window.open(pdfUrl);
});
}
$(".se-pre-con").fadeOut("slow");
});
};
</script>
{% endblock %}