feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<div class="min-h-screen bg-gray-50 p-4 md:p-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
|
||||
<!-- Header / Title -->
|
||||
<!-- ส่วนหัว / ชื่อเรื่อง (Header / Title) -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800">Quiz Runner</h1>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
<!-- Sidebar: Question Navigator -->
|
||||
<!-- แถบด้านข้าง: ตัวนำทางคำถาม (Sidebar: Question Navigator) -->
|
||||
<div class="lg:col-span-3 order-2 lg:order-1">
|
||||
<QCard class="bg-white shadow-sm sticky top-4">
|
||||
<QCardSection>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<!-- คำอธิบายสัญลักษณ์ (Legend) -->
|
||||
<div class="mt-6 space-y-2 text-xs text-gray-600">
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-blue-500"></div> Current</div>
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-green-500"></div> Completed</div>
|
||||
|
|
@ -44,11 +44,11 @@
|
|||
</QCard>
|
||||
</div>
|
||||
|
||||
<!-- Main Content: Question -->
|
||||
<!-- เนื้อหาหลัก: คำถาม (Main Content: Question) -->
|
||||
<div class="lg:col-span-9 order-1 lg:order-2">
|
||||
<QCard v-if="store.currentQuestion" class="bg-white shadow-md min-h-[400px] flex flex-col">
|
||||
|
||||
<!-- Question Header -->
|
||||
<!-- ส่วนหัวคำถาม (Question Header) -->
|
||||
<QCardSection class="bg-gray-50 border-b border-gray-100 py-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
|
|
@ -57,18 +57,18 @@
|
|||
</QBadge>
|
||||
<h2 class="text-xl font-medium text-gray-800">
|
||||
<span class="text-gray-400 mr-2">{{ store.currentQuestionIndex + 1 }}.</span>
|
||||
{{ store.currentQuestion.title }}
|
||||
{{ getLocalizedString(store.currentQuestion.question) }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
|
||||
<!-- Question Body -->
|
||||
<!-- ส่วนเนื้อหาคำถาม (Question Body) -->
|
||||
<QCardSection class="flex-grow py-8 px-6">
|
||||
|
||||
<!-- Single Choice -->
|
||||
<!-- เลือกคำตอบเดียว (Single Choice) -->
|
||||
<div v-if="store.currentQuestion.type === 'single'">
|
||||
<div v-for="opt in store.currentQuestion.options" :key="opt.id"
|
||||
<div v-for="opt in store.currentQuestion.choices" :key="opt.id"
|
||||
class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
|
||||
:class="{ 'border-blue-500 bg-blue-50': currentVal === opt.id, 'border-gray-200': currentVal !== opt.id }"
|
||||
@click="handleInput(opt.id)">
|
||||
|
|
@ -77,14 +77,14 @@
|
|||
:class="{ 'border-blue-500': currentVal === opt.id, 'border-gray-300': currentVal !== opt.id }">
|
||||
<div v-if="currentVal === opt.id" class="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
|
||||
</div>
|
||||
<span class="text-gray-700">{{ opt.label }}</span>
|
||||
<span class="text-gray-700">{{ getLocalizedString(opt.text) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple Choice -->
|
||||
<!-- เลือกหลายคำตอบ (Multiple Choice) -->
|
||||
<div v-else-if="store.currentQuestion.type === 'multiple'">
|
||||
<div v-for="opt in store.currentQuestion.options" :key="opt.id"
|
||||
<div v-for="opt in store.currentQuestion.choices" :key="opt.id"
|
||||
class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
|
||||
:class="{ 'border-blue-500 bg-blue-50': isSelected(opt.id), 'border-gray-200': !isSelected(opt.id) }"
|
||||
@click="toggleSelection(opt.id)">
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
:class="{ 'border-blue-500 bg-blue-500': isSelected(opt.id), 'border-gray-300': !isSelected(opt.id) }">
|
||||
<QIcon v-if="isSelected(opt.id)" name="check" class="text-white text-xs" />
|
||||
</div>
|
||||
<span class="text-gray-700">{{ opt.label }}</span>
|
||||
<span class="text-gray-700">{{ getLocalizedString(opt.text) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Input -->
|
||||
<!-- พิมพ์ข้อความ (Text Input) -->
|
||||
<div v-else-if="store.currentQuestion.type === 'text'">
|
||||
<QInput
|
||||
v-model="textModel"
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
</QCardSection>
|
||||
|
||||
<!-- Error Banner -->
|
||||
<!-- แบนเนอร์แสดงข้อผิดพลาด (Error Banner) -->
|
||||
<QBanner v-if="store.lastError" class="bg-red-50 text-red-600 px-6 py-2 border-t border-red-100">
|
||||
<template v-slot:avatar>
|
||||
<QIcon name="warning" color="red" />
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
{{ store.lastError }}
|
||||
</QBanner>
|
||||
|
||||
<!-- Actions Footer -->
|
||||
<!-- ส่วนท้ายปุ่มกดต่างๆ (Actions Footer) -->
|
||||
<QCardSection class="border-t border-gray-100 bg-gray-50 p-4 flex flex-wrap gap-4 items-center justify-between">
|
||||
|
||||
<QBtn
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
flat
|
||||
color="orange-8"
|
||||
label="Skip for now"
|
||||
@click="store.skipQuestion()"
|
||||
@click="store.nextQuestion()"
|
||||
no-caps
|
||||
/>
|
||||
|
||||
|
|
@ -178,11 +178,11 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, watch, reactive } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
// Composable is auto-imported in Nuxt
|
||||
// คอมโพสิเบิลถูกนำเข้าอัตโนมัติใน Nuxt (Composable is auto-imported in Nuxt)
|
||||
// import { useQuizRunner } from '@/composables/useQuizRunner';
|
||||
|
||||
const route = useRoute();
|
||||
// Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template
|
||||
// ห่อหุ้มใน reactive เพื่อแกะค่า refs ทำให้เหมือนพฤติกรรม Pinia store สำหรับ template (Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template)
|
||||
const store = reactive(useQuizRunner());
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -190,7 +190,16 @@ onMounted(() => {
|
|||
store.initQuiz(quizId);
|
||||
});
|
||||
|
||||
// -- Helpers for Input Handling --
|
||||
// -- ตัวช่วยสำหรับการจัดการการป้อนข้อมูล (Helpers for Input Handling) --
|
||||
|
||||
// ฟังก์ชันช่วยเหลือสำหรับแปลภาษา (Helper to safely format text)
|
||||
const getLocalizedString = (val: any): string => {
|
||||
if (typeof val === 'string') return val;
|
||||
if (val && typeof val === 'object') {
|
||||
return val.th || val.en || String(val);
|
||||
}
|
||||
return String(val || '');
|
||||
}
|
||||
|
||||
const currentVal = computed(() => {
|
||||
return store.currentAnswer?.value;
|
||||
|
|
@ -200,23 +209,23 @@ const isSaved = computed(() => {
|
|||
return store.currentAnswer?.is_saved;
|
||||
});
|
||||
|
||||
// Single Choice
|
||||
function handleInput(val: string) {
|
||||
// เลือกคำตอบเดียว (Single Choice)
|
||||
function handleInput(val: number) {
|
||||
store.updateAnswer(val);
|
||||
}
|
||||
|
||||
// Text Choice
|
||||
// พิมพ์ข้อความ (Text Choice)
|
||||
const textModel = ref('');
|
||||
// Watch for question changes to reset text model
|
||||
// จับตาดูการเปลี่ยนแปลงคำถามเพื่อล้างค่า (Watch for question changes to reset text model)
|
||||
watch(
|
||||
() => store.currentQuestionIndex,
|
||||
() => {
|
||||
if (store.currentQuestion?.type === 'text') {
|
||||
textModel.value = (store.currentAnswer?.value as string) || '';
|
||||
}
|
||||
// Clear error when changing question
|
||||
// ล้างข้อผิดพลาดเมื่อเปลี่ยนคำถาม (Clear error when changing question)
|
||||
store.lastError = null;
|
||||
// Scroll to top
|
||||
// เลื่อนหน้าจอขึ้นบนสุด (Scroll to top)
|
||||
if (typeof window !== 'undefined') {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
|
@ -224,7 +233,7 @@ watch(
|
|||
{ immediate: true }
|
||||
);
|
||||
|
||||
// Watch for error to scroll to error/field
|
||||
// จับตาดูข้อผิดพลาดเพื่อเลื่อนหน้าจอไปยังฟิลด์นั้น (Watch for error to scroll to error/field)
|
||||
watch(
|
||||
() => store.lastError,
|
||||
(newVal) => {
|
||||
|
|
@ -245,8 +254,8 @@ function handleTextInput(val: string | number | null) {
|
|||
store.updateAnswer(val as string);
|
||||
}
|
||||
|
||||
// Multiple Choice
|
||||
function isSelected(id: string) {
|
||||
// เลือกหลายคำตอบ (Multiple Choice)
|
||||
function isSelected(id: number) {
|
||||
const val = store.currentAnswer?.value;
|
||||
if (Array.isArray(val)) {
|
||||
return val.includes(id);
|
||||
|
|
@ -254,9 +263,9 @@ function isSelected(id: string) {
|
|||
return false;
|
||||
}
|
||||
|
||||
function toggleSelection(id: string) {
|
||||
function toggleSelection(id: number) {
|
||||
const val = store.currentAnswer?.value;
|
||||
let currentArr: string[] = [];
|
||||
let currentArr: number[] = [];
|
||||
if (Array.isArray(val)) {
|
||||
currentArr = [...val];
|
||||
}
|
||||
|
|
@ -270,10 +279,10 @@ function toggleSelection(id: string) {
|
|||
store.updateAnswer(currentArr);
|
||||
}
|
||||
|
||||
// -- Helpers for Styling --
|
||||
// -- ตัวช่วยสำหรับการจัดแต่งทรง (Helpers for Styling) --
|
||||
|
||||
function getIndicatorClass(index: number, qId: number) {
|
||||
// 1. Current = Blue
|
||||
// 1. ปัจจุบัน = สีน้ำเงิน (Current = Blue)
|
||||
if (index === store.currentQuestionIndex) {
|
||||
return 'bg-blue-500 text-white border-blue-600';
|
||||
}
|
||||
|
|
@ -286,7 +295,8 @@ function getIndicatorClass(index: number, qId: number) {
|
|||
case 'skipped':
|
||||
return 'bg-orange-500 text-white border-orange-600';
|
||||
case 'in_progress':
|
||||
// If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled)
|
||||
// กรณีที่เป็น in_progress แต่ไม่ใช่คำถามปัจจุบัน (จริงๆ เกิดยากตามตรรกะที่เข้มงวด แต่เผื่อไว้ก่อน)
|
||||
// (If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled))
|
||||
return 'bg-blue-200 text-blue-800 border-blue-300';
|
||||
case 'not_started':
|
||||
default:
|
||||
|
|
@ -297,5 +307,5 @@ function getIndicatorClass(index: number, qId: number) {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Optional: Transitions */
|
||||
/* ส่วนเสริม: ทรานสิชั่น (Optional: Transitions) */
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue