Merge pull request #5 from knktc/bugfix-copy-button-not-working

Bugfix copy button not working

Author: knktc

.gitignore

@@ -30,7 +30,10 @@ __debug_*
 
 # Editor/IDE
 # .idea/
-# .vscode/
+.vscode/
+
+# Build output
+tiny-requestbin
 
 # macos
 .DS_Store

templates/main.tmpl

@@ -344,7 +344,7 @@
                                 li.className = `request-link block p-4 hover:bg-gray-50 ${currentViewId == request.ID ? 'bg-indigo-50 border-l-4 border-indigo-500' : ''}`;
 
                                 const methodColor = getMethodColor(request.Method);
-                                const timestamp = new Date(request.Timestamp).toLocaleString();
+                                const timestamp = formatTime(request.Timestamp);
 
                                 li.innerHTML = `
                                     <div class="flex justify-between items-center mb-1">
@@ -393,6 +393,18 @@
                 }
             }
 
+            // Helper function to format time in the same format as server-side formatTime
+            function formatTime(dateString) {
+                const date = new Date(dateString);
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+                const hours = String(date.getHours()).padStart(2, '0');
+                const minutes = String(date.getMinutes()).padStart(2, '0');
+                const seconds = String(date.getSeconds()).padStart(2, '0');
+                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+            }
+
             // Pagination button event listeners
             prevPageBtn.addEventListener('click', () => {
                 if (currentPage > 1) {
@@ -534,6 +546,73 @@
                     setCollapsedState(initiallyCollapsed, true);
                 }
             });
+
+            // --- Copy button functionality ---
+            const copyBodyBtn = document.getElementById('copy-body-btn');
+            if (copyBodyBtn) {
+                copyBodyBtn.addEventListener('click', async () => {
+                    const bodyText = document.getElementById('body-text');
+                    if (bodyText) {
+                        try {
+                            // Get the text content without HTML tags
+                            const textToCopy = bodyText.textContent || bodyText.innerText;
+                            
+                            // Use the modern clipboard API if available
+                            if (navigator.clipboard && window.isSecureContext) {
+                                await navigator.clipboard.writeText(textToCopy);
+                            } else {
+                                // Fallback for older browsers or non-HTTPS contexts
+                                const textArea = document.createElement('textarea');
+                                textArea.value = textToCopy;
+                                textArea.style.position = 'fixed';
+                                textArea.style.opacity = '0';
+                                document.body.appendChild(textArea);
+                                textArea.focus();
+                                textArea.select();
+                                document.execCommand('copy');
+                                document.body.removeChild(textArea);
+                            }
+                            
+                            // Visual feedback
+                            const originalContent = copyBodyBtn.innerHTML;
+                            copyBodyBtn.innerHTML = `
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <span data-i18n="copied">${translations[currentLang]['copied']}</span>
+                            `;
+                            copyBodyBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+                            copyBodyBtn.classList.add('bg-green-600', 'hover:bg-green-700');
+                            
+                            // Reset after 2 seconds
+                            setTimeout(() => {
+                                copyBodyBtn.innerHTML = originalContent;
+                                copyBodyBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
+                                copyBodyBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                            }, 2000);
+                            
+                        } catch (err) {
+                            console.error('Failed to copy text: ', err);
+                            // Show error feedback
+                            const originalContent = copyBodyBtn.innerHTML;
+                            copyBodyBtn.innerHTML = `
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                                <span>失败</span>
+                            `;
+                            copyBodyBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+                            copyBodyBtn.classList.add('bg-red-600', 'hover:bg-red-700');
+                            
+                            setTimeout(() => {
+                                copyBodyBtn.innerHTML = originalContent;
+                                copyBodyBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
+                                copyBodyBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                            }, 2000);
+                        }
+                    }
+                });
+            }
         });
     </script>
 </body>