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

feat: Add dashboard, course discovery, and quiz pages to introduce core e-learning functionalities.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-21 17:14:58 +07:00
parent f6bbd60f2b
commit db9ff684ae
3 changed files with 38 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

67
Frontend-Learner/pages/browse/discovery.vue
View file

@ -360,71 +360,33 @@ const filteredCourses = computed(() => {
{{ getLocalizedText(selectedCourse.description) }}
</p>
<!-- Learning Objectives -->
<div class="card mb-6">
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
{{ $t('course.whatYouWillLearn') }}
</h3>
<ul
class="grid-12"
style="grid-template-columns: 1fr 1fr; gap: 12px"
>
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
<span style="color: var(--success)">✓</span> วิธีการวิจัยผู้ใช้
(User Research)
</li>
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
<span style="color: var(--success)">✓</span>
การวาดโครงร่างและทำต้นแบบ
</li>
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
<span style="color: var(--success)">✓</span> ระบบการออกแบบ
(Design Systems)
</li>
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
<span style="color: var(--success)">✓</span> การทดสอบการใช้งาน
(Usability Testing)
</li>
</ul>
</div>
<!-- Course Syllabus / Outline -->
<div class="card">
<!-- Course Syllabus / Outline (Dynamic) -->
<div class="card" v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0">
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
{{ $t('course.courseContent') }}
</h3>
<!-- Chapter 1 -->
<div class="mb-4">
<div v-for="chapter in selectedCourse.chapters" :key="chapter.id" class="mb-4">
<div
class="flex justify-between p-4 rounded mb-2"
style="background: #f3f4f6; border: 1px solid #e5e7eb"
>
<span class="font-bold text-slate-900 dark:text-slate-900"
>01. {{ $t('course.introduction') }}</span
>{{ getLocalizedText(chapter.title) }}</span
>
<span class="text-sm text-slate-600 dark:text-slate-400"
>3 {{ $t('course.lessons') }}</span
>{{ chapter.lessons ? chapter.lessons.length : 0 }} {{ $t('course.lessons') }}</span
>
</div>
<div style="padding-left: 16px">
<div style="padding-left: 16px" v-if="chapter.lessons">
<div
v-for="lesson in chapter.lessons"
:key="lesson.id"
class="flex justify-between py-2 border-b"
style="border-color: var(--neutral-100)"
>
<span class="text-sm text-slate-700 dark:text-slate-300">1.1 การออกแบบ UX คืออะไร?</span>
<span class="text-sm text-slate-700 dark:text-slate-300">{{ getLocalizedText(lesson.title) }}</span>
<span class="text-sm text-slate-600 dark:text-slate-400"
>10:00</span
>
</div>
<div
class="flex justify-between py-2 border-b"
style="border-color: var(--neutral-100)"
>
<span class="text-sm text-slate-700 dark:text-slate-300"
>1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)</span
>
<span class="text-sm text-slate-600 dark:text-slate-400"
>15:30</span
>{{ lesson.duration_minutes || 0 }}:00</span
>
</div>
</div>
@ -460,19 +422,12 @@ const filteredCourses = computed(() => {
</button>
<div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
<div
class="flex justify-between py-2 border-b"
style="border-color: var(--neutral-100)"
>
<span>ระยะเวลา</span>
<span class="font-bold">4.5 ชั่วโมง</span>
</div>
<div
class="flex justify-between py-2 border-b"
style="border-color: var(--neutral-100)"
>
<span>{{ $t('course.certificate') }}</span>
<span class="font-bold">{{ $t('course.available') }}</span>
<span class="font-bold">{{ selectedCourse.have_certificate ? $t('course.available') : '-' }}</span>
</div>
</div>
</div>