feat : alert tips for user
This commit is contained in:
BillieFaiqul
parent
0f48ed400f
commit
5f069fc337
102
resources/views/components/alert/tips-alert.blade.php
Normal file
102
resources/views/components/alert/tips-alert.blade.php
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
<!-- File: resources/views/components/alert/tips-alert.blade.php -->
|
||||||
|
@props([
|
||||||
|
'pageId' => 'default',
|
||||||
|
'title' => 'Tips untuk Anda',
|
||||||
|
'dontShowAgainText' => 'Jangan Tampilkan Lagi'
|
||||||
|
])
|
||||||
|
|
||||||
|
<div id="tipsAlert_{{ $pageId }}" class="mb-6 bg-white dark:bg-gray-700 border-l-4 border-blue-500 shadow-md rounded-md overflow-hidden">
|
||||||
|
<div class="bg-blue-500 text-white px-4 py-2 flex justify-between items-center">
|
||||||
|
<h3 class="font-medium flex items-center">
|
||||||
|
<span class="mr-2 text-xl">💡</span> {{ $title }}
|
||||||
|
</h3>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button id="dontShowAgain_{{ $pageId }}" class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded mr-2">
|
||||||
|
{{ $dontShowAgainText }}
|
||||||
|
</button>
|
||||||
|
<button id="closeButton_{{ $pageId }}" class="text-white hover:text-gray-200">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-white dark:bg-gray-800 dark:text-gray-200">
|
||||||
|
{{ $slot }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tombol untuk menampilkan kembali tips -->
|
||||||
|
<div id="showTipsAgainButton_{{ $pageId }}" class="hidden mb-6">
|
||||||
|
<button class="flex items-center text-white font-bold hover:text-blue-200 dark:text-white dark:hover:text-blue-300">
|
||||||
|
<span class="mr-1 text-xl">💡</span>
|
||||||
|
<span>Tampilkan tips untuk halaman ini</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const pageId = '{{ $pageId }}';
|
||||||
|
const tipsAlert = document.getElementById('tipsAlert_' + pageId);
|
||||||
|
const closeButton = document.getElementById('closeButton_' + pageId);
|
||||||
|
const dontShowAgainButton = document.getElementById('dontShowAgain_' + pageId);
|
||||||
|
const showTipsAgainButton = document.getElementById('showTipsAgainButton_' + pageId);
|
||||||
|
const storageKey = 'tips_dismissed_' + pageId;
|
||||||
|
|
||||||
|
// Check if tips should be shown
|
||||||
|
function checkShowTips() {
|
||||||
|
if (localStorage.getItem(storageKey) === 'true') {
|
||||||
|
hideTips(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideTips(showToggleButton = false) {
|
||||||
|
if (tipsAlert) {
|
||||||
|
tipsAlert.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tampilkan tombol untuk menampilkan tips kembali
|
||||||
|
if (showToggleButton && showTipsAgainButton) {
|
||||||
|
showTipsAgainButton.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showTips() {
|
||||||
|
if (tipsAlert) {
|
||||||
|
tipsAlert.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showTipsAgainButton) {
|
||||||
|
showTipsAgainButton.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dontShowAgain() {
|
||||||
|
localStorage.setItem(storageKey, 'true');
|
||||||
|
hideTips(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetTipsPreference() {
|
||||||
|
localStorage.removeItem(storageKey);
|
||||||
|
showTips();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners
|
||||||
|
if (closeButton) {
|
||||||
|
closeButton.addEventListener('click', function() {
|
||||||
|
hideTips(false); // Sembunyikan tips tanpa menampilkan tombol toggle
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dontShowAgainButton) {
|
||||||
|
dontShowAgainButton.addEventListener('click', dontShowAgain);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showTipsAgainButton) {
|
||||||
|
showTipsAgainButton.addEventListener('click', resetTipsPreference);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check on page load
|
||||||
|
checkShowTips();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -5,7 +5,24 @@
|
||||||
</h2>
|
</h2>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
|
||||||
<div class="pt-5">
|
<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="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 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')
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,22 @@
|
||||||
{{ __('Project:') . ' ' . $project->title }}
|
{{ __('Project:') . ' ' . $project->title }}
|
||||||
</h2>
|
</h2>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
<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="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 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">
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,22 @@
|
||||||
{{ __('Submissions') }}
|
{{ __('Submissions') }}
|
||||||
</h2>
|
</h2>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
<div class="py-4">
|
||||||
<div class="py-5">
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||||
|
<!-- Tips Alert for Dashboard -->
|
||||||
|
<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 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">
|
||||||
@include('nodejs.submissions.partials.container')
|
@include('nodejs.submissions.partials.container')
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,18 @@
|
||||||
{{ __('All submissions for project: ') . $project->title }}
|
{{ __('All submissions for project: ') . $project->title }}
|
||||||
</h2>
|
</h2>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
<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 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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user