Mahayoga
/
MIF_E31231392
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: fetch data dari FastAPI lewat WebSocket

This commit is contained in:
Mahayoga 2026-05-06 04:23:21 +07:00
parent 1821b6f59e
commit 2e56c45db9
4 changed files with 189 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/Http/Controllers/FinishUjianController.php
View File

@ -9,6 +9,54 @@
class FinishUjianController extends Controller
{
public function getAllAnswer(Request $request) {
$data_session = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
if($data_session != null) {
if($data_session->status_session != '1') {
return response()->json([
'status' => false,
'message' => 'Data sesi tes belum dimulai atau telah usai. Silahkan cek status dengan kode untuk informasi lebih lanjut.'
]);
} else if($data_session->status_session == '1') {
$detail_test = DetailTestModel::where('id_test_sessions', $request->id_test_sessions)->get();
$data_ujian = [];
foreach($detail_test as $detail) {
$data_soal = DataSoalModel::where('id_soal', $detail->id_soal)->first();
$data_jawaban = $detail->jawaban;
if($data_jawaban == 'a') {
$data_jawaban = $data_soal->jawaban_a;
} else if($data_jawaban == 'b') {
$data_jawaban = $data_soal->jawaban_b;
} else if($data_jawaban == 'c') {
$data_jawaban = $data_soal->jawaban_c;
} else if($data_jawaban == 'd') {
$data_jawaban = $data_soal->jawaban_d;
} else if($data_jawaban == 'e') {
$data_jawaban = $data_soal->jawaban_e;
} else {
$data_jawaban = 'Tidak menjawab';
}
$data_ujian[] = [
'id_soal' => $detail->id_soal,
'jawaban' => $data_jawaban,
'jawaban_key' => $detail->jawaban,
'soal' => $data_soal->pertanyaan
];
}
return response()->json([
'status' => true,
'data' => $data_ujian
]);
}
} else {
return response()->json([
'status' => false,
'message' => 'Data sesi tes tidak ditemukan.'
]);
}
}
/**
* Display a listing of the resource.
*/
@ -32,17 +80,7 @@ public function index(Request $request)
// 'status_session' => '2',
// 'is_active' => '0'
// ]);
$detail_test = DetailTestModel::where('id_test_sessions', $id_session)->get();
$data_ujian = [];
foreach($detail_test as $detail) {
$data_soal = DataSoalModel::where('id_soal', $detail->id_soal)->first();
$data_ujian[] = [
'id_soal' => $detail->id_soal,
'jawaban' => $detail->jawaban,
'soal' => $data_soal ? $data_soal->soal : null
];
}
return view('user.pages.finish_ujian.index', compact('data_ujian', 'id_session'));
return view('user.pages.finish_ujian.index', compact('id_session'));
}
} else {
return redirect()->route('cek-status.index')->with('error', 'Data sesi tes tidak ditemukan.');

5
resources/views/user/layouts/index.blade.php
View File

@ -28,6 +28,8 @@
<link href="{{ asset('assets/users/assets/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
<link href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css" rel="stylesheet" />
<!-- Main CSS File -->
<link href="{{ asset('assets/users/assets/css/main.css') }}" rel="stylesheet">
@ -60,6 +62,7 @@ class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('assets/users/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
@ -69,6 +72,8 @@ class="bi bi-arrow-up-short"></i></a>
<script src="{{ asset('assets/users/assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
<script src="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js" crossorigin="anonymous"></script>
<!-- Main JS File -->
<script src="{{ asset('assets/users/assets/js/main.js') }}"></script>

133
resources/views/user/pages/finish_ujian/index.blade.php
View File

@ -27,9 +27,26 @@
<!-- About Section -->
<section id="about" class="about section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<table class="table" id="table-data-hasil-ujian">
<thead>
<tr>
<th>No</th>
<th>Pertanyaan</th>
<th>Jawaban</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="title">Grafik Kecepatan Mata</h2>
<canvas id="velocityChart"></canvas>
</div>
</div>
</div>
</section><!-- /About Section -->
@ -49,7 +66,121 @@
@section('script')
<script>
const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
let table = null;
let data_tobii = null;
function renderVelocityChart(timeseries) {
const base = timeseries.timestamp[0];
const labels = timeseries.timestamp.map(t => (t - base) / 1000);
const ctx = document.getElementById('velocityChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Velocity',
data: timeseries.velocity,
borderWidth: 2,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return "Velocity: " + context.raw.toFixed(4);
}
}
}
},
scales: {
x: {
display: false
}
}
}
});
}
async function loadData(data) {
const res = await fetch("{{ env('PYTHON_API_URL') }}/extract", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
const result = await res.json();
if(result != null) {
renderVelocityChart(result.timeseries);
}
}
$(document).ready(function() {
table = new DataTable("#table-data-hasil-ujian", {
searching: false,
paging: false,
ajax: {
url: '{{ route('hasil-tes.getAllAnswer', ['id_test_sessions' => $id_session]) }}',
dataSrc: 'data' // Specify the key containing the data array
},
columns: [
{
data: null,
render: function(data, type, row, meta) {
return meta.row + 1;
}
},
{
data: 'soal'
},
{
data: null,
render: function(data, type, row) {
let renderedJawaban = null;
if(row.jawaban_key == 'a') {
renderedJawaban = `<span class="badge text-bg-primary">${row.jawaban}</span>`;
} else if(row.jawaban_key == 'b') {
renderedJawaban = `<span class="badge" style="background-color: #fc7938; color: white;">${row.jawaban}</span>`;
} else if(row.jawaban_key == 'c') {
renderedJawaban = `<span class="badge text-bg-danger">${row.jawaban}</span>`;
} else if(row.jawaban_key == 'd') {
renderedJawaban = `<span class="badge text-bg-warning">${row.jawaban}</span>`;
} else if(row.jawaban_key == 'e') {
renderedJawaban = `<span class="badge text-bg-success">${row.jawaban}</span>`;
} else {
renderedJawaban = `<span class="badge text-bg-secondary">${row.jawaban}</span>`;
}
return renderedJawaban;
}
}
]
});
ws.onopen = () => {
console.log("Connected to WebSocket");
ws.send(JSON.stringify({
type: 'get_json_file',
session_id: '{{ $id_session }}'
}));
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
if(data.type === 'json_file_data') {
if(data.data != null) {
data_tobii = data.data;
loadData(data_tobii);
}
}
};
};
});
</script>
@if (session('error'))

1
routes/web.php
View File

@ -42,6 +42,7 @@
Route::get('ujian/get/current-answer', [HalamanUjianController::class, 'getCurrentAnswer'])->name('ujian.getCurrentAnswer');
Route::get('ujian/get/time-left', [HalamanUjianController::class, 'getTimeLeft'])->name('ujian.getTimeLeft');
Route::resource('hasil-tes', FinishUjianController::class)->only(['index', 'show']);
Route::get('hasil-tes/get/all-answer', [FinishUjianController::class, 'getAllAnswer'])->name('hasil-tes.getAllAnswer');
Route::middleware(['auth', 'role.auth'])->group(function() {
Route::resource('dashboard', DashboardController::class);
Route::resource('users', UsersController::class);