ติดต่อเรา
--
-
-
- -
+ + +ติดต่อเรา
++ +-++- 123 อาคารสยามทาวเวอร์ ชั้น 15 เขตปทุมวัน กรุงเทพฯ 10330 - -- -
++ + ++ Bronco Hourse +++ 74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200 +
+-diff --git a/Frontend-Learner/components/profile/PasswordChangeForm.vue b/Frontend-Learner/components/profile/PasswordChangeForm.vue index 67e6f031..0ca80cde 100644 --- a/Frontend-Learner/components/profile/PasswordChangeForm.vue +++ b/Frontend-Learner/components/profile/PasswordChangeForm.vue @@ -36,8 +36,8 @@ const showConfirmPassword = ref(false);- © {{ new Date().getFullYear() }} E-Learning Platform. All rights reserved. + +
++ Copyright © CHAMOMIND CO., LTD. 2023
---+ +{{ $t('profile.security') }} @@ -118,8 +118,8 @@ const showConfirmPassword = ref(false); type="submit" unelevated rounded - class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20" - style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;" + class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20" + style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white;" :label="$t('profile.changePasswordBtn')" :loading="loading" /> diff --git a/Frontend-Learner/composables/useAuth.ts b/Frontend-Learner/composables/useAuth.ts index aa8e7078..61f5ee0a 100644 --- a/Frontend-Learner/composables/useAuth.ts +++ b/Frontend-Learner/composables/useAuth.ts @@ -1,45 +1,4 @@ - -// Interface สำหรับข้อมูลผู้ใช้งาน (User) -interface User { - id: number - username: string - email: string - email_verified_at?: string | null - created_at?: string - updated_at?: string - role: { - code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN' - name: { th: string; en: string } - } - profile?: { - prefix: { th: string; en: string } - first_name: string - last_name: string - phone: string | null - avatar_url: string | null - } -} - - - -// Interface สำหรับข้อมูลตอบกลับตอน Login -interface loginResponse { - token: string - refreshToken: string - user: User - profile: User['profile'] -} - -// Interface สำหรับข้อมูลที่ใช้ลงทะเบียน -interface RegisterPayload { - username: string - email: string - password: string - first_name: string - last_name: string - prefix: { th: string; en: string } - phone: string -} +import type { User, LoginResponse, RegisterPayload } from '@/types/auth' // ========================================== // Composable: useAuth diff --git a/Frontend-Learner/composables/useCourse.ts b/Frontend-Learner/composables/useCourse.ts index 7e477d5f..d320302a 100644 --- a/Frontend-Learner/composables/useCourse.ts +++ b/Frontend-Learner/composables/useCourse.ts @@ -1,151 +1,14 @@ -// Interface สำหรับข้อมูลคอร์สเรียน (Public Course Data) -export interface Course { - id: number - title: string | { th: string; en: string } // รองรับ 2 ภาษา - slug: string - description: string | { th: string; en: string } - thumbnail_url: string - price: string - is_free: boolean - original_price?: string - have_certificate: boolean - status: string // DRAFT, PUBLISHED - category_id: number - created_at?: string - updated_at?: string - created_by?: number - updated_by?: number - approved_at?: string - approved_by?: number - rejection_reason?: string - enrolled?: boolean - total_lessons?: number - - - rating?: string - lessons?: number | string - levelType?: 'neutral' | 'warning' | 'success' // ใช้สำหรับการแสดงผล Badge ระดับความยาก (Frontend Logic) - - // โครงสร้างบทเรียน (Chapters & Lessons) - chapters?: { - id: number - title: string | { th: string; en: string } - lessons: { - id: number - title: string | { th: string; en: string } - duration_minutes: number - video_url?: string - }[] - }[] - - // ข้อมูลผู้สอนและเจ้าของคอร์ส - creator?: { - id: number - username: string - email: string - profile: { - first_name: string - last_name: string - avatar_url: string - } - } - instructors?: { - user_id: number - is_primary: boolean - user: { - id: number - username: string - email: string - profile: { - first_name: string - last_name: string - avatar_url: string - } - } - }[] -} - -interface CourseResponse { - code: number - message: string - data: Course[] - total: number - page?: number - limit?: number - totalPages?: number -} - -interface SingleCourseResponse { - code: number - message: string - data: Course -} - -// Interface สำหรับคอร์สที่ผู้ใช้ลงทะเบียนเรียนแล้ว (My Course) -export interface EnrolledCourse { - id: number - course_id: number - course: Course - status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED' - progress_percentage: number - enrolled_at: string - started_at?: string - completed_at?: string - last_accessed_at?: string -} - -interface EnrolledCourseResponse { - code: number - message: string - data: EnrolledCourse[] - total: number - page: number - limit: number -} - -// Interface สำหรับการส่งคำตอบแบบทดสอบ (Quiz Submission) -export interface QuizAnswerSubmission { - question_id: number - choice_id: number -} - -export interface QuizSubmitRequest { - answers: QuizAnswerSubmission[] -} - -// Interface สำหรับผลลัพธ์การสอบ (Quiz Result) -export interface QuizResult { - answers_review: { - score: number - is_correct: boolean - correct_choice_id: number - selected_choice_id: number - question_id: number - }[] - completed_at: string - started_at: string - attempt_number: number - passing_score: number - is_passed: boolean - correct_answers: number - total_questions: number - total_score: number - score: number - quiz_id: number - attempt_id: number -} - -// Interface สำหรับ Certificate -export interface Certificate { - certificate_id: number - course_id: number - course_title: { - en: string - th: string - } - issued_at: string - download_url: string -} +import type { + Course, + CourseResponse, + SingleCourseResponse, + EnrolledCourse, + EnrolledCourseResponse, + QuizAnswerSubmission, + QuizSubmitRequest, + QuizResult, + Certificate +} from '@/types/course' // ========================================== // Composable: useCourse @@ -171,6 +34,7 @@ export const useCourse = () => { category_id?: number; page?: number; limit?: number; + search?: string; random?: boolean; is_recommended?: boolean; forceRefresh?: boolean @@ -193,6 +57,7 @@ export const useCourse = () => { if (apiParams.category_id) queryParams.append('category_id', apiParams.category_id.toString()) if (apiParams.page) queryParams.append('page', apiParams.page.toString()) if (apiParams.limit) queryParams.append('limit', apiParams.limit.toString()) + if (apiParams.search) queryParams.append('search', apiParams.search) if (apiParams.random !== undefined) queryParams.append('random', apiParams.random.toString()) if (apiParams.is_recommended !== undefined) queryParams.append('is_recommended', apiParams.is_recommended.toString()) diff --git a/Frontend-Learner/constants/landing.ts b/Frontend-Learner/constants/landing.ts new file mode 100644 index 00000000..766efda6 --- /dev/null +++ b/Frontend-Learner/constants/landing.ts @@ -0,0 +1,55 @@ +/** + * @file landing.ts + * @description Static data for the landing page. + */ + +export const CATEGORY_CARDS = [ + { + title: 'โปรแกรมมิ่ง', + desc: 'เชี่ยวชาญการเขียนโค้ดและพัฒนาซอฟต์แวร์', + icon: 'code', + slug: 'programming', + iconColor: 'text-blue-600', + iconBg: 'bg-blue-600/5' + }, + { + title: 'การออกแบบ', + desc: 'ทักษะ UI/UX และการออกแบบระดับมือโปร', + icon: 'palette', + slug: 'design', + iconColor: 'text-indigo-600', + iconBg: 'bg-indigo-600/5' + }, + { + title: 'ธุรกิจ', + desc: 'ทักษะการจัดการและความเป็นผู้นำสากล', + icon: 'business_center', + slug: 'business', + iconColor: 'text-blue-700', + iconBg: 'bg-blue-700/5' + } +] + +export const WHY_CHOOSE_US = [ + { + title: 'ผู้สอนเชี่ยวชาญ', + desc: 'เรียนรู้จากผู้นำในอุตสาหกรรมที่มีประสบการณ์การทำงานหลายปีในบริษัทเทคโนโลยีชั้นนำระดับโลก', + icon: 'groups', + iconBg: 'bg-blue-600/10', + iconColor: 'text-blue-600' + }, + { + title: 'การเรียนรู้ที่ยืดหยุ่น', + desc: 'เรียนตามจังหวะของคุณเอง ได้ทุกที่ทุกเวลา เข้าถึงเนื้อหาคอร์สที่สมัครเรียนได้ตลอดชีพ', + icon: 'schedule', + iconBg: 'bg-indigo-600/10', + iconColor: 'text-indigo-600' + }, + { + title: 'ประกาศนียบัตรเมื่อเรียนจบ', + desc: 'รับวุฒิบัตรที่เป็นที่ยอมรับเพื่อเสริมพอร์ตโฟลิโอระดับมืออาชีพของคุณและแชร์ลง LinkedIn ได้โดยตรง', + icon: 'verified', + iconBg: 'bg-blue-600/10', + iconColor: 'text-blue-600' + } +] diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json index d6121675..0b8e2824 100644 --- a/Frontend-Learner/i18n/locales/en.json +++ b/Frontend-Learner/i18n/locales/en.json @@ -87,7 +87,7 @@ "overview": "Home", "myCourses": "My Courses", "browseCourses": "Browse Courses", - "onlineCourses": "Online Courses", + "onlineCourses": "All Courses", "recommendedCourses": "Recommended Courses", "announcements": "Announcements", "profile": "My Profile" @@ -107,9 +107,14 @@ "backToCatalog": "Back to Catalog", "selectable": "Selected", "foundTotal": "Found Total", - "items": "items" + "items": "items", + "subtitle": "Choose to learn new skills from our curated quality courses", + "searchBtn": "Search" }, "myCourses": { + "title": "My Courses", + "subtitle": "Track your progress and continue learning from where you left off", + "searchPlaceholder": "Search my courses...", "filterAll": "All", "filterProgress": "In Progress", "filterCompleted": "Completed", @@ -291,5 +296,16 @@ "statusNotStarted": "Not Started", "alertIncomplete": "Please answer all questions", "yourAnswer": "Your Answer" + }, + "footer": { + "location": "LOCATION", + "connectWithUs": "CONNECT WITH US", + "broncoHorse": "Bronco Hourse", + "address": "123 อาคารสยามทาวเวอร์ ชั้น 15 เขตปทุมวัน กรุงเทพฯ 10330", + "emailLabel": "Email", + "emailValue": "info{'@'}chamomind.com", + "telLabel": "Tel", + "telValue": "02-123-4567", + "copyright": "© 2026 E-Learning Platform. All rights reserved." } } diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json index 82c9faf9..efc50eaf 100644 --- a/Frontend-Learner/i18n/locales/th.json +++ b/Frontend-Learner/i18n/locales/th.json @@ -87,8 +87,8 @@ "overview": "หน้าหลัก", "myCourses": "คอร์สของฉัน", "browseCourses": "ค้นหาคอร์ส", - "onlineCourses": "คอร์สออนไลน์", - "recommendedCourses": "คอร์สเรียนออนไลน์แนะนำ", + "onlineCourses": "คอร์สเรียนทั้งหมด", + "recommendedCourses": "คอร์สเรียนแนะนำ", "announcements": "ข่าวประกาศ", "profile": "บัญชีผู้ใช้" }, @@ -107,9 +107,14 @@ "backToCatalog": "กลับหน้ารายการคอร์ส", "selectable": "รายการที่เลือก", "foundTotal": "พบทั้งหมด", - "items": "รายการ" + "items": "รายการ", + "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ", + "searchBtn": "ค้นหา" }, "myCourses": { + "title": "คอร์สของฉัน", + "subtitle": "ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้", + "searchPlaceholder": "ค้นหาชื่อคอร์สของฉัน...", "filterAll": "ทั้งหมด", "filterProgress": "กำลังเรียน", "filterCompleted": "เรียนจบแล้ว", @@ -186,7 +191,7 @@ "logout": "ออกจากระบบ" }, "landing": { - "allCourses": "คอร์สทั้งหมด", + "allCourses": "คอร์สเรียนทั้งหมด", "discovery": "ค้นพบ", "goToDashboard": "เข้าสู่หน้าจัดการเรียน" }, @@ -291,5 +296,16 @@ "statusNotStarted": "ยังไม่ทำ", "alertIncomplete": "กรุณาเลือกคำตอบให้ครบทุกข้อ", "yourAnswer": "คำตอบของคุณ" + }, + "footer": { + "location": "สถานที่ตั้ง", + "connectWithUs": "ติดต่อเรา", + "broncoHorse": "Bronco Hourse", + "address": "123 อาคารสยามทาวเวอร์ ชั้น 15 เขตปทุมวัน กรุงเทพฯ 10330", + "emailLabel": "อีเมล", + "emailValue": "info{'@'}chamomind.com", + "telLabel": "เบอร์โทรศัพท์", + "telValue": "02-123-4567", + "copyright": "© 2026 E-Learning Platform. All rights reserved." } } diff --git a/Frontend-Learner/layouts/dashboard-index.vue b/Frontend-Learner/layouts/dashboard-index.vue index ee14d791..d9ff4593 100644 --- a/Frontend-Learner/layouts/dashboard-index.vue +++ b/Frontend-Learner/layouts/dashboard-index.vue @@ -8,7 +8,12 @@ // Initialize global theme management useThemeMode() -// No sidebar logic needed here as we are removing it +const { currentUser, logout } = useAuth() +const { isDark, set: setTheme } = useThemeMode() +const rightDrawerOpen = ref(false) +const toggleRightDrawer = () => { + rightDrawerOpen.value = !rightDrawerOpen.value +} @@ -17,9 +22,122 @@ useThemeMode()
- + ++ + + diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue index 55479ed9..f1e44d43 100644 --- a/Frontend-Learner/layouts/default.vue +++ b/Frontend-Learner/layouts/default.vue @@ -8,11 +8,19 @@ // Initialize global theme management useThemeMode() +const { currentUser, logout } = useAuth() +const { isDark, set: setTheme } = useThemeMode() const leftDrawerOpen = ref(false) +const rightDrawerOpen = ref(false) + const toggleLeftDrawer = () => { leftDrawerOpen.value = !leftDrawerOpen.value } +const toggleRightDrawer = () => { + rightDrawerOpen.value = !rightDrawerOpen.value +} + const route = useRoute() // Automatically hide sidebar for learner routes const shouldHideSidebar = computed(() => { @@ -25,12 +33,16 @@ const shouldHideSidebar = computed(() => {+ ++++ + +++ +++E+ E-Learning ++ +++ ++
+++ {{ currentUser?.firstName || 'Guest' }} {{ currentUser?.lastName || '' }} +
+{{ currentUser?.email || 'e-learning@platform.com' }}
+++ + ++ + +เมนูหลัก + ++ + +{{ $t("sidebar.overview") }} ++ + +{{ $t("landing.allCourses") }} ++ + +{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }} ++ + + เครื่องมือและการตั้งค่า + + ++ + + ++ ++ ภาษา +++ + + ++ ++ โหมดกลางคืน +++ + +จัดการโปรไฟล์ ++++ ++ ออกจากระบบ + + E-Learning Platform v1.0 ++- - ++ { + ++ ++ ++++ + +++ +++E+ E-Learning ++ +++ ++
+++ {{ currentUser?.firstName || 'Guest' }} {{ currentUser?.lastName || '' }} +
+{{ currentUser?.email || 'e-learning@platform.com' }}
+++ + ++ + +เมนูหลัก + ++ + +{{ $t("sidebar.overview") }} ++ + +{{ $t("landing.allCourses") }} ++ + + +{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }} +เครื่องมือและการตั้งค่า + + ++ + + ++ ++ ภาษา +++ + + ++ ++ โหมดกลางคืน +++ + +จัดการโปรไฟล์ ++++ ++ ออกจากระบบ + + E-Learning Platform v1.0 ++diff --git a/Frontend-Learner/nuxt.config.ts b/Frontend-Learner/nuxt.config.ts index ed929816..239a3627 100644 --- a/Frontend-Learner/nuxt.config.ts +++ b/Frontend-Learner/nuxt.config.ts @@ -66,6 +66,7 @@ export default defineNuxtConfig({ { name: "viewport", content: "width=device-width, initial-scale=1" }, ], link: [ + { rel: 'icon', type: 'image/png', href: '/img/logo.png' }, { rel: "stylesheet", // โหลด Font: Inter, Prompt, Sarabun diff --git a/Frontend-Learner/pages/auth/login.vue b/Frontend-Learner/pages/auth/login.vue index e30602df..7e75ee5a 100644 --- a/Frontend-Learner/pages/auth/login.vue +++ b/Frontend-Learner/pages/auth/login.vue @@ -237,17 +237,24 @@ onMounted(() => { + + ++ - -บัญชีสำหรับทดสอบ (Test Account)++++ studentedtest@example.com +++ Password: + admin123 ++- - หรือ - -- -+ยังไม่มีบัญชีสมาชิก?
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue index 07ed6617..af4f3722 100644 --- a/Frontend-Learner/pages/browse/discovery.vue +++ b/Frontend-Learner/pages/browse/discovery.vue @@ -85,6 +85,7 @@ const loadCourses = async (page = 1) => { const res = await fetchCourses({ category_id: categoryId, + search: searchQuery.value, page: page, limit: itemsPerPage, forceRefresh: true, @@ -155,33 +156,57 @@ onMounted(() => { --- --+ +- {{ $t("discovery.title") }} -
-- {{ $t("discovery.foundTotal") }} - {{ - filteredCourses.length - }} - {{ $t("discovery.items") }} -
-+- ++++ {{ $t("discovery.title") }} +
+ {{ $t("discovery.subtitle") }} +
+ ++ ++++ + +++ ++ + ++++ {{ $t("discovery.searchBtn") }} + ++ ++ {{ $t("discovery.foundTotal") }} {{ filteredCourses.length }} {{ $t("discovery.items") }} ++-{ :class=" selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' - : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800' + : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50' " @click="selectedCategoryIds = []" :label="$t('discovery.showAll')" @@ -206,13 +231,12 @@ onMounted(() => { :class=" selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' - : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800' + : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50' " @click="toggleCategory(cat.id)" :label="getLocalizedText(cat.name)" /> diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue index b2c1366c..415ee060 100644 --- a/Frontend-Learner/pages/browse/index.vue +++ b/Frontend-Learner/pages/browse/index.vue @@ -143,7 +143,7 @@ const filteredCourses = computed(() => {- คอร์สเรียนออนไลน์ทั้งหมด + คอร์สเรียนทั้งหมด
--- - รายการคอร์สเรียน -
- - --- -- + +++ +คอร์สเรียนทั้งหมด
+พัฒนาทักษะใหม่ๆ กับผู้เชี่ยวชาญจากทั่วโลก
+ ++ +++ + ++++ +++ ค้นหา + diff --git a/Frontend-Learner/pages/browse/recommended.vue b/Frontend-Learner/pages/browse/recommended.vue index 6fc18cfc..e07ff9c5 100644 --- a/Frontend-Learner/pages/browse/recommended.vue +++ b/Frontend-Learner/pages/browse/recommended.vue @@ -113,7 +113,7 @@ const filteredCourses = computed(() => {- คอร์สเรียนออนไลน์แนะนำ + คอร์สเรียนแนะนำ
--- - คอร์สที่คุณห้ามพลาด -
- - --- -- + +-+diff --git a/Frontend-Learner/pages/dashboard/index.vue b/Frontend-Learner/pages/dashboard/index.vue index 36928cb8..b2c7b1d8 100644 --- a/Frontend-Learner/pages/dashboard/index.vue +++ b/Frontend-Learner/pages/dashboard/index.vue @@ -171,11 +171,11 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));คอร์สเรียนแนะนำ
+คัดสรรเนื้อหาคุณภาพสูงที่คุณไม่ควรพลาด
+ ++ +++ + ++++ +++ ค้นหา + +enrolledCourses.value.slice(1, 3));-+enrolledCourses.value.slice(1, 3));
{{ $t("dashboard.startNewCourse") }}@@ -313,7 +313,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));-enrolledCourses.value.slice(1, 3)); class="h-full md:col-span-1" /> - {{ $t("dashboard.chooseLibrary") }} @@ -346,10 +345,9 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
@@ -382,7 +380,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3)); { } }) -const { locale } = useI18n() // Helper to get localized text const getLocalizedText = (text: string | { th: string; en: string } | undefined) => { @@ -151,48 +152,54 @@ const validCourseId = computed(() => { - -- ---- {{ $t('sidebar.myCourses') }} -
+ +++{{ $t('myCourses.title') }}
+{{ $t('myCourses.subtitle') }}
+ ++ ++ + +++ ++-+ ++++ {{ $t("discovery.searchBtn") }} + - ---- - -- -+- - -- - + +@@ -230,7 +237,7 @@ const validCourseId = computed(() => {++{{ searchQuery ? $t('discovery.emptyTitle') : $t('myCourses.emptyTitle') }} diff --git a/Frontend-Learner/pages/dashboard/profile.vue b/Frontend-Learner/pages/dashboard/profile.vue index be58fc39..cd978e6a 100644 --- a/Frontend-Learner/pages/dashboard/profile.vue +++ b/Frontend-Learner/pages/dashboard/profile.vue @@ -216,7 +216,6 @@ onMounted(async () => { @click="toggleEdit(false)" />
-{{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }} @@ -250,7 +249,7 @@ onMounted(async () => {
-+@@ -269,7 +268,7 @@ onMounted(async () => { :first-name="userData.firstName" :last-name="userData.lastName" size="140" - class="border-[6px] border-white dark:border-[#1e293b] shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300" + class="border-[6px] border-white dark:border-slate-900 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300" />@@ -278,11 +277,11 @@ onMounted(async () => { {{ userData.firstName }} {{ userData.lastName }}-+-{{ userData.email }} +@@ -325,7 +324,7 @@ onMounted(async () => {{{ userData.emailVerifiedAt ? $t('profile.emailVerified') : $t('profile.verifyEmail') }} -+ - -