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

Make edit.html responsive with sticky action bar, Ctrl+S shortcut, and safe save handlers

Browse Source
This commit is contained in:
pongpon pitisuk
2026-09-12 15:12:32 +07:00
parent 0e09259c9d
commit 1609078a9c
2 changed files with 169 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/editor.js
+57 -24
View File
@@ -346,26 +346,32 @@ function toggleOptions(select) {
async function saveSurvey() {
if (!currentSurvey) return;
const title = document.getElementById('edit-survey-title').value;
const description = document.getElementById('edit-survey-desc').value;
const hasCertificate = document.getElementById('edit-survey-cert').checked ? 1 : 0;
const titleEl = document.getElementById('edit-survey-title');
const title = titleEl ? titleEl.value.trim() : currentSurvey.title;
if (!title) {
Toast.error('กรุณาระบุชื่อแบบสอบถาม');
return;
}
const description = document.getElementById('edit-survey-desc')?.value || '';
const hasCertificate = document.getElementById('edit-survey-cert')?.checked ? 1 : 0;
const sections = [];
document.querySelectorAll('[data-section]').forEach((sectionEl, si) => {
const sTitle = sectionEl.querySelector('.section-title-input')?.value || `ส่วนที่ ${si+1}`;
const sTitle = sectionEl.querySelector('.section-title-input')?.value?.trim() || `ส่วนที่ ${si+1}`;
const sCategory = sectionEl.querySelector('.section-category-select')?.value || 'rating';
// Collect headings and their questions
const headings = [];
sectionEl.querySelectorAll('.heading-block').forEach((headingEl, hi) => {
const hTitle = headingEl.querySelector('.heading-title-input')?.value || '';
const hDesc = headingEl.querySelector('.heading-desc-input')?.value || '';
const hTitle = headingEl.querySelector('.heading-title-input')?.value?.trim() || '';
const hDesc = headingEl.querySelector('.heading-desc-input')?.value?.trim() || '';
const hQuestions = collectQuestions(headingEl.querySelector('.heading-questions-list'));
if (hTitle.trim()) {
if (hTitle) {
headings.push({
title: hTitle.trim(),
description: hDesc.trim() || null,
title: hTitle,
description: hDesc || null,
order_num: hi,
questions: hQuestions
});
@@ -384,14 +390,22 @@ async function saveSurvey() {
});
});
const setSaveButtonsLoading = (loading) => {
const btns = [document.getElementById('saveSurveyBtnTop'), document.getElementById('saveSurveyBtnBottom')];
btns.forEach(btn => {
if (btn) {
btn.disabled = loading;
btn.innerHTML = loading ? '<i class="fas fa-spinner fa-spin"></i> กำลังบันทึก...' : '💾 บันทึกการเปลี่ยนแปลง';
}
});
};
try {
const btn = document.querySelector('.btn-primary');
btn.disabled = true;
btn.textContent = '⌛ กำลังบันทึก...';
setSaveButtonsLoading(true);
const certificateTemplate = document.getElementById('edit-survey-cert-template-path').value || null;
const certNameY = parseFloat(document.getElementById('edit-survey-cert-name-y').value || 82.5);
const certCodeY = parseFloat(document.getElementById('edit-survey-cert-code-y').value || 190.5);
const certificateTemplate = document.getElementById('edit-survey-cert-template-path')?.value || null;
const certNameY = parseFloat(document.getElementById('edit-survey-cert-name-y')?.value || 82.5);
const certCodeY = parseFloat(document.getElementById('edit-survey-cert-code-y')?.value || 190.5);
await API.post('surveys.php?action=update', {
id: currentSurvey.id,
@@ -404,21 +418,25 @@ async function saveSurvey() {
sections
});
Toast.success('บันทึกสำเร็จ');
Toast.success('บันทึกการแก้ไขเรียบร้อยแล้ว');
isDirty = false;
const dirtyIndicator = document.getElementById('saveStatusIndicator');
if (dirtyIndicator) dirtyIndicator.style.display = 'none';
// Update survey title display in header
const headerTitleEl = document.getElementById('surveyTitleDisplay');
if (headerTitleEl) headerTitleEl.textContent = title;
} catch (err) {
Toast.error(err.message);
Toast.error(err.message || 'บันทึกล้มเหลว');
} finally {
const btn = document.querySelector('.btn-primary');
btn.disabled = false;
btn.textContent = '💾 บันทึกการเปลี่ยนแปลง';
setSaveButtonsLoading(false);
}
}
function collectQuestions(container) {
if (!container) return [];
const questions = [];
container.querySelectorAll(':scope > .question-builder').forEach((qEl, qi) => {
container.querySelectorAll('.question-builder').forEach((qEl, qi) => {
const qText = qEl.querySelector('.q-text-input')?.value || '';
const qDescription = qEl.querySelector('.q-desc-input')?.value || '';
const qType = qEl.querySelector('.q-type-select')?.value || 'radio';
@@ -440,24 +458,39 @@ function collectQuestions(container) {
}
/* ============================================================
UTILITY FUNCTIONS
UTILITY FUNCTIONS & SHORTCUTS
============================================================ */
function markDirty() {
isDirty = true;
const dirtyIndicator = document.getElementById('saveStatusIndicator');
if (dirtyIndicator) dirtyIndicator.style.display = 'inline-flex';
}
function closeEditor() {
if (isDirty) {
if (!confirm('มีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก ยืนยันปิดหรือไม่?')) return;
}
window.close();
if (window.history.length > 1) {
window.history.back();
} else {
window.close();
}
}
function previewSurvey() {
if (!currentSurvey) return;
window.open(`respond.php?link=${currentSurvey.unique_link}`, '_blank');
const basePath = window.location.pathname.includes('/survey') ? '/survey' : '';
window.open(`${basePath}/respond.php?link=${currentSurvey.unique_link}`, '_blank');
}
// Keyboard shortcut: Ctrl+S / Cmd+S to save
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
saveSurvey();
}
});
// Warn before leave if dirty
window.addEventListener('beforeunload', (e) => {
if (isDirty) {