From a90e4ea41f3f92bf3f37b58185b64f51476237b9 Mon Sep 17 00:00:00 2001 From: kevinlee-06 Date: Tue, 21 Jan 2025 22:54:37 +0800 Subject: [PATCH] Refactor response handling. --- public/index.html | 15 ++++++++++---- public/scripts/delete.js | 6 +++--- public/scripts/i18n.js | 42 +++++++++++++++++++++++----------------- public/scripts/post.js | 4 ++-- public/styles.css | 7 ++----- 5 files changed, 42 insertions(+), 32 deletions(-) diff --git a/public/index.html b/public/index.html index aabf8de..d88ecb8 100644 --- a/public/index.html +++ b/public/index.html @@ -46,15 +46,18 @@

Delete Short URL

- Response: + Response

- 

+        

+            
+            


+        

         

             
-            


+            


             
             
 
@@ -89,6 +92,10 @@ 

     
     
-    
+    
 
 
diff --git a/public/scripts/delete.js b/public/scripts/delete.js
index ab2c1a6..a93aa5a 100644
--- a/public/scripts/delete.js
+++ b/public/scripts/delete.js
@@ -19,16 +19,16 @@ document.getElementById('deleteForm').addEventListener('submit', function(event)
     })
     .then(response => {
         if (!response.ok) {
-            throw new Error('Network response was not ok: ' + response.statusText);
+            throw new Error(response.statusText);
         }
         return response.text();
     })
     .then(message => {
-        document.getElementById('responseMessage').textContent = message;
+        document.getElementById('responseMessage').value = message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     })
     .catch(error => {
-        document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+        document.getElementById('responseMessage').value = 'Error: ' + error.message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
\ No newline at end of file
diff --git a/public/scripts/i18n.js b/public/scripts/i18n.js
index 4c7dc6c..d2872ed 100644
--- a/public/scripts/i18n.js
+++ b/public/scripts/i18n.js
@@ -23,6 +23,7 @@ const translations = {
         "theme-tailwind": "Tailwind",
         "language-label": "語言：",
         "shortened-url": "Shortened URL:",
+        "responseMessage": "Response Message",
     },
     "zh-TW": {
         "title": "Linklie - 短網址",
@@ -36,7 +37,7 @@ const translations = {
         "delete-id-label": "識別碼：",
         "delete-password-label": "密碼：",
         "delete-button": "刪除短網址",
-        "response-title": "回應：",
+        "response-title": "回應",
         "response-tips": "[提示]",
         "theme-label": "選擇主題：",
         "theme-orange": "橙色",
@@ -48,26 +49,31 @@ const translations = {
         "theme-tailwind": "Tailwind",
         "language-label": "Language:",
         "shortened-url": "短網址：",
+        "responseMessage": "回應訊息",
     }
 };
 
-const languageSelector = document.getElementById('language');
-const elementsToTranslate = document.querySelectorAll('[data-i18n]');
+document.addEventListener('DOMContentLoaded', () => {
+    const languageSelector = document.getElementById('language');
+    const elementsToTranslate = document.querySelectorAll('[data-i18n]');
 
-function translatePage(lang) {
-    elementsToTranslate.forEach(el => {
-        const key = el.getAttribute('data-i18n');
-        if (translations[lang][key]) {
-            if (el.tagName === 'TITLE') {
-                document.title = translations[lang][key];
-            } else {
-                el.textContent = translations[lang][key];
+    // Define the translatePage function in the global scope
+    window.translatePage = function(lang) {
+        elementsToTranslate.forEach(el => {
+            const key = el.getAttribute('data-i18n');
+            if (translations[lang][key]) {
+                if (el.tagName === 'TITLE') {
+                    document.title = translations[lang][key];
+                } else {
+                    el.textContent = translations[lang][key];
+                }
             }
-        }
-    });
-}
+        });
+    };
 
-languageSelector.addEventListener('change', (event) => {
-    const selectedLanguage = event.target.value;
-    translatePage(selectedLanguage);
-});
\ No newline at end of file
+    // Add event listener for language selection
+    languageSelector.addEventListener('change', (event) => {
+        const selectedLanguage = event.target.value;
+        translatePage(selectedLanguage); // Call the function here
+    });
+});
diff --git a/public/scripts/post.js b/public/scripts/post.js
index f10a86b..d3ae27d 100644
--- a/public/scripts/post.js
+++ b/public/scripts/post.js
@@ -28,14 +28,14 @@ document.getElementById('postForm').addEventListener('submit', function(event) {
         return response.json();
     })
     .then(data => {
-        document.getElementById('responseMessage').textContent = JSON.stringify(data, null, 2);
+        document.getElementById('responseMessage').value = JSON.stringify(data, null, 2);
         const host = window.location.host;
         const protocol = window.location.protocol;
         document.getElementById('shortenedUrl').value = `${protocol}//${host}/${data.id}`;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     })
     .catch(error => {
-        document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+        document.getElementById('responseMessage').value = 'Error: ' + error.message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index ff0bc1d..7781d90 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -40,7 +40,7 @@ label {
   margin-bottom: 15px;
 }
 
-input {
+input, textarea {
   width: 100%;
   padding: 10px; 
   box-sizing: border-box;
@@ -48,6 +48,7 @@ input {
   border-radius: 5px;
   transition: border-color 0.3s;
   background-color: var(--container-background);
+  resize: none;
 }
 
 input:focus {
@@ -90,8 +91,4 @@ h2, #responseMessage, input {
 
 .language-selector, .theme-selector {
   margin-bottom: 20px;
-}
-
-input[readonly] {
-  cursor: copy;
 }
\ No newline at end of file