6 changed files with 1282 additions and 375 deletions
@ -0,0 +1,714 @@ |
|||
document.addEventListener('DOMContentLoaded', function () { |
|||
var currentUserName = document.getElementById('currentUserName'); |
|||
var logoutBtn = document.getElementById('logoutBtn'); |
|||
var sidebarNav = document.getElementById('sidebarNav'); |
|||
var sectionTitle = document.getElementById('sectionTitle'); |
|||
var sectionDesc = document.getElementById('sectionDesc'); |
|||
var subTabs = document.getElementById('subTabs'); |
|||
var mainView = document.getElementById('mainView'); |
|||
|
|||
var state = { |
|||
user: null, |
|||
currentView: '', |
|||
currentTab: 'all', |
|||
events: [], |
|||
myEvents: [], |
|||
adminUsers: [], |
|||
adminRegistrations: [], |
|||
adminEvents: [], |
|||
editingEventId: null |
|||
}; |
|||
|
|||
var genderOptions = ['男', '女']; |
|||
var collegeOptions = [ |
|||
'文学院与文化传播学院', |
|||
'马克思主义学院', |
|||
'教育学院', |
|||
'外国语学院', |
|||
'历史文化学院', |
|||
'商学院', |
|||
'化学工程与技术学院', |
|||
'电子信息与电气工程学院', |
|||
'数学与统计学院', |
|||
'生物工程与技术学院', |
|||
'机电工程学院', |
|||
'土木工程学院', |
|||
'资源与环境工程学院', |
|||
'体育学院', |
|||
'美术与设计学院', |
|||
'音乐舞蹈学院', |
|||
'卫生健康学院', |
|||
'继续教育学院（培训中心）' |
|||
]; |
|||
var categoryOptions = ['青年组', '老年组']; |
|||
|
|||
var studentMenus = [ |
|||
{ key: 'profile', label: '个人信息', desc: '查看并修改个人信息。' }, |
|||
{ key: 'events', label: '运动会报名', desc: '查看项目、报名和取消报名。' } |
|||
]; |
|||
|
|||
var adminMenus = [ |
|||
{ key: 'admin-home', label: '运动会管理', desc: '查看系统概览。' }, |
|||
{ key: 'team-info', label: '团体信息管理', desc: '管理学院、班级等团体信息。' }, |
|||
{ key: 'user-manage', label: '用户信息管理', desc: '管理用户资料、权限和状态。' }, |
|||
{ key: 'event-manage', label: '项目管理', desc: '新增、编辑和删除比赛项目。' }, |
|||
{ key: 'athlete-manage', label: '参赛运动员管理', desc: '查看所有已报名人员和项目。' }, |
|||
{ key: 'score-manage', label: '参赛成绩管理', desc: '录入和维护成绩。' }, |
|||
{ key: 'record-manage', label: '项目记录管理', desc: '维护项目记录和赛事资料。' }, |
|||
{ key: 'system-manage', label: '系统管理', desc: '维护系统配置。' } |
|||
]; |
|||
|
|||
function escapeHtml(value) { |
|||
return String(value == null ? '' : value) |
|||
.replace(/&/g, '&') |
|||
.replace(/</g, '<') |
|||
.replace(/>/g, '>') |
|||
.replace(/"/g, '"') |
|||
.replace(/'/g, '''); |
|||
} |
|||
|
|||
function getMenus() { |
|||
return state.user && state.user.role === 'ADMIN' ? adminMenus : studentMenus; |
|||
} |
|||
|
|||
function getMeta(viewKey) { |
|||
var menu = getMenus().find(function (item) { |
|||
return item.key === viewKey; |
|||
}); |
|||
return menu || { label: '系统首页', desc: '欢迎进入运动会报名系统。' }; |
|||
} |
|||
|
|||
function renderSidebar() { |
|||
sidebarNav.innerHTML = getMenus().map(function (item) { |
|||
return '<button class="nav-item ' + (item.key === state.currentView ? 'active' : '') + '" data-view="' + item.key + '">' + item.label + '</button>'; |
|||
}).join(''); |
|||
|
|||
Array.prototype.slice.call(sidebarNav.querySelectorAll('.nav-item')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
switchView(button.getAttribute('data-view')); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function renderTabs() { |
|||
if (state.currentView !== 'events') { |
|||
subTabs.innerHTML = ''; |
|||
subTabs.classList.add('hidden'); |
|||
return; |
|||
} |
|||
|
|||
subTabs.innerHTML = '' |
|||
+ '<button class="tab-item ' + (state.currentTab === 'all' ? 'active' : '') + '" data-tab="all">报名</button>' |
|||
+ '<button class="tab-item ' + (state.currentTab === 'mine' ? 'active' : '') + '" data-tab="mine">报名信息</button>'; |
|||
subTabs.classList.remove('hidden'); |
|||
|
|||
Array.prototype.slice.call(subTabs.querySelectorAll('.tab-item')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
state.currentTab = button.getAttribute('data-tab'); |
|||
renderTabs(); |
|||
renderCurrentView(); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function renderProfile() { |
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>基础资料</h3><p class="info-meta">当前账号信息如下。</p></div></div>' |
|||
+ ' <div class="profile-grid">' |
|||
+ infoCard('身份证号', state.user.idCard) |
|||
+ infoCard('登录账号', state.user.username) |
|||
+ infoCard('姓名', state.user.name) |
|||
+ infoCard('联系电话', state.user.phone) |
|||
+ infoCard('性别', state.user.gender) |
|||
+ infoCard('学院', state.user.college) |
|||
+ infoCard('班级', state.user.className) |
|||
+ infoCard('学号', state.user.studentNo) |
|||
+ infoCard('类别', state.user.category) |
|||
+ infoCard('角色', state.user.role) |
|||
+ ' </div>' |
|||
+ '</div>' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>修改个人信息</h3><p class="info-meta">可在此更新姓名、电话、学院、班级、学号等信息。</p></div></div>' |
|||
+ ' <form id="profileForm" class="form-grid two-columns">' |
|||
+ fieldInput('姓名', 'name', state.user.name, '请输入姓名') |
|||
+ fieldInput('联系电话', 'phone', state.user.phone, '请输入电话') |
|||
+ fieldSelect('性别', 'gender', state.user.gender, genderOptions, '请选择性别') |
|||
+ fieldSelect('学院', 'college', state.user.college, collegeOptions, '请选择学院') |
|||
+ fieldInput('班级', 'className', state.user.className, '请输入班级') |
|||
+ fieldInput('学号', 'studentNo', state.user.studentNo, '请输入学号') |
|||
+ fieldSelect('类别', 'category', state.user.category, categoryOptions, '请选择类别', true) |
|||
+ ' <div class="form-actions full-row">' |
|||
+ ' <button type="submit" class="primary-btn">保存修改</button>' |
|||
+ ' </div>' |
|||
+ ' <p id="profileMessage" class="form-message full-row"></p>' |
|||
+ ' </form>' |
|||
+ '</div>'; |
|||
|
|||
var form = document.getElementById('profileForm'); |
|||
var messageEl = document.getElementById('profileMessage'); |
|||
form.addEventListener('submit', function (event) { |
|||
event.preventDefault(); |
|||
var formData = new FormData(form); |
|||
appUtils.ajax({ |
|||
method: 'PUT', |
|||
url: '/api/users/me', |
|||
data: { |
|||
name: String(formData.get('name') || '').trim(), |
|||
phone: String(formData.get('phone') || '').trim(), |
|||
gender: String(formData.get('gender') || '').trim(), |
|||
college: String(formData.get('college') || '').trim(), |
|||
className: String(formData.get('className') || '').trim(), |
|||
studentNo: String(formData.get('studentNo') || '').trim(), |
|||
category: String(formData.get('category') || '').trim() |
|||
}, |
|||
success: function (response) { |
|||
if (!response.success || !response.data) { |
|||
appUtils.showMessage(messageEl, response.message || '保存失败', false); |
|||
return; |
|||
} |
|||
state.user = response.data; |
|||
updateCurrentUserName(); |
|||
renderProfile(); |
|||
appUtils.showMessage(document.getElementById('profileMessage'), '个人信息修改成功', true); |
|||
}, |
|||
error: function (xhr, response) { |
|||
appUtils.showMessage(messageEl, (response && response.message) || '保存失败', false); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function renderEventTable(list, isMine) { |
|||
if (!list.length) { |
|||
mainView.innerHTML = '<div class="empty-state"><h3>暂无数据</h3><p>' + (isMine ? '你还没有报名任何项目。' : '当前暂无可展示项目。') + '</p></div>'; |
|||
return; |
|||
} |
|||
|
|||
mainView.innerHTML = '' |
|||
+ '<table class="event-table">' |
|||
+ ' <thead><tr><th>项目名称</th><th>项目分类</th><th>比赛时间</th><th>比赛地点</th><th>报名情况</th><th>项目说明</th><th>操作</th></tr></thead>' |
|||
+ ' <tbody>' |
|||
+ list.map(function (item) { |
|||
var buttonHtml = isMine |
|||
? '<button class="action-btn cancel-btn" data-id="' + item.id + '">取消报名</button>' |
|||
: '<button class="action-btn register-btn" data-id="' + item.id + '"' + (item.registered ? ' disabled' : '') + '>' + (item.registered ? '已报名' : '报名') + '</button>'; |
|||
return '<tr>' |
|||
+ '<td>' + escapeHtml(item.eventName) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventCategory) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventTime) + '</td>' |
|||
+ '<td>' + escapeHtml(item.location) + '</td>' |
|||
+ '<td>' + escapeHtml((item.registeredCount || 0) + '/' + (item.quota || 0)) + '</td>' |
|||
+ '<td>' + escapeHtml(item.description) + '</td>' |
|||
+ '<td>' + buttonHtml + '</td>' |
|||
+ '</tr>'; |
|||
}).join('') |
|||
+ ' </tbody>' |
|||
+ '</table>'; |
|||
|
|||
Array.prototype.slice.call(document.querySelectorAll('.register-btn')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
var eventId = button.getAttribute('data-id'); |
|||
appUtils.ajax({ |
|||
method: 'POST', |
|||
url: '/api/events/' + eventId + '/register', |
|||
success: function (response) { |
|||
if (!response.success) { |
|||
window.alert(response.message || '报名失败'); |
|||
return; |
|||
} |
|||
loadEventData(); |
|||
}, |
|||
error: function (xhr, response) { |
|||
window.alert((response && response.message) || '报名失败'); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
Array.prototype.slice.call(document.querySelectorAll('.cancel-btn')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
var eventId = button.getAttribute('data-id'); |
|||
appUtils.ajax({ |
|||
method: 'DELETE', |
|||
url: '/api/events/' + eventId + '/register', |
|||
success: function (response) { |
|||
if (!response.success) { |
|||
window.alert(response.message || '取消报名失败'); |
|||
return; |
|||
} |
|||
loadEventData(); |
|||
}, |
|||
error: function (xhr, response) { |
|||
window.alert((response && response.message) || '取消报名失败'); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function renderAdminHome() { |
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>系统概览</h3><p class="info-meta">管理员可在此查看系统整体情况。</p></div></div>' |
|||
+ ' <div class="summary-grid">' |
|||
+ summaryCard('用户总数', state.adminUsers.length) |
|||
+ summaryCard('报名记录', state.adminRegistrations.length) |
|||
+ summaryCard('比赛项目', state.adminEvents.length) |
|||
+ ' </div>' |
|||
+ '</div>'; |
|||
} |
|||
|
|||
function renderUserManage() { |
|||
if (!state.adminUsers.length) { |
|||
mainView.innerHTML = '<div class="empty-state"><h3>暂无用户</h3><p>当前系统中还没有用户数据。</p></div>'; |
|||
return; |
|||
} |
|||
|
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>数据概览</h3><p class="info-meta">查看当前系统内用户整体情况。</p></div></div>' |
|||
+ ' <div class="summary-grid">' |
|||
+ summaryCard('用户总数', state.adminUsers.length) |
|||
+ summaryCard('管理员数量', state.adminUsers.filter(function (item) { return item.role === 'ADMIN'; }).length) |
|||
+ summaryCard('禁用账号数量', state.adminUsers.filter(function (item) { return item.status === 'DISABLED'; }).length) |
|||
+ ' </div>' |
|||
+ '</div>' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>用户列表</h3><p class="info-meta">支持重置密码、禁用、解除禁用和删除账号。</p></div></div>' |
|||
+ ' <table class="event-table">' |
|||
+ ' <thead><tr><th>姓名</th><th>账号</th><th>身份证号</th><th>电话</th><th>性别</th><th>学院</th><th>班级</th><th>学号</th><th>类别</th><th>角色</th><th>状态</th><th>操作</th></tr></thead>' |
|||
+ ' <tbody>' |
|||
+ state.adminUsers.map(function (item) { |
|||
var isAdmin = item.role === 'ADMIN'; |
|||
var statusText = item.status === 'DISABLED' ? '已禁用' : '正常'; |
|||
var enableOrDisable = isAdmin ? '' : (item.status === 'DISABLED' |
|||
? '<button class="action-btn enable-user-btn" data-id="' + item.id + '">解除禁用</button>' |
|||
: '<button class="action-btn disable-user-btn" data-id="' + item.id + '">禁用账户</button>'); |
|||
var deleteAction = isAdmin ? '' : '<button class="action-btn delete-user-btn" data-id="' + item.id + '">删除</button>'; |
|||
return '<tr>' |
|||
+ '<td>' + escapeHtml(item.name) + '</td>' |
|||
+ '<td>' + escapeHtml(item.username) + '</td>' |
|||
+ '<td>' + escapeHtml(item.idCard) + '</td>' |
|||
+ '<td>' + escapeHtml(item.phone) + '</td>' |
|||
+ '<td>' + escapeHtml(item.gender) + '</td>' |
|||
+ '<td>' + escapeHtml(item.college) + '</td>' |
|||
+ '<td>' + escapeHtml(item.className) + '</td>' |
|||
+ '<td>' + escapeHtml(item.studentNo) + '</td>' |
|||
+ '<td>' + escapeHtml(item.category) + '</td>' |
|||
+ '<td>' + escapeHtml(item.role) + '</td>' |
|||
+ '<td>' + escapeHtml(statusText) + '</td>' |
|||
+ '<td><button class="action-btn reset-password-btn" data-id="' + item.id + '">重置密码</button> ' + enableOrDisable + ' ' + deleteAction + '</td>' |
|||
+ '</tr>'; |
|||
}).join('') |
|||
+ ' </tbody>' |
|||
+ ' </table>' |
|||
+ '</div>'; |
|||
|
|||
bindAdminUserActions(); |
|||
} |
|||
|
|||
function renderAthleteManage() { |
|||
if (!state.adminRegistrations.length) { |
|||
mainView.innerHTML = '<div class="empty-state"><h3>暂无报名记录</h3><p>当前还没有参赛人员数据。</p></div>'; |
|||
return; |
|||
} |
|||
|
|||
var coveredEvents = {}; |
|||
state.adminRegistrations.forEach(function (item) { |
|||
coveredEvents[item.eventName] = true; |
|||
}); |
|||
|
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>数据概览</h3><p class="info-meta">查看当前参赛人员和报名记录。</p></div></div>' |
|||
+ ' <div class="summary-grid">' |
|||
+ summaryCard('报名记录总数', state.adminRegistrations.length) |
|||
+ summaryCard('已覆盖项目', Object.keys(coveredEvents).length) |
|||
+ summaryCard('系统用户数', state.adminUsers.length) |
|||
+ ' </div>' |
|||
+ '</div>' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>参赛名单</h3><p class="info-meta">显示所有已报名人员和项目详情。</p></div></div>' |
|||
+ ' <table class="event-table">' |
|||
+ ' <thead><tr><th>姓名</th><th>账号</th><th>电话</th><th>学院</th><th>类别</th><th>项目名称</th><th>项目分类</th><th>时间地点</th><th>状态</th><th>报名时间</th></tr></thead>' |
|||
+ ' <tbody>' |
|||
+ state.adminRegistrations.map(function (item) { |
|||
return '<tr>' |
|||
+ '<td>' + escapeHtml(item.studentName) + '</td>' |
|||
+ '<td>' + escapeHtml(item.username) + '</td>' |
|||
+ '<td>' + escapeHtml(item.phone) + '</td>' |
|||
+ '<td>' + escapeHtml(item.college) + '</td>' |
|||
+ '<td>' + escapeHtml(item.category) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventName) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventCategory) + '</td>' |
|||
+ '<td>' + escapeHtml((item.eventTime || '') + ' / ' + (item.location || '')) + '</td>' |
|||
+ '<td>' + escapeHtml(item.status) + '</td>' |
|||
+ '<td>' + escapeHtml(item.createdAt) + '</td>' |
|||
+ '</tr>'; |
|||
}).join('') |
|||
+ ' </tbody>' |
|||
+ ' </table>' |
|||
+ '</div>'; |
|||
} |
|||
|
|||
function renderEventManage() { |
|||
var editingItem = state.adminEvents.find(function (item) { |
|||
return item.id === state.editingEventId; |
|||
}) || { |
|||
eventName: '', |
|||
eventCategory: '', |
|||
location: '', |
|||
quota: '', |
|||
eventTime: '', |
|||
description: '' |
|||
}; |
|||
|
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>' + (state.editingEventId ? '编辑项目' : '新增项目') + '</h3><p class="info-meta">在这里维护比赛项目基础信息。</p></div></div>' |
|||
+ ' <form id="eventForm" class="form-grid two-columns">' |
|||
+ fieldInput('项目名称', 'eventName', editingItem.eventName, '请输入项目名称') |
|||
+ fieldInput('项目分类', 'eventCategory', editingItem.eventCategory, '请输入项目分类') |
|||
+ fieldInput('比赛地点', 'location', editingItem.location, '请输入比赛地点') |
|||
+ ' <label class="field"><span>人数上限</span><input name="quota" type="number" min="1" value="' + escapeHtml(editingItem.quota) + '" placeholder="请输入人数上限"></label>' |
|||
+ fieldInput('比赛时间', 'eventTime', editingItem.eventTime, '例如 2026-05-20 08:30', true) |
|||
+ fieldInput('项目说明', 'description', editingItem.description, '请输入项目说明', true) |
|||
+ ' <div class="form-actions full-row">' |
|||
+ ' <button type="submit" class="primary-btn">' + (state.editingEventId ? '保存修改' : '新增项目') + '</button>' |
|||
+ ' <button type="button" class="ghost-btn" id="resetEventForm">清空表单</button>' |
|||
+ ' </div>' |
|||
+ ' <p id="eventFormMessage" class="form-message full-row"></p>' |
|||
+ ' </form>' |
|||
+ '</div>' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>项目列表</h3><p class="info-meta">查看、编辑和删除当前项目。</p></div></div>' |
|||
+ (state.adminEvents.length ? '' |
|||
+ '<table class="event-table">' |
|||
+ ' <thead><tr><th>项目名称</th><th>项目分类</th><th>比赛时间</th><th>比赛地点</th><th>人数上限</th><th>已报名</th><th>项目说明</th><th>操作</th></tr></thead>' |
|||
+ ' <tbody>' |
|||
+ state.adminEvents.map(function (item) { |
|||
return '<tr>' |
|||
+ '<td>' + escapeHtml(item.eventName) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventCategory) + '</td>' |
|||
+ '<td>' + escapeHtml(item.eventTime) + '</td>' |
|||
+ '<td>' + escapeHtml(item.location) + '</td>' |
|||
+ '<td>' + escapeHtml(item.quota) + '</td>' |
|||
+ '<td>' + escapeHtml(item.registeredCount || 0) + '</td>' |
|||
+ '<td>' + escapeHtml(item.description) + '</td>' |
|||
+ '<td><button class="action-btn edit-event-btn" data-id="' + item.id + '">编辑</button> <button class="action-btn delete-event-btn" data-id="' + item.id + '">删除</button></td>' |
|||
+ '</tr>'; |
|||
}).join('') |
|||
+ ' </tbody>' |
|||
+ '</table>' |
|||
: '<div class="empty-state"><h3>暂无项目</h3><p>请先新增比赛项目。</p></div>') |
|||
+ '</div>'; |
|||
|
|||
bindEventManageActions(); |
|||
} |
|||
|
|||
function renderPlaceholder(title, desc) { |
|||
mainView.innerHTML = '' |
|||
+ '<div class="section-block">' |
|||
+ ' <div class="section-head"><div><h3>' + escapeHtml(title) + '</h3><p class="info-meta">' + escapeHtml(desc) + '</p></div></div>' |
|||
+ ' <div class="empty-state"><h3>功能持续完善中</h3><p>这个模块的详细功能可以继续在现有框架上补充。</p></div>' |
|||
+ '</div>'; |
|||
} |
|||
|
|||
function renderCurrentView() { |
|||
var meta = getMeta(state.currentView); |
|||
sectionTitle.textContent = meta.label; |
|||
sectionDesc.textContent = meta.desc; |
|||
renderTabs(); |
|||
|
|||
if (state.currentView === 'profile') { |
|||
renderProfile(); |
|||
return; |
|||
} |
|||
if (state.currentView === 'events') { |
|||
renderEventTable(state.currentTab === 'mine' ? state.myEvents : state.events, state.currentTab === 'mine'); |
|||
return; |
|||
} |
|||
if (state.currentView === 'admin-home') { |
|||
renderAdminHome(); |
|||
return; |
|||
} |
|||
if (state.currentView === 'user-manage') { |
|||
renderUserManage(); |
|||
return; |
|||
} |
|||
if (state.currentView === 'athlete-manage') { |
|||
renderAthleteManage(); |
|||
return; |
|||
} |
|||
if (state.currentView === 'event-manage') { |
|||
renderEventManage(); |
|||
return; |
|||
} |
|||
if (state.currentView === 'team-info') { |
|||
renderPlaceholder('团体信息管理', '可继续补充学院、班级、代表队等团体信息管理功能。'); |
|||
return; |
|||
} |
|||
if (state.currentView === 'score-manage') { |
|||
renderPlaceholder('参赛成绩管理', '可继续补充成绩录入、成绩维护、成绩查询等功能。'); |
|||
return; |
|||
} |
|||
if (state.currentView === 'record-manage') { |
|||
renderPlaceholder('项目记录管理', '可继续补充项目记录、秩序册和赛事档案管理功能。'); |
|||
return; |
|||
} |
|||
if (state.currentView === 'system-manage') { |
|||
renderPlaceholder('系统管理', '可继续补充系统配置、权限设置和运行维护功能。'); |
|||
return; |
|||
} |
|||
|
|||
renderPlaceholder('系统首页', '欢迎进入运动会报名系统。'); |
|||
} |
|||
|
|||
function switchView(view) { |
|||
state.currentView = view; |
|||
if (view === 'events' && state.currentTab !== 'mine') { |
|||
state.currentTab = 'all'; |
|||
} |
|||
renderSidebar(); |
|||
renderCurrentView(); |
|||
} |
|||
|
|||
function loadEventData() { |
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/events', |
|||
success: function (response) { |
|||
if (response.success) { |
|||
state.events = response.data || []; |
|||
if (state.currentView === 'events') { |
|||
renderCurrentView(); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/events/my', |
|||
success: function (response) { |
|||
if (response.success) { |
|||
state.myEvents = response.data || []; |
|||
if (state.currentView === 'events') { |
|||
renderCurrentView(); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function loadAdminData() { |
|||
if (!state.user || state.user.role !== 'ADMIN') { |
|||
return; |
|||
} |
|||
|
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/admin/users', |
|||
success: function (response) { |
|||
if (response.success) { |
|||
state.adminUsers = response.data || []; |
|||
renderCurrentView(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/admin/registrations', |
|||
success: function (response) { |
|||
if (response.success) { |
|||
state.adminRegistrations = response.data || []; |
|||
renderCurrentView(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/admin/events', |
|||
success: function (response) { |
|||
if (response.success) { |
|||
state.adminEvents = response.data || []; |
|||
renderCurrentView(); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function bindAdminUserActions() { |
|||
bindUserAction('.reset-password-btn', 'POST', '/api/admin/users/{id}/reset-password', '重置密码成功'); |
|||
bindUserAction('.disable-user-btn', 'POST', '/api/admin/users/{id}/disable', '账号已禁用'); |
|||
bindUserAction('.enable-user-btn', 'POST', '/api/admin/users/{id}/enable', '账号已解除禁用'); |
|||
bindUserAction('.delete-user-btn', 'DELETE', '/api/admin/users/{id}', '用户已删除'); |
|||
} |
|||
|
|||
function bindUserAction(selector, method, urlTemplate, successText) { |
|||
Array.prototype.slice.call(document.querySelectorAll(selector)).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
var userId = button.getAttribute('data-id'); |
|||
appUtils.ajax({ |
|||
method: method, |
|||
url: urlTemplate.replace('{id}', userId), |
|||
success: function (response) { |
|||
if (!response.success) { |
|||
window.alert(response.message || '操作失败'); |
|||
return; |
|||
} |
|||
if (successText) { |
|||
window.alert(successText); |
|||
} |
|||
loadAdminData(); |
|||
}, |
|||
error: function (xhr, response) { |
|||
window.alert((response && response.message) || '操作失败'); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function bindEventManageActions() { |
|||
var form = document.getElementById('eventForm'); |
|||
var resetButton = document.getElementById('resetEventForm'); |
|||
var messageEl = document.getElementById('eventFormMessage'); |
|||
|
|||
if (form) { |
|||
form.addEventListener('submit', function (event) { |
|||
event.preventDefault(); |
|||
var formData = new FormData(form); |
|||
var payload = { |
|||
eventName: String(formData.get('eventName') || '').trim(), |
|||
eventCategory: String(formData.get('eventCategory') || '').trim(), |
|||
location: String(formData.get('location') || '').trim(), |
|||
quota: Number(formData.get('quota') || 0), |
|||
eventTime: String(formData.get('eventTime') || '').trim(), |
|||
description: String(formData.get('description') || '').trim() |
|||
}; |
|||
|
|||
appUtils.ajax({ |
|||
method: state.editingEventId ? 'PUT' : 'POST', |
|||
url: state.editingEventId ? '/api/admin/events/' + state.editingEventId : '/api/admin/events', |
|||
data: payload, |
|||
success: function (response) { |
|||
if (!response.success) { |
|||
appUtils.showMessage(messageEl, response.message || '保存失败', false); |
|||
return; |
|||
} |
|||
state.editingEventId = null; |
|||
loadAdminData(); |
|||
}, |
|||
error: function (xhr, response) { |
|||
appUtils.showMessage(messageEl, (response && response.message) || '保存失败', false); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
if (resetButton) { |
|||
resetButton.addEventListener('click', function () { |
|||
state.editingEventId = null; |
|||
renderCurrentView(); |
|||
}); |
|||
} |
|||
|
|||
Array.prototype.slice.call(document.querySelectorAll('.edit-event-btn')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
state.editingEventId = Number(button.getAttribute('data-id')); |
|||
renderCurrentView(); |
|||
}); |
|||
}); |
|||
|
|||
Array.prototype.slice.call(document.querySelectorAll('.delete-event-btn')).forEach(function (button) { |
|||
button.addEventListener('click', function () { |
|||
var eventId = button.getAttribute('data-id'); |
|||
appUtils.ajax({ |
|||
method: 'DELETE', |
|||
url: '/api/admin/events/' + eventId, |
|||
success: function (response) { |
|||
if (!response.success) { |
|||
window.alert(response.message || '删除失败'); |
|||
return; |
|||
} |
|||
if (state.editingEventId === Number(eventId)) { |
|||
state.editingEventId = null; |
|||
} |
|||
loadAdminData(); |
|||
}, |
|||
error: function (xhr, response) { |
|||
window.alert((response && response.message) || '删除失败'); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function loadCurrentUser() { |
|||
appUtils.ajax({ |
|||
method: 'GET', |
|||
url: '/api/users/me', |
|||
success: function (response) { |
|||
if (!response.success || !response.data) { |
|||
window.location.href = './login.html'; |
|||
return; |
|||
} |
|||
|
|||
state.user = response.data; |
|||
state.currentView = state.user.role === 'ADMIN' ? 'admin-home' : 'profile'; |
|||
updateCurrentUserName(); |
|||
renderSidebar(); |
|||
renderCurrentView(); |
|||
loadEventData(); |
|||
loadAdminData(); |
|||
}, |
|||
error: function () { |
|||
window.location.href = './login.html'; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function updateCurrentUserName() { |
|||
currentUserName.textContent = state.user.name + (state.user.role === 'ADMIN' ? ' 管理员' : ' 用户'); |
|||
} |
|||
|
|||
function fieldInput(label, name, value, placeholder, fullRow) { |
|||
return ' <label class="field ' + (fullRow ? 'full-row' : '') + '"><span>' + label + '</span><input name="' + name + '" value="' + escapeHtml(value) + '" placeholder="' + placeholder + '"></label>'; |
|||
} |
|||
|
|||
function fieldSelect(label, name, value, options, placeholder, fullRow) { |
|||
return ' <label class="field ' + (fullRow ? 'full-row' : '') + '"><span>' + label + '</span><select name="' + name + '">' |
|||
+ '<option value="">' + placeholder + '</option>' |
|||
+ options.map(function (item) { |
|||
return '<option value="' + escapeHtml(item) + '"' + (item === value ? ' selected' : '') + '>' + escapeHtml(item) + '</option>'; |
|||
}).join('') |
|||
+ '</select></label>'; |
|||
} |
|||
|
|||
function infoCard(label, value) { |
|||
return ' <div class="info-card"><strong>' + label + '</strong><p>' + escapeHtml(value) + '</p></div>'; |
|||
} |
|||
|
|||
function summaryCard(label, value) { |
|||
return ' <div class="summary-card"><strong>' + label + '</strong><p>' + escapeHtml(value) + '</p></div>'; |
|||
} |
|||
|
|||
logoutBtn.addEventListener('click', function () { |
|||
appUtils.ajax({ |
|||
method: 'POST', |
|||
url: '/api/auth/logout', |
|||
success: function () { |
|||
window.location.href = './login.html'; |
|||
}, |
|||
error: function () { |
|||
window.location.href = './login.html'; |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
loadCurrentUser(); |
|||
}); |
|||
Loading…
Reference in new issue