Billie_Faiqul_Izzat/Billie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add intro for new user

Browse Source
This commit is contained in:
BillieFaiqul 2025-05-18 16:26:53 +07:00
parent c7c2a6221d
commit 1093f01526
10 changed files with 330 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/views/nodejs/dashboard/index.blade.php
View File

@ -1,28 +1,15 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"> <div class="flex justify-between items-center">
{{ __('Dashboard') }} <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
</h2> {{ __('Dashboard') }}
</x-slot> </h2>
<button id="resetIntroBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<div class="py-4"> <i class="fas fa-question-circle mr-1"></i> Lihat Tutorial
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> </button>
<!-- Tips Alert for Dashboard -->
<x-alert.tips-alert pageId="dashboard" title="Tips untuk Anda">
<p>Selamat datang di dashboard! Berikut adalah beberapa tips untuk membantu Anda:</p>
<ul class="list-disc pl-5 mt-2">
<li>Gunakan panel Projects untuk melihat detail project</li>
<li>Untuk submissions bisa dilihat di panel Submissions</li>
<li>Pilih proyek dari dropdown sebelum mengunggah</li>
<li>Unggah file dengan cara drag & drop ZIP atau klik Browse Atau, masukkan link GitHub lengkap di kolom yang tersedia. Lalu klik tombol SUBMIT</li>
<li>Maka anda akan di arahkan ke proses pengujian</li>
<li>Anda bisa kemabali ke halaman dashboard untuk melihat status pengumpulan</li>
</ul>
</x-alert.tips-alert>
</div> </div>
</div> </x-slot>
<div class="pt-5">
<div class="pb-5">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
@include('nodejs.dashboard.partials.projects.list') @include('nodejs.dashboard.partials.projects.list')

15
resources/views/nodejs/dashboard/partials/projects/card.blade.php
View File

@ -1,16 +1,25 @@
<div class="flex flex-col max-w-sm rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-900 h-full"> <!-- Contoh komponen project card dengan implementasi Intro.js yang lebih lengkap -->
<div class="flex flex-col max-w-sm rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-900 h-full"
data-step="1"
data-intro="Klik Read More untuk melihat detail dari project ini."
data-title="Project Card"
data-position="right"
data-disable-interaction="false">
<img class="w-40 mx-auto my-4" src="{{$project->getImageAttribute()}}" alt="Project {{$project->title}}" <img class="w-40 mx-auto my-4" src="{{$project->getImageAttribute()}}" alt="Project {{$project->title}}"
onerror="this.onerror=null;this.src='{{ asset('assets/nodejs/placeholder.png') }}';"> onerror="this.onerror=null;this.src='{{ asset('assets/nodejs/placeholder.png') }}';">
<div class="px-6 py-4"> <div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">{{$project->title}}</div> <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">{{$project->title}}</div>
<p class="text-gray-700 text-base dark:text-gray-400 leading-tight line-clamp-3"> <p class="text-gray-700 text-base dark:text-gray-400 leading-tight line-clamp-3">
{{ $project->description }} {{ $project->description }}
</p> </p>
</div> </div>
<div class="mt-auto px-6 pt-4 pb-2"> <div class="mt-auto px-6 pt-4 pb-2">
@forelse ($project->tech_stack as $key => $stack) @forelse ($project->tech_stack as $key => $stack)
<span <span
class=" inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2"> class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">
#{{$stack}}</span> #{{$stack}}</span>
@empty @empty
<span <span
@ -18,6 +27,7 @@ class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm
tech stack</span> tech stack</span>
@endforelse @endforelse
</div> </div>
<div class="px-6 py-2 bg-gray-100 dark:bg-secondary"> <div class="px-6 py-2 bg-gray-100 dark:bg-secondary">
<a href="{{route('projects.show', $project->id)}}" <a href="{{route('projects.show', $project->id)}}"
class="text-xs font-semibold text-secondary dark:text-white uppercase tracking-wide"> class="text-xs font-semibold text-secondary dark:text-white uppercase tracking-wide">
@ -26,3 +36,4 @@ class="text-xs font-semibold text-secondary dark:text-white uppercase tracking-w
</a> </a>
</div> </div>
</div> </div>

24
resources/views/nodejs/dashboard/partials/submissions/form.blade.php
View File

