pongpon pitisuk
806 lines
38 KiB
JavaScript
806 lines
38 KiB
JavaScript
/**
|
||
* TPU Survey - Teacher Dashboard Logic
|
||
*/
|
||
|
||
let teacherSurveys = [];
|
||
|
||
async function initTeacher() {
|
||
const loggedIn = await Auth.check();
|
||
if (!loggedIn || !Auth.isTeacher()) {
|
||
if (Auth.isAdmin()) {
|
||
window.location.href = 'admin.html';
|
||
return;
|
||
}
|
||
window.location.href = 'index.html';
|
||
return;
|
||
}
|
||
|
||
document.getElementById('userName').textContent = Auth.user.full_name;
|
||
document.getElementById('userRole').textContent = 'อาจารย์ / เจ้าของโครงการ';
|
||
document.getElementById('userAvatar').textContent = Auth.user.full_name.charAt(0);
|
||
|
||
showTeacherView('mySurveys');
|
||
}
|
||
|
||
function showTeacherView(view) {
|
||
document.querySelectorAll('.view-section').forEach(s => s.classList.add('hidden'));
|
||
document.getElementById(`view-${view}`)?.classList.remove('hidden');
|
||
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
document.querySelector(`.nav-item[data-view="${view}"]`)?.classList.add('active');
|
||
|
||
const titles = { mySurveys: 'แบบสอบถามของฉัน', profile: 'ข้อมูลส่วนตัว' };
|
||
document.getElementById('pageTitle').textContent = titles[view] || '';
|
||
|
||
if (view === 'mySurveys') loadTeacherSurveys();
|
||
else if (view === 'profile') loadProfile();
|
||
}
|
||
|
||
async function loadTeacherSurveys() {
|
||
try {
|
||
const data = await API.get('surveys.php?action=list');
|
||
teacherSurveys = data.surveys || [];
|
||
renderTeacherSurveys();
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
function renderTeacherSurveys() {
|
||
const container = document.getElementById('teacherSurveysList') || document.getElementById('teacherSurveysBody');
|
||
if (!container) return;
|
||
|
||
if (teacherSurveys.length === 0) {
|
||
const emptyHtml = `
|
||
<div class="card-tapi p-8 text-center bg-white rounded-lg border border-slate-200">
|
||
<i class="fas fa-clipboard-list text-4xl text-blue-300 mb-3 block"></i>
|
||
<p class="text-gray-600 font-bold">ยังไม่มีแบบสอบถาม กดปุ่ม "สร้างแบบสอบถาม" เพื่อเริ่มต้น</p>
|
||
</div>
|
||
`;
|
||
if (container.tagName === 'TBODY') {
|
||
container.innerHTML = `<tr><td colspan="5" class="text-center text-muted" style="padding:40px">ยังไม่มีแบบสอบถาม กดปุ่ม "สร้างแบบสอบถาม" เพื่อเริ่มต้น</td></tr>`;
|
||
} else {
|
||
container.innerHTML = emptyHtml;
|
||
}
|
||
return;
|
||
}
|
||
|
||
const statusMap = {
|
||
active: { label: 'เปิดใช้งาน', bg: 'bg-emerald-100 text-emerald-800 border-emerald-300' },
|
||
draft: { label: 'ฉบับร่าง', bg: 'bg-amber-100 text-amber-800 border-amber-300' },
|
||
closed: { label: 'ปิดแล้ว', bg: 'bg-rose-100 text-rose-800 border-rose-300' }
|
||
};
|
||
|
||
container.innerHTML = teacherSurveys.map(s => {
|
||
const st = statusMap[s.status] || { label: s.status || 'เปิดใช้งาน', bg: 'bg-emerald-100 text-emerald-800 border-emerald-300' };
|
||
|
||
return `
|
||
<div class="card-tapi p-3.5 rounded-xl bg-white flex flex-col lg:flex-row justify-between items-start lg:items-center gap-3 transition-all hover:shadow-md border border-slate-200">
|
||
<div class="flex flex-col sm:flex-row sm:items-center gap-2.5 flex-1 min-w-0">
|
||
<span class="px-2 py-0.5 text-[11px] font-extrabold rounded border whitespace-nowrap self-start sm:self-auto ${st.bg}">${st.label}</span>
|
||
<div class="space-y-0.5 flex-1 min-w-0">
|
||
<h4 class="font-bold text-xs sm:text-sm text-blue-950 truncate" title="${escapeHtml(s.title)}">
|
||
${escapeHtml(s.title)}
|
||
</h4>
|
||
<div class="flex items-center gap-3 text-[11px] text-gray-500 font-semibold flex-wrap">
|
||
<span><i class="fas fa-comments text-blue-600 mr-1"></i> ${s.response_count || 0} คำตอบ</span>
|
||
<span><i class="fas fa-calendar-alt text-amber-600 mr-1"></i> ${formatDate(s.created_at)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap lg:flex-nowrap gap-1 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
|
||
<button onclick="teacherEditSurvey(${s.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขแบบสอบถาม">
|
||
✏️ แก้ไข
|
||
</button>
|
||
<button onclick="teacherDuplicateSurvey(${s.id})" class="bg-blue-600 hover:bg-blue-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="คัดลอกแบบสอบถาม">
|
||
📑 คัดลอก
|
||
</button>
|
||
<button onclick="teacherGenerateLink(${s.id})" class="bg-blue-900 hover:bg-blue-950 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลิงก์และ QR Code">
|
||
🔗 ลิงก์
|
||
</button>
|
||
<button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="bg-emerald-600 hover:bg-emerald-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="นำเข้าคำตอบจาก CSV">
|
||
📥 นำเข้าคำตอบ
|
||
</button>
|
||
<button onclick="teacherViewStats(${s.id})" class="bg-indigo-600 hover:bg-indigo-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ผลสถิติ">
|
||
📊 สถิติ
|
||
</button>
|
||
<button onclick="teacherDeleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบแบบสอบถาม">
|
||
🗑️ ลบ
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
async function teacherDeleteSurvey(id, title) {
|
||
if (!confirm(`คุณต้องการลบแบบสอบถาม "${title}" ใช่หรือไม่?`)) return;
|
||
try {
|
||
await API.get(`surveys.php?action=delete&id=${id}`);
|
||
Toast.success('ลบแบบสอบถามเรียบร้อยแล้ว');
|
||
loadTeacherSurveys();
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
function showTeacherCreateModal() {
|
||
const html = `
|
||
<form id="teacherSurveyForm">
|
||
<div class="form-group">
|
||
<label class="form-label">ชื่อแบบสอบถาม *</label>
|
||
<input type="text" class="form-input" name="title" required placeholder="เช่น แบบประเมินความพึงพอใจโครงการ...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">รายละเอียด</label>
|
||
<textarea class="form-input" name="description" placeholder="คำอธิบายเพิ่มเติม"></textarea>
|
||
</div>
|
||
</form>
|
||
`;
|
||
const footer = `
|
||
<button class="btn btn-secondary" onclick="Modal.hide('tCreateModal');document.getElementById('tCreateModal').remove();">ยกเลิก</button>
|
||
<button class="btn btn-primary" onclick="submitTeacherCreate()">สร้างแบบสอบถาม (ใช้ 3 ส่วนมาตรฐาน)</button>
|
||
`;
|
||
Modal.create('สร้างแบบสอบถามใหม่', html, footer);
|
||
document.querySelector('.modal-overlay:last-child').id = 'tCreateModal';
|
||
}
|
||
|
||
async function submitTeacherCreate() {
|
||
const form = document.getElementById('teacherSurveyForm');
|
||
const fd = new FormData(form);
|
||
const data = Object.fromEntries(fd);
|
||
|
||
if (!data.title) { Toast.warning('กรุณากรอกชื่อ'); return; }
|
||
|
||
// Pre-fill 3 sections
|
||
data.sections = [
|
||
{
|
||
section_number: 1,
|
||
title: 'ส่วนที่ ข้อมูลทั่วไป',
|
||
category: 'general',
|
||
questions: [
|
||
{ question_text: 'เพศ', question_type: 'radio', options: ['ชาย', 'หญิง'], is_required: 1 },
|
||
{ question_text: 'ช่วงอายุ', question_type: 'dropdown', options: ['18-25 ปี', '26-35 ปี', '36-45 ปี', '46-55 ปี', '56 ปีขึ้นไป'], is_required: 1 }
|
||
]
|
||
},
|
||
{
|
||
section_number: 2,
|
||
title: 'ส่วนที่ การประเมินความพึงพอใจ',
|
||
category: 'rating',
|
||
questions: [
|
||
{ question_text: 'ด้านเนื้อหาของการจัดโครงการ', question_type: 'radio', is_required: 1 },
|
||
{ question_text: 'ด้านวิทยากร / ผู้บรรยาย', question_type: 'radio', is_required: 1 }
|
||
]
|
||
},
|
||
{
|
||
section_number: 3,
|
||
title: 'ส่วนที่ ข้อเสนอแนะอื่นๆ',
|
||
category: 'suggestions',
|
||
questions: [
|
||
{ question_text: 'ข้อเสนอแนะเพิ่มเติม', question_type: 'text', is_required: 0 }
|
||
]
|
||
}
|
||
];
|
||
|
||
try {
|
||
const result = await API.post('surveys.php?action=create', data);
|
||
Toast.success('สร้างแบบสอบถามสำเร็จ');
|
||
Modal.hide('tCreateModal');
|
||
document.getElementById('tCreateModal').remove();
|
||
loadTeacherSurveys();
|
||
setTimeout(() => teacherEditSurvey(result.id), 500);
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
function teacherEditSurvey(id) {
|
||
window.open(`edit.html?id=${id}`, '_blank');
|
||
}
|
||
|
||
function buildTeacherQEditor(si, qi, q = {}) {
|
||
const qType = q.question_type || 'radio';
|
||
const qText = q.question_text || '';
|
||
const qOptions = Array.isArray(q.options) ? q.options.join('\n') : '';
|
||
const showOptions = ['radio', 'checkbox', 'dropdown'].includes(qType);
|
||
|
||
const qDescription = q.description || '';
|
||
|
||
return `
|
||
<div class="question-builder">
|
||
<div class="qb-header">
|
||
<span class="qb-handle">⋮⋮</span>
|
||
<span class="text-sm fw-600 q-number-label">คำถาม</span>
|
||
<div class="qb-actions">
|
||
<button type="button" class="btn btn-ghost btn-sm" onclick="addTeacherQ(${si}, this.closest('.question-builder'))" title="แทรกคำถามใต้ข้อนี้">➕ แทรก</button>
|
||
<button type="button" class="btn btn-ghost btn-sm text-danger" onclick="removeTeacherQ(this, ${si})" title="ลบคำถาม">🗑️ ลบ</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">คำถาม / ข้อความ</label>
|
||
<input type="text" class="form-input q-text-input" value="${escapeHtml(qText)}" placeholder="พิมพ์คำถาม...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">รายละเอียดเพิ่มเติม (คำใบ้/คำอธิบาย - ไม่บังคับ)</label>
|
||
<input type="text" class="form-input q-desc-input" value="${escapeHtml(qDescription)}" placeholder="เช่น กรุณาระบุเป็นภาษาไทย">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">ประเภทคำถาม</label>
|
||
<select class="form-input q-type-select" onchange="toggleTeacherOptions(this)">
|
||
<option value="radio" ${qType==='radio'?'selected':''}>📊 ระดับ 1-5</option>
|
||
<option value="text" ${qType==='text'?'selected':''}>📝 ข้อความ</option>
|
||
<option value="dropdown" ${qType==='dropdown'?'selected':''}>📋 Dropdown</option>
|
||
<option value="checkbox" ${qType==='checkbox'?'selected':''}>☑️ Checkbox</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group q-options-group" style="${showOptions ? '' : 'display:none;'}">
|
||
<label class="form-label">ตัวเลือก (1 รายการต่อบรรทัด)</label>
|
||
<textarea class="form-input q-options-input" placeholder="ตัวเลือกที่ 1\nตัวเลือกที่ 2" rows="3">${escapeHtml(qOptions)}</textarea>
|
||
<small class="text-muted">เว้นว่างสำหรับระดับ 1-5 (Radio)</small>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function addTeacherSection() {
|
||
const container = document.getElementById('additionalTeacherSections');
|
||
if (!container) return;
|
||
const si = document.querySelectorAll('.card[data-section]').length;
|
||
|
||
const html = `
|
||
<div class="card mb-24" data-section="${si}">
|
||
<div class="card-header d-flex justify-between items-center">
|
||
<input type="text" class="form-input" style="font-weight:700;font-size:16px;border:none;padding:4px 0;background:transparent;"
|
||
value="ส่วนที่ ข้อมูลเพิ่มเติม" data-field="section-title-${si}">
|
||
<button type="button" class="btn btn-ghost btn-sm text-danger" onclick="this.closest('.card').remove()">🗑️ ลบส่วนนี้</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="t-questions-${si}"></div>
|
||
<button type="button" class="btn btn-secondary btn-sm mt-16" onclick="addTeacherQ(${si})">+ เพิ่มคำถาม</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
container.insertAdjacentHTML('beforeend', html);
|
||
// Add one initial question to the new section
|
||
addTeacherQ(si);
|
||
}
|
||
|
||
function toggleTeacherOptions(select) {
|
||
const group = select.closest('.question-builder').querySelector('.q-options-group');
|
||
if (['radio', 'checkbox', 'dropdown'].includes(select.value)) {
|
||
group.style.display = 'block';
|
||
} else {
|
||
group.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function addTeacherQ(si, afterEl = null) {
|
||
const container = document.getElementById(`t-questions-${si}`);
|
||
if (!container) return;
|
||
|
||
// Create temporary div to parse HTML
|
||
const tempDiv = document.createElement('div');
|
||
tempDiv.innerHTML = buildTeacherQEditor(si, 0);
|
||
const newQ = tempDiv.firstElementChild;
|
||
|
||
if (afterEl) {
|
||
afterEl.after(newQ);
|
||
} else {
|
||
container.appendChild(newQ);
|
||
}
|
||
|
||
reindexTeacherQuestions(si);
|
||
}
|
||
|
||
function removeTeacherQ(btn, si) {
|
||
if (!confirm('ยืนยันลบคำถามนี้?')) return;
|
||
btn.closest('.question-builder').remove();
|
||
reindexTeacherQuestions(si);
|
||
}
|
||
|
||
function reindexTeacherQuestions(si) {
|
||
const container = document.getElementById(`t-questions-${si}`);
|
||
if (!container) return;
|
||
container.querySelectorAll('.question-builder').forEach((qEl, idx) => {
|
||
const label = qEl.querySelector('.q-number-label');
|
||
if (label) label.textContent = `คำถาม`;
|
||
});
|
||
}
|
||
|
||
async function submitTeacherEdit() {
|
||
const form = document.getElementById('tEditForm');
|
||
const id = form.querySelector('[name="id"]').value;
|
||
const title = form.querySelector('[name="title"]').value;
|
||
const description = form.querySelector('[name="description"]').value;
|
||
|
||
const sections = [];
|
||
form.querySelectorAll('.card[data-section]').forEach((sectionEl, si) => {
|
||
const sTitleInput = sectionEl.querySelector('input[data-field^="section-title"]');
|
||
const sCategorySelect = sectionEl.querySelector('select[data-field^="section-category"]');
|
||
const sTitle = sTitleInput ? sTitleInput.value : `ส่วนที่ ${si+1}`;
|
||
const sCategory = sCategorySelect ? sCategorySelect.value : 'rating';
|
||
const questions = [];
|
||
|
||
sectionEl.querySelectorAll('.question-builder').forEach((qEl, qi) => {
|
||
const qTextInput = qEl.querySelector('.q-text-input');
|
||
const qDescInput = qEl.querySelector('.q-desc-input');
|
||
const qTypeSelect = qEl.querySelector('.q-type-select');
|
||
const qOptionsArea = qEl.querySelector('.q-options-input');
|
||
|
||
const qText = qTextInput ? qTextInput.value : '';
|
||
const qDescription = qDescInput ? qDescInput.value : '';
|
||
const qType = qTypeSelect ? qTypeSelect.value : 'radio';
|
||
const qOptionsRaw = qOptionsArea ? qOptionsArea.value : '';
|
||
|
||
const options = qOptionsRaw.split('\n').map(o => o.trim()).filter(o => o !== '');
|
||
|
||
if (qText.trim()) {
|
||
questions.push({
|
||
question_text: qText.trim(),
|
||
description: qDescription.trim() || null,
|
||
question_type: qType,
|
||
order_num: qi,
|
||
is_required: 1,
|
||
options: options.length > 0 ? options : null
|
||
});
|
||
}
|
||
});
|
||
|
||
sections.push({ section_number: si + 1, title: sTitle, category: sCategory, questions });
|
||
});
|
||
|
||
try {
|
||
await API.post('surveys.php?action=update', { id: parseInt(id), title, description, sections });
|
||
Toast.success('บันทึกสำเร็จ');
|
||
Modal.hide('tEditModal');
|
||
document.getElementById('tEditModal').remove();
|
||
loadTeacherSurveys();
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
async function teacherDuplicateSurvey(id) {
|
||
if (!confirm('ยืนยันสร้างสำเนาแบบสอบถามนี้?')) return;
|
||
try {
|
||
await API.post('surveys.php?action=duplicate', { id });
|
||
Toast.success('คัดลอกสำเร็จ');
|
||
loadTeacherSurveys();
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
async function teacherGenerateLink(id) {
|
||
try {
|
||
const data = await API.post('surveys.php?action=generateLink', { id });
|
||
const basePath = window.location.pathname.includes('/survey') ? '/survey' : '';
|
||
const fullUrl = data.full_url || `${window.location.origin}${basePath}/respond.php?link=${data.unique_link}`;
|
||
|
||
// Find survey title
|
||
const survey = teacherSurveys.find(s => s.id == id);
|
||
const surveyTitle = survey ? survey.title : 'แบบสอบถาม';
|
||
|
||
const html = `
|
||
<div class="qr-link-container">
|
||
<div class="qr-link-section">
|
||
<div class="qr-link-label">🔗 ลิงก์แบบสอบถาม</div>
|
||
<div class="link-display">
|
||
<span class="flex-1" id="surveyLinkText">${fullUrl}</span>
|
||
<button class="copy-btn" onclick="copyTeacherLink()">📋 คัดลอก</button>
|
||
</div>
|
||
</div>
|
||
<div class="qr-code-section">
|
||
<div class="qr-link-label">📱 QR Code สำหรับตอบแบบสอบถาม</div>
|
||
<div class="qr-code-wrapper" id="qrCodeWrapper">
|
||
<div id="qrCodeContainer"></div>
|
||
</div>
|
||
<p class="qr-survey-title" id="qrSurveyTitle">${escapeHtml(surveyTitle)}</p>
|
||
<div class="qr-actions">
|
||
<button class="btn btn-primary btn-sm" onclick="teacherDownloadQR()">📥 ดาวน์โหลด QR</button>
|
||
<button class="btn btn-secondary btn-sm" onclick="teacherPrintQR()">🖨️ พิมพ์ QR</button>
|
||
</div>
|
||
</div>
|
||
<p class="mt-16 text-sm text-muted" style="text-align:center;">⚡ แบบสอบถามถูกเปิดใช้งานอัตโนมัติเมื่อสร้างลิงก์</p>
|
||
</div>
|
||
`;
|
||
Modal.create('🔗 ลิงก์และ QR Code', html, '', 'modal-lg');
|
||
|
||
// Generate QR Code using QRCodeJS
|
||
setTimeout(() => {
|
||
const container = document.getElementById('qrCodeContainer');
|
||
if (container && typeof QRCode !== 'undefined') {
|
||
new QRCode(container, {
|
||
text: fullUrl,
|
||
width: 280,
|
||
height: 280,
|
||
colorDark: '#1e3a8a',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
});
|
||
}
|
||
}, 100);
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
function copyTeacherLink() {
|
||
const text = document.getElementById('surveyLinkText')?.textContent;
|
||
if (text) {
|
||
navigator.clipboard.writeText(text).then(() => Toast.success('คัดลอกแล้ว')).catch(() => {
|
||
const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
|
||
Toast.success('คัดลอกแล้ว');
|
||
});
|
||
}
|
||
}
|
||
|
||
function getTeacherQRImage() {
|
||
const container = document.getElementById('qrCodeContainer');
|
||
if (!container) return null;
|
||
return container.querySelector('canvas') || container.querySelector('img');
|
||
}
|
||
|
||
function teacherDownloadQR() {
|
||
const qrEl = getTeacherQRImage();
|
||
const title = document.getElementById('qrSurveyTitle')?.textContent || 'survey';
|
||
if (!qrEl) return;
|
||
|
||
let qrDataUrl;
|
||
if (qrEl.tagName === 'CANVAS') {
|
||
qrDataUrl = qrEl.toDataURL('image/png');
|
||
} else {
|
||
qrDataUrl = qrEl.src;
|
||
}
|
||
|
||
const exportCanvas = document.createElement('canvas');
|
||
const qrSize = 280;
|
||
const padding = 40;
|
||
const titleHeight = 60;
|
||
const footerHeight = 40;
|
||
exportCanvas.width = qrSize + padding * 2;
|
||
exportCanvas.height = qrSize + padding * 2 + titleHeight + footerHeight;
|
||
|
||
const ctx = exportCanvas.getContext('2d');
|
||
ctx.fillStyle = '#ffffff';
|
||
ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
|
||
|
||
ctx.fillStyle = '#1a1a2e';
|
||
ctx.font = 'bold 16px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
const maxTitleWidth = exportCanvas.width - 40;
|
||
let displayTitle = title;
|
||
if (ctx.measureText(displayTitle).width > maxTitleWidth) {
|
||
while (ctx.measureText(displayTitle + '...').width > maxTitleWidth && displayTitle.length > 0) {
|
||
displayTitle = displayTitle.slice(0, -1);
|
||
}
|
||
displayTitle += '...';
|
||
}
|
||
ctx.fillText(displayTitle, exportCanvas.width / 2, padding + 20);
|
||
|
||
const img = new Image();
|
||
img.onload = function() {
|
||
ctx.drawImage(img, padding, padding + titleHeight, qrSize, qrSize);
|
||
ctx.fillStyle = '#6b7280';
|
||
ctx.font = '12px sans-serif';
|
||
ctx.fillText('สแกนเพื่อตอบแบบสอบถาม — TPU Survey', exportCanvas.width / 2, exportCanvas.height - 16);
|
||
|
||
const link = document.createElement('a');
|
||
const safeName = title.replace(/[^a-zA-Z0-9ก-๙]/g, '_').substring(0, 50);
|
||
link.download = `QR_${safeName}.png`;
|
||
link.href = exportCanvas.toDataURL('image/png');
|
||
link.click();
|
||
Toast.success('ดาวน์โหลด QR Code สำเร็จ');
|
||
};
|
||
img.src = qrDataUrl;
|
||
}
|
||
|
||
function teacherPrintQR() {
|
||
const qrEl = getTeacherQRImage();
|
||
const title = document.getElementById('qrSurveyTitle')?.textContent || 'แบบสอบถาม';
|
||
const linkText = document.getElementById('surveyLinkText')?.textContent || '';
|
||
if (!qrEl) return;
|
||
|
||
let qrDataUrl;
|
||
if (qrEl.tagName === 'CANVAS') {
|
||
qrDataUrl = qrEl.toDataURL('image/png');
|
||
} else {
|
||
qrDataUrl = qrEl.src;
|
||
}
|
||
|
||
const printWindow = window.open('', '_blank');
|
||
printWindow.document.write(`
|
||
<!DOCTYPE html><html><head><title>พิมพ์ QR Code</title>
|
||
<style>
|
||
body { font-family: 'Sarabun', sans-serif; text-align: center; padding: 40px; }
|
||
h2 { color: #1a1a2e; margin-bottom: 8px; }
|
||
.subtitle { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
|
||
img { border: 2px solid #e5e7eb; border-radius: 12px; padding: 8px; }
|
||
.link { color: #6b7280; font-size: 11px; word-break: break-all; margin-top: 16px; }
|
||
.footer { margin-top: 32px; color: #9ca3af; font-size: 12px; }
|
||
</style></head>
|
||
<body>
|
||
<h2>${title}</h2>
|
||
<p class="subtitle">สแกน QR Code เพื่อตอบแบบสอบถาม</p>
|
||
<img src="${qrDataUrl}" width="300" height="300">
|
||
<p class="link">${linkText}</p>
|
||
<p class="footer">TPU Survey — มหาวิทยาลัยตาปี</p>
|
||
<script>window.onload = function() { window.print(); }<\/script>
|
||
</body></html>
|
||
`);
|
||
printWindow.document.close();
|
||
}
|
||
|
||
function teacherViewStats(surveyId) {
|
||
window.open(`stats.html?survey_id=${surveyId}`, '_blank');
|
||
}
|
||
|
||
// ============================================================
|
||
// Profile Management
|
||
// ============================================================
|
||
async function loadProfile() {
|
||
try {
|
||
const data = await API.get('profile.php?action=get');
|
||
const u = data.user;
|
||
|
||
// Fill the form
|
||
document.getElementById('profileCode').value = u.personnel_code || u.username || '-';
|
||
document.getElementById('profileName').value = u.full_name || '';
|
||
document.getElementById('profileEmail').value = u.email || '';
|
||
document.getElementById('profileSubject').value = u.subject_area || '';
|
||
document.getElementById('profileBranch').value = u.branch_code || '';
|
||
document.getElementById('profilePassword').value = '';
|
||
document.getElementById('profilePasswordConfirm').value = '';
|
||
|
||
// Fill the sidebar card
|
||
document.getElementById('profileDisplayName').textContent = u.full_name || '-';
|
||
document.getElementById('profileDisplayRole').textContent = u.role === 'admin' ? 'ผู้ดูแลระบบ' : 'อาจารย์ / เจ้าของโครงการ';
|
||
document.getElementById('profileAvatar').textContent = (u.full_name || 'T').charAt(0).toUpperCase();
|
||
document.getElementById('profilePersonnelCode').textContent = u.personnel_code || u.username || '-';
|
||
|
||
const badge = document.getElementById('profileBadge');
|
||
if (badge) {
|
||
badge.textContent = u.role === 'admin' ? '👑 ผู้ดูแลระบบ' : '🎓 อาจารย์';
|
||
badge.className = `user-card-badge ${u.role}`;
|
||
}
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
async function saveProfile() {
|
||
const fullName = document.getElementById('profileName').value.trim();
|
||
const email = document.getElementById('profileEmail').value.trim();
|
||
const subjectArea = document.getElementById('profileSubject').value.trim();
|
||
const branchCode = document.getElementById('profileBranch').value.trim();
|
||
const password = document.getElementById('profilePassword').value;
|
||
const passwordConfirm = document.getElementById('profilePasswordConfirm').value;
|
||
|
||
if (!fullName) {
|
||
Toast.warning('กรุณากรอกชื่อ-นามสกุล');
|
||
return;
|
||
}
|
||
|
||
if (password && password.length < 4) {
|
||
Toast.warning('รหัสผ่านต้องมีอย่างน้อย 4 ตัวอักษร');
|
||
return;
|
||
}
|
||
|
||
if (password && password !== passwordConfirm) {
|
||
Toast.warning('รหัสผ่านไม่ตรงกัน');
|
||
return;
|
||
}
|
||
|
||
const payload = {
|
||
full_name: fullName,
|
||
email: email,
|
||
subject_area: subjectArea,
|
||
branch_code: branchCode
|
||
};
|
||
|
||
if (password) {
|
||
payload.password = password;
|
||
}
|
||
|
||
try {
|
||
await API.post('profile.php?action=update', payload);
|
||
Toast.success('บันทึกข้อมูลส่วนตัวสำเร็จ');
|
||
|
||
// Update sidebar display
|
||
document.getElementById('userName').textContent = fullName;
|
||
document.getElementById('userAvatar').textContent = fullName.charAt(0).toUpperCase();
|
||
|
||
// Reload profile card
|
||
loadProfile();
|
||
} catch (err) {
|
||
Toast.error(err.message);
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// Google Forms Import Modals & Functions
|
||
// ============================================================
|
||
function showImportGoogleFormModal() {
|
||
const html = `
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;gap:12px;margin-bottom:16px;border-bottom:1px solid #e5e7eb;padding-bottom:10px;">
|
||
<button id="tabUrlBtn" type="button" class="btn btn-sm btn-primary" onclick="switchImportTab('url')">🌐 วาง URL / Link</button>
|
||
<button id="tabJsonBtn" type="button" class="btn btn-sm btn-secondary" onclick="switchImportTab('json')">📄 อัปโหลดไฟล์ JSON</button>
|
||
</div>
|
||
|
||
<!-- Tab 1: URL -->
|
||
<div id="importTabUrl">
|
||
<div class="form-group">
|
||
<label class="form-label">Google Form URL / Link *</label>
|
||
<input type="url" class="form-input" id="googleFormUrl" placeholder="https://docs.google.com/forms/d/e/1FAIpQLS.../viewform">
|
||
<small class="text-muted mt-8" style="display:block;">วางลิงก์แบบสอบถาม Google Forms ที่เปิดสาธารณะ (Public)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2: JSON -->
|
||
<div id="importTabJson" style="display:none;">
|
||
<div class="form-group">
|
||
<label class="form-label">เลือกไฟล์ JSON โครงสร้างฟอร์ม *</label>
|
||
<input type="file" class="form-input" id="googleFormJsonFile" accept=".json">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">หรือวางข้อมูล JSON ตรงนี้</label>
|
||
<textarea class="form-input" id="googleFormJsonText" rows="4" placeholder='{"title": "แบบสอบถาม...", "sections": [...]}'></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
const footer = `
|
||
<button class="btn btn-secondary" onclick="Modal.hide('importGFormModal');document.getElementById('importGFormModal')?.remove();">ยกเลิก</button>
|
||
<button class="btn btn-primary" id="btnSubmitImportGForm" onclick="submitImportGoogleForm()">📥 นำเข้าแบบสอบถาม</button>
|
||
`;
|
||
const modalId = Modal.create('📥 นำเข้าแบบสอบถามจาก Google Forms', html, footer);
|
||
const modalEl = document.getElementById(modalId);
|
||
if (modalEl) modalEl.id = 'importGFormModal';
|
||
}
|
||
|
||
function switchImportTab(tab) {
|
||
const urlTab = document.getElementById('importTabUrl');
|
||
const jsonTab = document.getElementById('importTabJson');
|
||
const urlBtn = document.getElementById('tabUrlBtn');
|
||
const jsonBtn = document.getElementById('tabJsonBtn');
|
||
|
||
if (tab === 'url') {
|
||
if (urlTab) urlTab.style.display = 'block';
|
||
if (jsonTab) jsonTab.style.display = 'none';
|
||
if (urlBtn) urlBtn.className = 'btn btn-sm btn-primary';
|
||
if (jsonBtn) jsonBtn.className = 'btn btn-sm btn-secondary';
|
||
} else {
|
||
if (urlTab) urlTab.style.display = 'none';
|
||
if (jsonTab) jsonTab.style.display = 'block';
|
||
if (urlBtn) urlBtn.className = 'btn btn-sm btn-secondary';
|
||
if (jsonBtn) jsonBtn.className = 'btn btn-sm btn-primary';
|
||
}
|
||
}
|
||
|
||
async function submitImportGoogleForm() {
|
||
const urlTab = document.getElementById('importTabUrl');
|
||
const btn = document.getElementById('btnSubmitImportGForm');
|
||
|
||
if (btn) {
|
||
btn.disabled = true;
|
||
btn.textContent = '⏳ กำลังนำเข้าข้อมูล...';
|
||
}
|
||
|
||
try {
|
||
if (urlTab && urlTab.style.display !== 'none') {
|
||
const url = document.getElementById('googleFormUrl')?.value?.trim();
|
||
if (!url) {
|
||
Toast.warning('กรุณาระบุ Google Form URL');
|
||
if (btn) { btn.disabled = false; btn.textContent = '📥 นำเข้าแบบสอบถาม'; }
|
||
return;
|
||
}
|
||
|
||
const res = await API.post('import_google_form.php?action=importFromUrl', { url });
|
||
Toast.success(res.message || 'นำเข้าแบบสอบถามสำเร็จ!');
|
||
Modal.hide('importGFormModal');
|
||
document.getElementById('importGFormModal')?.remove();
|
||
if (typeof loadSurveys === 'function') loadSurveys();
|
||
if (typeof loadTeacherSurveys === 'function') loadTeacherSurveys();
|
||
} else {
|
||
const fileInput = document.getElementById('googleFormJsonFile');
|
||
const jsonText = document.getElementById('googleFormJsonText')?.value?.trim();
|
||
|
||
let surveyData = null;
|
||
|
||
if (fileInput && fileInput.files.length > 0) {
|
||
const text = await fileInput.files[0].text();
|
||
surveyData = JSON.parse(text);
|
||
} else if (jsonText) {
|
||
surveyData = JSON.parse(jsonText);
|
||
}
|
||
|
||
if (!surveyData) {
|
||
Toast.warning('กรุณาเลือกไฟล์ JSON หรือระบุข้อความ JSON');
|
||
if (btn) { btn.disabled = false; btn.textContent = '📥 นำเข้าแบบสอบถาม'; }
|
||
return;
|
||
}
|
||
|
||
const res = await API.post('import_google_form.php?action=importFromJson', { survey_data: surveyData });
|
||
Toast.success(res.message || 'นำเข้าแบบสอบถามสำเร็จ!');
|
||
Modal.hide('importGFormModal');
|
||
document.getElementById('importGFormModal')?.remove();
|
||
if (typeof loadSurveys === 'function') loadSurveys();
|
||
if (typeof loadTeacherSurveys === 'function') loadTeacherSurveys();
|
||
}
|
||
} catch (err) {
|
||
Toast.error(err.message || 'เกิดข้อผิดพลาดในการนำเข้าแบบสอบถาม');
|
||
} finally {
|
||
if (btn) {
|
||
btn.disabled = false;
|
||
btn.textContent = '📥 นำเข้าแบบสอบถาม';
|
||
}
|
||
}
|
||
}
|
||
|
||
function showImportResponsesModal(surveyId, surveyTitle) {
|
||
const html = `
|
||
<form id="importRespForm">
|
||
<input type="hidden" name="survey_id" value="${surveyId}">
|
||
<div class="form-group">
|
||
<label class="form-label">แบบสอบถาม:</label>
|
||
<div style="font-weight:600;font-size:15px;color:var(--navy-600);">${escapeHtml(surveyTitle)}</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">เลือกไฟล์ CSV ข้อมูลคำตอบจาก Google Forms *</label>
|
||
<input type="file" class="form-input" name="csv_file" accept=".csv" required>
|
||
<small class="text-muted mt-8" style="display:block;">ไฟล์ .csv ที่ Export มาจาก Google Sheets / Google Forms (แถวแรกเป็นชื่อคำถาม)</small>
|
||
</div>
|
||
</form>
|
||
`;
|
||
const footer = `
|
||
<button class="btn btn-secondary" onclick="Modal.hide('importRespModal');document.getElementById('importRespModal')?.remove();">ยกเลิก</button>
|
||
<button class="btn btn-primary" id="btnSubmitImportResp" onclick="submitImportResponses(${surveyId})">📥 นำเข้าคำตอบลงระบบ</button>
|
||
`;
|
||
const modalId = Modal.create('📥 นำเข้าคำตอบจาก Google Forms (CSV)', html, footer);
|
||
const modalEl = document.getElementById(modalId);
|
||
if (modalEl) modalEl.id = 'importRespModal';
|
||
}
|
||
|
||
async function submitImportResponses(surveyId) {
|
||
const form = document.getElementById('importRespForm');
|
||
const fileInput = form?.querySelector('input[name="csv_file"]');
|
||
if (!fileInput || fileInput.files.length === 0) {
|
||
Toast.warning('กรุณาเลือกไฟล์ CSV คำตอบ');
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('btnSubmitImportResp');
|
||
if (btn) {
|
||
btn.disabled = true;
|
||
btn.textContent = '⏳ กำลังนำเข้าคำตอบ...';
|
||
}
|
||
|
||
const fd = new FormData(form);
|
||
|
||
try {
|
||
const res = await API.upload('import_responses.php', fd);
|
||
Toast.success(res.message || 'นำเข้าคำตอบสำเร็จ!');
|
||
Modal.hide('importRespModal');
|
||
document.getElementById('importRespModal')?.remove();
|
||
if (typeof loadSurveys === 'function') loadSurveys();
|
||
if (typeof loadTeacherSurveys === 'function') loadTeacherSurveys();
|
||
} catch (err) {
|
||
Toast.error(err.message || 'เกิดข้อผิดพลาดในการนำเข้าคำตอบ');
|
||
} finally {
|
||
if (btn) {
|
||
btn.disabled = false;
|
||
btn.textContent = '📥 นำเข้าคำตอบลงระบบ';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Global Window bindings
|
||
window.showImportGoogleFormModal = showImportGoogleFormModal;
|
||
window.switchImportTab = switchImportTab;
|
||
window.submitImportGoogleForm = submitImportGoogleForm;
|
||
window.showImportResponsesModal = showImportResponsesModal;
|
||
window.submitImportResponses = submitImportResponses;
|
||
|
||
document.addEventListener('DOMContentLoaded', initTeacher);
|