278 lines
12 KiB
PHP
278 lines
12 KiB
PHP
@extends('layouts.vertical', ['page_title' => 'Datatables'])
|
||
|
||
@section('css')
|
||
<!-- third party css -->
|
||
<link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
|
||
<link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
|
||
type="text/css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
|
||
<!-- third party css end -->
|
||
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
||
<style type="text/css">
|
||
.ag-theme-alpine {
|
||
--ag-header-column-separator-display: block;
|
||
--ag-header-column-separator-height: 20%;
|
||
--ag-header-column-separator-width: 1px;
|
||
--ag-header-column-separator-color: rgb(0, 0, 0);
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('content')
|
||
<!-- Start Content-->
|
||
<div class="container-fluid">
|
||
|
||
<!-- start page title -->
|
||
<div class="row">
|
||
<div class="col-md-6 p-2">
|
||
<h4 class="page-title">Summary 2 Report</h4>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- end page title -->
|
||
@if (session()->has('message'))
|
||
<div class="alert alert-success">
|
||
{{ session()->get('message') }}
|
||
</div>
|
||
@endif
|
||
@if (session()->has('error'))
|
||
<div class="alert alert-danger">
|
||
{{ session()->get('error') }}
|
||
</div>
|
||
@endif
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div>
|
||
<a href="/report/export" class="btn btn-sm btn-primary" style="margin-bottom: 5px; font-weight: bold">
|
||
Export to Excel
|
||
</a>
|
||
</div>
|
||
<div id="myGrid" style="" class="ag-theme-alpine"></div>
|
||
</div> <!-- end card body-->
|
||
</div> <!-- end card -->
|
||
</div><!-- end col-->
|
||
</div>
|
||
<!-- end row-->
|
||
</div> <!-- container -->
|
||
|
||
|
||
|
||
<style type="text/css">
|
||
.img-thumbnail {
|
||
max-width: 100px
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('script')
|
||
<!-- third party js -->
|
||
<script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
|
||
<script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.0/xlsx.full.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
jQuery(document).ready(function($) {
|
||
|
||
const columnDefs = [{
|
||
headerName: 'Division',
|
||
field: 'name',
|
||
pinned: 'left',
|
||
width: 240,
|
||
suppressSizeToFit: true,
|
||
filter: 'agTextColumnFilter',
|
||
floatingFilter: true,
|
||
sortable: true,
|
||
sort: 'asc'
|
||
},
|
||
{
|
||
headerName: 'Breathefree Clinic – Business update',
|
||
children: [
|
||
@foreach($days as $ts => $date)
|
||
{
|
||
headerName: '{{str_replace("1 ","",$date)}}',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
field: 'total_{{$ts}}',
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
},
|
||
@endforeach
|
||
{
|
||
headerName: 'LM Gr%',
|
||
field: 'total_lm',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
valueFormatter: params => {
|
||
return params.value + '%'
|
||
},
|
||
cellStyle: params => {
|
||
if (params.value <= 0) {
|
||
return {
|
||
color: 'white',
|
||
backgroundColor: 'red'
|
||
};
|
||
} else if (params.value >= 10 && params.value <= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'yellow'
|
||
};
|
||
} else if (params.value >= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'green'
|
||
};
|
||
}
|
||
return null;
|
||
}
|
||
},
|
||
{
|
||
headerName: 'First Gr%',
|
||
field: 'total_fm',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
valueFormatter: params => {
|
||
return params.value + '%'
|
||
},
|
||
cellStyle: params => {
|
||
if (params.value <= 0) {
|
||
return {
|
||
color: 'white',
|
||
backgroundColor: 'red'
|
||
};
|
||
} else if (params.value >= 10 && params.value <= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'yellow'
|
||
};
|
||
} else if (params.value >= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'green'
|
||
};
|
||
}
|
||
return null;
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
@foreach($specialities as $speciality)
|
||
{
|
||
headerName: '{{$speciality->speciality}}',
|
||
children: [
|
||
@foreach($days as $ts => $date)
|
||
{
|
||
headerName: '{{str_replace("1 ","",$date)}}',
|
||
field: '{{strtolower(str_replace(" ","_",$speciality->speciality))}}_{{$ts}}',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
},
|
||
@endforeach
|
||
{
|
||
headerName: 'LM Gr%',
|
||
field: '{{strtolower(str_replace(" ","_",$speciality->speciality))}}_lm',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
valueFormatter: params => {
|
||
return params.value + '%'
|
||
},
|
||
cellStyle: params => {
|
||
if (params.value <= 0) {
|
||
return {
|
||
color: 'white',
|
||
backgroundColor: 'red'
|
||
};
|
||
} else if (params.value >= 10 && params.value <= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'yellow'
|
||
};
|
||
} else if (params.value >= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'green'
|
||
};
|
||
}
|
||
return null;
|
||
}
|
||
},
|
||
{
|
||
headerName: 'First Gr%',
|
||
field: '{{strtolower(str_replace(" ","_",$speciality->speciality))}}_fm',
|
||
filter: 'agNumberColumnFilter',
|
||
floatingFilter: true,
|
||
width: 140,
|
||
sortable: true,
|
||
|
||
valueFormatter: params => {
|
||
return params.value + '%'
|
||
},
|
||
cellStyle: params => {
|
||
if (params.value <= 0) {
|
||
return {
|
||
color: 'white',
|
||
backgroundColor: 'red'
|
||
};
|
||
} else if (params.value >= 10 && params.value <= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'yellow'
|
||
};
|
||
} else if (params.value >= 15) {
|
||
return {
|
||
color: 'black',
|
||
backgroundColor: 'green'
|
||
};
|
||
}
|
||
return null;
|
||
}
|
||
}
|
||
]
|
||
},
|
||
@endforeach
|
||
|
||
]
|
||
|
||
const gridOptions = {
|
||
columnDefs: columnDefs,
|
||
defaultColDef: {
|
||
resizable: true,
|
||
},
|
||
rowData: {!! json_encode($metrics) !!},
|
||
domLayout: 'autoHeight',
|
||
};
|
||
|
||
const gridDiv = document.querySelector('#myGrid');
|
||
new agGrid.Grid(gridDiv, gridOptions);
|
||
|
||
// $.ajax({
|
||
// type: "GET",
|
||
// url: '/report/ajaxdatabfsummary',
|
||
// processData: false,
|
||
// contentType: false,
|
||
// success: function(data) {
|
||
// gridOptions.api.setRowData(data);
|
||
// $("#pageloader").fadeOut();
|
||
// },
|
||
// });
|
||
|
||
});
|
||
</script>
|
||
<!-- end demo js-->
|
||
@endsection
|