chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

1

Browse source
This commit is contained in:
supalerk-ar66 2026-01-23 10:55:26 +07:00
parent 6e5a8d01e6
commit cb1e804490
1 changed files with 7 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

166
Frontend-Learner/pages/classroom/learning.vue
View file

@ -21,7 +21,6 @@ const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, markLess
// State
const sidebarOpen = ref(false)
const activeTab = ref<'details' | 'announcements'>('details')
const courseId = computed(() => Number(route.query.course_id))
// ==========================================
@ -52,11 +51,9 @@ const toggleSidebar = () => {
sidebarOpen.value = !sidebarOpen.value
}
const switchTab = (tab: 'details' | 'announcements', lessonId: any = null) => {
activeTab.value = tab
if (lessonId) {
loadLesson(lessonId)
}
// Logic loadLesson แยกออกมา
const handleLessonSelect = (lessonId: number) => {
loadLesson(lessonId)
// Close sidebar on mobile when selecting a lesson
if (import.meta.client && window.innerWidth <= 1024) {
sidebarOpen.value = false
@ -262,14 +259,7 @@ onBeforeUnmount(() => {
<!-- Right Header Actions (Progress) -->
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
<div class="flex items-center gap-2 md:gap-3" v-if="courseData">
<span class="text-[10px] font-bold text-slate-700 dark:text-slate-400 whitespace-nowrap">
<span class="hidden md:inline">เรียนจบแล้ว </span>0%
</span>
<div class="w-12 md:w-32 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
<div class="h-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" style="width: 0%"/>
</div>
</div>
<!-- Progress bar removed as it was static/mock data -->
</div>
</header>
@ -286,11 +276,11 @@ onBeforeUnmount(() => {
:key="lesson.id"
class="lesson-item px-4 dark:!text-slate-300 dark:!border-b-white/5 hover:dark:!bg-white/5 hover:dark:!text-white transition-colors"
:class="{
'active-lesson': currentLesson?.id === lesson.id && activeTab === 'details',
'active-lesson': currentLesson?.id === lesson.id,
'completed': lesson.progress?.is_completed,
'locked': lesson.is_locked
}"
@click="!lesson.is_locked && switchTab('details', lesson.id)"
@click="!lesson.is_locked && handleLessonSelect(lesson.id)"
>
<div class="flex items-center gap-2 overflow-hidden">
<span class="flex-shrink-0 text-slate-400 text-xs" v-if="lesson.is_locked">🔒</span>
@ -313,149 +303,7 @@ onBeforeUnmount(() => {
<!-- Sidebar Overlay for mobile -->
<div v-if="sidebarOpen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[85] md:hidden" @click="toggleSidebar"/>
<!-- Main View Area -->
<div class="main-container custom-scrollbar overflow-x-hidden pt-6 dark:!bg-[#0B0F1A] transition-colors">
<main class="w-full max-w-7xl mx-auto px-4 md:px-8 pb-10 md:pb-20">
<!-- Tab Content: Announcements (Center Aligned) -->
<div v-if="activeTab === 'announcements'" class="animate-fade-in max-w-4xl mx-auto space-y-8 pt-8 md:pt-14">
<h2 class="text-2xl md:text-[28px] font-black text-slate-900 dark:text-white tracking-tight">ประกาศทั้งหมดในคอร์สนี้</h2>
<div class="text-center text-slate-500 py-10">ยังไม่มีประกาศในขณะนี้</div>
</div>
<!-- Tab Content: Lesson Details (Grid System) -->
<div v-if="activeTab === 'details'" class="animate-fade-in pt-4 md:pt-10">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-start" v-if="currentLesson">
<!-- Left Side: Video + Title + Notes (8/12) -->
<div class="md:col-span-8 space-y-10 pb-24 md:pb-0">
<!-- Content Display Area -->
<div class="aspect-video relative group overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-2xl bg-black">
<!-- Case: Quiz -->
<div v-if="currentLesson.type === 'QUIZ'" class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900 text-white p-6 text-center">
<div class="w-20 h-20 rounded-full bg-blue-600/20 flex items-center justify-center mb-6">
<span class="text-4xl">📝</span>
</div>
<h3 class="text-xl font-bold mb-2">แบบทดสอบ: {{ getLocalizedText(currentLesson.title) }}</h3>
<p class="text-slate-400 mb-6 text-sm max-w-md">ทดสอบความเข้าใจของคุณในบทเรียนนี้</p>
<NuxtLink :to="`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`" class="px-8 py-3 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold text-sm transition-colors">
เริ่มทำแบบทดสอบ
</NuxtLink>
</div>
<!-- Case: Video with Source -->
<template v-else-if="videoSrc">
<video
ref="videoRef"
class="w-full h-full object-contain"
@timeupdate="updateProgress"
@loadedmetadata="onVideoMetadataLoaded"
@ended="onVideoEnded"
@play="isPlaying = true"
@pause="isPlaying = false"
:src="videoSrc"
>
Browser ของคุณไม่รองรับการเล่นวิดีโอ
</video>
<!-- Play Overlay -->
<div v-if="!isPlaying" class="absolute inset-0 flex items-center justify-center bg-black/5 backdrop-blur-[1px]">
<button class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-blue-600/30 border border-white/20 flex items-center justify-center backdrop-blur-xl hover:scale-110 transition-transform shadow-lg" @click="togglePlay">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white translate-x-0.5" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Controls Overlay -->
<div class="absolute bottom-0 inset-x-0 p-4 md:p-6 pt-16 bg-gradient-to-t from-black/95 via-black/40 to-transparent">
<div class="flex items-center gap-4 text-[11px] font-bold text-white/80">
<button class="text-xs hover:text-blue-500 transition-colors" @click="togglePlay">{{ isPlaying ? '⏸' : '▶' }}</button>
<span class="font-mono">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
<div class="flex-grow h-[3px] bg-white/10 rounded-full relative cursor-pointer" @click="seek">
<div :style="{ width: videoProgress + '%' }" class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"/>
</div>
<div class="flex gap-4">
<span class="cursor-pointer hover:text-white" @click="videoRef?.requestFullscreen()">⛶</span>
</div>
</div>
</div>
</template>
<!-- Case: Video but No Source -->
<div v-else class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900 text-slate-500">
<span class="text-4xl mb-4">🎬</span>
<p class="font-medium text-sm">ไม่พบวิดีโอในบทเรียนนี้</p>
</div>
</div>
<!-- Lesson Title -->
<div>
<h2 class="text-2xl md:text-[32px] font-black text-slate-900 dark:text-white leading-tight tracking-tight break-words mb-2">
{{ getLocalizedText(currentLesson.title) }}
</h2>
</div>
<!-- Lesson Notes/Description Card -->
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors" v-if="currentLesson.description">
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-50 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-600 pb-4">รายละเอียดบทเรียน</h3>
<div class="text-[16px] md:text-[18px] text-slate-700 dark:text-slate-200 leading-relaxed font-medium space-y-6">
<p>{{ getLocalizedText(currentLesson.description) }}</p>
</div>
</div>
</div>
<!-- Right Side: Resources + Actions (4/12) -->
<div class="md:col-span-4 space-y-6 md:sticky md:top-6">
<!-- Resources Card -->
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors" v-if="currentLesson.attachments && currentLesson.attachments.length > 0">
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">เอกสารประกอบ</h3>
<div class="space-y-3">
<!-- Attachment Row -->
<div v-for="att in currentLesson.attachments" :key="att.id" class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 transition-all cursor-pointer min-w-0">
<a :href="att.file_path" target="_blank" class="flex items-center gap-3 min-w-0 flex-1 no-underline">
<span class="text-xl flex-shrink-0">📄</span>
<div class="flex flex-col min-w-0">
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">{{ att.file_name }}</span>
<span class="text-[11px] font-black text-slate-500 dark:text-slate-400 uppercase">{{ (att.file_size / 1024 / 1024).toFixed(2) }} MB</span>
</div>
</a>
<a :href="att.file_path" target="_blank" class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</a>
</div>
</div>
</div>
<!-- Navigation Actions (Desktop Only - Inside Column) -->
<div class="hidden md:flex flex-col gap-4">
<button v-if="currentLesson.next_lesson_id" @click="loadLesson(currentLesson.next_lesson_id)" class="w-full py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl text-[14px] font-black text-white shadow-xl shadow-blue-600/20 transition-all active:scale-95">
บทเรียนถัดไป
</button>
<button v-if="currentLesson.prev_lesson_id" @click="loadLesson(currentLesson.prev_lesson_id)" class="w-full py-5 bg-slate-800 hover:bg-slate-700 rounded-2xl text-[14px] font-black text-slate-300 transition-all ring-1 ring-white/10">
บทเรียนก่อนหน้า
</button>
</div>
</div>
</div>
<div v-else-if="isLessonLoading" class="text-center pt-20 text-white">
<span class="loading-spinner">กำลังโหลดบทเรียน...</span>
</div>
<div v-else class="text-center pt-20 text-slate-400">
กรุณาเลือกบทเรียนจากเมนูด้านซ้าย
</div>
</div>
<!-- Sticky Bottom Bar (Mobile Only) -->
<div v-if="activeTab === 'details' && currentLesson" class="md:hidden fixed bottom-0 inset-x-0 p-4 bg-white dark:bg-slate-900/90 dark:backdrop-blur-xl border-t border-slate-300 dark:border-white/5 z-[100] flex gap-3 transition-colors">
<button v-if="currentLesson.prev_lesson_id" @click="loadLesson(currentLesson.prev_lesson_id)" class="flex-1 py-4 bg-slate-800 rounded-xl text-xs font-black text-slate-300 ring-1 ring-white/10">
ย้อนกลับ
</button>
<button v-if="currentLesson.next_lesson_id" @click="loadLesson(currentLesson.next_lesson_id)" class="flex-[2] py-4 bg-blue-600 rounded-xl text-xs font-black text-white shadow-lg shadow-blue-600/20">
บทเรียนถัดไป
</button>
</div>
</main>
</div>
</div>
</template>