@ -4,7 +4,11 @@
<div> <div>
<x-input-label for="project_id" :value="__('Select Project Before Uploading')" class="mb-2" /> <x-input-label for="project_id" :value="__('Select Project Before Uploading')" class="mb-2" />
<select name="project_id" id="project_id" <select name="project_id" id="project_id"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-secondary-500 focus:border-secondary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-secondary-500 dark:focus:border-secondary-500"> class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-secondary-500 focus:border-secondary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-secondary-500 dark:focus:border-secondary-500"
data-step="2"
data-intro="Pilih project yang ingin Anda kirimkan. Jika Anda sudah mengirimkan project ini sebelumnya, Anda tidak dapat mengirimkannya lagi."
data-title="Select Project"
data-disable-interaction="false">
<option value="">Select Project</option> <option value="">Select Project</option>
@foreach ($projects as $project) @foreach ($projects as $project)
@php @php
@ -28,18 +32,30 @@ class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:
</select> </select>
<x-input-error :messages="$errors->get('project_id')" class="mt-2" /> <x-input-error :messages="$errors->get('project_id')" class="mt-2" />
</div> </div>
<div class="mt-4"> <div class="mt-4"
data-step="3"
data-intro="Upload file ZIP project Anda di sini. Pastikan file yang diunggah adalah file ZIP."
data-title="Upload ZIP File"
data-disable-interaction="false">
<x-input-label for="folder" :value="__('Submit The Source Code')" class="mb-2" /> <x-input-label for="folder" :value="__('Submit The Source Code')" class="mb-2" />
<input type="file" name="folder_path" id="folder" data-allow-reorder="true" data-max-file-size="3MB" /> <input type="file" name="folder_path" id="folder" data-allow-reorder="true" data-max-file-size="3MB" />
<x-input-error :messages="$errors->get('folder')" class="mt-2" /> <x-input-error :messages="$errors->get('folder')" class="mt-2" />
</div> </div>
<div class="mt-4"> <div class="mt-4"
data-step="4"
data-intro="Jika Anda tidak ingin mengunggah file ZIP, Anda dapat memasukkan tautan ke repositori GitHub Anda di sini."
data-title="Or Github Link"
data-disable-interaction="false">
<x-input-label for="github_url" :value="__('Or Github Link')" /> <x-input-label for="github_url" :value="__('Or Github Link')" />
<x-text-input id="github_url" class="block mt-1 w-full" type="text" name="github_url" <x-text-input id="github_url" class="block mt-1 w-full" type="text" name="github_url"
:value="old('github_url')" placeholder="E.g. https://github.com/username/repository.git" /> :value="old('github_url')" placeholder="E.g. https://github.com/username/repository.git" />
<x-input-error :messages="$errors->get('github_url')" class="mt-2" /> <x-input-error :messages="$errors->get('github_url')" class="mt-2" />
</div> </div>
<div class="flex items-center justify-end mt-12"> <div class="flex items-center justify-end mt-12"
data-step="5"
data-intro="Klik tombol 'Submit' untuk mengirimkan project Anda."
data-title="Submit Project"
data-disable-interaction="false">
<x-primary-button class="ml-4"> <x-primary-button class="ml-4">
{{ __('Submit') }} {{ __('Submit') }}
</x-primary-button> </x-primary-button>

6
resources/views/nodejs/dashboard/partials/submissions/table.blade.php
View File

@ -1,4 +1,8 @@
<table class="table" id="submissions_table"> <table class="table" id="submissions_table"
data-step="6"
data-intro="Tekan title dari project untuk melihat detail dari submission anda."
data-title="Submission Table"
data-disable-interaction="false">
<thead> <thead>
<tr> <tr>
<th>Title</th> <th>Title</th>

232
resources/views/nodejs/layouts/app.blade.php
View File

