Signature block added

This commit is contained in:
nugroho 2025-07-06 23:38:24 +07:00
parent e79b713c67
commit dc2f8faf19
2 changed files with 194 additions and 171 deletions

View File

@ -1,5 +1,11 @@
<style>
.signBlock
{
display: none;
}
</style>
<div style="display: grid; width: calc(90vw - 3ch); height: calc(90vh - 3.5em); grid-template-rows: 1fr auto; row-gap: .5em;"> <div style="display: grid; width: calc(90vw - 3ch); height: calc(90vh - 3.5em); grid-template-rows: 1fr auto; row-gap: .5em;">
<div style=> <div>
<div id="vProker" class="viewer" style="height: 100%;" hidden> <div id="vProker" class="viewer" style="height: 100%;" hidden>
<div style="text-align: center; font-size: 1.1em; font-weight: 600;"> <div style="text-align: center; font-size: 1.1em; font-weight: 600;">
Program Kerja Agen Perubahan Tahun <span class="yr"></span> Program Kerja Agen Perubahan Tahun <span class="yr"></span>
@ -47,6 +53,41 @@
</thead> </thead>
<tbody id="pkContent"> <tbody id="pkContent">
</tbody> </tbody>
<tbody class="signBlock">
<tr>
<td colspan="5">
<div style="display: flex; margin-top: 1em; padding: 2ch; text-align: center; justify-content: space-between;">
<div>
<br>
Agen&nbsp;Perubahan
<br>
<br>
<br>
<span class="name"></span><br>
NIP.&nbsp;<span class="nip"></span>
</div>
<div>
Mengetahui,<br>
<span class="titles"></span>
<br>
<br>
<br>
<span class="names"></span><br>
NIP.&nbsp;<span class="nips"></span>
</div>
<div>
Pekanbaru, <span class="dt"></span>&nbsp;<span class="mth"></span>&nbsp;<span class="yr"></span><br>
<span class="titlee"></span>
<br>
<br>
<br>
<span class="namee"></span><br>
NIP.&nbsp;<span class="nipe"></span>
</div>
</div>
</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>
@ -103,6 +144,41 @@
</thead> </thead>
<tbody id="raContent"> <tbody id="raContent">
</tbody> </tbody>
<tbody class="signBlock">
<tr>
<td colspan="8">
<div style="display: flex; margin-top: 1em; padding: 2ch; text-align: center; justify-content: space-between;">
<div>
<br>
Agen&nbsp;Perubahan
<br>
<br>
<br>
<span class="name"></span><br>
NIP.&nbsp;<span class="nip"></span>
</div>
<div>
Mengetahui,<br>
<span class="titles"></span>
<br>
<br>
<br>
<span class="names"></span><br>
NIP.&nbsp;<span class="nips"></span>
</div>
<div>
Pekanbaru, <span class="dt"></span>&nbsp;<span class="mth"></span>&nbsp;<span class="yr"></span><br>
<span class="titlee"></span>
<br>
<br>
<br>
<span class="namee"></span><br>
NIP.&nbsp;<span class="nipe"></span>
</div>
</div>
</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>
@ -165,9 +241,45 @@
</thead> </thead>
<tbody id="evContent"> <tbody id="evContent">
</tbody> </tbody>
<tbody class="signBlock">
<tr>
<td colspan="10">
<div style="display: flex; margin-top: 1em; padding: 2ch; text-align: center; justify-content: space-between;">
<div>
<br>
Agen&nbsp;Perubahan
<br>
<br>
<br>
<span class="name"></span><br>
NIP.&nbsp;<span class="nip"></span>
</div>
<div>
Mengetahui,<br>
<span class="titles"></span>
<br>
<br>
<br>
<span class="names"></span><br>
NIP.&nbsp;<span class="nips"></span>
</div>
<div>
Pekanbaru, <span class="dt"></span>&nbsp;<span class="mth"></span>&nbsp;<span class="yr"></span><br>
<span class="titlee"></span>
<br>
<br>
<br>
<span class="namee"></span><br>
NIP.&nbsp;<span class="nipe"></span>
</div>
</div>
</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div style="display: grid; grid-template-columns: auto auto 1fr auto; gap: .25ch;"> <div style="display: grid; grid-template-columns: auto auto 1fr auto; gap: .25ch;">
<div> <div>
@ -213,8 +325,19 @@
{ {
moly.loadScreen.update(loadid,"Gagal mengumpulkan data. Harap ulangi beberapa saat lagi."); moly.loadScreen.update(loadid,"Gagal mengumpulkan data. Harap ulangi beberapa saat lagi.");
} }
let users = await getJson("/api/getusers");
if(users.status != 200)
{
moly.loadScreen.update(loadid,"Gagal mengumpulkan data. Harap ulangi beberapa saat lagi.");
}
const ourpeople = new Set(agents.map(a=>a.agentID));
users = users.data.filter(u=>ourpeople.has(u.agentID));
const spv = agents.find(a=>a.agentID == users.find(u=>u.level == 2).agentID);
const evr = agents.find(a=>a.agentID == users.find(u=>u.level == 1).agentID);
console.log(spv, evr)
units = units.data; units = units.data;
data.unitKerja = units.find(u=>u.deplID == data.deplID)?.unitKerja; data.unitKerja = units.find(u=>u.deplID == data.deplID)?.unitKerja;
let printTitle="Cetak Laporan";
µ('#proker').click(()=>{ µ('#proker').click(()=>{
µ('.viewer').prop("hidden",true); µ('.viewer').prop("hidden",true);
µ('.viewer').removeClass("print"); µ('.viewer').removeClass("print");
@ -222,61 +345,7 @@
µ('#vProker').addClass("print"); µ('#vProker').addClass("print");
µ('.positive').removeClass("positive"); µ('.positive').removeClass("positive");
µ('#proker').addClass("positive"); µ('#proker').addClass("positive");
const printTitle = `Program Kerja Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`; printTitle = `Program Kerja Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`;
µ('#print').off("click").click(()=>{
const content = µ('.print')[0];
if(!content) return;
const pw = window.open('', '_blank');
pw.document.write(`
<html>
<head>
<title>${printTitle}</title>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/molybdenum.css">
<style>
@page {
margin: 1cm;
size: A4 landscape;
}
body {
margin: 0;
padding: 0;
font-size: 10pt !important;
}
table.bordered, table.bordered th , table.bordered td {
border: 1px solid var(--secondary-background);
font-size: 10pt !important;
}
table td {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
.tbwrapper
{
overflow: unset !important;
max-height: unset !important;
}
tr {
break-inside: avoid;
}
</style>
</head>
<body>
${content.innerHTML}
<script>
requestAnimationFrame(() => {
setTimeout(() => {
window.print();
window.close();
}, 100); // small delay ensures DOM is painted
});
<\/script>
</body>
</html>
`);
pw.document.close();
});
}); });
µ('#renak').click(()=>{ µ('#renak').click(()=>{
µ('.viewer').prop("hidden",true); µ('.viewer').prop("hidden",true);
@ -285,61 +354,7 @@
µ('#vRenak').addClass("print"); µ('#vRenak').addClass("print");
µ('.positive').removeClass("positive"); µ('.positive').removeClass("positive");
µ('#renak').addClass("positive"); µ('#renak').addClass("positive");
const printTitle = `Rencana Aksi Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`; printTitle = `Rencana Aksi Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`;
µ('#print').off("click").click(()=>{
const content = µ('.print')[0];
if(!content) return;
const pw = window.open('', '_blank');
pw.document.write(`
<html>
<head>
<title>${printTitle}</title>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/molybdenum.css">
<style>
@page {
margin: 1cm;
size: A4 landscape;
}
body {
margin: 0;
padding: 0;
font-size: 10pt !important;
}
table.bordered, table.bordered th , table.bordered td {
border: 1px solid var(--secondary-background);
font-size: 10pt !important;
}
table td {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
.tbwrapper
{
overflow: unset !important;
max-height: unset !important;
}
tr {
break-inside: avoid;
}
</style>
</head>
<body>
${content.innerHTML}
<script>
requestAnimationFrame(() => {
setTimeout(() => {
window.print();
window.close();
}, 100); // small delay ensures DOM is painted
});
<\/script>
</body>
</html>
`);
pw.document.close();
});
}); });
µ('#eval').click(()=>{ µ('#eval').click(()=>{
µ('.viewer').prop("hidden",true); µ('.viewer').prop("hidden",true);
@ -348,61 +363,7 @@
µ('#vEval').addClass("print"); µ('#vEval').addClass("print");
µ('.positive').removeClass("positive"); µ('.positive').removeClass("positive");
µ('#eval').addClass("positive"); µ('#eval').addClass("positive");
const printTitle = `Hasil Evaluasi Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`; printTitle = `Evaluasi Agen Perubahan ${data.name} Tahun ${data.prokers[0].year}`;
µ('#print').off("click").click(()=>{
const content = µ('.print')[0];
if(!content) return;
const pw = window.open('', '_blank');
pw.document.write(`
<html>
<head>
<title>${printTitle}</title>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/molybdenum.css">
<style>
@page {
margin: 1cm;
size: A4 landscape;
}
body {
margin: 0;
padding: 0;
font-size: 10pt !important;
}
table.bordered, table.bordered th , table.bordered td {
border: 1px solid var(--secondary-background);
font-size: 10pt !important;
}
table td {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
.tbwrapper
{
overflow: unset !important;
max-height: unset !important;
}
tr {
break-inside: avoid;
}
</style>
</head>
<body>
${content.innerHTML}
<script>
requestAnimationFrame(() => {
setTimeout(() => {
window.print();
window.close();
}, 100); // small delay ensures DOM is painted
});
<\/script>
</body>
</html>
`);
pw.document.close();
});
}); });
let str = "☆☆☆☆☆"; let str = "☆☆☆☆☆";
for(let s=1;s<=data.rating;s++) for(let s=1;s<=data.rating;s++)
@ -415,14 +376,18 @@
µ('.yr').text(data.prokers[0].year); µ('.yr').text(data.prokers[0].year);
µ('.name').text(data.name); µ('.name').text(data.name);
µ('.nip').text(data.agentID); µ('.nip').text(data.agentID);
const spv = agents.find(a=>a.agentID == data.prokers[0].journal.find(j=>j.status == 2).submitterID); // const spv = agents.find(a=>a.agentID == data.prokers[0].journal.find(j=>j.status == 3).submitterID);
µ('.titles').text(spv.jabatan);
µ('.names').text(spv.name); µ('.names').text(spv.name);
µ('.nips').text(spv.agentID); µ('.nips').text(spv.agentID);
const evd = data.prokers.find(p=>p.evaled)?.journal.find(j=>j.status == 8); const evd = data.prokers.find(p=>p.evaled)?.journal.find(j=>j.status == 8);
µ('#eval').prop("disabled", (!evd)); µ('#eval').prop("disabled", (!evd));
const evr = agents.find(a=>a.agentID == evd?.submitterID); // const evr = agents.find(a=>a.agentID == evd?.submitterID);
µ('.namee').text(evr?.name); µ('.dt').text((new Date()).getDate().toString().padStart(2,"0"));
µ('.nipe').text(evr?.agentID); µ('.mth').text(monthName[(new Date()).getMonth()+1]);
µ('.titlee').text(evr.jabatan);
µ('.namee').text(evr.name);
µ('.nipe').text(evr.agentID);
µ('.uk').text(data.unitKerja); µ('.uk').text(data.unitKerja);
µ('.uk').text(data.unitKerja); µ('.uk').text(data.unitKerja);
function populateReport() function populateReport()
@ -532,5 +497,63 @@ ${(ks.solusi.length > 0 ? ks.solusi : "-")}`
} }
populateReport(); populateReport();
µ('#proker').click(); µ('#proker').click();
µ('#print').click(()=>{
const content = µ('.print')[0];
if(!content) return;
const pw = window.open('', '_blank');
pw.document.write(`
<html>
<head>
<title>${printTitle}</title>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/molybdenum.css">
<style>
@page {
margin: 1cm;
size: A4 landscape;
}
body {
margin: 0;
padding: 0;
font-size: 10pt !important;
}
table.bordered tbody.signBlock td{
border: none;
}
table.bordered th , table.bordered td {
border: 1px solid var(--secondary-background);
font-size: 10pt !important;
}
table td {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
.tbwrapper
{
overflow: unset !important;
max-height: unset !important;
}
tr {
break-inside: avoid;
}
</style>
</head>
<body>
${content.innerHTML}
<script>
requestAnimationFrame(() => {
setTimeout(() => {
window.print();
window.close();
}, 100); // small delay ensures DOM is painted
});
<\/script>
</body>
</html>
`);
pw.history.replaceState({}, "", "Laporan-Agen-Perubahan");
pw.document.close();
});
if (!units.status) moly.loadScreen.close(loadid); if (!units.status) moly.loadScreen.close(loadid);
</script> </script>

View File

@ -156,7 +156,7 @@
moly.alert.show("Belum Ada Program Kerja",`Agen ${v.name} belum memiliki program kerja yang disetujui.`); moly.alert.show("Belum Ada Program Kerja",`Agen ${v.name} belum memiliki program kerja yang disetujui.`);
return; return;
} }
await moly.dialog.show({title:"Laporan Kerja Agen Perubahan "+v.name, content:"/modules/laporan-view.html",fetching:true, data: v}); await moly.dialog.show({title:"Pratinjau Laporan Kerja Agen Perubahan "+v.name, content:"/modules/laporan-view.html",fetching:true, data: v});
}); });
ra.append(v.rating); ra.append(v.rating);
$('#agContent').append(ro); $('#agContent').append(ro);