pongpon pitisuk
365 lines
22 KiB
HTML
365 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="th">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TPU Survey - Admin Dashboard</title>
|
||
<meta name="description"
|
||
content="แดชบอร์ดผู้ดูแลระบบ สำหรับจัดการแบบสอบถามและผู้ใช้ คณะนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยตาปี">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&display=swap"
|
||
rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
'thai': ['"Noto Sans Thai"', 'sans-serif']
|
||
},
|
||
colors: {
|
||
'primary': { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' },
|
||
'accent': { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f' }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="css/style.css?v=8">
|
||
</head>
|
||
|
||
<body class="font-thai">
|
||
<div class="dashboard">
|
||
<!-- Sidebar Overlay (Mobile) -->
|
||
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<img src="pic/logo.png" alt="TPU Logo" class="sidebar-logo-img" onerror="this.style.display='none'">
|
||
<div>
|
||
|
||
<span class="text-white font-bold text-sm leading-tight">มหาวิทยาลัยตาปี</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section-label">เมนูหลัก</div>
|
||
<div class="nav-item active" data-view="dashboard" onclick="showView('dashboard')">
|
||
<span class="nav-icon">📊</span>
|
||
<span>ภาพรวมระบบ</span>
|
||
</div>
|
||
<div class="nav-item" data-view="users" onclick="showView('users')">
|
||
<span class="nav-icon">👥</span>
|
||
<span>จัดการผู้ใช้</span>
|
||
</div>
|
||
<div class="nav-item" data-view="surveys" onclick="showView('surveys')">
|
||
<span class="nav-icon">📝</span>
|
||
<span>จัดการแบบสอบถาม</span>
|
||
</div>
|
||
<div class="nav-item" data-view="profile" onclick="showView('profile')">
|
||
<span class="nav-icon">👤</span>
|
||
<span>ข้อมูลส่วนตัว</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-info">
|
||
<div class="user-avatar" id="userAvatar">A</div>
|
||
<div class="user-detail">
|
||
<h4 id="userName">Admin</h4>
|
||
<span id="userRole">ผู้ดูแลระบบ</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm btn-block mt-8" onclick="Auth.logout()">🚪 ออกจากระบบ</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<header class="main-header">
|
||
<div class="d-flex items-center gap-16">
|
||
<button class="menu-toggle" onclick="toggleSidebar()">☰</button>
|
||
<h1 id="pageTitle">ภาพรวมระบบ</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
</div>
|
||
</header>
|
||
|
||
<div class="main-body">
|
||
|
||
<!-- ============================================================
|
||
Dashboard View — Overview with Stats + Chart + Recent
|
||
============================================================ -->
|
||
<div id="view-dashboard" class="view-section">
|
||
<!-- Welcome Banner -->
|
||
<div class="welcome-banner-enhanced">
|
||
<h1>สวัสดี, <span id="welcomeName">ผู้ดูแลระบบ</span> 🌟</h1>
|
||
<p>เข้าสู่ระบบจัดการแบบสอบถาม มหาวิทยาลัยตาปี</p>
|
||
<div class="welcome-date" id="welcomeDate"></div>
|
||
</div>
|
||
|
||
<!-- 4 Stat Cards -->
|
||
<div class="stat-grid-enhanced">
|
||
<div class="stat-card-enhanced purple">
|
||
<div class="stat-icon-enhanced purple">👥</div>
|
||
<div class="stat-content-enhanced">
|
||
<h4>ผู้ใช้ทั้งหมด</h4>
|
||
<div class="stat-value" id="statUsers">0</div>
|
||
<div class="stat-label">บัญชีในระบบ</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card-enhanced teal">
|
||
<div class="stat-icon-enhanced teal">📝</div>
|
||
<div class="stat-content-enhanced">
|
||
<h4>แบบสอบถาม</h4>
|
||
<div class="stat-value" id="statSurveys">0</div>
|
||
<div class="stat-label">ทั้งหมดในระบบ</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card-enhanced green">
|
||
<div class="stat-icon-enhanced green">🟢</div>
|
||
<div class="stat-content-enhanced">
|
||
<h4>เปิดใช้งาน</h4>
|
||
<div class="stat-value" id="statActive">0</div>
|
||
<div class="stat-label">กำลังเก็บข้อมูล</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card-enhanced orange">
|
||
<div class="stat-icon-enhanced orange">📨</div>
|
||
<div class="stat-content-enhanced">
|
||
<h4>คำตอบทั้งหมด</h4>
|
||
<div class="stat-value" id="statResponses">0</div>
|
||
<div class="stat-label">รายการที่ได้รับ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Two Column: Chart + Recent Activity -->
|
||
<div class="dashboard-grid-2col">
|
||
<!-- Status Chart -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📊 สัดส่วนแบบสอบถาม</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="status-chart-container" id="statusChart">
|
||
<div class="status-chart-row">
|
||
<div class="status-chart-label">🟢 เปิดใช้</div>
|
||
<div class="status-chart-bar-track">
|
||
<div class="status-chart-bar-fill active" id="chartActive"
|
||
style="width: 0%"></div>
|
||
</div>
|
||
<div class="status-chart-count" id="chartActiveCount">0</div>
|
||
</div>
|
||
<div class="status-chart-row">
|
||
<div class="status-chart-label">📝 ร่าง</div>
|
||
<div class="status-chart-bar-track">
|
||
<div class="status-chart-bar-fill draft" id="chartDraft" style="width: 0%">
|
||
</div>
|
||
</div>
|
||
<div class="status-chart-count" id="chartDraftCount">0</div>
|
||
</div>
|
||
<div class="status-chart-row">
|
||
<div class="status-chart-label">🔴 ปิด</div>
|
||
<div class="status-chart-bar-track">
|
||
<div class="status-chart-bar-fill closed" id="chartClosed"
|
||
style="width: 0%"></div>
|
||
</div>
|
||
<div class="status-chart-count" id="chartClosedCount">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent Surveys -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📋 แบบสอบถามล่าสุด</h3>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<ul class="activity-list" id="recentSurveysList">
|
||
<li class="activity-item" style="justify-content:center;padding:40px;">
|
||
<span class="text-muted">กำลังโหลด...</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
Users View — Card Grid
|
||
============================================================ -->
|
||
<div id="view-users" class="view-section hidden">
|
||
<div class="section-header-bar">
|
||
<div class="section-header-left">
|
||
<h2>👥 จัดการผู้ใช้</h2>
|
||
</div>
|
||
<div class="section-header-right">
|
||
<div class="search-box">
|
||
<span class="search-icon">🔍</span>
|
||
<input type="text" id="userSearchInput" placeholder="ค้นหาชื่อ, รหัส..."
|
||
oninput="filterUsers()">
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showAddUserModal()">➕ เพิ่มผู้ใช้</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Cards -->
|
||
<div class="space-y-3" id="userCardsContainer">
|
||
<div class="card-tapi p-8 text-center bg-white rounded-xl border border-slate-200">
|
||
<i class="fas fa-spinner fa-spin mr-2 text-blue-600"></i> กำลังโหลดข้อมูลผู้ใช้...
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Summary Bar -->
|
||
<div class="summary-footer" id="userSummary" style="border-radius: var(--radius-xl);"></div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
Surveys View — Card Grid with Filter
|
||
============================================================ -->
|
||
<div id="view-surveys" class="view-section hidden">
|
||
<div class="section-header-bar">
|
||
<div class="section-header-left">
|
||
<h2>📝 จัดการแบบสอบถาม</h2>
|
||
<div class="filter-tabs" id="surveyFilterTabs">
|
||
<button class="filter-tab active" data-filter="all"
|
||
onclick="filterSurveys('all', this)">ทั้งหมด <span class="tab-count"
|
||
id="countAll">0</span></button>
|
||
<button class="filter-tab" data-filter="active"
|
||
onclick="filterSurveys('active', this)">🟢 เปิด <span class="tab-count"
|
||
id="countActive">0</span></button>
|
||
<button class="filter-tab" data-filter="draft" onclick="filterSurveys('draft', this)">📝
|
||
ร่าง <span class="tab-count" id="countDraft">0</span></button>
|
||
<button class="filter-tab" data-filter="closed"
|
||
onclick="filterSurveys('closed', this)">🔴 ปิด <span class="tab-count"
|
||
id="countClosed">0</span></button>
|
||
</div>
|
||
</div>
|
||
<div class="section-header-right">
|
||
<div class="search-box">
|
||
<span class="search-icon">🔍</span>
|
||
<input type="text" id="surveySearchInput" placeholder="ค้นหาแบบสอบถาม..."
|
||
oninput="filterSurveysBySearch()">
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showCreateSurveyModal()">➕
|
||
สร้างแบบสอบถาม</button>
|
||
<button class="btn btn-primary btn-sm"
|
||
style="background-color:#16a34a;border-color:#16a34a;"
|
||
onclick="showImportGoogleFormModal()">📥 นำเข้าจาก Google Forms</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Survey Cards -->
|
||
<div class="space-y-3" id="surveyCardsContainer">
|
||
<div class="card-tapi p-8 text-center bg-white rounded-xl border border-slate-200">
|
||
<i class="fas fa-spinner fa-spin mr-2 text-blue-600"></i> กำลังโหลดข้อมูล...
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Summary Bar -->
|
||
<div class="summary-footer" id="surveySummary" style="border-radius: var(--radius-xl);"></div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
Profile View — Matching teacher.html
|
||
============================================================ -->
|
||
<div id="view-profile" class="view-section hidden">
|
||
<div class="section-header-bar" style="margin-bottom:24px;">
|
||
<div class="section-header-left">
|
||
<h2>👤 ข้อมูลส่วนตัว</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-layout-grid" style="align-items:start;">
|
||
<!-- Profile Card -->
|
||
<div class="card" style="text-align:center;">
|
||
<div class="card-body" style="padding:32px 24px;">
|
||
<div id="profileAvatar"
|
||
style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
|
||
A</div>
|
||
<h3 id="profileDisplayName" style="margin-bottom:4px;">—</h3>
|
||
<span class="text-muted text-sm" id="profileDisplayRole">ผู้ดูแลระบบ</span>
|
||
<div style="margin-top:12px;">
|
||
<span class="user-card-badge admin" id="profileBadge">👑 ผู้ดูแลระบบ</span>
|
||
</div>
|
||
<hr style="border-color:var(--border-color);margin:20px 0;">
|
||
<div class="text-sm text-muted">🆔 รหัสบุคลากร</div>
|
||
<div style="font-size:18px;font-weight:600;margin-top:4px;" id="profilePersonnelCode">—
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Form -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>✏️ แก้ไขข้อมูลส่วนตัว</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="profileForm">
|
||
<div class="form-group">
|
||
<label class="form-label">รหัสบุคลากร</label>
|
||
<input type="text" class="form-input" id="profileCode" disabled
|
||
style="background:var(--bg-secondary);cursor:not-allowed;opacity:0.7;">
|
||
<small class="text-muted" style="display:block;margin-top:4px;">🔒
|
||
ไม่สามารถแก้ไขได้ — ติดต่อผู้ดูแลระบบ</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">ชื่อ-นามสกุล *</label>
|
||
<input type="text" class="form-input" id="profileName" required
|
||
placeholder="ชื่อ-นามสกุล">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">อีเมล</label>
|
||
<input type="email" class="form-input" id="profileEmail"
|
||
placeholder="เช่น somchai@example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">สังกัด / สาขาวิชา</label>
|
||
<input type="text" class="form-input" id="profileSubject"
|
||
placeholder="เช่น สาขาวิทยาการคอมพิวเตอร์">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">รหัสสาขา</label>
|
||
<input type="text" class="form-input" id="profileBranch"
|
||
placeholder="เช่น CS01">
|
||
</div>
|
||
<hr style="border-color:var(--border-color);margin:24px 0;">
|
||
<h4 style="margin-bottom:16px;">🔑 เปลี่ยนรหัสผ่าน</h4>
|
||
<div class="form-group">
|
||
<label class="form-label">รหัสผ่านใหม่ (เว้นว่างถ้าไม่เปลี่ยน)</label>
|
||
<input type="password" class="form-input" id="profilePassword"
|
||
placeholder="รหัสผ่านใหม่ (อย่างน้อย 4 ตัวอักษร)">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">ยืนยันรหัสผ่านใหม่</label>
|
||
<input type="password" class="form-input" id="profilePasswordConfirm"
|
||
placeholder="พิมพ์รหัสผ่านใหม่อีกครั้ง">
|
||
</div>
|
||
<div style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
|
||
<button type="button" class="btn btn-secondary" onclick="loadProfile()">🔄
|
||
รีเซ็ต</button>
|
||
<button type="button" class="btn btn-primary" onclick="saveProfile()">💾
|
||
บันทึกข้อมูล</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="js/qrcode.min.js"></script>
|
||
<script src="js/app.js?v=5"></script>
|
||
<script src="js/admin.js?v=5"></script>
|
||
</body>
|
||
|
||
</html> |