283 lines
9.3 KiB
PHP
283 lines
9.3 KiB
PHP
@extends('admin.layouts.app')
|
|
@section('content')
|
|
<!-- [ breadcrumb ] start -->
|
|
<div class="page-header">
|
|
<div class="page-block">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-12">
|
|
<div class="page-header-title">
|
|
<h5 class="m-b-10">Data Soal</h5>
|
|
</div>
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0)">Data Master</a></li>
|
|
<li class="breadcrumb-item" aria-current="page">Halaman Data Hasil Tes</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [ breadcrumb ] end -->
|
|
|
|
<!-- [ Main Content ] start -->
|
|
<div class="row">
|
|
<!-- [ sample-page ] start -->
|
|
<div class="col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Hasil Tes User</h5>
|
|
</div>
|
|
<div class="col-md-6 d-flex justify-content-end">
|
|
<button type="button" class="btn btn-sm btn-primary rounded-circle">
|
|
<i class="ti ti-database-import"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table" id="table-data">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama</th>
|
|
<th>Kode Unik</th>
|
|
<th>Tgl dan Jam Ujian</th>
|
|
<th>Status Data</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [ sample-page ] end -->
|
|
</div>
|
|
<!-- [ Main Content ] end -->
|
|
|
|
<!-- Modal Delete -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Hapus Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah anda akan menghapus data dengan nama "<span id="delete_test" class="fw-bold"></span>" ini? (data hanya akan dinonaktikan)
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-danger" onclick="hapusData()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <!-- Modal Restore -->
|
|
<div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Restore Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah anda akan memulihkan data dengan nama "<span id="restore_test" class="fw-bold"></span>" ini? (data akan diperiksa dengan status terakhirnya)
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-danger" onclick="restoreData()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
let idHapus = null;
|
|
let tableData = null;
|
|
let ws = null;
|
|
|
|
function fetchRowData() {
|
|
if(tableData != null) {
|
|
tableData.ajax.reload(null, false);
|
|
}
|
|
}
|
|
|
|
function getDataInfo(btn) {
|
|
let idShow = btn.getAttribute('data-id');
|
|
Swal.fire({
|
|
title: 'Alert',
|
|
icon: 'question',
|
|
text: 'Apakah Anda ingin melihat hasil dari data ini?',
|
|
confirmButtonText: 'Ya',
|
|
cancelButtonText: 'Tidak',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.open("{{ route('hasil-tes.index') }}?id_test_sessions=" + idShow, "_blank");
|
|
}
|
|
});
|
|
}
|
|
|
|
function getDataDownload(btn) {
|
|
let idShow = btn.getAttribute('data-id');
|
|
Swal.fire({
|
|
title: 'Alert',
|
|
icon: 'question',
|
|
text: 'Apakah Anda ingin mendownload hasil dari data ini?',
|
|
confirmButtonText: 'Ya',
|
|
cancelButtonText: 'Tidak',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
ws.send(JSON.stringify({
|
|
'type': 'download_hasil_tes',
|
|
'id_test_sessions': idShow
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
|
|
function getDataHapus(btn) {
|
|
idHapus = btn.getAttribute('data-id');
|
|
let urlShow = '{{ route('hasil_tes.show', ['__ID__']) }}';
|
|
|
|
$.get(urlShow.replace('__ID__', idHapus), function(data, status) {
|
|
if(data.status) {
|
|
$('#delete_test').html(data.nama);
|
|
}
|
|
});
|
|
}
|
|
|
|
function hapusData() {
|
|
if(idHapus != null) {
|
|
let urlDestroy = '{{ route('hasil_tes.destroy', ['__ID__']) }}';
|
|
|
|
$.post(urlDestroy.replace('__ID__', idHapus), {
|
|
'_token': document.getElementById('_token').getAttribute('value'),
|
|
'_method': 'DELETE'
|
|
}, function(data, status) {
|
|
if(data.status) {
|
|
$('#deleteModal').modal('hide');
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Data berhasil dinonakstifkan!",
|
|
icon: "success"
|
|
});
|
|
fetchRowData();
|
|
idHapus = null;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
tableData = new DataTable("#table-data", {
|
|
'ajax': {
|
|
'url': '{{ route('hasil-tes.fetchData') }}'
|
|
},
|
|
'columns': [
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
return meta.row + 1;
|
|
}
|
|
},
|
|
{
|
|
data: 'nama_lengkap'
|
|
},
|
|
{
|
|
data: 'kode_booking'
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
return `${data.tgl_tes} ${data.jam_tes}`;
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
let bgClass = ['secondary', 'warning', 'success'];
|
|
let text = ['Nonaktif', 'Dalam Ujian', 'Selesai'];
|
|
return `
|
|
<span class="badge rounded-pill text-bg-${bgClass[data.status_tes]}">${text[data.status_tes]}</span>
|
|
`;
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
if(data.status_tes == 0) {
|
|
return `
|
|
<div class="btn-group">
|
|
<a class="btn btn-info btn-sm rounded-circle mx-1 text-light" onclick="getDataInfo(this)" data-id="${data.id_test_session}">
|
|
<i class="ti ti-file-info"></i>
|
|
</a>
|
|
</div>
|
|
`;
|
|
}
|
|
return `
|
|
<div class="btn-group">
|
|
<a class="btn btn-info btn-sm rounded-circle mx-1 text-light" onclick="getDataInfo(this)" data-id="${data.id_test_session}">
|
|
<i class="ti ti-file-info"></i>
|
|
</a>
|
|
<button class="btn btn-sm btn-success rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#downloadModal" onclick="getDataDownload(this)" data-id="${data.id_test_session}">
|
|
<i class="ti ti-download"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id_test_session}">
|
|
<i class="ti ti-trash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
]
|
|
});
|
|
|
|
console.log("Connecting to WebSocket...");
|
|
ws = new WebSocket("{{ env('WEBSOCKET_URL') }}");
|
|
ws.onopen = function() {
|
|
console.log("WebSocket connection established.");
|
|
};
|
|
ws.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
if(data.type === 'download_hasil_tes_response') {
|
|
if(data.data != null) {
|
|
console.log(data)
|
|
const blob = new Blob([JSON.stringify(data.data)], { type: 'text/plain;charset=utf-8' });
|
|
const link = document.createElement('a');
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
link.href = url;
|
|
link.download = `hasil_tes_${data.id_test_sessions}.json`;
|
|
link.style.display = 'none';
|
|
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
Swal.fire({
|
|
title: 'Sukses',
|
|
text: 'Hasil tes berhasil didownload!',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: 'Error',
|
|
text: 'Gagal mendownload hasil tes.',
|
|
icon: 'error'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
});
|
|
</script>
|
|
@endsection |