In Progress: adding screen dimension to db

app/Http/Controllers/TestSessionsController.php

@@ -7,6 +7,22 @@
 
 class TestSessionsController extends Controller
 {
+    public function getScreen(Request $request) {
+        $data = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
+
+        if($data != null) {
+            return response()->json([
+                'status' => true,
+                'screen_w' => $data->screen_w,
+                'screen_h' => $data->screen_h
+            ]);
+        } else {
+            return response()->json([
+                'status' => false,
+                'msg' => 'Data tidak ditemukan!'
+            ]);
+        }
+    }
     /**
      * Display a listing of the resource.
      */
@@ -36,6 +52,8 @@ public function store(Request $request)
             'id_booking' => $request->id_booking,
             'status_session' => '0',
             'is_active' => '0',
+            'screen_w' => $request->screen_w,
+            'screen_h' => $request->screen_h
         ]);
 
         return redirect()->route('tutorial-tes.index')->with([

app/Models/TestSessionsModel.php

@@ -21,6 +21,8 @@ class TestSessionsModel extends Model
         'unix_start_time',
         'is_active',
         'unix_end_time',
+        'screen_w',
+        'screen_h'
     ];
 
     protected $casts = [

database/migrations/2026_05_19_150903_add_column_in_test_sessions_table.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('test_sessions', function (Blueprint $table) {
+            $table->char('screen_w', 20)->after('unix_end_time');
+            $table->char('screen_h', 20)->after('screen_w');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('test_sessions', function (Blueprint $table) {
+            $table->dropColumn('screen_w');
+            $table->dropColumn('screen_h');
+        });
+    }
+};

resources/views/user/pages/cek_status/index.blade.php

@@ -85,6 +85,8 @@
                     <form action="" method="POST" id="result_test_form">
                       @csrf
                       <input type="hidden" name="id_booking" id="id_booking_input">
+                      <input type="hidden" name="screen_w" id="screen_w">
+                      <input type="hidden" name="screen_h" id="screen_h">
                       <div class="row justify-content-center">
                         <button type="button" class="btn btn-primary text-white fw-bold" onclick="startSessionTest()">Mulai Tes</button>
                       </div>
@@ -259,6 +261,8 @@ function startSessionTest() {
         cancelButtonText: 'Nggak jadi deh'
       }).then((result) => {
         if(result.isConfirmed) {
+          $('#screen_w').val(window.screen.width);
+          $('#screen_h').val(window.screen.height);
           form.attr('action', url);
           form.submit();
         }

resources/views/user/pages/finish_ujian/index.blade.php

@@ -79,6 +79,8 @@
     let heatmapContainer = null;
     let clientWidth = null;
     let clientHeight = null;
+    let recordedScreenWidth = null
+    let recordedScreenHeight = null
     let mappedHeatmapData = null;
     let scaleX = null;
     let scaleY = null;
@@ -188,6 +190,14 @@ function renderVelocityChart(timeseries) {
 
       ws.onopen = () => {
         console.log("Connected to WebSocket");
+        Swal.fire({
+          title: 'Status',
+          text: 'Memuat data...',
+          icon: 'info',
+          showConfirmButton: false,
+          allowOutsideClick: false,
+          allowEscapeKey: false
+        });
 
         ws.send(JSON.stringify({
           type: 'get_json_file',
@@ -199,12 +209,19 @@ function renderVelocityChart(timeseries) {
           if(data.type === 'json_file_data') {
             if(data.data != null) {
               data_tobii = data.data;
+              let xhttp = new XMLHttpRequest();
 
+              xhttp.onreadystatechange = function() {
+                if(this.readyState == 4 && this.status == 200) {
+                  let data = JSON.parse(this.responseText);
+                  if(data.status) {
                     heatmapContainer = document.getElementById('heatmapChart');
                     clientWidth = heatmapContainer.clientWidth;
                     clientHeight = heatmapContainer.clientHeight;
-              scaleX = clientWidth / 1366;
+                    recordedScreenWidth = data.screen_w;
-              scaleY = clientHeight / 768;
+                    recordedScreenHeight = data.screen_h;
+                    scaleX = clientWidth / recordedScreenWidth;
+                    scaleY = clientHeight / recordedScreenHeight;
                     
                     heatmapInstance = h337.create({
                       container: heatmapContainer,
@@ -212,7 +229,23 @@ function renderVelocityChart(timeseries) {
                       maxOpacity: 0.6,
                       blur: 0.85
                     });
+                    Swal.close();
                     loadData(data_tobii);
+                  } else {
+                    Swal.fire({
+                      title: 'Error',
+                      text: 'Gagal mencari data, silahkan coba lagi nanti',
+                      icon: 'error',
+                      showConfirmButton: true,
+                      allowOutsideClick: false,
+                      allowEscapeKey: false
+                    });
+                  }
+                }
+              };
+
+              xhttp.open('GET', '{{ route('test-sessions.getScreen', ['id_test_sessions', $id_session]) }}', true);
+              xhttp.send();
             }
           }
         };

routes/web.php

@@ -36,6 +36,7 @@
 Route::resource('cek-status', CekStatusController::class)->only(['index', 'show']);
 Route::resource('tutorial-tes', TutorialTesController::class)->only(['index']);
 Route::resource('test-sessions', TestSessionsController::class)->only(['store', 'show']);
+    Route::get('test-sessions/get/screen', [TestSessionsController::class, 'getScreen'])->name('test-sessions.getScreen');;
 Route::resource('tobii-receiver', TobiiReceiverController::class)->only(['store', 'show']);
     Route::get('tobii-receiver/fetch/data/{id_test_sessions}', [TobiiReceiverController::class, 'fetchDataTobii'])->name('tobii-receiver.fetchData');
 Route::resource('ujian', HalamanUjianController::class);