SMK_Kelulusan/resources/js/components/Pendopo.js
2023-05-05 11:54:18 +07:00

471 lines
29 KiB
JavaScript
Vendored

import m from "mithril"
import _isEmpty from "lodash.isempty"
import _map from "lodash.map"
import Siswa from "../models/Siswa"
var component = {
oninit: () => {
// document.title = 'Surat Keterangan Hasil Belajar Siswa - SMK Bhakti Anindya';
document.title = 'Surat Keterangan Lulus - SMK Bhakti Anindya';
Siswa.current = {};
},
namaMapel: {
// 'agama': 'Pendidikan Agama',
// 'pkn': 'Pendidikan Kewarganegaraan',
// 'indo': 'Bahasa Indonesia',
// 'penjas': 'Pendidikan Jasmani dan Kesehatan',
// 'senbud': 'Seni Budaya',
// 'mtk': 'Matematika',
// 'inggris': 'Bahasa Inggris',
// 'ipa': 'Ilmu Pengetahuan Alam',
// 'ips': 'Ilmu Pengetahuan Sosial',
// 'fisika': 'Fisika',
// 'kimia': 'Kimia',
// 'kwh': 'Kewirausahaan',
// 'kkpi': 'Keterampilan Komputer dan Pengelolaan Informasi',
// 'dkk': 'Dasar Kompetensi Keahlian',
// 'kk': 'Kompetensi Keahlian',
// 'mandarin': 'Bahasa Mandarin',
// 'kbi': 'Korespondensi Bahasa Inggris',
// 'pap': 'Praktek Administrasi Perkantoran',
// 'myob': 'MYOB',
'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: {
raport: [],
usbn: [],
unbk: [],
},
namaMuatan: {
'munas': 'MUATAN NASIONAL',
'muwil': 'MUATAN KEWILAYAHAN',
'mujur': 'MUATAN PEMINATAN KEJURUAN',
},
view: () => {
// component.rataRata = {
// raport: [],
// usbn: [],
// unbk: [],
// };
component.rataRata = [];
return [
m('.header', [
m('h1.title', 'Surat Keterangan Hasil Belajar Siswa SMK Bhakti Anindya'),
m('span', 'Silahkan masukkan Nama Lengkap dan NISN 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-hasil-belajar',
// with: 'hasilBelajar',
with: ['k13HasilBelajar'],
});
}
},
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: () => {
window.print();
}
}, [
m.trust('⎙'),
' Print',
]),
m('.letter__header', [
m('img[src=img/letter-head.png]'),
]),
m('.letter__body.mt-4', [
m('strong.letter__body-header', [
// m('p', m('span.border-b.border-black', 'SURAT KETERANGAN')),
// m('p.font-normal.mt-1', 'Nomor: 077/SMK-BA/V/2019'),
m('p', m('span.border-b.border-black', 'SURAT KETERANGAN LULUS')),
// m('p.mt-1', 'Nomor: 106/SMK-BA/VI/2022'),
m('p.mt-1', 'Nomor: 098/SMK-BA/V/2023'),
]),
m('br'),
m('table', [
m('tr',
// m('td[colspan=6]', 'Yang bertanda tangan di bawah ini :')),
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'),
// m('td', ':'),
// m('td[colspan=3]', 'Drs. Engkos Kosasih, M.M.'),
// ]),
// m('tr', [
// m('td'),
// m('td', 'Jabatan'),
// m('td', ':'),
// m('td[colspan=3]', 'Kepala Sekolah'),
// ]),
// m('tr', [
// m('td'),
// m('td', 'Asal Sekolah'),
// m('td', ':'),
// m('td[colspan=3]', 'SMK Bhakti Anindya'),
// ]),
// 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', 'Nama Peserta'),
m('td', ':'),
m('td[colspan=3]', Siswa.current.nama),
]),
m('tr', [
m('td'),
// m('td', 'Tempat / Tanggal Lahir'),
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 Ujian'),
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',
// 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]', 'Berikut hasil belajar siswa tersebut :')),
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[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', 'Rata-rata Raport Semester 1-6'),
// m('th.short.md:w-1/5', 'Raport'),
// m('th.long.md:w-1/5', 'Ujian Sekolah Berstandar Nasional'),
// m('th.short.md:w-1/5', 'USBN'),
// m('th.long.md:w-1/5', 'Ujian Nasional Berbasis Komputer'),
// m('th.short.md:w-1/5', 'UNBK'),
m('th.long.md:w-1/5', 'Nilai Ujian Sekolah'),
m('th.short.md:w-1/5', 'US'),
]),
// 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),
// ]);
// })),
_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 {
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[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.raport.reduce((total, num) => total + num) / component.rataRata.raport.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.signature', [
m('tr',
// m('td', 'Tangerang, 13 Mei 2019')),
// m('td', 'Tangerang, 03 Juni 2022')),
m('td', 'Tangerang, 05 Mei 2023')),
m('tr',
m('td', 'Kepala Sekolah,')),
m('tr',
m('td',
m('.letter__sign', { style: { height: '5rem' } },
m('img[src=img/letter-sign.png]', {style: { maxHeight: '100%' }})))),
// ))),
m('tr',
// m('td', 'Drs. Engkos Kosasih, M.M.')),
m('td', 'Sari Tyas Utami Kristantini, S.Si., 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', 'Kami berharap bahwa keberhasilan ini dapat menjadi tonggak awal bagi perjalanan hidup Anda yang lebih sukses dan berarti. Teruslah mengembangkan potensi diri, berusaha untuk menjadi pribadi yang lebih baik, serta memperdalam pengetahuan dan keterampilan yang telah Anda peroleh selama ini. Dengan semangat dan tekad yang kuat, yakinlah bahwa Anda akan dapat meraih impian dan cita-cita Anda di masa depan.'),
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('span', ', berupa:'),
]),
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-8.flex.items-center', m('img[src=img/logo-utpas.png][width=150px]')),
m('.voucher-utpas__content.p-8.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('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-8.flex.items-center', m('img[src=img/logo-utpas.png][width=150px]')),
m('.voucher-utpas__content.p-8.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('p.mt-8.text-justify.leading-tight', 'Kami berharap Anda dapat memanfaatkan kesempatan ini dengan sebaik-baiknya. Kami tunggu kehadiran Anda di Kampus Universitas Utpadaka Swastika dengan menunjukkan surat ini kepada Staff Marketing Universitas Utpadaka Swastika. Terima kasih.')
]),
]),
];
},
};
export default component;