Initial commit

static/js/add_user.js

@@ -0,0 +1,141 @@
+// API 基礎 URL
+const API_BASE_URL = '/v1/users';
+
+// DOM 元素
+const addUserForm = document.getElementById('add-user-form');
+const nameInput = document.getElementById('name');
+const emailInput = document.getElementById('email');
+const ageInput = document.getElementById('age');
+const saveBtn = document.getElementById('save-btn');
+const resetBtn = document.getElementById('reset-btn');
+const cancelBtn = document.getElementById('cancel-btn');
+const messageDiv = document.getElementById('message');
+const importForm = document.getElementById('import-form');
+const importFileInput = document.getElementById('import-file');
+
+// 頁面載入時設置事件監聽器
+document.addEventListener('DOMContentLoaded', () => {
+    setupEventListeners();
+});
+
+// 設置事件監聽器
+function setupEventListeners() {
+    // 表單提交事件
+    addUserForm.addEventListener('submit', handleFormSubmit);
+    
+    // 重置按鈕事件
+    resetBtn.addEventListener('click', resetForm);
+    
+    // 取消按鈕事件
+    cancelBtn.addEventListener('click', () => {
+        window.location.href = 'index.html';
+    });
+    
+    // 檔案匯入表單提交事件
+    importForm.addEventListener('submit', handleImportSubmit);
+}
+
+// 處理表單提交
+async function handleFormSubmit(event) {
+    event.preventDefault();
+    
+    const userData = {
+        name: nameInput.value.trim(),
+        email: emailInput.value.trim(),
+        age: parseInt(ageInput.value)
+    };
+    
+    try {
+        const response = await fetch(API_BASE_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        });
+        
+        const result = await response.json();
+        
+        if (result.status === 'success') {
+            showMessage('用戶創建成功', 'success');
+            resetForm();
+            
+            // 延遲後跳轉回用戶列表頁面
+            setTimeout(() => {
+                window.location.href = 'index.html';
+            }, 2000);
+        } else {
+            showMessage(result.message, 'error');
+        }
+    } catch (error) {
+        console.error('保存用戶失敗:', error);
+        showMessage('保存用戶失敗', 'error');
+    }
+}
+
+// 重置表單
+function resetForm() {
+    addUserForm.reset();
+}
+
+// 顯示訊息
+function showMessage(message, type) {
+    messageDiv.textContent = message;
+    messageDiv.className = `message ${type}`;
+    
+    // 5 秒後自動隱藏訊息
+    setTimeout(() => {
+        messageDiv.className = 'message';
+    }, 5000);
+}
+
+// 處理檔案匯入
+async function handleImportSubmit(event) {
+    event.preventDefault();
+    
+    if (!importFileInput.files || importFileInput.files.length === 0) {
+        showMessage('請選擇檔案', 'error');
+        return;
+    }
+    
+    const file = importFileInput.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    try {
+        showMessage('正在匯入資料，請稍候...');
+        
+        const response = await fetch(`${API_BASE_URL}/import`, {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        
+        if (result.status === 'success') {
+            // 顯示匯入結果
+            const successCount = result.data.success_count;
+            const errorCount = result.data.error_count;
+            let message = `匯入成功: ${successCount} 筆資料`;
+            
+            if (errorCount > 0) {
+                message += `, 失敗: ${errorCount} 筆資料`;
+            }
+            
+            showMessage(message, 'success');
+            
+            // 重置表單
+            importForm.reset();
+            
+            // 延遲後跳轉回用戶列表頁面
+            setTimeout(() => {
+                window.location.href = 'index.html';
+            }, 3000);
+        } else {
+            showMessage(`匯入失敗: ${result.message}`, 'error');
+        }
+    } catch (error) {
+        console.error('匯入錯誤:', error);
+        showMessage('匯入過程中發生錯誤，請稍後再試', 'error');
+    }
+}