WIP: status Tobii di tutorial

2026-04-04 18:33:38 +07:00 · 2026-04-04 18:33:38 +07:00 · 5ea079e470
parent fcd1e826d2
commit 5ea079e470
5 changed files with 229 additions and 8 deletions
--- a/app/Http/Controllers/TobiiReceiverController.php
+++ b/app/Http/Controllers/TobiiReceiverController.php
@ -0,0 +1,76 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\TestSessionsModel;
+use Illuminate\Http\Request;
+
+class TobiiReceiverController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $data_sessions = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
+        if($data_sessions != null) {
+            if($request->token_session == $data_sessions->token_session) {
+                // simpan data tobii ke db
+                
+                return response()->json(['message' => 'Data tobii berhasil disimpan.'], 200);
+            } else {
+                return response()->json(['message' => 'Token sesi tidak valid.'], 401);
+            }
+        } else {
+            return response()->json(['message' => 'Data sesi tes tidak ditemukan.'], 404);
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@ -16,7 +16,8 @@
            'role.auth' => RoleAuth::class,
        ]);
        $middleware->validateCsrfTokens(except: [
-            'api/eye/test'
+            'api/eye/test',
+            'tobii-receiver'
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
--- a/resources/views/user/layouts/test_layout/index.blade.php
+++ b/resources/views/user/layouts/test_layout/index.blade.php
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title>@yield('title') - Smart Anxiety</title>
+  <meta name="description" content="">
+  <meta name="keywords" content="">
+  <meta id="_token" value="{{ csrf_token() }}">
+
+  <!-- Favicons -->
+  <link href="{{ asset('assets/users/assets/img/favicon.png') }}" rel="icon">
+  <link href="{{ asset('assets/users/assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
+
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com" rel="preconnect">
+  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+    rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="{{ asset('assets/users/assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
+  <link href="{{ asset('assets/users/assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
+  <link href="{{ asset('assets/users/assets/vendor/aos/aos.css') }}" rel="stylesheet">
+  <link href="{{ asset('assets/users/assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
+  <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">
+
+  <!-- Main CSS File -->
+  <link href="{{ asset('assets/users/assets/css/main.css') }}" rel="stylesheet">
+
+  <!-- =======================================================
+  * Template Name: Clinic
+  * Template URL: https://bootstrapmade.com/clinic-bootstrap-template/
+  * Updated: Jul 23 2025 with Bootstrap v5.3.7
+  * Author: BootstrapMade.com
+  * License: https://bootstrapmade.com/license/
+  ======================================================== -->
+</head>
+
+<body class="index-page">
+
+  {{-- @include('user.layouts.navbar') --}}
+
+  <main class="main" style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;">
+
+    @yield('content')
+
+  </main>
+
+  {{-- @include('user.layouts.footer') --}}
+
+  <!-- Scroll Top -->
+  <a href="#!" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
+      class="bi bi-arrow-up-short"></i></a>
+
+  <!-- Preloader -->
+  <div id="preloader"></div>
+
+  <!-- Vendor JS Files -->
+  <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>
+  <script src="{{ asset('assets/users/assets/vendor/php-email-form/validate.js') }}"></script>
+  <script src="{{ asset('assets/users/assets/vendor/aos/aos.js') }}"></script>
+  <script src="{{ asset('assets/users/assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
+  <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>
+
+  <!-- Main JS File -->
+  <script src="{{ asset('assets/users/assets/js/main.js') }}"></script>
+
+  @yield('script')
+
+</body>
+
+</html>
--- a/resources/views/user/pages/tutorial_tes/index.blade.php
+++ b/resources/views/user/pages/tutorial_tes/index.blade.php
@ -1,21 +1,49 @@
@section('title', 'Tutorial Test Kecemasan')
-@extends('user.layouts.index')
+@extends('user.layouts.test_layout.index')
@section('content')
  <div class="container">
    <div class="row justify-content-center">
-      <div class="col-md-8">
+      <div class="col-md-8" id="tutorial_1">
        <div class="card shadow-sm border-0">
          <div class="card-body">
            <h3 class="card-title fw-bold mb-4">Tutorial Tes Kecemasan</h3>
            <p class="card-text mb-3">Berikut adalah tutorial untuk menjalankan tes kecemasan dari sistem kami. Pastikan kamu sudah membaca dan memahami setiap langkah yang ada di bawah ini sebelum memulai tes.</p>
            <ol>
-              <li><strong>Persiapan:</strong> Pastikan kamu berada di tempat yang tenang dan nyaman, serta memiliki koneksi internet yang stabil. Siapkan juga alat tulis untuk mencatat jika diperlukan.</li>
-              <li><strong>Durasi Tes:</strong> Tes ini akan memakan waktu sekitar 15-30 menit, tergantung pada kecepatanmu dalam menjawab pertanyaan. Pastikan kamu memiliki waktu luang yang cukup untuk menyelesaikan tes tanpa gangguan.</li>
+              <li><strong>Persiapan:</strong> Pastikan kondisi kamu berada di tempat yang tenang dan nyaman.</li>
+              <li><strong>Durasi Tes:</strong> Tes ini akan memakan waktu sekitar 2-5 menit, tergantung pada kecepatanmu dalam menjawab pertanyaan.</li>
              <li><strong>Jenis Pertanyaan:</strong> Tes ini terdiri dari beberapa pertanyaan yang dirancang untuk mengukur tingkat kecemasanmu. Jawablah setiap pertanyaan dengan jujur dan sesuai dengan perasaanmu saat ini.</li>
-              <li><strong>Hasil Tes:</strong> Setelah menyelesaikan tes, hasilnya akan dianalisis oleh sistem kami dan akan diberikan kepada psikolog yang menangani kasusmu. Psikolog akan memberikan feedback dan rekomendasi berdasarkan hasil tes tersebut.</li>
+              <li><strong>Hasil Tes:</strong> Setelah menyelesaikan tes, hasilnya akan dianalisis oleh sistem kami dan akan diberikan kepada psikolog yang menangani kasusmu. Psikolog akan memberikan feedback dan rekomendasi berdasarkan hasil tes tersebut. Kamu juga akan menerima laporan hasil tes secara detail dan juga bisa dilihat berdasarkan kode tes yang kamu dapatkan saat melakukan booking.</li>
              <li><strong>Konsultasi Lanjutan:</strong> Jika hasil tes menunjukkan bahwa kamu mengalami tingkat kecemasan yang tinggi, psikolog mungkin akan menyarankan sesi konsultasi lanjutan untuk membahas hasil tes dan langkah selanjutnya yang bisa diambil.</li>
            </ol>
-            <p class="card-text mt-3">Jika kamu sudah siap untuk memulai tes, silakan klik tombol "Mulai Tes" di bawah ini. Semoga tes ini dapat membantu kamu dalam memahami kondisi kecemasanmu dan mendapatkan bantuan yang tepat!</p>
+            <p class="card-text mt-3">Jika kamu sudah siap, silakan klik tombol "Next" di bawah ini untuk setup lingkungan terlebih dahulu.</p>
+            <button class="btn btn-primary" onclick="showTutorial(2, 'tutorial_1')">Next</button>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-8" id="tutorial_2">
+        <div class="card shadow-sm border-0">
+          <div class="card-body">
+            <h3 class="card-title fw-bold mb-4">Setup Lingkungan</h3>
+            <p class="card-text mb-3">Sebelum tes dimulai, setup alat Tobii dibawah ini:</p>
+            <ol>
+              <li><strong>Persiapan:</strong> Pastikan Tobii sudah terhubung dan berfungsi dengan baik.</li>
+              <li><strong>Penempatan:</strong> Tempatkan Tobii di posisi yang sesuai untuk mendeteksi gerakan mata dengan akurat.</li>
+              <li><strong>Hubungkan Tobii:</strong> Hubungkan Tobii ke dalam web dengan menggunakan link API dibawah ini.</li>
+              <li><strong>Hasil:</strong> Setelah menghubungkan ke web berhasil, akan muncul notifikasi bahwa Tobii telah terhubung.</li>
+              <li><strong>Selanjutnya:</strong> Melakukan kalibrasi mata dengan Tobii.</li>
+            </ol>
+            <h5 class="">Link API Tobii:</h5>
+            <div class="row px-3">
+              <div class="col-md-11">
+                <input type="text" disabled id="link_api_tobii" class="input form-control mb-3" value="">
+              </div>
+              <div class="col-md-1 p-0">
+                <button class="btn btn-secondary" onclick="copyLinkApiTobii()">Copy</button>
+              </div>
+            </div>
+            <p class="card-text mt-3" id="status_tobii">Status Tobii: Tidak Terhubung</p>
+            <button class="btn btn-primary" id="back_btn" onclick="showTutorial(1, 'tutorial_2')">Back</button>
+            <button class="btn btn-primary" id="next_btn_connect_tobii" onclick="showTutorial(3, 'tutorial_2')">Next</button>
          </div>
        </div>
      </div>
@ -25,6 +53,41 @@

@section('script')
  <script>
-    
+    $('#tutorial_2').hide();
+    $('#next_btn_connect_tobii').hide();
+    function showTutorial(step, tutorialId) {
+      $(`#${tutorialId}`).hide();
+      $(`#tutorial_${step}`).show();
+    }
+
+    function generateLinkApiTobii() {
+      const linkApi = '{{ route("tobii-receiver.store", ['id_test_sessions' => '__ID__', 'token_session' => '__TOKEN__']) }}';
+      $('#link_api_tobii').val(linkApi.replace('__ID__', '{{ $data_session->id_test_sessions }}').replace('__TOKEN__', '{{ $data_session->token_session }}').replace('&amp;', '&'));
+    }
+
+    function copyLinkApiTobii() {
+      const linkApi = $('#link_api_tobii').val();
+      navigator.clipboard.writeText(linkApi)
+        .then(() => {
+          Swal.fire({
+            icon: 'success',
+            title: 'Link API berhasil disalin!',
+            showConfirmButton: true,
+            timer: 1500
+          });
+        })
+        .catch(err => {
+          Swal.fire({
+            icon: 'error',
+            title: 'Gagal menyalin Link API',
+            text: err,
+          });
+        });
+    }
+
+    $(document).ready(function() {
+      generateLinkApiTobii();
+    });
+
  </script>
@endsection
--- a/routes/web.php
+++ b/routes/web.php
@ -8,6 +8,7 @@
 use App\Http\Controllers\LandingController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\TestSessionsController;
+use App\Http\Controllers\TobiiReceiverController;
 use App\Http\Controllers\TutorialTesController;
 use App\Http\Controllers\UsersController;
 use Illuminate\Http\Request;
@ -33,6 +34,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::resource('tobii-receiver', TobiiReceiverController::class)->only(['store']);
 Route::middleware(['auth', 'role.auth'])->group(function() {
    Route::resource('dashboard', DashboardController::class);
    Route::resource('users', UsersController::class);