141 lines
4.1 KiB
JavaScript
141 lines
4.1 KiB
JavaScript
// 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');
|
|
}
|
|
} |