pongpon/survey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - TPU Survey System with Google Forms & Certificate Generator

Browse Source
This commit is contained in:
pongpon pitisuk
2026-09-12 11:56:34 +07:00
commit 72eb7cd0c8
355 changed files with 117012 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin.html
+356
View File
@@ -0,0 +1,356 @@
<!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=6">
</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>
<h2 class="text-white font-bold text-sm leading-tight">คณะนวัตกรรมดิจิทัลเทคโนโลยี</h2>
<span class="text-yellow-300 text-xs font-medium">มหาวิทยาลัยตาปี</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 style="display:grid;grid-template-columns:280px 1fr;gap:32px;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>