Improving view

This commit is contained in:
Gregorio Chiko Putra
2019-05-15 16:16:21 +07:00
parent dbe517c1fc
commit 5839165531
18 changed files with 2895 additions and 120 deletions

View File

@@ -1,17 +1,61 @@
/*
* TODO
*
* - Buat pesan error print
*/
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: () => {
AccessLog.fetch('sk-hasil-belajar');
},
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',
},
rataRata: {
raport: [],
usbn: [],
unbk: [],
},
view: () => {
component.rataRata = {
raport: [],
usbn: [],
unbk: [],
};
return [
m('.header', [
m('span.italic.text-xs', [
'Saat ini sudah ',
m('strong', [
//AccessLog.current.accessed,
AccessLog.current.accessed,
' / ',
//AccessLog.current.total,
AccessLog.current.total,
]),
' siswa yang telah melihat pengumuman kelulusan.'
' siswa yang telah melihat surat keterangan hasil belajar.'
]),
m('h1.title', 'Surat Keterangan Hasil Belajar Siswa SMK Bhakti Anindya'),
m('span', 'Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini.'),
@@ -19,11 +63,12 @@ var component = {
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',
//});
Siswa.cariData({
nisn: e.target.elements.nisn.value,
tanggalLahir: e.target.elements.tanggalLahir.value,
src: 'sk-hasil-belajar',
with: 'hasilBelajar',
});
}
},
m('.form-grid', [
@@ -31,10 +76,10 @@ var component = {
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', [
//!_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] + ' ')
//: '' : '',
!_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] + ' ')
: '' : '',
'Nomor Induk Siswa Nasional.',
]),
]),
@@ -42,18 +87,25 @@ var component = {
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', [
//!_isEmpty(Siswa.error) && Siswa.error.errors.tanggalLahir != undefined ? m('span.error', Siswa.error.errors.tanggalLahir[0] + ' ') : '',
!_isEmpty(Siswa.error) && Siswa.error.errors.tanggalLahir != undefined ? m('span.error', Siswa.error.errors.tanggalLahir[0] + ' ') : '',
'Tanggal lahir dengan format YYYYMMDD. Contoh: untuk tanggal 29 Mei 2000 ditulis 20000529',
]),
]),
m('button.form-submit#input-submit[type=submit]', 'Lihat'),
])),
//m(!_isEmpty(Siswa.current) ? '.letter' : '.letter.hidden', [
m('.letter', [
_isEmpty(Siswa.current) ? null : m('.letter', [
m('span.mobile-info', 'Untuk mencetak surat ini, harap gunakan browser di desktop PC.'),
m('button.print-button', {
onclick: () => {
window.print();
if (confirm('Surat Keterangan ini hanya dapat dicetak satu kali. Lanjutkan?')) {
AccessLog.create({siswaId: Siswa.current.id, src: 'sk-hasil-belajar'}).then(() => {
window.print();
})
.catch(e => {
//AccessLog.error = JSON.parse(e.message);
console.log(e, e.message, e.code, e.response);
});
}
}
}, [
m.trust('⎙'),
@@ -83,8 +135,8 @@ var component = {
}}),
m('.letter__body', [
m('strong.letter__body-header', [
m('p', m('u', 'SURAT KETERANGAN')),
m('p.font-normal', 'Nomor: 077/SMK-BA/V/2019'),
m('p', m('span.border-b.border-black', 'SURAT KETERANGAN')),
m('p.font-normal.mt-1', 'Nomor: 077/SMK-BA/V/2019'),
]),
m('br'),
m('table', [
@@ -120,51 +172,49 @@ var component = {
m('td'),
m('td', 'Nama'),
m('td', ':'),
m('td[colspan=3]', 'A\'AN SAPUTRA'),
m('td[colspan=3]', Siswa.current.nama),
]),
m('tr', [
m('td'),
m('td', 'Tempat / Tanggal Lahir'),
m('td', ':'),
m('td', 'SAMARINDA'),
m('td[colspan=2]', ', 22 JANUARI 2001'),
m('td', Siswa.current.tempat_lahir + ' , ' + Siswa.current.tanggal_lahir),
]),
m('tr', [
m('td'),
m('td', 'NIS / NISN'),
m('td', ':'),
m('td', '1166189'),
m('td[colspan=2]', '/ 0013312008'),
m('td', Siswa.current.nis + ' / ' + Siswa.current.nisn),
]),
m('tr', [
m('td'),
m('td', 'Nomor Peserta'),
m('td', ':'),
m('td[colspan=3]', '4-19-30-02-059-001-8'),
m('td[colspan=3]', Siswa.current.nopes),
]),
m('tr', [
m('td'),
m('td', 'Kelas'),
m('td', ':'),
m('td[colspan=3]', 'XII TKJ 1'),
m('td[colspan=3]', Siswa.current.kelas),
]),
m('tr', [
m('td'),
m('td', 'Bidang Studi Keahlian'),
m('td', ':'),
m('td[colspan=3]', 'Teknologi Informasi dan Komunikasi'),
m('td[colspan=3]', Siswa.current.bsk),
]),
m('tr', [
m('td'),
m('td', 'Program Studi Keahlian'),
m('td', ':'),
m('td[colspan=3]', 'Teknik Komputer dan Informatika'),
m('td[colspan=3]', Siswa.current.psk),
]),
m('tr', [
m('td'),
m('td', 'Kompetensi Keahlian'),
m('td', ':'),
m('td[colspan=3]', 'Teknik Komputer dan Jaringan'),
m('td[colspan=3]', Siswa.current.kk),
]),
m('tr',
m('td',
@@ -193,18 +243,75 @@ var component = {
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('td.text-right', '1.'),
m('td[colspan=2]', 'Pendidikan Agama'),
m('td.text-center', 'xx.xx'),
m('td.text-center', 'xx.xx'),
m('td.text-center', 'xx.xx'),
m('th', 'A.'),
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', 'A.'),
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', 'A.'),
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', 'xx.xx'),
m('td.text-center', 'xx.xx'),
m('td.text-center', 'xx.xx'),
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',

View File

@@ -5,7 +5,7 @@ import AccessLog from "../models/AccessLog"
var component = {
oninit: () => {
AccessLog.fetch();
AccessLog.fetch('surat-kelulusan');
},
view: () => {
return [

View File

@@ -3,7 +3,7 @@ import m from "mithril"
var model = {
current: {},
fetch: src => {
m.request({
return m.request({
method: 'get',
url: '/api/access_log',
data: { src },
@@ -12,6 +12,16 @@ var model = {
model.current = response;
});
},
create: data => {
return m.request({
method: 'post',
url: '/api/access_log',
data,
})
.then(response => {
model.current = response;
});
},
}
export default model;

View File

@@ -1,4 +1,4 @@
import m from "mihtril"
import m from "mithril"
import AccessLog from "./AccessLog"
var model = {
@@ -8,12 +8,12 @@ var model = {
model.current = {};
m.request({
method: 'post',
url: '/api/hasil-belajar',
url: '/api/hasil_belajar',
data,
})
.then(response => {
model.current = response;
console.log(model.current);
AccessLog.fetch('sk-hasil-belajar');
})
.catch(e => {
model.error = JSON.parse(e.message);

View File

@@ -13,7 +13,7 @@ var model = {
})
.then(response => {
model.current = response;
AccessLog.fetch();
AccessLog.fetch('surat-kelulusan');
})
.catch(e => {
model.error = JSON.parse(e.message);

View File

@@ -96,6 +96,15 @@ span.error {
.short {
display: table-cell;
}
tbody.counter {
counter-reset: nomor;
td:first-child::before {
counter-increment: nomor;
content: counter(nomor) ".";
}
}
}
table.signature {
@@ -207,5 +216,15 @@ span.error {
.letter__body-header {
font-size: 14px;
}
table.nilai {
.long {
display: table-cell;
}
.short {
@apply hidden;
}
}
}
}