@ -1,58 +1,196 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title> <title>{{ config('app.name', 'Laravel') }}</title>
<!-- Icon --> <!-- Icon -->
<link rel="icon" href="{{ asset('/application_icon.ico') }}" /> <link rel="icon" href="{{ asset('/application_icon.ico') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" /> crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts --> <!-- Fonts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" /> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js">
</script>
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://unpkg.com/pdfobject@2.2.10/pdfobject.min.js"></script>
<link href="{{asset('css/nodejs_style.css')}}" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="font-sans antialiased"> <!-- Styles -->
<div class="min-h-screen bg-gray-100 dark:bg-gray-900"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
@include('nodejs.layouts.navigation') <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css" />
<!-- Tambahan: tema Intro.js untuk tampilan yang lebih baik -->
<link rel="stylesheet" href="https://unpkg.com/intro.js/themes/introjs-modern.css" />
<!-- Page Heading --> <link href="{{asset('css/nodejs_style.css')}}" rel="stylesheet">
@if (isset($header))
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content --> <!-- Custom CSS for IntroJS modification -->
<main> <style>
{{ $slot }} /* Hide the default skip button */
</main> .introjs-skipbutton {
</div> display: none !important;
@yield('scripts') }
</body>
/* Custom navigation container at bottom */
.introjs-tooltipbuttons {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Custom skip button at bottom */
.custom-skip-button {
display: inline-block;
text-decoration: none;
padding: 6px 16px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
color: white;
background-color: transparent;
border: 1px solid transparent; /* awalnya tidak terlihat */
border-radius: 999px;
transition: all 0.2s ease;
}
.custom-skip-button:hover {
border-color: white;
background-color: transparent;
}
</style>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://unpkg.com/pdfobject@2.2.10/pdfobject.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@include('nodejs.layouts.navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
<!-- Konfigurasi Intro.js yang dimodifikasi -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Cek apakah pengguna sudah pernah melihat intro (menggunakan localStorage)
const hasSeenIntro = localStorage.getItem('hasSeenNodeJSIntro');
// Cek apakah ada elemen dengan data-step di halaman
const hasIntroElements = document.querySelectorAll('[data-step]').length > 0;
if (hasIntroElements && !hasSeenIntro) {
startTutorial();
}
// Tambahkan event listener untuk tombol reset tutorial
const resetIntroBtn = document.getElementById('resetIntroBtn');
if (resetIntroBtn) {
resetIntroBtn.addEventListener('click', function() {
localStorage.removeItem('hasSeenNodeJSIntro');
startTutorial();
});
}
// Fungsi untuk memulai tutorial
function startTutorial() {
if (document.querySelectorAll('[data-step]').length === 0) return;
// Konfigurasi yang lebih lengkap untuk intro.js
const intro = introJs();
// Konfigurasi umum
intro.setOptions({
nextLabel: 'Lanjut',
prevLabel: 'Kembali',
skipLabel: 'Lewati', // Ini tidak akan terlihat karena kita sembunyikan button aslinya
doneLabel: 'Selesai',
hidePrev: false,
hideNext: false,
showStepNumbers: true,
showBullets: true,
showProgress: true,
scrollToElement: true,
scrollTo: 'element',
disableInteraction: false,
tooltipPosition: 'auto',
highlightClass: 'intro-highlight',
tooltipClass: 'customTooltip',
exitOnOverlayClick: false,
exitOnEsc: true,
overlayOpacity: 0.8
});
// Event untuk memodifikasi tooltips setelah mereka dibuat
intro.onafterchange(function(targetElement) {
// Sembunyikan tombol skip default dan buat tombol skip kustom
setTimeout(function() {
const tooltipButtons = document.querySelector('.introjs-tooltipbuttons');
const skipExists = tooltipButtons.querySelector('.custom-skip-button');
// Hanya tambahkan tombol jika belum ada
if (!skipExists) {
const skipButton = document.createElement('button');
skipButton.className = 'custom-skip-button';
skipButton.innerHTML = 'Lewati';
// Tambahkan event untuk skip
skipButton.addEventListener('click', function() {
intro.exit();
localStorage.setItem('hasSeenNodeJSIntro', 'true');
});
// Tempatkan tombol Lewati di sebelah paling kanan
const nextButtons = tooltipButtons.querySelector('.introjs-nextbutton');
tooltipButtons.appendChild(skipButton);
}
}, 10);
});
// Jalankan tutorial
intro.start();
// Simpan bahwa pengguna sudah melihat intro
intro.oncomplete(function() {
localStorage.setItem('hasSeenNodeJSIntro', 'true');
});
intro.onexit(function() {
localStorage.setItem('hasSeenNodeJSIntro', 'true');
});
}
});
</script>
@yield('scripts')
</body>
</html> </html>

35
resources/views/nodejs/projects/show.blade.php
View File

@ -1,42 +1,31 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"> <div class="flex justify-between items-center">
{{ __('Project:') . ' ' . $project->title }} <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight" data-step="1" data-intro="Ini adalah judul dari project yang sedang Anda lihat saat ini" data-title="Project Name" data-position="top" data-disable-interaction="false">
</h2> {{ __('Project:') . ' ' . $project->title }}
</x-slot> </h2>
<div class="py-4"> <button id="resetIntroBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <i class="fas fa-question-circle mr-1"></i> Lihat Tutorial
<!-- Tips Alert for Dashboard --> </button>
<x-alert.tips-alert pageId="project" title="Tips untuk Anda">
<p>Selamat datang di project! Berikut adalah beberapa tips untuk membantu Anda:</p>
<ul class="list-disc pl-5 mt-2">
<li>Klik ikon garis 3 di sebelah nama guide untuk membuka opsi</li>
<li>Pilih "View" untuk melihat PDF di halaman yang sama</li>
<li>Pilih "Open in a new tab" untuk membuka di tab baru</li>
<li>Pilih "Download" untuk menyimpan PDF ke perangkat Anda</li>
<li>Klik "All Guides" di panel Download untuk mengunduh semua panduan sekaligus</li>
<li>Klik "All Supplements" di panel Download untuk mengunduh file tambahan/pendukung</li>
</ul>
</x-alert.tips-alert>
</div> </div>
</div> </x-slot>
<div class="pt-5"> <div class="pt-5">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg" data-step="2" data-intro="Bagian ini berisi detail project termasuk judul, deskripsi dan teknologi yang digunakan dalam project ini" data-title="Project Detail" data-position="top" data-disable-interaction="false">
@include('nodejs.projects.partials.details') @include('nodejs.projects.partials.details')
</div> </div>
</div> </div>
</div> </div>
<div class="py-5"> <div class="py-5">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg pb-18"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg pb-18" data-step="3" data-intro="Di bagian ini, Anda dapat melihat semua panduan PDF terkait project ini. Klik 'View' untuk membuka panduan PDF langsung di halaman ini" data-title="Project Guide" data-position="top" data-disable-interaction="false">
@include('nodejs.projects.partials.guides') @include('nodejs.projects.partials.guides')
</div> </div>
</div> </div>
</div> </div>
<div class="py-5"> <div class="py-5">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg" data-step="4" data-intro="Di sini Anda dapat mengunduh semua materi project sekaligus berdasarkan kategori - panduan, materi tambahan, dan tes" data-title="Project Download" data-position="top" data-disable-interaction="false">
@include('nodejs.projects.partials.downloads') @include('nodejs.projects.partials.downloads')
</div> </div>
</div> </div>

2
resources/views/nodejs/rank-teacher/index.blade.php
View File

