feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AnnouncementModal.vue
|
||||
* @description Modal component to display course announcements
|
||||
* @description คอมโพเนนต์ Modal สำหรับแสดงประกาศของคอร์สเรียน (Modal component to display course announcements)
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -15,7 +15,7 @@ const emit = defineEmits<{
|
|||
|
||||
const { locale, t } = useI18n()
|
||||
|
||||
// Helper for localization
|
||||
// ตัวช่วยจัดการข้อความหลายภาษา (Helper for localization)
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
|
|
@ -49,7 +49,7 @@ const getLocalizedText = (text: any) => {
|
|||
class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
|
||||
:class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 !bg-orange-50/50 dark:!bg-orange-900/20': ann.is_pinned}"
|
||||
>
|
||||
<!-- Pinned Banner -->
|
||||
<!-- ป้ายกำกับสำหรับข้อความที่ปักหมุดไว้ (Pinned Banner) -->
|
||||
<div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
|
||||
<q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CurriculumSidebar.vue
|
||||
* @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
|
||||
* Handles lesson navigation, locked status display, and unread announcement badge.
|
||||
* @description คอมโพเนนต์แถบเมนูด้านข้างสำหรับแสดงหลักสูตรของคอร์สเรียน (บทเรียน & ตอนต่างๆ)
|
||||
* จัดการการนำทางไปยังบทเรียน, แสดงสถานะการล็อค, และแจ้งเตือนประกาศที่ยังไม่ได้อ่าน
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean; // Sidebar open state (v-model)
|
||||
modelValue: boolean; // สถานะการเปิด/ปิดของ Sidebar (Sidebar open state - v-model)
|
||||
courseData: any;
|
||||
currentLessonId?: number;
|
||||
isLoading: boolean;
|
||||
|
|
@ -21,10 +21,10 @@ const emit = defineEmits<{
|
|||
|
||||
const { locale } = useI18n()
|
||||
|
||||
// State for expansion items
|
||||
// สถานะของส่วนที่ขยายได้ (State for expansion items)
|
||||
const chapterOpenState = ref<Record<string, boolean>>({})
|
||||
|
||||
// Helper for localization
|
||||
// ตัวช่วยจัดการข้อความหลายภาษา (Helper for localization)
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
|
|
@ -34,13 +34,13 @@ const getLocalizedText = (text: any) => {
|
|||
return text[currentLocale] || text.th || text.en || ''
|
||||
}
|
||||
|
||||
// Helper: Check if lesson is completed
|
||||
// ตัวช่วยตรวจสอบว่าบทเรียนเรียนจบหรือยัง (Helper: Check if lesson is completed)
|
||||
const isLessonCompleted = (lesson: any) => {
|
||||
return lesson.is_completed === true || lesson.progress?.is_completed === true
|
||||
}
|
||||
|
||||
// Reactive Chapter Completion Status
|
||||
// Computes a map of chapterId -> boolean (true if all lessons are completed)
|
||||
// ตรวจสอบสถานะการสำเร็จของบท (Reactive Chapter Completion Status)
|
||||
// คำนวณเป็น Map ของ chapterId -> boolean (true ถ้าทุกบทเรียนย่อยเรียนจบแล้ว)
|
||||
const chapterCompletionStatus = computed(() => {
|
||||
const status: Record<string, boolean> = {}
|
||||
if (!props.courseData || !props.courseData.chapters) return status
|
||||
|
|
@ -55,7 +55,7 @@ const chapterCompletionStatus = computed(() => {
|
|||
return status
|
||||
})
|
||||
|
||||
// Local Progress Calculation
|
||||
// คำนวณความคืบหน้าแบบ Local (Local Progress Calculation)
|
||||
const progressPercentage = computed(() => {
|
||||
if (!props.courseData || !props.courseData.chapters) return 0
|
||||
let total = 0
|
||||
|
|
@ -69,7 +69,7 @@ const progressPercentage = computed(() => {
|
|||
return total > 0 ? Math.round((completed / total) * 100) : 0
|
||||
})
|
||||
|
||||
// Auto-expand chapter containing current lesson
|
||||
// ขยายบทเรียนปัจจุบันอัตโนมัติ (Auto-expand chapter containing current lesson)
|
||||
watch(() => props.currentLessonId, (newId) => {
|
||||
if (newId && props.courseData?.chapters) {
|
||||
props.courseData.chapters.forEach((chapter: any) => {
|
||||
|
|
@ -81,7 +81,7 @@ watch(() => props.currentLessonId, (newId) => {
|
|||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Initialize all chapters as open by default on load
|
||||
// ตั้งค่าเริ่มต้นให้ทุกบทเรียนเปิดอยู่เมื่อโหลด (Initialize all chapters as open by default on load)
|
||||
watch(() => props.courseData, (newData) => {
|
||||
if (newData?.chapters) {
|
||||
newData.chapters.forEach((chapter: any) => {
|
||||
|
|
@ -104,10 +104,10 @@ watch(() => props.courseData, (newData) => {
|
|||
:breakpoint="1024"
|
||||
class="bg-slate-50 dark:!bg-slate-900 shadow-xl"
|
||||
>
|
||||
<!-- Main Container: Enforce Column Layout and Full Width -->
|
||||
<!-- คอนเทนเนอร์หลักบังคับใช้ความกว้างเต็มที่ (Main Container: Enforce Column Layout and Full Width) -->
|
||||
<div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:!text-white relative bg-slate-50 dark:!bg-slate-900">
|
||||
|
||||
<!-- 1. Header Section (Fixed at Top) -->
|
||||
<!-- 1. ส่วนหัว ด้านบนคงที่ (Header Section - Fixed at Top) -->
|
||||
<div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:!bg-slate-900 z-10 w-full">
|
||||
<h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full text-slate-900 dark:!text-white">{{ getLocalizedText(courseData.course.title) }}</h2>
|
||||
|
||||
|
|
@ -123,11 +123,11 @@ watch(() => props.courseData, (newData) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Curriculum List (Scrollable Area) -->
|
||||
<!-- 2. รายการหลักสูตร พื้นที่เลื่อนได้ (Curriculum List - Scrollable Area) -->
|
||||
<div class="flex-1 overflow-y-auto bg-slate-50 dark:!bg-slate-900 w-full p-4 space-y-3">
|
||||
<q-list class="block w-full">
|
||||
<div v-for="(chapter, idx) in courseData.chapters" :key="chapter.id" class="block w-full mb-3">
|
||||
<!-- Chapter Accordion -->
|
||||
<!-- กล่องข้อมูลของบท (Chapter Accordion) -->
|
||||
<q-expansion-item
|
||||
v-model="chapterOpenState[chapter.id]"
|
||||
class="bg-white dark:!bg-slate-800 rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700 w-full"
|
||||
|
|
@ -137,7 +137,7 @@ watch(() => props.courseData, (newData) => {
|
|||
<template v-slot:header>
|
||||
<div class="flex items-center w-full py-3 text-slate-900 dark:!text-white">
|
||||
<div class="mr-3 flex-shrink-0">
|
||||
<!-- Chapter Indicator (Check or Number) -->
|
||||
<!-- ตัวบ่งชี้บทเรียน เครื่องหมายถูกหรือตัวเลข (Chapter Indicator - Check or Number) -->
|
||||
<div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-colors font-bold"
|
||||
:class="chapterCompletionStatus[chapter.id]
|
||||
? 'border-green-500 text-green-500 bg-green-50 dark:!bg-green-500/10'
|
||||
|
|
@ -146,7 +146,7 @@ watch(() => props.courseData, (newData) => {
|
|||
<span v-else class="text-[10px]">{{ Number(idx) + 1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Explicitly handle text overflow -->
|
||||
<!-- จัดการตัวอักษรที่ล้นเกินอย่างชัดเจน (Explicitly handle text overflow) -->
|
||||
<div class="flex-1 min-w-0 pr-2 overflow-hidden">
|
||||
<div class="font-bold text-sm leading-tight mb-0.5 truncate block w-full">{{ getLocalizedText(chapter.title) }}</div>
|
||||
<div class="text-[10px] text-slate-500 dark:!text-slate-400 font-normal truncate block w-full">
|
||||
|
|
@ -156,7 +156,7 @@ watch(() => props.courseData, (newData) => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Lessons List -->
|
||||
<!-- รายการบทเรียนย่อย (Lessons List) -->
|
||||
<div class="bg-slate-50 dark:!bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 w-full">
|
||||
<div
|
||||
v-for="(lesson, lIdx) in chapter.lessons"
|
||||
|
|
@ -167,27 +167,27 @@ watch(() => props.courseData, (newData) => {
|
|||
: 'border-transparent'"
|
||||
@click="!lesson.is_locked && emit('select-lesson', lesson.id)"
|
||||
>
|
||||
<!-- Lesson Status Icon -->
|
||||
<!-- ไอคอนสถานะของบทเรียน (Lesson Status Icon) -->
|
||||
<div class="mr-3 flex-shrink-0">
|
||||
<!-- Completed (Takes Precedence) -->
|
||||
<!-- เรียนจบแล้ว (สำคัญที่สุด) (Completed - Takes Precedence) -->
|
||||
<q-icon v-if="isLessonCompleted(lesson)"
|
||||
name="check_circle"
|
||||
class="text-green-500"
|
||||
size="20px"
|
||||
/>
|
||||
<!-- Active/Playing (If not completed) -->
|
||||
<!-- กำลังเรียนอยู่ (Active/Playing - If not completed) -->
|
||||
<q-icon v-else-if="currentLessonId === lesson.id"
|
||||
name="play_circle_filled"
|
||||
class="text-blue-600 dark:!text-blue-400 animate-pulse"
|
||||
size="20px"
|
||||
/>
|
||||
<!-- Locked -->
|
||||
<!-- ถูกล็อคอยู่ (Locked) -->
|
||||
<q-icon v-else-if="lesson.is_locked"
|
||||
name="lock"
|
||||
class="text-slate-400 dark:!text-slate-500 opacity-70"
|
||||
size="18px"
|
||||
/>
|
||||
<!-- Not Started -->
|
||||
<!-- ยังไม่ได้เริ่ม (Not Started) -->
|
||||
<div v-else class="w-[18px] h-[18px] rounded-full border-2 border-slate-300 dark:border-slate-600"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ watch(() => props.courseData, (newData) => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom scrollbar for better aesthetics */
|
||||
/* สครอลบาร์ปรับแต่งเพื่อความสวยงาม (Custom scrollbar for better aesthetics) */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file VideoPlayer.vue
|
||||
* @description Video Player Component with custom controls provided by design
|
||||
* @description คอมโพเนนต์เครื่องเล่นวิดีโอพร้อมด้วยตัวควบคุมแบบกำหนดเองตามการออกแบบ (Video Player Component with custom controls provided by design)
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -22,7 +22,7 @@ const videoProgress = ref(0);
|
|||
const currentTime = ref(0);
|
||||
const duration = ref(0);
|
||||
|
||||
// Media Prefs
|
||||
// การตั้งค่าเกี่ยวกับสื่อ (Media Prefs)
|
||||
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
|
||||
|
||||
const volumeIcon = computed(() => {
|
||||
|
|
@ -40,7 +40,7 @@ const formatTime = (time: number) => {
|
|||
const currentTimeDisplay = computed(() => formatTime(currentTime.value));
|
||||
const durationDisplay = computed(() => formatTime(duration.value || 0));
|
||||
|
||||
// YouTube Helper Logic
|
||||
// ตรรกะตัวช่วยสำหรับ YouTube (YouTube Helper Logic)
|
||||
const isYoutube = computed(() => {
|
||||
const s = props.src.toLowerCase();
|
||||
return s.includes('youtube.com') || s.includes('youtu.be');
|
||||
|
|
@ -50,7 +50,7 @@ const youtubeEmbedUrl = computed(() => {
|
|||
if (!isYoutube.value) return '';
|
||||
let videoId = '';
|
||||
|
||||
// Extract Video ID
|
||||
// ดึงรหัสวิดีโอ (Extract Video ID)
|
||||
if (props.src.includes('youtu.be')) {
|
||||
videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
|
||||
} else {
|
||||
|
|
@ -58,18 +58,18 @@ const youtubeEmbedUrl = computed(() => {
|
|||
videoId = urlParams.get('v') || '';
|
||||
}
|
||||
|
||||
// Return Embed URL with enablejsapi=1
|
||||
// คืนค่า URL สำหรับฝังพร้อมเปิดใช้งาน jsapi (Return Embed URL with enablejsapi=1)
|
||||
return `https://www.youtube.com/embed/${videoId}?enablejsapi=1&rel=0`;
|
||||
});
|
||||
|
||||
// YouTube API Tracking
|
||||
// การติดตามผ่าน YouTube API (YouTube API Tracking)
|
||||
let ytPlayer: any = null;
|
||||
let ytInterval: any = null;
|
||||
|
||||
const initYoutubeAPI = () => {
|
||||
if (!isYoutube.value || typeof window === 'undefined') return;
|
||||
|
||||
// Load API Script if not exists
|
||||
// โหลดสคริปต์ API หากยังไม่มี (Load API Script if not exists)
|
||||
if (!(window as any).YT) {
|
||||
const tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
|
|
@ -83,7 +83,7 @@ const initYoutubeAPI = () => {
|
|||
'onReady': (event: any) => {
|
||||
duration.value = event.target.getDuration();
|
||||
|
||||
// Resume Logic for YouTube
|
||||
// ตรรกะการเล่นต่อสำหรับ YouTube (Resume Logic for YouTube)
|
||||
if (props.initialSeekTime && props.initialSeekTime > 0) {
|
||||
event.target.seekTo(props.initialSeekTime, true);
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ const startYTTracking = () => {
|
|||
currentTime.value = ytPlayer.getCurrentTime();
|
||||
emit('timeupdate', currentTime.value, duration.value);
|
||||
}
|
||||
}, 1000); // Check every second
|
||||
}, 1000); // ตรวจสอบทุกๆ วินาที (Check every second)
|
||||
};
|
||||
|
||||
const stopYTTracking = () => {
|
||||
|
|
@ -145,7 +145,7 @@ onUnmounted(() => {
|
|||
destroyYoutubePlayer();
|
||||
});
|
||||
|
||||
// Watch for src change to re-init
|
||||
// เฝ้าดูการเปลี่ยนแปลงของ src เพื่อเริ่มต้นใหม่ (Watch for src change to re-init)
|
||||
watch(() => props.src, (newSrc, oldSrc) => {
|
||||
if (newSrc !== oldSrc) {
|
||||
destroyYoutubePlayer();
|
||||
|
|
@ -174,8 +174,8 @@ const togglePlay = () => {
|
|||
playPromise.then(() => {
|
||||
isPlaying.value = true;
|
||||
}).catch(error => {
|
||||
// Auto-play was prevented or play was interrupted
|
||||
// We can safely ignore this error
|
||||
// การเล่นอัตโนมัติถูกป้องกันหรือถูกขัดจังหวะ (Auto-play was prevented or play was interrupted)
|
||||
// สามารถละเว้นข้อผิดพลาดนี้ได้อย่างปลอดภัย (We can safely ignore this error)
|
||||
console.log("Video play request handled:", error.name);
|
||||
});
|
||||
}
|
||||
|
|
@ -223,14 +223,14 @@ const handleVolumeChange = (val: any) => {
|
|||
setVolume(newVol);
|
||||
};
|
||||
|
||||
// Expose video ref for parent to control if needed
|
||||
// เปิดเผย video ref ให้คอมโพเนนต์แม่ควบคุมถ้าจำเป็น (Expose video ref for parent to control if needed)
|
||||
defineExpose({
|
||||
videoRef,
|
||||
pause: () => videoRef.value?.pause(),
|
||||
currentTime: () => videoRef.value?.currentTime || 0
|
||||
});
|
||||
|
||||
// Watch for volume/mute changes to apply to video element
|
||||
// เฝ้าดูการเปลี่ยนแปลงระดับเสียง/ปิดเสียง เพื่อนำไปใช้กับองค์ประกอบวิดีโอ (Watch for volume/mute changes to apply to video element)
|
||||
watch([volume, isMuted], () => {
|
||||
if (videoRef.value) applyTo(videoRef.value);
|
||||
});
|
||||
|
|
@ -238,7 +238,7 @@ watch([volume, isMuted], () => {
|
|||
|
||||
<template>
|
||||
<div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
|
||||
<!-- 1. YouTube Player -->
|
||||
<!-- 1. เครื่องเล่น YouTube (YouTube Player) -->
|
||||
<iframe
|
||||
v-if="isYoutube"
|
||||
id="youtube-iframe"
|
||||
|
|
@ -249,7 +249,7 @@ watch([volume, isMuted], () => {
|
|||
allowfullscreen
|
||||
></iframe>
|
||||
|
||||
<!-- 2. Standard HTML5 Video Player -->
|
||||
<!-- 2. เครื่องเล่นวิดีโอ HTML5 มาตรฐาน (Standard HTML5 Video Player) -->
|
||||
<div v-else class="w-full h-full relative group/video cursor-pointer">
|
||||
<video
|
||||
ref="videoRef"
|
||||
|
|
@ -262,9 +262,9 @@ watch([volume, isMuted], () => {
|
|||
@ended="handleEnded"
|
||||
/>
|
||||
|
||||
<!-- Custom Controls Overlay (Only for HTML5 Video) -->
|
||||
<!-- เลเยอร์ควบคุมแบบกำหนดเอง (Overlay) เฉพาะสำหรับวิดีโอ HTML5 เท่านั้น (Custom Controls Overlay (Only for HTML5 Video)) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity opacity-0 group-hover/video:opacity-100 flex flex-col gap-3">
|
||||
<!-- Progress Bar -->
|
||||
<!-- แถบแสดงความคืบหน้า (Progress Bar) -->
|
||||
<div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
|
||||
<div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_12px_rgba(59,130,246,0.6)]" :style="{ width: videoProgress + '%' }"></div>
|
||||
</div>
|
||||
|
|
@ -275,7 +275,7 @@ watch([volume, isMuted], () => {
|
|||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<!-- ตัวควบคุมระดับเสียง (Volume Control) -->
|
||||
<div class="flex items-center gap-2 group/volume relative">
|
||||
<q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" class="hover:scale-110 transition-transform" />
|
||||
<div class="w-0 group-hover/volume:w-24 overflow-hidden transition-all duration-300 flex items-center bg-black/60 backdrop-blur-md rounded-full px-2">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue