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

feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 35s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-12 12:01:37 +07:00
parent d787412036
commit a0ca6f7e6b
13 changed files with 429 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Frontend-Learner/components/discovery/CategorySidebar.vue
View file

@ -50,7 +50,7 @@ const toggleCategory = (id: number) => {
</div>
<div class="flex-1">
<div class="text-lg font-black text-slate-900 dark:!text-white leading-none mb-1">{{ $t('discovery.categoryTitle') }}</div>
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} Selectable</div>
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} {{ $t('discovery.selectable') }}</div>
</div>
</div>
</template>

138
Frontend-Learner/components/discovery/CourseDetailView.vue
View file

@ -47,21 +47,17 @@ const handleEnroll = () => {
<template>
<div class="animate-fade-in-up">
<q-btn
unelevated
rounded
icon="arrow_back"
:label="$t('common.back')"
class="mb-8 font-bold bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 transition-all px-4 shadow-sm"
@click="emit('back')"
/>
<div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
<q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
<span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left: Content Detail -->
<div class="lg:col-span-2 space-y-8">
<!-- Video Preview Section -->
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group bg-black">
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group cursor-pointer bg-slate-900 border-4 border-white dark:border-slate-800 transition-transform duration-500 hover:scale-[1.01]">
<template v-if="course.media?.video_url">
<video
controls
@ -69,27 +65,28 @@ const handleEnroll = () => {
:poster="course.thumbnail_url || course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
>
<source :src="course.media.video_url" type="video/mp4">
Your browser does not support the video tag.
{{ $t('course.videoNotSupported') }}
</video>
<!-- Custom Play Overlay when not playing - simple version is often best -->
</template>
<!-- Beautiful Image Showcase if no video -->
<template v-else>
<div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950">
<!-- Show Thumbnail as Background if exists (Blurred background fill) -->
<div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950 group">
<!-- Blurred background fill -->
<img
v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image"
class="absolute inset-0 w-full h-full object-cover opacity-30 blur-xl scale-110"
class="absolute inset-0 w-full h-full object-cover opacity-40 blur-2xl scale-125"
/>
<!-- Main Sharp Image -->
<img
v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image"
class="relative z-10 w-full h-full object-contain shadow-2xl shadow-black/50"
class="relative z-10 w-full h-full object-cover shadow-2xl transition-transform duration-700 group-hover:scale-105"
/>
<div v-else class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
<div v-if="!course.thumbnail_url && !course.cover_image" class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
<q-icon name="image" size="80px" class="text-slate-700 opacity-50" />
</div>
</div>
@ -101,11 +98,6 @@ const handleEnroll = () => {
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
{{ getLocalizedText(course.title) }}
</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
{{ getLocalizedText(course.category?.name) }}
</span>
</div>
<div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light">
<p>{{ getLocalizedText(course.description) }}</p>
@ -113,32 +105,40 @@ const handleEnroll = () => {
</div>
<!-- Curriculum Preview -->
<div class="bg-slate-100/50 dark:bg-slate-800/50 rounded-3xl p-6 md:p-8 border border-transparent dark:border-slate-700/50">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
{{ $t('course.courseContent') }}
</h3>
<div class="bg-slate-50 dark:bg-slate-900 rounded-3xl p-6 md:p-8 border border-slate-200 dark:border-white/5">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-xl font-black text-slate-900 dark:text-white mb-1 flex items-center gap-2">
{{ $t('course.courseContent') }}
</h3>
</div>
<q-icon name="keyboard_command_key" class="text-slate-200 dark:text-slate-800" size="32px" />
</div>
<div class="space-y-4">
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
<span>{{ Number(idx) + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
<div class="px-6 py-4 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/5 font-black text-slate-800 dark:text-white flex justify-between items-center mb-2 shadow-sm">
<span class="flex items-center gap-3">
<span class="w-7 h-7 flex items-center justify-center bg-slate-100 dark:bg-white/10 rounded-lg text-xs font-bold font-mono">{{ Number(idx) + 1 }}</span>
{{ getLocalizedText(chapter.title) }}
</span>
<span class="text-[10px] uppercase font-black tracking-widest text-slate-400 opacity-60">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
</div>
<div class="divide-y divide-slate-100 dark:divide-slate-800">
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
<q-icon
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'"
:class="lesson.type === 'VIDEO' ? 'text-blue-500 dark:text-blue-400' : 'text-orange-500 dark:text-orange-400'"
size="18px"
/>
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} {{ $t('course.minutes') }}</span>
<div class="ml-4 pl-4 border-l-2 border-slate-100 dark:border-slate-800 space-y-1 mt-3">
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-5 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-white/5 rounded-xl transition-all hover:translate-x-1">
<div class="w-8 h-8 rounded-full flex items-center justify-center" :class="lesson.type === 'VIDEO' ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400'">
<q-icon
:name="lesson.type === 'VIDEO' ? 'play_arrow' : 'article'"
size="16px"
/>
</div>
<span class="flex-1 font-bold">{{ getLocalizedText(lesson.title) }}</span>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-[10px] font-bold">{{ lesson.duration_minutes }} {{ $t('quiz.minutes') }}</span>
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
</div>
</div>
</div>
<div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
<div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
<q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
<p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
</div>
@ -150,17 +150,18 @@ const handleEnroll = () => {
<!-- Right: Enrollment Card -->
<div class="lg:col-span-1">
<div class="sticky top-24">
<div class="bg-white dark:bg-slate-800/40 dark:backdrop-blur-xl rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-white/10 relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -mr-16 -mt-16"></div>
<div class="relative">
<div class="text-3xl font-black mb-2 font-display">
<span v-if="course.price > 0" class="text-slate-900 dark:text-white">
{{ formatPrice(course.price) }}
</span>
<span v-else class="text-blue-600 dark:text-blue-400 drop-shadow-sm">
{{ $t('course.free') }}
</span>
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl shadow-blue-500/10 dark:shadow-none p-8 border border-slate-100 dark:border-white/5 relative overflow-hidden group">
<!-- Decorative background glow -->
<div class="absolute -top-12 -right-12 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
<div class="relative">
<div v-if="course.price > 0" class="mb-4">
<span class="text-xs font-black uppercase tracking-widest text-slate-400 mb-1 block">{{ $t('course.price', 'ราคาคอร์ส') }}</span>
<div class="text-4xl font-black font-display">
<span class="text-slate-900 dark:text-white">
{{ formatPrice(course.price) }}
</span>
</div>
</div>
<q-btn
@ -168,22 +169,41 @@ const handleEnroll = () => {
rounded
size="lg"
color="primary"
class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
class="w-full h-14 shadow-xl shadow-blue-600/30 font-black tracking-tight"
:label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')"
:loading="enrollmentLoading"
@click="handleEnroll"
/>
>
<template v-slot:loading>
<q-spinner-facebook />
</template>
</q-btn>
<div class="mt-6 space-y-4">
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-4">{{ $t('course.includes', 'คอร์สนี้รวมอะไรบ้าง') }}</p>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="w-6 h-6 rounded-lg bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center">
<q-icon name="all_inclusive" size="14px" class="text-blue-600 dark:text-blue-400" />
</div>
{{ $t('course.fullLifetimeAccess', 'เข้าเรียนได้ตลอดชีพ') }}
</div>
<hr class="my-6 border-slate-100 dark:border-slate-800">
<div class="space-y-3 block">
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
{{ $t('course.certificate') }} ({{ $t('course.available') }})
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="w-6 h-6 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
<q-icon name="workspace_premium" size="14px" class="text-emerald-600 dark:text-emerald-400" />
</div>
{{ $t('course.certificate') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="w-6 h-6 rounded-lg bg-purple-50 dark:bg-purple-500/10 flex items-center justify-center">
<q-icon name="devices" size="14px" class="text-purple-600 dark:text-purple-400" />
</div>
{{ $t('course.accessOnMobile', 'เข้าเรียนได้ทุกอุปกรณ์') }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>