SMK_Kelulusan/resources/js/components/SKK13HasilBelajar.js

417 lines
24 KiB
JavaScript
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',
'eb': 'Ekonomi Bisnis',
'au': 'Administrasi Umum',
},
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 agar isi SKL tidak terpotong.'),
!_isEmpty(AccessLog.error)
? m('span.error.ml-2', AccessLog.error.errors.create[0])
: null,
m('.letter__header', {
style: {
marginTop: '3rem',
marginBottom: '1rem'
}
}, [
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', [
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('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('tr', [
// m('td'),
// m('td[colspan=5]', '1. Menyelesaikan program pembelajaran di masa COVID -19 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 29 Mei 2021.'),
// ]),
// 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'),
m('td', ':'),
m('td[colspan=3]', Siswa.current.nama),
]),
m('tr', [
m('td'),
m('td', 'Tempat & Tanggal Lahir'),
m('td', ':'),
m('td', Siswa.current.tempat_lahir + ' , ' + Siswa.current.tanggal_lahir),
]),
m('tr', [
m('td'),
m('td', 'NIS / NISN'),
m('td', ':'),
m('td', Siswa.current.nis + ' / ' + Siswa.current.nisn),
]),
m('tr', [
m('td'),
m('td', 'Kelas'),
m('td', ':'),
m('td[colspan=3]', Siswa.current.kelas),
]),
// m('tr', [
// m('td'),
// m('td', 'Nomor Peserta'),
// m('td', ':'),
// m('td[colspan=3]', 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]', 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('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('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('tr',
m('td', 'Kepala Sekolah,')),
m('tr',
m('td',
m('.letter__sign', { style: { height: '5rem' } },
m('img[src=img/letter-sign-stamp.png]', {style: { maxHeight: '100%' }})))),
m('tr',
m('td', 'Ferdy, S.E., M.M.')),
]),
]),
]),
];
},
};
export default component;