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

@ -10,7 +10,7 @@ class AccessLog extends Model
use SoftDeletes;
protected $fillable = [
'siswa_id',
'siswa_id', 'src',
];
protected $with = [ 'siswa' ];

View File

@ -21,4 +21,9 @@ class HasilBelajar extends Model
protected $dispatchesEvents = [
'saved' => HasilBelajarImported::class,
];
public function siswa()
{
return $this->belongsTo('App\Siswa');
}
}

View File

@ -0,0 +1,41 @@
<?php
namespace App\Http\Controllers;
use App\Siswa;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
class AccessLogController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request)
{
/*
* Count unique logs for the given source
*
*/
$logs = DB::table('access_logs')
->select(DB::raw('count(*) as num'))
->where('src', $request->src)
->groupBy('siswa_id')
->get()
->count();
/*
* Count the total number of siswa
*
*/
$resources = Siswa::count();
return response()->json([
'accessed' => $logs,
'total' => $resources,
]);
}
}

View File

@ -0,0 +1,63 @@
<?php
namespace App\Http\Controllers;
use App\HasilBelajar;
use App\Siswa;
use App\AccessLog;
use Illuminate\Support\Facades\Validator;
use Carbon\Carbon;
use Illuminate\Http\Request;
class HasilBelajarController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request)
{
/*
* Validate user inputs
*
*/
Validator::make($request->all(), [
'nisn' => 'required|regex:/^[0-9]+$/',
'tanggalLahir' => 'required|regex:/^[0-9]+$/',
], [
'required' => 'Kolom :attribute harus diisi.',
'regex' => 'Kolom :attribute tidak sesuai.',
])->validate();
/*
* Look for the given inputs in the resource
*
*/
try {
$tanggalLahir = Carbon::parse($request->tanggalLahir)->format('Y-m-d');
} catch(Exception $e) {
return response()->json([
'message' => 'The given data was invalid.',
'errors' => [
'tanggalLahir' => ['Kolom tanggal lahir tidak sesuai.'],
]
], 422);
}
$siswa = Siswa::where('nisn', $request->nisn)
->where('tanggal_lahir', $tanggalLahir)
->with('hasilBelajar')
->first();
/*
* Redirect with error if not found
*
*/
if (!$siswa || $siswa == null) {
return response()->json(['errors' => ['siswa' => ['Siswa tidak ditemukan.']]], 404);
}
return $siswa;
}
}

View File

@ -0,0 +1,69 @@
<?php
namespace App\Http\Controllers;
use App\Siswa;
use App\AccessLog;
use Illuminate\Support\Facades\Validator;
use Carbon\Carbon;
use Illuminate\Http\Request;
class SiswaController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request)
{
/*
* Validate user inputs
*
*/
Validator::make($request->all(), [
'nisn' => 'required|regex:/^[0-9]+$/',
'tanggalLahir' => 'required|regex:/^[0-9]+$/',
], [
'required' => 'Kolom :attribute harus diisi.',
'regex' => 'Kolom :attribute tidak sesuai.',
])->validate();
/*
* Look for the given inputs in the resource
*
*/
try {
$tanggalLahir = Carbon::parse($request->tanggalLahir)->format('Y-m-d');
} catch(Exception $e) {
return response()->json([
'message' => 'The given data was invalid.',
'errors' => [
'tanggalLahir' => ['Kolom tanggal lahir tidak sesuai.'],
]
], 422);
}
$siswa = Siswa::where('nisn', $request->nisn)
->where('tanggal_lahir', $tanggalLahir)
->with($request->with)
->first();
/*
* Redirect with error if not found
*
*/
if (!$siswa || $siswa == null) {
return response()->json(['errors' => ['siswa' => ['Siswa tidak ditemukan.']]], 404);
}
/*
* Write a new access log
*
*/
AccessLog::create(['siswa_id' => $siswa->id, 'src' => $request->src]);
return $siswa;
}
}

View File

@ -21,4 +21,9 @@ class Siswa extends Model
'tanggal_lahir' => 'datetime:Y-m-d',
'lulus' => 'boolean',
];
public function hasilBelajar()
{
return $this->hasOne('App\HasilBelajar');
}
}

View File

