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

edit.html

@@ -2,7 +2,7 @@
 <html lang="th">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>แก้ไขแบบสอบถาม - TPU Survey</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -26,79 +26,160 @@
     </script>
     <link rel="stylesheet" href="css/style.css?v=6">
     <style>
-        body { background-color: var(--bg-color); font-family: 'Noto Sans Thai', sans-serif; }
-        .editor-container {
-            max-width: 1000px;
-            margin: 0 auto;
-            padding: 100px 20px 60px;
+        * { box-sizing: border-box; }
+        body { 
+            background-color: #f8fafc; 
+            font-family: 'Noto Sans Thai', sans-serif; 
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
         }
         .editor-header {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
-            height: var(--header-height);
-            background: rgba(255, 255, 255, 0.95);
+            min-height: 64px;
+            background: rgba(255, 255, 255, 0.98);
             backdrop-filter: blur(12px);
             border-bottom: 3px solid #fbbf24;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 0 40px;
+            padding: 8px 20px;
             z-index: 1000;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+            gap: 12px;
         }
         .editor-title {
-            font-size: 1.25rem;
+            font-size: 1.1rem;
             font-weight: 800;
             color: #1e3a8a;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 50%;
+            max-width: 450px;
+        }
+        .editor-container {
+            max-width: 1000px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 84px 16px 120px;
         }
         .editor-actions {
             display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+        .sticky-bottom-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(12px);
+            border-top: 1px solid #e2e8f0;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            z-index: 999;
+            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
             gap: 12px;
         }
-        .section-category-badge {
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-weight: 700;
-            margin-bottom: 8px;
-            display: inline-block;
+        .dirty-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.8rem;
+            color: #d97706;
+            font-weight: 600;
+        }
+        @media (max-width: 768px) {
+            .editor-header {
+                padding: 8px 12px;
+            }
+            .editor-title {
+                max-width: 160px;
+                font-size: 0.95rem;
+            }
+            .editor-container {
+                padding: 76px 10px 140px;
+            }
+            .editor-actions .btn-preview-text {
+                display: none;
+            }
+            .sticky-bottom-bar {
+                flex-direction: column;
+                gap: 8px;
+                padding: 10px 14px;
+            }
+            .sticky-bottom-bar .bottom-actions {
+                width: 100%;
+                display: flex;
+                gap: 8px;
+            }
+            .sticky-bottom-bar .bottom-actions button {
+                flex: 1;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Top Header -->
     <header class="editor-header">
-        <div class="d-flex items-center gap-16">
-            <button class="btn btn-ghost btn-sm" onclick="closeEditor()">✕ ปิด</button>
+        <div class="flex items-center gap-3 overflow-hidden">
+            <button class="btn btn-ghost btn-sm text-slate-600 hover:text-slate-900" onclick="closeEditor()" title="ปิดหน้าแก้ไข">
+                <i class="fas fa-times"></i> <span class="hidden sm:inline">ปิด</span>
+            </button>
             <div class="editor-title" id="surveyTitleDisplay">กำลังโหลด...</div>
         </div>
         <div class="editor-actions">
-            <button class="btn btn-ghost" onclick="previewSurvey()">👁️ พรีวิว</button>
-            <button class="btn btn-primary" onclick="saveSurvey()">💾 บันทึกการเปลี่ยนแปลง</button>
+            <button class="btn btn-ghost btn-sm text-blue-600 hover:bg-blue-50 font-bold border border-blue-200" onclick="previewSurvey()">
+                👁️ <span class="btn-preview-text">พรีวิว</span>
+            </button>
+            <button id="saveSurveyBtnTop" class="btn btn-primary btn-sm font-bold shadow-md bg-blue-600 hover:bg-blue-700 text-white" onclick="saveSurvey()">
+                💾 บันทึกการแก้ไข
+            </button>
         </div>
     </header>
 
+    <!-- Main Content -->
     <main class="editor-container">
         <div id="editorContent">
-            <div class="loading" style="padding: 100px 0;">
+            <div class="loading" style="padding: 100px 0; text-align:center;">
                 <div class="spinner"></div>
-                <p>กำลังโหลดข้อมูลแบบสอบถาม...</p>
+                <p class="text-slate-500 mt-4 font-bold">กำลังโหลดข้อมูลแบบสอบถาม...</p>
             </div>
         </div>
         
-        <div class="text-center mt-40">
-            <button class="btn btn-secondary" onclick="addSection()">➕ เพิ่มโพลล์ส่วนใหม่</button>
+        <div class="text-center mt-32 mb-40">
+            <button class="btn btn-secondary font-bold px-6 py-3 shadow-sm hover:shadow" onclick="addSection()">
+                ➕ เพิ่มส่วนแบบสอบถามใหม่
+            </button>
         </div>
     </main>
 
-    <script src="js/app.js?v=5"></script>
-    <script src="js/editor.js?v=5"></script>
+    <!-- Sticky Bottom Bar -->
+    <div class="sticky-bottom-bar">
+        <div class="flex items-center gap-4">
+            <span id="saveStatusIndicator" class="dirty-badge" style="display:none;">
+                <span class="w-2.5 h-2.5 rounded-full bg-amber-500 animate-pulse"></span>
+                มีการแก้ไขที่ยังไม่ได้บันทึก (กด Ctrl+S เพื่อบันทึก)
+            </span>
+        </div>
+        <div class="bottom-actions flex items-center gap-3">
+            <button class="btn btn-secondary font-bold text-sm px-4 py-2" onclick="previewSurvey()">
+                👁️ พรีวิวแบบสอบถาม
+            </button>
+            <button id="saveSurveyBtnBottom" class="btn btn-primary font-bold text-sm px-6 py-2.5 shadow-lg bg-blue-600 hover:bg-blue-700 text-white" onclick="saveSurvey()">
+                💾 บันทึกการเปลี่ยนแปลง
+            </button>
+        </div>
+    </div>
+
+    <script src="js/app.js?v=6"></script>
+    <script src="js/editor.js?v=6"></script>
 </body>
 </html>

js/editor.js

@@ -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) {