@ -116,7 +116,7 @@ function loadProjects() {
success: function(response) { success: function(response) {
if (response.status === 'success') { if (response.status === 'success') {
const projects = response.data.projects; const projects = response.data.projects;
let options = '<option value="">Pilih Proyek</option>'; let options = '<option value="">Select Project</option>';
projects.forEach(project => { projects.forEach(project => {
options += `<option value="${project.id}">${project.title}</option>`; options += `<option value="${project.id}">${project.title}</option>`;

29
resources/views/nodejs/submissions/index.blade.php
View File

@ -1,24 +1,17 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"> <div class="flex items-center justify-between">
{{ __('Submissions') }} <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
</h2> {{ __('Submissions') }}
</x-slot> </h2>
<div class="py-4"> <button id="resetIntroBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <i class="fas fa-question-circle mr-1"></i> Lihat Tutorial
<!-- Tips Alert for Dashboard --> </button>
<x-alert.tips-alert pageId="submission-index" title="Tips untuk Anda">
<p>Selamat datang di Submission! Berikut adalah beberapa tips untuk membantu Anda:</p>
<ul class="list-disc pl-5 mt-2">
<li>Perhatikan kolom "Status" untuk melihat hasil pengajuan Anda</li>
<li>Klik ikon menu garis 3 untuk melihat opsi tindakan</li>
<li>Pilih "Restart submission" untuk mencoba ulang pengajuan yang gagal</li>
<li>Pilih "Delete submission" untuk menghapus pengajuan dari daftar</li>
<li>Klik judul project untuk melihat history dan lebih detail mengenai submission</li>
</ul>
</x-alert.tips-alert>
</div> </div>
</div> </x-slot>
<div class="py-4"></div>
<div class="py-2"> <div class="py-2">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg pb-12"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg pb-12">

103
resources/views/nodejs/submissions/partials/table.blade.php
View File

@ -11,6 +11,7 @@
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
@section('scripts') @section('scripts')
<script type="text/javascript"> <script type="text/javascript">
function requestServer(element){ function requestServer(element){
@ -102,7 +103,6 @@ function requestServer(element){
}); });
break; break;
case "change-source-code": case "change-source-code":
// redirect to change source code page
window.location = '/nodejs/submissions/change/' + submission_id; window.location = '/nodejs/submissions/change/' + submission_id;
break; break;
default: default:
@ -110,40 +110,79 @@ function requestServer(element){
} }
} }
$(function () { $(function () {
var table = $('#submissions_table').DataTable({ var table = $('#submissions_table').DataTable({
"processing": true, "processing": true,
"retrieve": true, "retrieve": true,
"serverSide": true, "serverSide": true,
'paginate': true, 'paginate': true,
"bDeferRender": true, "bDeferRender": true,
"responsive": true, "responsive": true,
"autoWidth": false, "autoWidth": false,
"bLengthChange" : false, "bLengthChange" : false,
"aaSorting": [], "aaSorting": [],
"lengthMenu": [5], "lengthMenu": [5],
"searching": false, "searching": false,
"info" : false, "info" : false,
language: { language: {
search: "_INPUT_", search: "_INPUT_",
searchPlaceholder: "Search", searchPlaceholder: "Search",
"paginate": { "paginate": {
"previous": "<", "previous": "<",
"next": ">", "next": ">",
},
}, },
}, ajax: "{{ route('submissions') }}",
ajax: "{{ route('submissions') }}", columns: [
columns: [ {
{data: 'title', name: 'title', orderable: true, searchable: true}, data: 'title',
// {data: 'submission_count', name: 'submission_count', orderable: true, searchable: false, className: "text-center"}, name: 'title',
{data: 'attempts_count', name: 'attempts_count', orderable: true, searchable: false, className: "text-center"}, orderable: true,
{data: 'submission_status', name: 'submission_status', orderable: true, searchable: true, className: "text-center"}, searchable: true,
{data: 'action', name: 'action', orderable: false, searchable: false, className: "text-center"}, createdCell: function (td) {
] $(td).attr({
'data-step': '1',
'data-intro': 'Klik Tittle Project untuk melihat lebih detail submission, anda dapat dapat melihat detail pengujian dan mendownload hasil pengujiannya.',
'data-title': 'Submission Detail',
'data-position': 'right',
'data-disable-interaction': 'false'
});
}
},
{
data: 'attempts_count',
name: 'attempts_count',
orderable: true,
searchable: false,
className: "text-center"
},
{
data: 'submission_status',
name: 'submission_status',
orderable: true,
searchable: true,
className: "text-center"
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false,
className: "text-center",
createdCell: function (td) {
$(td).attr({
'data-step': '2',
'data-intro': 'Jika anda sudah mensubmit sebuah project, anda dapat mengulang dan menghapus submission project tersebut dengan mengklik tombol yang muncul disini.',
'data-title': 'Submission Action',
'data-position': 'right',
'data-disable-interaction': 'false'
});
}
},
]
});
}); });
});
$('#submissions_table_paginate > span > a').addClass('bg-gray-900 text-gray-300'); $('#submissions_table_paginate > span > a').addClass('bg-gray-900 text-gray-300');
</script> </script>
@endsection @endsection

10
resources/views/nodejs/submissions/show.blade.php
View File

@ -6,16 +6,6 @@
</h2> </h2>
</x-slot> </x-slot>
<div class="py-4"> <div class="py-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<!-- Tips Alert for Dashboard -->
<x-alert.tips-alert pageId="submission-show" title="Tips untuk Anda">
<p>Selamat datang di Submission! Berikut adalah beberapa tips untuk membantu Anda:</p>
<ul class="list-disc pl-5 mt-2">
<li>Klik "View" untuk melihat feedback atau error log dari sistem</li>
<li>Klik "Download Results" untuk mengunduh laporan berupa json</li>
</ul>
</x-alert.tips-alert>
</div>
</div> </div>
<div class="py-5"> <div class="py-5">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">