SMK_Kelulusan/resources/js/components/SKK13HasilBelajar.js

529 lines
33 KiB
JavaScript
Executable File
Vendored

import m from "mithril"
import _isEmpty from "lodash.isempty"
import _map from "lodash.map"
import Siswa from "../models/Siswa"
import AccessLog from "../models/AccessLog"
var component = {
oninit: () => {
document.title = 'Surat Keterangan Lulus - SMK Bhakti Anindya';
Siswa.current = {};
AccessLog.fetch('sk-k13-hasil-belajar');
},
namaMapel: {
'agama': 'Pendidikan Agama dan Budi Pekerti',
'pkn': 'Pendidikan Pancasila dan Kewarganegaraan',
'indo': 'Bahasa Indonesia',
'penjas': 'Pendidikan Jasmani, Olahraga dan Kesehatan',
'senbud': 'Seni Budaya',
'mtk': 'Matematika',
'inggris': 'Bahasa Inggris dan Bahasa Asing Lainnya',
'ipa': 'Ilmu Pengetahuan Alam',
'sejarah': 'Sejarah Indonesia',
'fisika': 'Fisika',
'kimia': 'Kimia',
'simdig': 'Simulasi dan Komunikasi Digital',
'dpk': 'Dasar Program Keahlian',
'kk': 'Kompetensi Keahlian',
'mandarin': 'Bahasa Mandarin',
'kbi': 'Korespondensi Bahasa Inggris',
'pap': 'Praktek Administrasi Perkantoran',
'myob': 'MYOB',
'eb': 'Ekonomi Bisnis',
'au': 'Administrasi Umum',
'ipat': 'IPA Terapan',
'wisata': 'Kepariwisataan',
},
rataRata: [],
namaMuatan: {
'munas': 'MUATAN NASIONAL',
'muwil': 'MUATAN KEWILAYAHAN',
'mujur': 'MUATAN PEMINATAN KEJURUAN',
},
// This prop is to prevent double dialog when printing,
// caused by the print button's confirm()
// and the beforeprint's alert()
confirmPrint: 0,
view: () => {
component.rataRata = [];
return [
m('.header', [
m('span.italic.text-xs', [
'Saat ini sudah ',
m('strong', [
AccessLog.current.accessed,
' / ',
AccessLog.current.total,
]),
' siswa yang telah mencetak surat keterangan hasil belajar.'
]),
m('h1.title', 'Surat Keterangan Lulus Siswa SMK Bhakti Anindya'),
m('span', 'Silahkan masukkan NISN dan Tanggal Lahir kamu di bawah ini.'),
]),
m('form.form', {
onsubmit: e => {
e.preventDefault();
Siswa.cariData({
nisn: e.target.elements.nisn.value,
tanggalLahir: e.target.elements.tanggalLahir.value,
src: 'sk-k13-hasil-belajar',
with: ['k13HasilBelajar', 'accessLog'],
});
}
},
m('.form-grid', [
m('.form-group', [
m('label.form-label[for=input-nisn]', 'NISN'),
m('input.form-input.input-text#input-nisn[name=nisn][type=text][autocomplete=off][required]'),
m('p.input-helper', [
'Nomor Induk Siswa Nasional. ',
!_isEmpty(Siswa.error) ?
Siswa.error.errors.siswa != undefined ? m('span.error', Siswa.error.errors.siswa[0] + ' ')
: Siswa.error.errors.nisn != undefined ? m('span.error', Siswa.error.errors.nisn[0] + ' ')
: '' : '',
]),
]),
m('.form-group', [
m('label.form-label[for=input-tanggalLahir]', 'Tanggal Lahir'),
m('input.form-input.input-text#input-tanggalLahir[name=tanggalLahir][type=text][autocomplete=off][required]'),
m('p.input-helper', [
'Tanggal lahir dengan format YYYYMMDD. Contoh: untuk tanggal 29 Mei 2000 ditulis 20000529. ',
!_isEmpty(Siswa.error) && Siswa.error.errors.tanggalLahir != undefined ? m('span.error', Siswa.error.errors.tanggalLahir[0] + ' ') : '',
]),
]),
m('button.form-submit#input-submit[type=submit]', 'Lihat'),
])),
_isEmpty(Siswa.current) ? null : m('.letter', [
m('span.mobile-info', 'Untuk mencetak surat ini, harap gunakan browser di desktop PC.'),
// !_isEmpty(Siswa.current.access_log) ? null
// :
m('button.print-button', {
onclick: () => {
// if (confirm('Surat Keterangan ini hanya dapat dicetak satu kali. Lanjutkan?')) {
component.confirmPrint = 1;
AccessLog.create({siswaId: Siswa.current.id, src: 'sk-k13-hasil-belajar'}).then(() => {
AccessLog.fetch('sk-k13-hasil-belajar');
window.print();
})
.catch(e => {
if (e.code === 0) {
AccessLog.error = {
message: e.message,
errors: {
create: ['Terjadi kesalahan saat menghubungkan ke server.'],
},
};
}
else {
AccessLog.error = JSON.parse(e.message);
}
});
// }
},
style: {
marginTop: '4rem'
}
}, [
m.trust('⎙'),
' Print',
]),
m('span.print-info', {style:{margin:'0 1rem',fontSize:'.8rem',color:'#718096',fontStyle:'italic'}}, 'Pastikan memilih kertas ukuran F4 atau US Legal dengan ketebalan kertas 80gr agar isi SKL tidak terpotong.'),
!_isEmpty(AccessLog.error)
? m('span.error.ml-2', AccessLog.error.errors.create[0])
: null,
m('.letter__header', [
m('img[src=img/letter-head.png]'),
]),
// m('', {
// style: {
// borderTop: '1px solid',
// height: '8px',
// borderBottom: '3px solid',
// width: '100%',
// margin: '10px 0',
// height: '1px',
// width: '100%',
// backgroundColor: '#000',
// marginTop: '.5rem',
// }}),
// m('', {
// style: {
// height: '3px',
// width: '100%',
// }}),
// m('', {
// style: {
// height: '3px',
// width: '100%',
// backgroundColor: '#000',
// marginBottom: '1rem',
// }}),
m('.letter__body.mt-4', [
m('strong.letter__body-header', [
m('p', m('span.border-b.border-black', 'SURAT KETERANGAN LULUS')),
// m('p.mt-1', 'Nomor: 102/SMK-BA/VI/2021'),
// m('p.mt-1', 'Nomor: 106/SMK-BA/VI/2022'),
m('p.mt-1', 'Nomor: 059/SMK-BA/V/2024'),
]),
m('br'),
m('table', [
m('tr',
// m('td[colspan=6]', 'Yang bertanda tangan di bawah ini, Kepala SMK Bhakti Anindya Kota Tangerang Provinsi Banten menerangkan:')),
// m('td[colspan=6]', 'Kepala SMK Bhakti Anindya selaku Ketua Penyelenggara Ujian Sekolah Tahun Pelajaran 2021/2022 berdasarkan:')),
m('td[colspan=6]', 'Kepala SMK Bhakti Anindya selaku Ketua Penyelenggara Ujian Sekolah Tahun Pelajaran 2022/2023 berdasarkan:')),
m('tr', [
m('td'),
m('td[colspan=5]', '1. Menyelesaikan program pembelajaran yang dibuktikan dengan rapor tiap semester;'),
]),
m('tr', [
m('td'),
m('td[colspan=5]', '2. Memperoleh nilai sikap/prilaku minimal baik;'),
]),
m('tr', [
m('td'),
m('td[colspan=5]', '3. Mengikuti Ujian yang diselenggarakan oleh satuan pendidikan;'),
]),
m('tr', [
m('td'),
m('td[colspan=5]', '4. Rapat Pleno Dewan Pendidik tentang kelulusan pada tanggal 3 Mei 2023.'),
]),
m('tr',
m('td',
m.trust(' '))),
m('tr',
m('td[colspan=6]', 'Menerangkan bahwa:')),
m('tr',
m('td',
m.trust(' '))),
m('tr', [
m('td'),
m('td', 'Nama Peserta'),
m('td', ':'),
m('td[colspan=3]',
m('strong', Siswa.current.nama)),
]),
m('tr', [
m('td'),
m('td', 'Tempat & Tanggal Lahir'),
m('td', ':'),
m('td',
m('strong', Siswa.current.tempat_lahir + ' , ' + Siswa.current.tanggal_lahir)),
]),
m('tr', [
m('td'),
m('td', 'NISN / NIS'),
m('td', ':'),
m('td',
m('strong', Siswa.current.nisn + ' / ' + Siswa.current.nis)),
]),
m('tr', [
m('td'),
m('td', 'Kelas'),
m('td', ':'),
m('td[colspan=3]',
m('strong', Siswa.current.kelas)),
]),
m('tr', [
m('td'),
m('td', 'Nomor Peserta Ujian'),
m('td', ':'),
m('td[colspan=3]',
m('strong', Siswa.current.nopes)),
]),
// m('tr', [
// m('td'),
// m('td', 'Bidang Studi Keahlian'),
// m('td', ':'),
// m('td[colspan=3]', Siswa.current.bsk),
// ]),
// m('tr', [
// m('td'),
// m('td', 'Program Studi Keahlian'),
// m('td', ':'),
// m('td[colspan=3]', Siswa.current.psk),
// ]),
m('tr', [
m('td'),
m('td', 'Kompetensi Keahlian'),
m('td', ':'),
m('td[colspan=3]',
m('strong', Siswa.current.kk)),
]),
// m('tr', [
// m('td[colspan=6]', 'Berdasarkan kriteria kelulusan, maka yang bersangkutan dinyatakan'),
// ]),
m('tr', [
m('td'),
m('td', 'Dinyatakan'),
m('td', ':'),
// m('td.align-center[colspan=6]', [m('strong.special', 'LULUS')]),
m('td', [m('strong.special', 'LULUS')]),
]),
// m('tr',
// m('td',
// m.trust(' '))),
// m('tr',
// m('td[colspan=6]', 'Adalah benar siswa SMK Bhakti Anindya, Kota Tangerang dan pada tanggal 13 Mei 2019 telah dinyatakan lulus')),
m('tr',
// m('td[colspan=6]', 'Dengan hasil penilaian sebagai berikut:')),
// m('td[colspan=6]', 'Dengan hasil Nilai sebagai berikut:')),
m('td[colspan=6]', 'Dengan Nilai sebagai berikut:')),
m('tr',
m('td',
m.trust(' '))),
m('tr',
m('td[colspan=6]',
m('table.nilai', [
m('tr', [
m('th', { style: { width: '5%' } }, 'No.'),
m('th[colspan=2]', 'Mata Pelajaran'),
m('th.long.md:w-1/5', 'Nilai Ujian Sekolah'),
m('th.short.md:w-1/5', 'US'),
]),
_map(Siswa.current.k13_hasil_belajar.meta.nilai, (mapel, muatan) => {
return [
m('tr', [
m('th', muatan == 'munas' ? 'A.' : muatan == 'muwil' ? 'B.' : muatan == 'mujur' ? 'C.' : null),
m('th.text-left[colspan=3]', component.namaMuatan[muatan])
]),
m('tbody.counter',
_map(mapel, (nilai, nama) => {
if (nama == 'mulok') {
return [
m('tr', [
m('td.text-right'),
m('th.text-left[colspan=2]', 'Mulok'),
m('td.text-center')
]),
_map(nilai, (nl, mp) => {
if (nl != 0) component.rataRata.push(nl);
return nilai == 0 ? null : m('tr', [
m('td.text-right.no-num'),
m('td[colspan=2]', component.namaMapel[mp]),
m('td.text-center.font-bold', nl)
]);
})
];
}
else {
if (nilai != 0) component.rataRata.push(nilai);
return nilai == 0 ? null : m('tr', [
m('td.text-right'),
m('td[colspan=2]', component.namaMapel[nama]),
m('td.text-center.font-bold', nilai)
]);
}
}))
];
}),
// m('tr', [
// m('th', 'A.'),
// m('th[colspan=5].text-left', 'Normatif'),
// ]),
// m('tbody.counter',
// _map(Siswa.current.hasil_belajar.meta.normatif, (nilai, mapel) => {
// if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
// if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
// if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
// return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
// m('td.text-right'),
// m('td[colspan=2]', component.namaMapel[mapel]),
// m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
// m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
// m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
// ]);
// })),
// m('tr', [
// m('th', 'B.'),
// m('th[colspan=5].text-left', 'Adaptif'),
// ]),
// m('tbody.counter',
// _map(Siswa.current.hasil_belajar.meta.adaptif, (nilai, mapel) => {
// if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
// if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
// if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
// return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
// m('td.text-right'),
// m('td[colspan=2]', component.namaMapel[mapel]),
// m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
// m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
// m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
// ]);
// }),
// m('tr', [
// m('th', 'C.'),
// m('th[colspan=5].text-left', 'Produktif'),
// ])),
// m('tbody.counter',
// _map(Siswa.current.hasil_belajar.meta.produktif, (nilai, mapel) => {
// if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
// if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
// if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
// return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
// m('td.text-right'),
// m('td[colspan=2]', component.namaMapel[mapel]),
// m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
// m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
// m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
// ]);
// })),
// m('tr', [
// m('th', 'D.'),
// m('th[colspan=5].text-left', 'Mulok'),
// ]),
// m('tbody.counter',
// _map(Siswa.current.hasil_belajar.meta.mulok, (nilai, mapel) => {
// if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
// if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
// if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
// return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
// m('td.text-right'),
// m('td[colspan=2]', component.namaMapel[mapel]),
// m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
// m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
// m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
// ]);
// })),
m('tr', [
m('th[colspan=3]', 'Rata-rata'),
m('td.text-center.font-bold', (component.rataRata.reduce((total, num) => total + num) / component.rataRata.length).toFixed(2)),
// m('td.text-center', (component.rataRata.usbn.reduce((total, num) => total + num) / component.rataRata.usbn.length).toFixed(2)),
// m('td.text-center', (component.rataRata.unbk.reduce((total, num) => total + num) / component.rataRata.unbk.length).toFixed(2)),
]),
]))),
// m('tr',
// m('td',
// m.trust(' '))),
// m('tr',
// m('td[colspan=6]', 'Demikian Surat Keterangan ini dibuat untuk siswa yang bersangkutan melanjutkan ke jenjang yang lebih tinggi.')),
]),
// m('table', [
// m('tr', m('td')),
// m('tr',
// m('td', 'Surat Keterangan ini bersifat sementara sampai dikeluarkannya Ijazah.'),
// ),
// m('tr', m('td')),
// m('tr', m('td')),
// m('tr',
// m('td', 'Demikian Surat Keterangan ini diberikan agar dapat digunakan sebagaimana mestinya, apabila di kemudian hari terdapat kekeliruan maka akan dilakukan perbaikan.'),
// ),
// ]),
m('table.signature', [
m('tr',
// m('td', 'Tangerang, 03 Juni 2021')),
// m('td', 'Tangerang, 03 Juni 2022')),
m('td', 'Tangerang, 6 Mei 2024')),
m('tr',
m('td', 'Kepala Sekolah,')),
m('tr',
m('td',
m('.letter__sign', { style: { height: '4rem' } },
// m('img[src=img/letter-sign.png]', {style: { maxHeight: '100%' }})))),
))),
m('tr',
// m('td', 'Ferdy, S.E., M.M.')),
// m('td', 'Sari Tyas Utami Kristantini, S.Si., M.M.')),
m('td', 'Maria Kurniawati, S.E., M.M.')),
]),
]),
// Promosi UTPAS
m('.promo-utpas.pt-8.!leading-tight', [
m('.letter__header', [
m('img[src=img/kop-yayasan.jpg]'),
]),
m('h1.text-center.font-bold.uppercase.mt-4', [
m('.text-sm', 'Selamat atas Kelulusan Anda'),
]),
m('p.mt-8.text-justify', 'Dengan sukacita dan kebahagiaan yang tulus, kami dari pihak SMK Bhakti Anindya dan Universitas Utpadaka Swastika mengucapkan selamat atas kelulusan Anda dari ujian sekolah. Prestasi yang telah Anda raih merupakan hasil dari kerja keras, ketekunan, dan dedikasi yang Anda tanamkan selama ini. Kami percaya bahwa keberhasilan ini tidak tercapai secara mudah, melainkan dengan perjuangan dan pengorbanan yang sungguh-sungguh.'),
m('p.mt-2.text-justify', [
m('span', 'Terakhir, sebagai bentuk dukungan kami untuk mempersiapkan masa depan Anda, kami memberikan voucher pendidikan untuk melanjutkan pendidikan ke Universitas Utpadaka Swastika kepada '),
m('span.font-bold', [
Siswa.current.nama,
' (',
Siswa.current.nisn,
').',
]),
]),
m('.voucher-utpas__container.mt-8.flex.flex-col.justify-around.items-center.text-center', [
m('.voucher-utpas.border-4.rounded-lg.text-white', {style: 'border-color: #552d61;'}, [
m('.flex.items-stretch', [
m('.voucher-utpas__logo.p-4.flex.items-center', m('img[src=img/logo-utpas.png][width=150px]')),
m('.voucher-utpas__content.p-4.pl-12.grow', {style: 'background-color: #552d61;'}, [
m('p.text-xs', [
'Penerima: ',
Siswa.current.nama,
]),
m('h3.voucher-utpas__header.text-sm', 'Voucher Pendidikan Program Sarjana'),
m('p.text-xs', 'sebesar'),
m('h4.voucher-utpas__body.text-xl.font-bold.mt-2', 'Rp25.000.000,-'),
m('p.text-xs', '(Dua Puluh Lima Juta Rupiah)'),
m('table.table-auto.text-left.mt-4', [
m('thead', [
m('tr', [
m('th[colspan=3].font-normal', 'Berlaku untuk Program Studi:')
]),
]),
m('tbody', [
m('tr', [
m('td', 'Akuntansi'),
m('td', 'Manajemen'),
m('td', 'Hukum'),
]),
m('tr', [
m('td', 'Sistem Informasi'),
m('td', 'Teknologi Informasi'),
m('td', 'Desain Komunikasi Visual'),
]),
]),
]),
]),
]),
]),
m('p.text-xs.my-4', 'atau'),
m('.voucher-utpas.border-4.rounded-lg.text-white', {style: 'border-color: #552d61;'}, [
m('.flex.items-stretch', [
m('.voucher-utpas__logo.p-4.flex.items-center', m('img[src=img/logo-utpas.png][width=150px]')),
m('.voucher-utpas__content.p-4.pl-12.grow', {style: 'background-color: #552d61;'}, [
m('p.text-xs', [
'Penerima: ',
Siswa.current.nama,
]),
m('h3.voucher-utpas__header.text-sm', 'Voucher Pendidikan Program Diploma 3'),
m('p.text-xs', 'sebesar'),
m('h4.voucher-utpas__body.text-xl.font-bold.mt-2', 'Rp18.000.000,-'),
m('p.text-xs', '(Delapan Belas Juta Rupiah)'),
m('table.table-auto.text-left.mt-4', [
m('thead', [
m('tr', [
m('th[colspan=3].font-normal', 'Berlaku untuk Program Studi:')
]),
]),
m('tbody', [
m('tr', [
m('td', 'Manajemen Administrasi'),
m('td', 'Sekretari'),
]),
]),
]),
]),
]),
]),
]),
m('p.mt-8.text-justify.leading-tight', [
m('span', 'Kami berharap Anda dapat memanfaatkan kesempatan ini dengan sebaik-baiknya. Kami tunggu kehadiran Anda di Kampus Universitas Utpadaka Swastika dengan menunjukkan surat ini kepada '),
m('span.italic', 'Student Admission Officer (SAO) '),
m('span', 'Universitas Utpadaka Swastika. Anda dapat menghubungi SAO Universitas Utpadaka Swastika melalui '),
m('span.font-bold', 'Nomor Telepon (021) 5589161/62 '),
m('span', 'atau '),
m('span.font-bold', 'WhatsApp 0813 8154 1471. '),
m('span', 'Terima kasih.'),
]),
]),
]),
];
},
};
export default component;