@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class AddUrlFieldToAccessLogsTable extends Migration
class AddSrcFieldToAccessLogsTable extends Migration
{
/**
* Run the migrations.
@ -14,10 +14,10 @@ class AddUrlFieldToAccessLogsTable extends Migration
public function up()
{
Schema::table('access_logs', function (Blueprint $table) {
$table->string('url');
$table->string('src');
});
DB::table('access_logs')->update(['url' => '/api/siswa']);
DB::table('access_logs')->update(['src' => 'surat-kelulusan']);
}
/**
@ -28,7 +28,7 @@ class AddUrlFieldToAccessLogsTable extends Migration
public function down()
{
Schema::table('access_logs', function (Blueprint $table) {
$table->dropColumn('url');
$table->dropColumn('src');
});
}
}

5
package-lock.json generated
View File

@ -5342,6 +5342,11 @@
"resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
"integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
},
"lodash.map": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
"integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

View File

@ -7,7 +7,8 @@
"test": "tests"
},
"dependencies": {
"lodash.isempty": "^4.4.0"
"lodash.isempty": "^4.4.0",
"lodash.map": "^4.6.0"
},
"devDependencies": {
"cross-env": "^5.2.0",

17
public/css/main.css vendored
View File

@ -7656,6 +7656,15 @@ span.error {
display: table-cell;
}
.letter table.nilai tbody.counter {
counter-reset: nomor;
}
.letter table.nilai tbody.counter td:first-child::before {
counter-increment: nomor;
content: counter(nomor) ".";
}
.letter table.signature {
width: auto;
margin-left: auto;
@ -7805,6 +7814,14 @@ span.error {
.letter .letter__body-header {
font-size: 14px;
}
.letter table.nilai .long {
display: table-cell;
}
.letter table.nilai .short {
display: none;
}
}
@media (min-width: 640px) {

2514
public/js/app.js vendored

File diff suppressed because one or more lines are too long

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: () => {
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('&#9113;'),
@ -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;
}
}
}
}

View File

@ -13,55 +13,16 @@ use Illuminate\Http\Request;
|
*/
Route::post('/siswa', function (Request $request) {
// Validate user inputs
// Auto redirect on fail
Validator::make($request->all(), [
'nisn' => 'required|regex:/^[0-9]+$/',
'tanggalLahir' => 'required|regex:/^[0-9]+$/',
], [
'required' => 'Kolom :attribute harus diisi.',
'regex' => 'Kolom :attribute tidak sesuai.',
])->validate();
Route::post('/siswa', 'SiswaController')->name('siswa.retrieve');
// Look for the given inputs in the resource
try {
$tanggalLahir = Carbon\Carbon::parse($request->tanggalLahir)->format('Y-m-d');
} catch(Exception $e) {
return response()->json([
'message' => 'The given data was invalid.',
'errors' => [
'tanggalLahir' => ['Kolom tanggal lahir tidak sesuai.'],
]
], 422);
}
$siswa = App\Siswa::where('nisn', $request->nisn)
->where('tanggal_lahir', $tanggalLahir)
->first();
Route::post('/hasil_belajar', 'HasilBelajarController')->name('hasilBelajar.retrieve');
// Redirect with error if not found
if (!$siswa || $siswa == null) {
return response()->json(['errors' => ['siswa' => ['Siswa tidak ditemukan.']]], 404);
}
// Write to log
App\AccessLog::create(['siswa_id' => $siswa->id, 'src' => $request->src]);
return $siswa;
});
Route::get('/access_log', function (Request $request) {
// Get the number of unique access
$logs = DB::table('access_logs')->select(DB::raw('count(*) as num where src = ?', $request->src))
->groupBy('siswa_id')
->get()
->count();
// Get the total number of available resource
$resources = App\Siswa::count();
return response()->json([
'accessed' => $logs,
'total' => $resources,
]);
});
Route::get('/access_log', 'AccessLogController')->name('accessLog.fetch');
Route::post('/access_log', function(Request $request) {
return response()->json([], 404);
/*
* Write a new access log
*
*/
App\AccessLog::create(['siswa_id' => $request->siswaId, 'src' => $request->src]);
})->name('accessLog.create');