You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
11 KiB
PHTML
301 lines
11 KiB
PHTML
@php
|
|
use NN\Module\View;
|
|
use NN\Module\DB;
|
|
@endphp
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>KPRI WARPEKA GRESIK</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ASSET}}/assets/fonts/simple-line-icons/style.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
.gg-printer {
|
|
background:
|
|
linear-gradient(to left,
|
|
currentColor 5px,transparent 0)
|
|
no-repeat 0 10px/6px 2px,
|
|
linear-gradient(to left,
|
|
currentColor 5px,transparent 0)
|
|
no-repeat 14px 10px/6px 2px,
|
|
linear-gradient(to left,
|
|
currentColor 5px,transparent 0)
|
|
no-repeat 4px 4px/2px 2px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: block;
|
|
transform: scale(var(--ggs,1));
|
|
width: 24px;
|
|
height: 14px;
|
|
border: 2px solid transparent;
|
|
border-bottom: 0;
|
|
box-shadow:
|
|
inset 0 2px 0,
|
|
inset 2px 2px 0,
|
|
inset -2px 2px 0,
|
|
inset -2px 2px 0
|
|
}
|
|
|
|
.gg-printer::after,
|
|
.gg-printer::before {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: 12px;
|
|
border: 2px solid;
|
|
left: 4px
|
|
}
|
|
|
|
.gg-printer::before {
|
|
height: 6px;
|
|
top: -4px
|
|
}
|
|
|
|
.gg-printer::after {
|
|
height: 8px;
|
|
top: 8px
|
|
}
|
|
*{
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
.print{
|
|
position: fixed;
|
|
display: inline-block;
|
|
right: 20px;
|
|
padding: 12px 10px;
|
|
box-shadow: 0 0 20px #ddd;
|
|
cursor: pointer;
|
|
color: white;
|
|
outline: none;
|
|
border: none;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: green;
|
|
bottom: 20px;
|
|
z-index: 999;
|
|
}
|
|
h1{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
h2{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
p{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
font-size:14px;
|
|
}
|
|
.text-center{
|
|
text-align:center;
|
|
}
|
|
.table thead{
|
|
box-shadow: inset 0 0 1000px orange;
|
|
}
|
|
.table th,.table td{
|
|
border: 1px solid #333333;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
@media print {
|
|
*{
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
@page {
|
|
size: A4;
|
|
}
|
|
.text-center{
|
|
text-align:center;
|
|
}
|
|
h1{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
h2{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
p{
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
font-size:14px;
|
|
}
|
|
.table thead{
|
|
box-shadow: inset 0 0 1000px orange;
|
|
}
|
|
.table th,.table td{
|
|
border: 1px solid #333333;
|
|
padding: 5px 8px;
|
|
}
|
|
.print{
|
|
display:none;
|
|
}
|
|
*{
|
|
font-family: Aria;
|
|
}
|
|
}
|
|
</style>
|
|
<script src="{{ASSET}}/db.js?v=2307"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
|
<script src="{{ASSET}}/datatable/file.js"></script>
|
|
{!! View::sc('file.js') !!}
|
|
</head>
|
|
<body class="A4">
|
|
<button class="print" onclick="window.print()"><i class="gg-printer"></i></button>
|
|
<script>
|
|
const paper = function(a){
|
|
var s = el('section').class("sheet padding-10mm");
|
|
s.child(
|
|
el('h1').html(a.kop)
|
|
);
|
|
s.child(
|
|
el('p').html(a.alamat)
|
|
);
|
|
s.child(
|
|
el('hr').attr('style','border:none;border-top:1px solid #333333; border-bottom: 2px solid #333333;padding-bottom:3px;')
|
|
);
|
|
s.child(
|
|
el('h1').html(a.title)
|
|
);
|
|
s.child(
|
|
el('div').html(`
|
|
<table style="margin-bottom:10px;">
|
|
<tbody>
|
|
<tr>
|
|
<td width="80px">NAMA</td>
|
|
<td width="5px">:</td>
|
|
<td data-user="nama">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120px">UNIT KERJA</td>
|
|
<td width="5px">:</td>
|
|
<td data-user="unitkerja">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120px">NO. TELP</td>
|
|
<td width="5px">:</td>
|
|
<td data-user="telp">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="table content">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" width="80px" rowspan="2">BULAN</th>
|
|
<th class="text-center" colspan="6">${a.lap}</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center">KE </td>
|
|
<td class="text-center">AWAL</td>
|
|
<td class="text-center">DIBAYAR</td>
|
|
<td class="text-center">JASA</td>
|
|
<td class="text-center">BARU</td>
|
|
<td class="text-center">SISA</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
`).load(a.load)
|
|
);
|
|
document.body.appendChild(s.get());
|
|
return true;
|
|
};
|
|
listPinjam.forEach(function(pj){
|
|
paper({
|
|
kop: 'KPRI WARPEKA GRESIK',
|
|
alamat: 'Jl. Arif Rakhman Hakim 108 Gresik Telp. 031 3973837',
|
|
title: 'KARTU PINJAMAN ANGGOTA',
|
|
lap: pj.text.toUpperCase(),
|
|
load: function(e){
|
|
var bd = e.el.querySelector('table.content tbody');
|
|
var th = [
|
|
{id:'01',text:'Januari'}
|
|
,{id:'02',text:'Februari'}
|
|
,{id:'03',text:'Maret'}
|
|
,{id:'04',text:'April'}
|
|
,{id:'05',text:'Mei'}
|
|
,{id:'06',text:'Juni'}
|
|
,{id:'07',text:'Juli'}
|
|
,{id:'08',text:'Agustus'}
|
|
,{id:'09',text:'September'}
|
|
,{id:'10',text:'Oktober'}
|
|
,{id:'11',text:'November'}
|
|
,{id:'12',text:'Desember'}
|
|
];
|
|
bd.innerHTML = th.map(function(q){
|
|
return `
|
|
<tr>
|
|
<td class="text-left" width="80px">${q.text}</td>
|
|
<td class="text-left" data-type="${pj.id}" data-kode="${q.id}" data-name="ke">-</td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="awal">-</td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="dibayar">-</td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="jasa">-</td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="baru">-</td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="sisa">-</td>
|
|
</tr>
|
|
<tr style="box-shadow: inset 0 0 1000px #ddd;">
|
|
<td class="text-left" width="80px">Jumlah</td>
|
|
<td class="text-left" data-type="${pj.id}" data-kode="${q.id}" data-name="totke"></td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="totawal"></td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="totdibayar"></td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="totjasa"></td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="totbaru"></td>
|
|
<td class="text-right" data-type="${pj.id}" data-kode="${q.id}" data-name="totsisa"></td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
});
|
|
});
|
|
var linklap = '{{PATH}}/api/kartupiutang/anggota/{{$fkt}}';
|
|
var ld = cssLoader();
|
|
$.ajax({
|
|
url: linklap,
|
|
dataType: 'json',
|
|
method: 'post',
|
|
data: {
|
|
ok:1
|
|
},
|
|
success:function(res){
|
|
ld.remove();
|
|
console.log(res);
|
|
Array.from(document.querySelectorAll('[data-user]')).forEach(function(n){
|
|
n.innerHTML = res[n.dataset.user];
|
|
});
|
|
listPinjam.forEach(function(n){
|
|
var l = n.id;
|
|
var n = res.data[n.id];
|
|
Object.keys(n).forEach(function(j){
|
|
var bln = j;
|
|
j = n[j];
|
|
Object.keys(j).forEach(function(z){
|
|
var x = document.querySelector(`td[data-type="${l}"][data-kode="${bln}"][data-name="${z}"]`);
|
|
x.style.textAlign = 'right';
|
|
if(j[z] != '-'){
|
|
x.innerHTML = j[z].number(2).rp().replace(/IDR/g,"Rp");
|
|
}else{
|
|
x.innerHTML = j[z];
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}, error: function(){
|
|
ld.remove();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |