init frontend_management
This commit is contained in:
Missez
parent
af58550f7f
commit
62812f2090
23 changed files with 13174 additions and 0 deletions
59
frontend_management/pages/admin/index.vue
Normal file
59
frontend_management/pages/admin/index.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-6">Dashboard</h1>
|
||||
<p class="text-gray-600 mb-8">ยินดีต้อนรับ, {{ authStore.user?.fullName }}</p>
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-600 text-sm">หลักสูตรทั้งหมด</p>
|
||||
<p class="text-3xl font-bold text-primary-600">5</p>
|
||||
</div>
|
||||
<q-icon name="school" size="48px" class="text-primary-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-600 text-sm">ผู้เรียนทั้งหมด</p>
|
||||
<p class="text-3xl font-bold text-secondary-500">125</p>
|
||||
</div>
|
||||
<q-icon name="people" size="48px" class="text-secondary-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-600 text-sm">เรียนจบแล้ว</p>
|
||||
<p class="text-3xl font-bold text-accent-500">45</p>
|
||||
</div>
|
||||
<q-icon name="emoji_events" size="48px" class="text-accent-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Courses -->
|
||||
<div class="card">
|
||||
<h2 class="text-xl font-semibold mb-4">หลักสูตรล่าสุด</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div class="w-16 h-16 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<q-icon name="code" size="32px" class="text-primary-600" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold">Python เบื้องต้น</h3>
|
||||
<p class="text-sm text-gray-600">45 ผู้เรียน • 8 บทเรียน</p>
|
||||
</div>
|
||||
<q-btn flat color="primary" label="ดูรายละเอียด" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'instructor',
|
||||
middleware: 'instructor'
|
||||
});
|
||||
const authStore = useAuthStore();
|
||||
</script>
|
||||
47
frontend_management/pages/index.vue
Normal file
47
frontend_management/pages/index.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-4xl font-bold text-primary-600 mb-4">
|
||||
E-Learning Management System
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 mb-8">
|
||||
ระบบจัดการเรียนการสอนออนไลน์
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<q-card class="shadow-lg">
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-primary-600">📚 Courses</div>
|
||||
<p class="text-gray-600">จัดการหลักสูตรและเนื้อหา</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-card class="shadow-lg">
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-secondary-500">👥 Students</div>
|
||||
<p class="text-gray-600">จัดการผู้เรียน</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-card class="shadow-lg">
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-accent-500">📊 Reports</div>
|
||||
<p class="text-gray-600">รายงานและสถิติ</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="login"
|
||||
@click="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Home page
|
||||
const handleLogin = async () => {
|
||||
await navigateTo('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
106
frontend_management/pages/instructor/index.vue
Normal file
106
frontend_management/pages/instructor/index.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">สวัสดี, อาจารย์ทดสอบ 👋</h1>
|
||||
<p class="text-gray-600 mt-2">ยินดีต้อนรับกลับสู่ระบบ</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl">
|
||||
👤
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-primary-600 mb-2">
|
||||
{{ instructorStore.stats.totalCourses }}
|
||||
</div>
|
||||
<div class="text-gray-600">หลักสูตรทั้งหมด</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-secondary-600 mb-2">
|
||||
{{ instructorStore.stats.totalStudents }}
|
||||
</div>
|
||||
<div class="text-gray-600">ผู้เรียนทั้งหมด</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-accent-600 mb-2">
|
||||
{{ instructorStore.stats.completedStudents }}
|
||||
</div>
|
||||
<div class="text-gray-600">เรียนจบแล้ว</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- Chart and Recent Courses -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Chart Placeholder -->
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<h3 class="text-xl font-semibold mb-4">📊 สถิติผู้สมัครรวม (รายเดือน)</h3>
|
||||
<div class="bg-gray-100 rounded-lg p-12 text-center text-gray-500">
|
||||
[กราฟแสดงสถิติผู้สมัครรวม (รายเดือน)]
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- Recent Courses -->
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-xl font-semibold">📚 หลักสูตรล่าสุด</h3>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="ดูทั้งหมด"
|
||||
@click="router.push('/instructor/courses')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<q-card
|
||||
v-for="course in instructorStore.recentCourses"
|
||||
:key="course.id"
|
||||
class="cursor-pointer hover:shadow-md transition"
|
||||
@click="router.push(`/instructor/courses/${course.id}`)"
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-16 bg-primary-100 rounded-lg flex items-center justify-center text-3xl">
|
||||
{{ course.icon }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold text-gray-900">{{ course.title }}</div>
|
||||
<div class="text-sm text-gray-600 mt-1">
|
||||
{{ course.students }} ผู้เรียน • {{ course.lessons }} บทเรียน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'instructor',
|
||||
middleware: 'auth'
|
||||
});
|
||||
|
||||
const instructorStore = useInstructorStore();
|
||||
const router = useRouter();
|
||||
|
||||
// Fetch dashboard data on mount
|
||||
onMounted(() => {
|
||||
instructorStore.fetchDashboardData();
|
||||
});
|
||||
</script>
|
||||
93
frontend_management/pages/login.vue
Normal file
93
frontend_management/pages/login.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
|
||||
<q-card class="w-full max-w-md p-8 shadow-xl">
|
||||
<q-card-section>
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">E-Learning</h1>
|
||||
<p class="text-gray-600 mt-2">เข้าสู่ระบบ</p>
|
||||
</div>
|
||||
<q-form @submit="handleLogin" class="space-y-4">
|
||||
<q-input
|
||||
v-model="email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
outlined
|
||||
:rules="[val => !!val || 'กรุณากรอกอีเมล']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="email" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-model="password"
|
||||
label="รหัสผ่าน"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
outlined
|
||||
:rules="[val => !!val || 'กรุณากรอกรหัสผ่าน']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="lock" />
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
type="submit"
|
||||
color="primary"
|
||||
label="เข้าสู่ระบบ"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:loading="loading"
|
||||
/>
|
||||
</q-form>
|
||||
<div class="mt-6 text-center text-sm text-gray-600">
|
||||
<p>ทดสอบ: instructor@test.com / admin@test.com</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
});
|
||||
const $q = useQuasar();
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const showPassword = ref(false);
|
||||
const loading = ref(false);
|
||||
const handleLogin = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await authStore.login(email.value, password.value);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'เข้าสู่ระบบสำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
// Redirect based on role
|
||||
if (authStore.isInstructor) {
|
||||
router.push('/instructor');
|
||||
} else if (authStore.isAdmin) {
|
||||
router.push('/admin');
|
||||
}
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'อีเมลหรือรหัสผ่านไม่ถูกต้อง',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue