first initial
This commit is contained in:
270
resources/views/back/report/transaction_sa.blade.php.old2
Normal file
270
resources/views/back/report/transaction_sa.blade.php.old2
Normal file
@@ -0,0 +1,270 @@
|
||||
@extends('layouts.backapp')
|
||||
|
||||
@section('content')
|
||||
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
|
||||
<div class="kt-portlet__head kt-portlet__head--lg">
|
||||
<div class="kt-portlet__head-label">
|
||||
<span class="kt-portlet__head-icon">
|
||||
<i class="kt-font-brand flaticon2-line-chart"></i>
|
||||
</span>
|
||||
<h3 class="kt-portlet__head-title">
|
||||
Laporan Performa SA
|
||||
</h3>
|
||||
</div>
|
||||
<div class="kt-portlet__head-toolbar">
|
||||
<div class="kt-portlet__head-wrapper">
|
||||
<div class="kt-portlet__head-actions mt-4">
|
||||
<form action="{{ route('report.transaction_sa') }}" method="get">
|
||||
<div class="form-group row">
|
||||
<div class="col-lg-3">
|
||||
<label class="">Sa:</label>
|
||||
<select name="sa" id="sa" class="form-control">
|
||||
<option value="all">Semua Sa</option>
|
||||
@foreach ($sa_datas as $sa_data)
|
||||
<option @if($sa_data->id == $sa) selected @endif value="{{ $sa_data->id }}">{{ $sa_data->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<label class="">Dealer:</label>
|
||||
<select name="dealer" id="dealer" class="form-control">
|
||||
<option value="all">Semua Dealer</option>
|
||||
@foreach ($dealer_datas as $dealer_data)
|
||||
<option @if($dealer_data->id == $dealer) selected @endif value="{{ $dealer_data->id }}">{{ $dealer_data->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<label class="">Bulan:</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="01" @if($month == '01') selected @endif>Januari</option>
|
||||
<option value="02" @if($month == '02') selected @endif>Februari</option>
|
||||
<option value="03" @if($month == '03') selected @endif>Maret</option>
|
||||
<option value="04" @if($month == '04') selected @endif>April</option>
|
||||
<option value="05" @if($month == '05') selected @endif>Mei</option>
|
||||
<option value="06" @if($month == '06') selected @endif>Juni</option>
|
||||
<option value="07" @if($month == '07') selected @endif>Juli</option>
|
||||
<option value="08" @if($month == '08') selected @endif>Agustus</option>
|
||||
<option value="09" @if($month == '09') selected @endif>September</option>
|
||||
<option value="10" @if($month == '10') selected @endif>Oktober</option>
|
||||
<option value="11" @if($month == '11') selected @endif>November</option>
|
||||
<option value="12" @if($month == '12') selected @endif>Desember</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<br>
|
||||
<button class="btn mt-2 btn-primary">Cari</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kt-portlet__body">
|
||||
<style>
|
||||
.nav-link-tab {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.nav-link-tab.active {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
</style>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
|
||||
<div style="margin-top: 100px;width: 100%;"><canvas id="sa-chart" ></canvas></div>
|
||||
</div>
|
||||
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
|
||||
<div class="table-responsive">
|
||||
<!--begin: Datatable -->
|
||||
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">SA</th>
|
||||
<th colspan="{{ count($works) }}" class="text-center">Pekerjaan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@foreach ($works as $work)
|
||||
<th>{{ $work['name'] }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end: Datatable -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script>
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
function random_rgba(alpha) {
|
||||
var o = Math.round, r = Math.random, s = 255;
|
||||
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
|
||||
}
|
||||
|
||||
const options = {
|
||||
indexAxis: 'y',
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: 'rgb(255, 99, 132)'
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new Chart($("#sa-chart"), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: []
|
||||
},
|
||||
plugins: [ChartDataLabels],
|
||||
options: options
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: '{{ route("report.get_sa_has_transactions") }}',
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: '{{ csrf_token() }}',
|
||||
month: '{{ $month }}',
|
||||
dealer: '{{ $dealer }}',
|
||||
sa: '{{ $sa }}',
|
||||
},
|
||||
success: function(res) {
|
||||
res.forEach(function(sa, i) {
|
||||
$.ajax({
|
||||
url: '{{ route("report.sa_work_trx") }}',
|
||||
type: 'POST',
|
||||
data: {
|
||||
'_token': '{{ csrf_token() }}',
|
||||
'month' : '{{ $month }}',
|
||||
'dealer' : '{{ $dealer }}',
|
||||
'sa_filter' : '{{ $sa }}',
|
||||
'sa' : sa.id,
|
||||
},
|
||||
success: function(resWork) {
|
||||
if (/\s/.test(sa.name)) {
|
||||
chart.data.labels.push(sa.name.split(" "))
|
||||
if(res.length == 1) {
|
||||
chart.update()
|
||||
}
|
||||
}else{
|
||||
chart.data.labels.push(sa.name)
|
||||
if(res.length == 1) {
|
||||
chart.update()
|
||||
}
|
||||
}
|
||||
let tds = `<td id="row-${sa.id}">${sa.name}</td>`;
|
||||
|
||||
resWork.forEach(function(work, j) {
|
||||
if(i == 0) {
|
||||
$.when(addTrxData(work)).then(function() {
|
||||
chart.data.datasets[j].data.push(work.qty)
|
||||
if(res.length == 1) {
|
||||
chart.update()
|
||||
}
|
||||
})
|
||||
}else{
|
||||
chart.data.datasets[j].data.push(work.qty)
|
||||
if(res.length == 1) {
|
||||
chart.update()
|
||||
}
|
||||
}
|
||||
|
||||
tds += `<td>${work.qty}</td>`
|
||||
})
|
||||
|
||||
$("#kt_table tbody").append(`
|
||||
<tr>
|
||||
${tds}
|
||||
</tr>
|
||||
`)
|
||||
}
|
||||
}).done(function() {
|
||||
if(res.length > 1) {
|
||||
chart.update()
|
||||
}
|
||||
})
|
||||
|
||||
$("#sa-chart").parent().height($("#sa-chart").parent().height() + 650)
|
||||
})
|
||||
}
|
||||
}).done(function(res) {
|
||||
if(res.length == 0) {
|
||||
$("#sa-chart").parent().append(`
|
||||
<div class="alert" role="alert">
|
||||
<div class="alert-text">
|
||||
<h4 class="alert-heading">Data Kosong!</h4>
|
||||
<p>Belum ada data pekerjaan masuk</p>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
$("#sa-chart").parent().css('height', '100%')
|
||||
$("#sa-chart").remove()
|
||||
}
|
||||
})
|
||||
|
||||
function addTrxData(work) {
|
||||
let data = {
|
||||
label : work['work_name'],
|
||||
data: [],
|
||||
fill: false,
|
||||
backgroundColor: random_rgba(0.2),
|
||||
borderColor: random_rgba(1),
|
||||
borderWidth: 1,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
|
||||
chart.data.datasets.push(data)
|
||||
}
|
||||
|
||||
$(".nav-link-tab.active").removeClass('btn-primary')
|
||||
$(".nav-link-tab.active").removeClass('text-light')
|
||||
$(".nav-link-tab.active i").toggleClass('text-light')
|
||||
$(".nav-link-tab").parent().click(function() {
|
||||
$(".nav-link-tab").toggleClass('btn-primary')
|
||||
$(".nav-link-tab").toggleClass('text-light')
|
||||
$(".nav-link-tab i").toggleClass('text-light')
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
$('#kt_table').DataTable();
|
||||
}, 10000);
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user