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

feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 09:27:31 +07:00
parent ae84e7e879
commit 69eb60f901
16 changed files with 1178 additions and 1396 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -238,233 +238,142 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="learning-shell font-main antialiased selection:bg-blue-500/30 dark:!bg-[#0F172A] dark:!text-slate-200 transition-colors">
<!-- Header: Custom top bar for learning context -->
<header class="learning-header px-2 md:px-4 h-14 md:h-[56px] border-b border-slate-200 dark:border-white/5 flex items-center justify-between gap-2 md:gap-4 dark:!bg-slate-800 transition-colors">
<div class="flex items-center gap-1 md:gap-6 min-w-0 flex-1">
<!-- Mobile Sidebar Toggle -->
<button class="md:hidden text-slate-900 dark:text-white p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex-shrink-0 transition-colors" @click="toggleSidebar">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
</button>
<!-- Back Navigation -->
<NuxtLink to="/dashboard/my-courses" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
<span class="text-lg md:text-base">←</span>
<span class="hidden md:inline text-[11px] font-bold">กลับไปหน้าหลัก</span>
</NuxtLink>
<div class="w-[1px] h-4 bg-slate-200 dark:bg-white/10 hidden md:block flex-shrink-0"/>
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">
{{ courseData ? getLocalizedText(courseData.course.title) : 'กำลังโหลด...' }}
</h1>
</div>
<!-- Right Header Actions (Progress) -->
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
<!-- Progress bar removed as it was static/mock data -->
</div>
</header>
<q-layout view="hHh LpR lFf" class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-inter">
<!-- Header -->
<q-header bordered class="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-white/5 text-slate-900 dark:text-white h-14">
<q-toolbar>
<q-btn flat round dense icon="menu" class="lg:hidden mr-2" @click="toggleSidebar" />
<q-btn flat dense no-caps icon="arrow_back" label="กลับไปหน้าหลัก" to="/dashboard/my-courses" class="text-slate-600 dark:text-slate-300 mobile-hide-label" />
<q-toolbar-title class="text-sm font-bold text-center lg:text-left truncate">
{{ courseData ? getLocalizedText(courseData.course.title) : 'กำลังโหลด...' }}
</q-toolbar-title>
<!-- Sidebar: Course Curriculum list -->
<aside class="learning-sidebar dark:!bg-gray-900 dark:!border-r-white/5 transition-colors" :class="{ 'open': sidebarOpen }">
<div class="py-2" v-if="courseData">
<!-- Chapters & Lessons List -->
<div v-for="chapter in courseData.chapters" :key="chapter.id" class="mt-4">
<div class="chapter-header px-4 py-2 dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">
{{ getLocalizedText(chapter.title) }}
<div class="flex items-center gap-2">
<!-- Right actions -->
</div>
</q-toolbar>
</q-header>
<!-- Sidebar (Curriculum) -->
<q-drawer
v-model="sidebarOpen"
show-if-above
bordered
side="left"
:width="320"
:breakpoint="1024"
class="bg-white dark:bg-slate-900"
>
<div v-if="courseData" class="h-full scroll">
<q-list class="pb-10">
<template v-for="chapter in courseData.chapters" :key="chapter.id">
<q-item-label header class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold sticky top-0 z-10 border-b dark:border-white/5 text-xs py-3">
{{ getLocalizedText(chapter.title) }}
</q-item-label>
<q-item
v-for="lesson in chapter.lessons"
:key="lesson.id"
clickable
v-ripple
:active="currentLesson?.id === lesson.id"
active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
class="border-b border-gray-50 dark:border-white/5"
@click="!lesson.is_locked && handleLessonSelect(lesson.id)"
:disable="lesson.is_locked"
>
<q-item-section avatar v-if="lesson.is_locked">
<q-icon name="lock" size="xs" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-xs md:text-sm line-clamp-2">
{{ getLocalizedText(lesson.title) }}
</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon v-if="lesson.progress?.is_completed" name="check_circle" color="positive" size="xs" />
<q-icon v-else-if="currentLesson?.id === lesson.id" name="play_circle" color="primary" size="xs" />
<q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
</q-item-section>
</q-item>
</template>
</q-list>
</div>
<div v-else-if="isLoading" class="p-6 text-center text-slate-500">
<q-spinner color="primary" size="2em" />
<div class="mt-2 text-xs">กำลังโหลดเนื้อหา...</div>
</div>
</q-drawer>
<!-- Main Content -->
<q-page-container class="bg-white dark:bg-slate-900">
<q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
<!-- Video Player & Content Area -->
<!-- Note: Using existing logic but wrapped -->
<div class="w-full max-w-7xl mx-auto p-4 md:p-6 flex-grow">
<!-- Video Player Component Placeholder logic -->
<div v-if="currentLesson" class="bg-black rounded-xl overflow-hidden shadow-lg mb-6 aspect-video relative group">
<video
ref="videoRef"
v-if="videoSrc"
:src="videoSrc"
class="w-full h-full object-contain"
@click="togglePlay"
@timeupdate="updateProgress"
@loadedmetadata="onVideoMetadataLoaded"
@ended="onVideoEnded"
/>
<div v-else class="flex items-center justify-center h-full text-white/50 bg-slate-900">
<div class="text-center">
<q-icon name="article" size="xl" />
<p class="mt-2">บทเรียนนี้เป็นเอกสารประกอบการเรียน</p>
</div>
</div>
<!-- Custom Controls Overlay (Simplified) -->
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent transition-opacity opacity-0 group-hover:opacity-100" v-if="videoSrc">
<div class="flex items-center gap-4 text-white">
<q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
<div class="relative flex-grow h-1 bg-white/30 rounded cursor-pointer" @click="seek">
<div class="absolute top-0 left-0 h-full bg-blue-500 rounded" :style="{ width: videoProgress + '%' }"></div>
</div>
<span class="text-xs font-mono">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
</div>
</div>
</div>
<div
v-for="lesson in chapter.lessons"
: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,
'completed': lesson.progress?.is_completed,
'locked': lesson.is_locked
}"
@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>
<span class="text-[12px] font-medium tracking-tight truncate pr-4">
{{ getLocalizedText(lesson.title) }}
</span>
</div>
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.progress?.is_completed, 'text-blue-500': currentLesson?.id === lesson.id }">
<span v-if="lesson.progress?.is_completed">✓</span>
<span v-else-if="currentLesson?.id === lesson.id">▶</span>
</span>
<!-- Lesson Info -->
<div v-if="currentLesson" class="bg-white dark:bg-slate-800 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-white/5">
<h1 class="text-2xl font-bold mb-2">{{ getLocalizedText(currentLesson.title) }}</h1>
<p class="text-slate-500 dark:text-slate-400" v-if="currentLesson.description">{{ currentLesson.description }}</p>
<div class="mt-6 prose dark:prose-invert max-w-none">
<!-- Content description or attachments here -->
<div v-if="!videoSrc" class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-dashed border-slate-300 dark:border-slate-700 text-center">
<p>เนื้อหาบทเรียน</p>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="isLoading" class="p-6 text-center text-slate-500 text-sm">
กำลังโหลดเนื้อหา...
</div>
</aside>
</q-page>
</q-page-container>
<!-- Sidebar Overlay for mobile -->
<div v-if="sidebarOpen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[85] md:hidden" @click="toggleSidebar"/>
</div>
</q-layout>
</template>
<style scoped>
.learning-shell {
display: grid;
grid-template-columns: 320px 1fr;
grid-template-rows: 56px 1fr;
height: 100vh;
overflow: hidden;
background: #ffffff;
color: #1e293b;
transition: background 0.2s, color 0.2s;
<style>
.mobile-hide-label .q-btn__content span {
display: none;
}
:global(.dark) .learning-shell {
background: #0F172A;
color: #F8FAFC;
}
.learning-header {
grid-column: 1 / -1;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
transition: background 0.2s, border-color 0.2s;
}
:global(.dark) .learning-header {
background: #1e293b;
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.learning-sidebar {
grid-row: 2;
grid-column: 1;
background: #ffffff;
border-right: 1px solid #e2e8f0;
overflow-y: auto;
z-index: 90;
transition: background 0.2s, border-color 0.2s;
}
:global(.dark) .learning-sidebar {
background: #111827;
border-right-color: rgba(255, 255, 255, 0.05);
}
.main-container {
grid-row: 2;
grid-column: 2;
display: flex;
flex-direction: column;
overflow-y: auto;
background: #ffffff;
transition: background 0.2s;
}
:global(.dark) .main-container {
background: #0B0F1A;
}
@media (max-width: 1024px) {
.main-container {
grid-column: 1;
}
}
.lesson-item {
padding: 14px 24px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
color: #000000;
border-bottom: 1px solid #e2e8f0;
}
.lesson-item:hover {
background-color: #f1f5f9;
color: #000000;
}
:global(.dark) .lesson-item {
color: #e2e8f0;
border-bottom-color: rgba(255, 255, 255, 0.01);
}
:global(.dark) .lesson-item:hover {
background-color: rgba(255, 255, 255, 0.03);
color: #ffffff;
}
.active-tab {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
font-weight: 700;
}
.active-lesson {
background-color: #f3f4f6;
color: #000000;
box-shadow: inset 4px 0 0 #3B82F6;
}
:global(.dark) .active-lesson {
background-color: #1E293B;
color: #fff;
}
.chapter-header {
background: #f3f4f6;
color: #000000;
font-weight: 800;
font-size: 13px;
border-bottom: 1px solid #d1d5db;
transition: all 0.2s;
letter-spacing: 0.05em;
}
:global(.dark) .chapter-header {
background: #0F172A;
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.learning-footer {
position: sticky;
bottom: 0;
z-index: 50;
}
.animate-fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
@media (max-width: 1024px) {
.learning-shell { grid-template-columns: 1fr; }
.learning-sidebar {
position: fixed;
left: -320px;
top: 56px;
bottom: 0;
width: 320px;
transition: transform 0.3s ease;
}
.learning-sidebar.open { transform: translateX(320px); }
@media (min-width: 768px) {
.mobile-hide-label .q-btn__content span {
display: inline;
margin-left: 8px;
}
}
</style>