Penambahan Stiker Harian
This commit is contained in:
pand03
@@ -5,7 +5,7 @@
|
||||
<!-- Meta -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="author" content="DexignLab">
|
||||
<meta name="author" content="ParkQ">
|
||||
<meta name="robots" content="">
|
||||
<meta name="keywords" content="admin dashboard, admin template, analytics, bootstrap, bootstrap 5, bootstrap 5 admin template, job board admin, job portal admin, modern, responsive admin dashboard, sales dashboard, sass, ui kit, web app, frontend">
|
||||
<meta name="description" content="All New Manufacture Powered By ParkQ | Systems.">
|
||||
|
||||
@@ -8,20 +8,22 @@
|
||||
<span class="menu-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
{{-- <li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="mdi mdi-account-multiple menu-icon"></i>
|
||||
<span class="menu-title">Operasional</span>
|
||||
<i class="menu-arrow"></i>
|
||||
</a>
|
||||
<div class="submenu">
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/parkir">Transaksi Parkir</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/stiker">Transaksi Stiker</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/member">Member</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> --}}
|
||||
@if(app()->environment('local'))
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="mdi mdi-account-multiple menu-icon"></i>
|
||||
<span class="menu-title">Operasional</span>
|
||||
<i class="menu-arrow"></i>
|
||||
</a>
|
||||
<div class="submenu">
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/parkir">Transaksi Parkir</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/stiker">Transaksi Stiker</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/transaksi/member">Member</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
{{-- <i class="mdi mdi-cube-outline menu-icon"></i> --}}
|
||||
@@ -32,7 +34,7 @@
|
||||
<div class="submenu">
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="/report/laporan-semua-transaksi">Transaksi Harian</a></li>
|
||||
{{-- <li class="nav-item"><a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li> --}}
|
||||
<li class="nav-item"><a class="nav-link" href="/report/stiker/harian">Member Harian</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@@ -49,6 +51,19 @@
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/forms/basic_elements.html" class="nav-link">
|
||||
<i class="mdi mdi-wrench menu-icon"></i>
|
||||
<span class="menu-title">Laporan</span>
|
||||
<i class="menu-arrow"></i>
|
||||
</a>
|
||||
<div class="submenu">
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="/tools/stiker-extend">Perpanjang Stiker Otomatis</a></li>
|
||||
{{-- <li class="nav-item"><a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li> --}}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{{-- <li class="nav-item">
|
||||
<a href="pages/charts/chartjs.html" class="nav-link">
|
||||
<i class="mdi mdi-finance menu-icon"></i>
|
||||
|
||||
@@ -2,13 +2,29 @@
|
||||
|
||||
@section('styles')
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
||||
<style>
|
||||
.table th {
|
||||
.select2-container .select2-selection--single {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__rendered {
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow {
|
||||
height: 38px;
|
||||
}
|
||||
/* .table th {
|
||||
text-align: center;
|
||||
}
|
||||
.table td {
|
||||
text-align: right;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@@ -21,6 +37,58 @@
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="">
|
||||
<div class="row align-items-end g-3">
|
||||
<!-- CARI DATA -->
|
||||
<div class="col-md-1">
|
||||
<div class="form-group">
|
||||
<label for="data">Cari Data</label>
|
||||
<input type="text" class="form-control" id="data" placeholder="Masukkan data">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div class="form-group">
|
||||
<label> </label> <!-- biar sejajar -->
|
||||
<select class="form-control js-example-basic-single">
|
||||
<option value="id" selected>No. ID</option>
|
||||
<option value="no_pol">No. Pol</option>
|
||||
<option value="no_barcode">No. Barcode/Card</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TANGGAL -->
|
||||
<div class="col-md-1">
|
||||
<div class="form-group">
|
||||
<label for="tanggalCari">Tanggal</label>
|
||||
<input type="date" class="form-control" id="tanggalCari" name="tanggal_mulai" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TOGGLE HARIAN -->
|
||||
<div class="col-md-2 d-flex align-items-center gap-2">
|
||||
<p class="mb-0">Harian</p>
|
||||
<label class="toggle-switch toggle-switch-success mb-0">
|
||||
<input type="checkbox" id="harianToggle" checked>
|
||||
<span class="toggle-slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- BUTTON EXPORT -->
|
||||
<div class="col-md-4 text-end">
|
||||
<div class="btn-list d-inline-flex gap-2">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-success btn-export-excel">
|
||||
<i class="fa fa-file-excel-o"></i>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-danger btn-export-pdf">
|
||||
<i class="fa fa-file-pdf-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,4 +96,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('javascript')
|
||||
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('js/select2.js') }}"></script>
|
||||
@endsection
|
||||
@@ -232,7 +232,7 @@
|
||||
});
|
||||
console.log(document.getElementById('cetak'));
|
||||
console.log(document.getElementById('date-table'));
|
||||
// }
|
||||
|
||||
});
|
||||
function loadData(tanggalMulai, tanggalAkhir) {
|
||||
let tanggal = $('#tanggalCari').val();
|
||||
@@ -466,7 +466,7 @@ function loadData(tanggalMulai, tanggalAkhir) {
|
||||
|
||||
response.overNight.forEach(function (on) {
|
||||
if (!on.jenis_mobil) return;
|
||||
|
||||
|
||||
let overnight = on.overNight;
|
||||
let onExpired = on.onExpired;
|
||||
|
||||
|
||||
@@ -1,10 +1,31 @@
|
||||
@extends('layouts.master')
|
||||
|
||||
@section('styles')
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
||||
<style>
|
||||
.select2-container .select2-selection--single {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__rendered {
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow {
|
||||
height: 38px;
|
||||
}
|
||||
.table th {
|
||||
text-align: center;
|
||||
}
|
||||
.table td {
|
||||
/* text-align: right; */
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@@ -16,39 +37,84 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body" id="cetak">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Laporan Stiker Harian</h4>
|
||||
<form id="formTanggal">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<label for="tanggalMulai">Tanggal pencarian</label>
|
||||
<div class="col-sm-2">
|
||||
<div class="d-flex gap-2">
|
||||
<input type="date" class="form-control" id="tanggalMulai" name="tanggal_mulai">
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<input type="text" class="form-control" id="cari_data" name="cariData" placeholder="Cari berdasarkan Nama">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<input type="date" class="form-control" id="tanggalCari" name="tanggal_mulai" required>
|
||||
<div class="col-sm-2">
|
||||
<div class="d-flex gap-2">
|
||||
<input type="date" class="form-control" id="tanggalSelesai" name="tanggal_selesai">
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<input type="text" class="form-control" id="cari_nopol" name="cariData" placeholder="Cari berdasarkan No. Polisi">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="d-flex gap-2">
|
||||
<select id="jenisLangganan" class="form-control js-example-basic-multiple" data-placeholder="Jenis Langganan : (SEMUA)" multiple="multiple">
|
||||
@foreach ($filterSelect['jenisLangganan'] as $jenisLangganan )
|
||||
<option value="{{ $jenisLangganan->id }}">{{ $jenisLangganan->nama }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<select id="jenisStiker" class="form-control js-example-basic-multiple" data-placeholder="Jenis Stiker : (SEMUA)" multiple="multiple">
|
||||
@foreach ($filterSelect['jenisStiker'] as $jStiker )
|
||||
<option value="{{ $jStiker->kode }}">{{ $jStiker->nama }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<div class="form-group">
|
||||
<button type="button" id="btnProses" class="btn btn-outline-secondary btn-lg btn-block">Proses</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="form-group">
|
||||
<p>Jumlah pendapatan : </p> <h3 id="pendapatan"></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<button type="button" class="btn btn-info btn-icon-text btn-export-pdf">
|
||||
Print
|
||||
<i class="mdi mdi-printer btn-icon-append"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="table-bordered">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>No. Transaksi</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Nama</th>
|
||||
<th>Alamat</th>
|
||||
<th>Telp</th>
|
||||
<th>Jenis Trans</th>
|
||||
<th>No. Polisi</th>
|
||||
<th>Jenis Kend</th>
|
||||
<th>Petugas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
<div class="table-bordered" id="cetak">
|
||||
<table id="table-stiker" class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="3%">No.</th>
|
||||
<th width="10%">No. Transaksi</th>
|
||||
<th>Nama</th>
|
||||
<th>No. Telp</th>
|
||||
<th>Alamat / Email</th>
|
||||
<th width="15%">Periode</th>
|
||||
<th>No. Polisi<br>Terdaftar</th>
|
||||
<th>Jenis Trans</th>
|
||||
<th>Harga</th>
|
||||
<th>Tanggal</th>
|
||||
{{-- <th>No. Polisi</th> --}}
|
||||
<th>Petugas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyResult">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,4 +125,426 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('javascript')
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
|
||||
|
||||
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('js/select2.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
let location = @json($locationSettings);
|
||||
console.log(location.namaperusahaan);
|
||||
|
||||
let awal = '';
|
||||
let akhir = '';
|
||||
let pendapatan = 0;
|
||||
let pdfData = [];
|
||||
|
||||
$('#btnProses').on('click', function () {
|
||||
|
||||
const jenisLangganan = $('#jenisLangganan').val();
|
||||
const jenisStiker = $('#jenisStiker').val();
|
||||
const nama = $('#cari_data').val();
|
||||
const nopol = $('#cari_nopol').val();
|
||||
|
||||
awal = $('#tanggalMulai').val();
|
||||
akhir = $('#tanggalSelesai').val();
|
||||
|
||||
|
||||
// if (!jenisLangganan || jenisLangganan.length === 0) {
|
||||
// alert('Pilih minimal 1 jenis langganan');
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (!awal || !akhir) {
|
||||
alert('Periode harus diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = $(this);
|
||||
|
||||
btn.prop('disabled', true).text('Memproses...');
|
||||
$('#alertSuccess').addClass('d-none');
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('stikerData') }}",
|
||||
type: "GET",
|
||||
data: {
|
||||
jenis_langganan: jenisLangganan,
|
||||
jenis_stiker: jenisStiker,
|
||||
tanggalAwal: awal,
|
||||
tanggalAkhir: akhir,
|
||||
name: nama,
|
||||
no_pol: nopol,
|
||||
_token: "{{ csrf_token() }}"
|
||||
},
|
||||
success: function(response) {
|
||||
pdfData = response.data;
|
||||
console.log(response);
|
||||
const tbody = $('#tbodyResult');
|
||||
tbody.empty();
|
||||
|
||||
// $.each(response.data, function (i, row) {
|
||||
|
||||
// pendapatan += parseInt(row.harga || 0, 10);
|
||||
|
||||
// tbody.append(`
|
||||
// <tr>
|
||||
// <td class="text-center">${i + 1}</td>
|
||||
// <td class="text-center">${row.notrans ?? '-'}</td>
|
||||
// <td class="text-left">${row.nama ?? '-'}</td>
|
||||
// <td class="text-left">${row.telepon ?? '-'}</td>
|
||||
// <td class="text-left">${row.alamat ?? '-'}</td>
|
||||
// <td class="text-center">${row.awal ?? '-'} - ${row.akhir ?? '-'}</td>
|
||||
// <td class="text-center">${row.nopol ?? '-'}</td>
|
||||
// <td>${row.jenis_langganan ?? '-'}</td>
|
||||
// <td>${row.harga ?? ''}</td>
|
||||
// <td>${row.tgl_edited ?? ''}</td>
|
||||
// <td class="text-end">${row.operator ?? ''}</td>
|
||||
// </tr>
|
||||
// `);
|
||||
// });
|
||||
|
||||
// initDataTable();
|
||||
|
||||
// 🔥 sortable aktif
|
||||
if (!response.success) return;
|
||||
// const tbody = $('#tbodyResult');
|
||||
// tbody.empty(); // 🔥 hapus isi lama
|
||||
|
||||
if (response.data.length === 0) {
|
||||
tbody.append(`
|
||||
<tr>
|
||||
<td colspan="11" class="text-center text-danger text-muted">
|
||||
Tidak ada data
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
$.each(response.data, function (i, row) {
|
||||
|
||||
pendapatan += parseInt(row.harga || 0, 10);
|
||||
awalDate = row.awal.toString('YYYY-MM-DD');
|
||||
tbody.append(`
|
||||
<tr>
|
||||
<td class="text-center">${i + 1}</td>
|
||||
<td class="text-center">${row.notrans ?? '-'}</td>
|
||||
<td class="text-left">${row.nama ?? '-'}</td>
|
||||
<td class="text-center">${row.telp ?? '-'}</td>
|
||||
<td class="text-center">${row.alamat ?? '-'}</td>
|
||||
<td>
|
||||
${row.awal.split(' ')[0] ?? ''} <br>
|
||||
<small class="text-muted">s/d ${row.akhir.split(' ')[0] ?? ''}</small>
|
||||
</td>
|
||||
<td class="text-center">${row.nopol ?? '-'}</td>
|
||||
<td>${row.jenis_member ?? '-'}</td>
|
||||
<td>${row.harga ?? ''}</td>
|
||||
<td>${row.tgl_edited ?? ''}</td>
|
||||
<td class="text-end">${row.operator ?? ''}</td>
|
||||
</tr>
|
||||
`);
|
||||
// <td>${row.jenis_langganan ?? '-'}</td>
|
||||
});
|
||||
|
||||
$('#pendapatan').text('Rp. ' + rupiah(pendapatan));
|
||||
|
||||
btn.prop('disabled', false).text('Proses');
|
||||
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function rupiah(angka) {
|
||||
return new Intl.NumberFormat('id-ID').format(angka || 0);
|
||||
}
|
||||
|
||||
|
||||
// let table;
|
||||
// function initDataTable() {
|
||||
// if ($.fn.DataTable.isDataTable('#table-stiker')) {
|
||||
// table.destroy(); // reset kalau reload data
|
||||
// }
|
||||
|
||||
// table = $('#table-stiker').DataTable({
|
||||
// order: [[1, 'desc']], // default sort No Transaksi
|
||||
// pageLength: 10,
|
||||
// lengthChange: true,
|
||||
// searching: false,
|
||||
// info: true,
|
||||
// });
|
||||
// }
|
||||
|
||||
$('.btn-export-pdf').on('click', function () {
|
||||
|
||||
const { jsPDF } = window.jspdf;
|
||||
|
||||
const doc = new jsPDF({
|
||||
orientation: 'portrait',
|
||||
unit: 'mm',
|
||||
format: 'a4'
|
||||
});
|
||||
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
const pageHeight = doc.internal.pageSize.getHeight();
|
||||
|
||||
const marginLeft = 10;
|
||||
const marginRight = 10;
|
||||
const marginTop = 20;
|
||||
const marginBottom = 20;
|
||||
|
||||
// =========================
|
||||
// HEADER FUNCTION
|
||||
// =========================
|
||||
const drawHeader = () => {
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setFontSize(14);
|
||||
doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('PT PARKIR MAJU JAYA', pageWidth / 2, 22, { align: 'center' });
|
||||
|
||||
doc.setFontSize(9);
|
||||
doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
||||
doc.text(
|
||||
`Dicetak : ${new Date().toLocaleDateString('id-ID')}`,
|
||||
pageWidth - marginRight,
|
||||
32,
|
||||
{ align: 'right' }
|
||||
);
|
||||
|
||||
doc.text(`Jumlah Pendapatan : ${rupiah(pendapatan)}`, marginLeft, 38);
|
||||
|
||||
// garis pemisah
|
||||
doc.line(marginLeft, 40, pageWidth - marginRight, 40);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// BODY DATA
|
||||
// =========================
|
||||
if (pdfData.length === 0) {
|
||||
alert('Data belum tersedia');
|
||||
return;
|
||||
}
|
||||
|
||||
const tableBody = pdfData.map((row, i) => ([
|
||||
i + 1,
|
||||
row.notrans ?? '-',
|
||||
row.nama ?? '-',
|
||||
// row.telepon ?? '-',
|
||||
row.nopol ?? '-',
|
||||
row.jenis_langganan ?? '-',
|
||||
`${row.awal ?? '-'} s/d ${row.akhir ?? '-'}`,
|
||||
rupiah(row.harga),
|
||||
// row.operator ?? '-'
|
||||
]));
|
||||
|
||||
// =========================
|
||||
// AUTOTABLE
|
||||
// =========================
|
||||
doc.autoTable({
|
||||
head: [[
|
||||
'No',
|
||||
'No Transaksi',
|
||||
'Nama',
|
||||
// 'Telepon',
|
||||
'No Pol',
|
||||
'Jenis',
|
||||
'Periode',
|
||||
'Harga',
|
||||
// 'Operator'
|
||||
]],
|
||||
|
||||
body: tableBody,
|
||||
|
||||
startY: 45,
|
||||
|
||||
margin: {
|
||||
left: marginLeft,
|
||||
right: marginRight,
|
||||
top: marginTop,
|
||||
bottom: marginBottom
|
||||
},
|
||||
|
||||
styles: {
|
||||
fontSize: 8,
|
||||
cellPadding: 2,
|
||||
valign: 'middle'
|
||||
},
|
||||
|
||||
headStyles: {
|
||||
fillColor: [220, 220, 220],
|
||||
textColor: 20,
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
|
||||
columnStyles: {
|
||||
0: { halign: 'center', cellWidth: 8 },
|
||||
7: { halign: 'right' }
|
||||
},
|
||||
|
||||
didDrawPage: function (pdfData) {
|
||||
// drawHeader();
|
||||
if (pdfData.pageNumber === 1) {
|
||||
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setFontSize(14);
|
||||
doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text(location.namaperusahaan, pageWidth / 2, 22, { align: 'center' });
|
||||
|
||||
doc.setFontSize(9);
|
||||
doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
||||
doc.text(
|
||||
`Dicetak : ${new Date().toLocaleDateString('id-ID')}`,
|
||||
pageWidth - marginRight,
|
||||
32,
|
||||
{ align: 'right' }
|
||||
);
|
||||
|
||||
doc.text(`Jumlah Pendapatan : ${rupiah(pendapatan)}`, marginLeft, 38);
|
||||
|
||||
doc.line(marginLeft, 40, pageWidth - marginRight, 40);
|
||||
}
|
||||
|
||||
// FOOTER
|
||||
// const pageCount = doc.internal.getNumberOfPages();
|
||||
doc.setFontSize(8);
|
||||
doc.text(
|
||||
// `Halaman ${doc.internal.getCurrentPageInfo().pageNumber} dari ${pdfData.pageNumber}`,
|
||||
`Halaman ${pdfData.pageNumber}`,
|
||||
pageWidth / 2,
|
||||
pageHeight - 10,
|
||||
{ align: 'center' }
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
doc.save('Rekap_Harian.pdf');
|
||||
});
|
||||
});
|
||||
|
||||
// $('.btn-export-pdf').on('click', async function () {
|
||||
|
||||
// const { jsPDF } = window.jspdf;
|
||||
|
||||
// const doc = new jsPDF({
|
||||
// orientation: 'portrait',
|
||||
// unit: 'mm',
|
||||
// format: 'a4'
|
||||
// });
|
||||
|
||||
// const element = document.getElementById('cetak');
|
||||
|
||||
// const canvas = await html2canvas(element, {
|
||||
// scale: 2,
|
||||
// useCORS: true
|
||||
// });
|
||||
|
||||
// const imgData = canvas.toDataURL('image/png');
|
||||
|
||||
// const pageWidth = doc.internal.pageSize.getWidth();
|
||||
// const pageHeight = doc.internal.pageSize.getHeight();
|
||||
|
||||
// const marginTop = 20;
|
||||
// const marginBottom = 20;
|
||||
// const marginLeft = 10;
|
||||
// const marginRight = 10;
|
||||
|
||||
// const headerHeight = 45; // ⬅️ ruang judul
|
||||
// const contentHeight = pageHeight - headerHeight - marginBottom;
|
||||
|
||||
// const imgWidth = pageWidth - marginLeft - marginRight;
|
||||
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||||
|
||||
// let renderedHight = 0;
|
||||
// let page = 1;
|
||||
// let renderedHeight = 0;
|
||||
|
||||
// while (renderedHeight < imgHeight) {
|
||||
|
||||
// if (page > 1) doc.addPage();
|
||||
|
||||
// doc.setFont('helvetica', 'bold');
|
||||
// doc.setFontSize(14);
|
||||
// doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
||||
|
||||
// // SUB JUDUL
|
||||
// doc.setFontSize(10);
|
||||
// doc.setFont('helvetica', 'normal');
|
||||
// doc.text('PT PARKIR MAJU JAYA', pageWidth / 2, 22, { align: 'center' });
|
||||
|
||||
// doc.setFontSize(9);
|
||||
// doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
||||
// doc.text(`Dicetak : ${new Date().toLocaleDateString('id-ID')}`, pageWidth - marginRight, 32, {
|
||||
// align: 'right'
|
||||
// });
|
||||
|
||||
// doc.setFontSize(9);
|
||||
// doc.text(`Jumlah Pendapatan : ${pendapatan}`, marginLeft, 38);
|
||||
// doc.text(`Jumlah Pendapatan : 15`, pageWidth - marginRight, 38, {
|
||||
// align: 'right'
|
||||
// });
|
||||
|
||||
// doc.addImage(
|
||||
// imgData,
|
||||
// 'PNG',
|
||||
// marginLeft,
|
||||
// marginTop - renderedHeight,
|
||||
// imgWidth,
|
||||
// imgHeight
|
||||
// );
|
||||
|
||||
// renderedHeight += contentHeight;
|
||||
// page++;
|
||||
// }
|
||||
// doc.save('Rekap_Harian.pdf');
|
||||
// });
|
||||
// halaman berikutnya
|
||||
// while (heightLeft > 0) {
|
||||
// position = heightLeft - imgHeight + marginTop;
|
||||
// doc.addPage();
|
||||
// // doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
|
||||
// doc.addImage(
|
||||
// imgData,
|
||||
// 'PNG',
|
||||
// marginLeft,
|
||||
// position,
|
||||
// imgWidth,
|
||||
// imgHeight
|
||||
// );
|
||||
// heightLeft -= (pageHeight - marginTop - marginBottom);
|
||||
// }
|
||||
// $('.btn-export-pdf').on('click', async function () {
|
||||
// // $('.cetak').css('display','block');
|
||||
// // $('.user').css('display','block');
|
||||
// const { jsPDF } = window.jspdf;
|
||||
// const doc = new jsPDF({
|
||||
// orientation: 'portrait',
|
||||
// unit: 'mm',
|
||||
// format: 'a4'});
|
||||
// // 'l', 'pt'
|
||||
// // ambil elemen tabel
|
||||
// const table = document.getElementById('cetak');
|
||||
// const canvas = await html2canvas(table, { scale: 2 });
|
||||
// const imgData = canvas.toDataURL('image/png');
|
||||
// const imgWidth = doc.internal.pageSize.getWidth();
|
||||
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||||
// doc.addImage(imgData, 'PNG', 0, 20, imgWidth, imgHeight);
|
||||
// doc.save(`Rekap Harian.pdf`);
|
||||
// });
|
||||
</script>
|
||||
@endsection
|
||||
203
resources/views/tools/stiker-extend.blade.php
Normal file
203
resources/views/tools/stiker-extend.blade.php
Normal file
@@ -0,0 +1,203 @@
|
||||
@extends('layouts.master')
|
||||
|
||||
@section('styles')
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
||||
<style>
|
||||
.select2-container .select2-selection--single {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__rendered {
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow {
|
||||
height: 38px;
|
||||
}
|
||||
/* .table th {
|
||||
text-align: center;
|
||||
}
|
||||
.table td {
|
||||
text-align: right;
|
||||
} */
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="container-scroller">
|
||||
<div class="container-fluid page-body-wrapper full-page-wrapper">
|
||||
<div class="main-panel">
|
||||
<div class="content-wrapper d-flex align-items-center auth px-0">
|
||||
<div class="row w-100 mx-0">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="auth-form-light text-left py-5 px-4 px-sm-5">
|
||||
<h4 class="text-center fw-bold">All New Manufacture</h4>
|
||||
<div class="card mb-0 h-auto">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Plih Jenis Langganan yang akan di proses : </label> <!-- biar sejajar -->
|
||||
<select name="jenisLangganan[]" class="form-control js-example-basic-multiple" multiple="multiple">
|
||||
@foreach ($jenisLangganan as $jStiker )
|
||||
<option value="{{ $jStiker->id }}">{{ $jStiker->nama }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Periode : </label>
|
||||
<div class="d-flex gap-2">
|
||||
<input type="date" class="form-control" id="tanggalMulai" name="tanggal_mulai">
|
||||
<input type="date" class="form-control" id="tanggalSelesai" name="tanggal_selesai">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" id="btnProses" class="btn btn-outline-secondary btn-lg btn-block">Proses</button>
|
||||
</div>
|
||||
<div id="progressBox" class="mt-3 d-none">
|
||||
<div class="progress">
|
||||
<div id="progressBar"
|
||||
class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
role="progressbar"
|
||||
style="width: 0%">
|
||||
</div>
|
||||
</div>
|
||||
<small id="progressText" class="text-muted d-block mt-2">
|
||||
Memulai proses...
|
||||
</small>
|
||||
</div>
|
||||
<div id="alertSuccess" class="alert alert-success d-none" role="alert">
|
||||
<span class="alert-inner--icon">
|
||||
<i class="fe fe-thumbs-up"></i>
|
||||
</span>
|
||||
<span class="alert-inner--text">
|
||||
<strong>Success!</strong> Stiker berhasil diproses.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
|
||||
@section('javascript')
|
||||
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('js/select2.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
$('#jenisLangganan').on('change', function () {
|
||||
const selected = $(this).val();
|
||||
console.log(selected);
|
||||
|
||||
if (!selected || selected.length == 0) {
|
||||
alert('Tidak ada yang dipilih');
|
||||
return
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('stiker-extend.show', 0) }}",
|
||||
type: 'GET',
|
||||
data: {
|
||||
pilihannya : selected,
|
||||
_token: "{{ csrf_token() }}"
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error(xhr.responseText);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('#modeTanggal').on('change', function () {
|
||||
const isRange = $(this).val() === 'range';
|
||||
|
||||
$('#tanggalMulai').toggleClass('d-none', isRange);
|
||||
$('#tanggalSelesai').toggleClass('d-none', !isRange);
|
||||
console.log(isRange);
|
||||
});
|
||||
|
||||
const now = new Date();
|
||||
|
||||
// $('#tanggalSingle').val(formatDateTime(now));
|
||||
|
||||
const startDay = new Date(now);
|
||||
// startDay.setHours(0,0,0,0);
|
||||
|
||||
$('#tanggalMulai').val();
|
||||
$('#tanggalSelesai').val();
|
||||
|
||||
$('#btnProses').on('click', function () {
|
||||
|
||||
const jenisLangganan = $('#jenisLangganan').val();
|
||||
const mulai = $('#tanggalMulai').val();
|
||||
const selesai = $('#tanggalSelesai').val();
|
||||
|
||||
if (!jenisLangganan || jenisLangganan.length === 0) {
|
||||
alert('Pilih minimal 1 jenis langganan');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!mulai || !selesai) {
|
||||
alert('Periode harus diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = $(this);
|
||||
|
||||
btn.prop('disabled', true).text('Memproses...');
|
||||
$('#alertSuccess').addClass('d-none');
|
||||
|
||||
// 🔥 TAMPILKAN PROGRESS
|
||||
$('#progressBox').removeClass('d-none');
|
||||
setProgress(15, 'Menyiapkan data...');
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('stiker-extend.store') }}",
|
||||
type: "POST",
|
||||
data: {
|
||||
jenis_langganan: jenisLangganan,
|
||||
tanggal_mulai: mulai,
|
||||
tanggal_selesai: selesai,
|
||||
_token: "{{ csrf_token() }}"
|
||||
},
|
||||
success: function (res) {
|
||||
setProgress(100, 'Proses selesai ✔️');
|
||||
|
||||
// ⏳ kasih jeda dikit biar user lihat 100%
|
||||
setTimeout(function () {
|
||||
$('#progressBox').addClass('d-none');
|
||||
btn.prop('disabled', false).text('Proses');
|
||||
|
||||
$('#alertSuccess')
|
||||
.removeClass('d-none')
|
||||
.hide()
|
||||
.fadeIn(300);
|
||||
}, 700);
|
||||
console.log(res);
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function setProgress(val, text) {
|
||||
$('#progressBar').css('width', val + '%');
|
||||
$('#progressText').text(text);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user