SCRUM8

昨天的成就：
昨天我完成组织架构管理这个大模块，修复了项目的一些漏洞，并完成了部分的通知中心模块（但仍有部分瑕疵）：

// 加载通知中心内容
function loadNotificationManagement(container) {
    const userId = parseInt(sessionStorage.getItem('userId'));
    const permissionLevel = parseInt(sessionStorage.getItem('permissionLevel'));

    container.innerHTML = `
        <div class="notification-management">
            <h3 style="font-size: 1.5rem;">通知中心</h3>
            <div style="margin-top: 20px;">
                <button id="inboxBtn" style="margin-right: 10px; padding: 5px 10px; font-size: 1.2rem;">收件箱</button>
                <button id="sentBtn" style="margin-right: 10px; padding: 5px 10px; font-size: 1.2rem;">已发送</button>
                <button id="createBtn" style="padding: 5px 10px; font-size: 1.2rem;">创建通知</button>
            </div>
            <div id="notificationContent" style="margin-top: 20px;"></div>
        </div>
    `;

    document.getElementById('inboxBtn').addEventListener('click', () => {
        fetchInbox(container);
    });

    document.getElementById('sentBtn').addEventListener('click', () => {
        fetchSentNotifications(container);
    });

    document.getElementById('createBtn').addEventListener('click', () => {
        showCreateNotificationForm(container, permissionLevel);
    });

    // 默认加载收件箱
    fetchInbox(container);
}

// 获取收件箱内容
function fetchInbox(container) {
    const notificationContent = document.getElementById('notificationContent');
    notificationContent.innerHTML = '<h4 style="font-size: 1.4rem;">收件箱</h4><ul id="inboxList" style="list-style-type: none; padding: 0;"></ul>';

    fetch('/api/notification/inbox')
        .then(response => response.json())
        .then(notifications => {
            const inboxList = document.getElementById('inboxList');
            inboxList.innerHTML = '';

            notifications.forEach(notification => {
                const li = document.createElement('li');
                li.style.marginBottom = '10px';
                li.style.padding = '10px';
                li.style.borderBottom = '1px solid #ccc';

                const urgentLabel = notification.isUrgent ? '紧急' : '普通';
                li.innerHTML = `
                    <div>发送人: ${notification.senderId}</div>
                    <div>内容: ${notification.content}</div>
                    <div>类型: ${urgentLabel}</div>
                    <div>时间: ${notification.createdAt}</div>
                `;

                inboxList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('获取收件箱失败:', error);
            notificationContent.innerHTML = '<p style="color: red; font-size: 1.2rem;">获取收件箱失败，请刷新重试</p>';
        });
}

// 获取已发送通知
function fetchSentNotifications(container) {
    const notificationContent = document.getElementById('notificationContent');
    notificationContent.innerHTML = '<h4 style="font-size: 1.4rem;">已发送</h4><ul id="sentList" style="list-style-type: none; padding: 0;"></ul>';

    fetch('/api/notification/sent')
        .then(response => response.json())
        .then(notifications => {
            const sentList = document.getElementById('sentList');
            sentList.innerHTML = '';

            notifications.forEach(notification => {
                const li = document.createElement('li');
                li.style.marginBottom = '10px';
                li.style.padding = '10px';
                li.style.borderBottom = '1px solid #ccc';

                const receiverLabel = notification.isBroadcast ? '群发' : `发送给: ${notification.receiverId}`;
                const urgentLabel = notification.isUrgent ? '紧急' : '普通';
                li.innerHTML = `
                    <div>接收人: ${receiverLabel}</div>
                    <div>内容: ${notification.content}</div>
                    <div>类型: ${urgentLabel}</div>
                    <div>时间: ${notification.createdAt}</div>
                    <button onclick="deleteNotification(${notification.id})" style="margin-right: 10px; padding: 5px 10px; font-size: 1.2rem;">删除</button>
                    <button onclick="showUpdateNotificationForm(${notification.id})" style="padding: 5px 10px; font-size: 1.2rem;">修改</button>
                `;

                sentList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('获取已发送通知失败:', error);
            notificationContent.innerHTML = '<p style="color: red; font-size: 1.2rem;">获取已发送通知失败，请刷新重试</p>';
        });
}

// 显示创建通知表单
// 显示创建通知表单
function showCreateNotificationForm(container) {
    const notificationContent = document.getElementById('notificationContent');
    notificationContent.innerHTML = `
        <h4 style="font-size: 1.4rem;">创建通知</h4>
        <div id="createForm" style="margin-top: 20px;">
            <div style="margin-bottom: 10px;">
                <label for="isBroadcast" style="display: inline-block; width: 100px; font-size: 1.2rem;">群发:</label>
                <input type="checkbox" id="isBroadcast" style="font-size: 1.2rem;">
            </div>
            <div id="receiverInput" style="margin-bottom: 10px;">
                <label for="receiverId" style="display: inline-block; width: 100px; font-size: 1.2rem;">接收人:</label>
                <input type="number" id="receiverId" style="padding: 5px; font-size: 1.2rem;">
            </div>
            <div style="margin-bottom: 10px;">
                <label for="isUrgent" style="display: inline-block; width: 100px; font-size: 1.2rem;">紧急:</label>
                <input type="checkbox" id="isUrgent" style="font-size: 1.2rem;">
            </div>
            <div style="margin-bottom: 10px;">
                <label for="content" style="display: inline-block; width: 100px; font-size: 1.2rem;">内容:</label>
                <textarea id="content" style="width: 300px; height: 100px; padding: 5px; font-size: 1.2rem;"></textarea>
            </div>
            <button id="submitNotification" style="padding: 5px 10px; font-size: 1.2rem;">提交</button>
        </div>
    `;

    document.getElementById('submitNotification').addEventListener('click', () => {
        submitNotification();
    });

    // 监听群发复选框的变化
    document.getElementById('isBroadcast').addEventListener('change', () => {
        const isBroadcast = document.getElementById('isBroadcast').checked;
        const receiverInput = document.getElementById('receiverInput');
        if (isBroadcast) {
            receiverInput.style.display = 'none';
        } else {
            receiverInput.style.display = 'block';
        }
    });
}

// 提交通知
function submitNotification() {
    const userId = sessionStorage.getItem('userId');
    const permissionLevel = sessionStorage.getItem('permissionLevel');

    if (!userId || !permissionLevel) {
        alert('未登录，请先登录');
        return;
    }

    // 检查用户职级是否为3
    if (permissionLevel !== '3') {
        alert('权限不够，无法创建通知');
        return;
    }

    const isBroadcast = document.getElementById('isBroadcast').checked;
    const receiverId = parseInt(document.getElementById('receiverId').value);
    const isUrgent = document.getElementById('isUrgent').checked;
    const content = document.getElementById('content').value;

    if (!content) {
        alert('通知内容不能为空');
        return;
    }

    if (!isBroadcast && !receiverId) {
        alert('接收人不能为空');
        return;
    }

    const data = {
        senderId: userId,
        isBroadcast: isBroadcast,
        receiverId: isBroadcast ? 0 : receiverId,
        isUrgent: isUrgent,
        content: content
    };

    fetch('/api/notification/create', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('创建通知失败');
        }
        return response.json();
    })
    .then(notification => {
        alert('通知创建成功');
        const container = document.getElementById('dynamic-content');
        loadNotificationManagement(container);
    })
    .catch(error => {
        console.error('创建通知失败:', error);
        alert('创建通知失败，请重试');
    });
}

// 删除通知
function deleteNotification(id) {
    fetch(`/api/notification/delete/${id}`, {
        method: 'DELETE'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('删除通知失败');
        }
        return response.json();
    })
    .then(data => {
        alert(data.message);
        // 刷新页面
        const container = document.getElementById('dynamic-content');
        loadNotificationManagement(container);
    })
    .catch(error => {
        console.error('删除通知失败:', error);
        alert('删除通知失败，请重试');
    });
}

// 显示更新通知表单
function showUpdateNotificationForm(id) {
    fetch(`/api/notification/${id}`)
        .then(response => response.json())
        .then(notification => {
            const container = document.getElementById('dynamic-content');
            container.innerHTML = `
                <div class="notification-management">
                    <h3 style="font-size: 1.5rem;">更新通知</h3>
                    <div style="margin-top: 20px;">
                        <input type="hidden" id="notificationId" value="${notification.id}">
                        <div style="margin-bottom: 10px;">
                            <label for="updateContent" style="display: inline-block; width: 100px; font-size: 1.2rem;">内容:</label>
                            <textarea id="updateContent" style="width: 300px; height: 100px; padding: 5px; font-size: 1.2rem;">${notification.content}</textarea>
                        </div>
                        <div style="margin-bottom: 10px;">
                            <label for="updateIsUrgent" style="display: inline-block; width: 100px; font-size: 1.2rem;">紧急:</label>
                            <input type="checkbox" id="updateIsUrgent" ${notification.isUrgent ? 'checked' : ''} style="font-size: 1.2rem;">
                        </div>
                        <button id="updateNotificationBtn" style="padding: 5px 10px; font-size: 1.2rem;">更新</button>
                    </div>
                </div>
            `;

            document.getElementById('updateNotificationBtn').addEventListener('click', () => {
                updateNotification(id);
            });
        })
        .catch(error => {
            console.error('获取通知失败:', error);
            alert('获取通知失败，请重试');
        });
}

// 更新通知
function updateNotification(id) {
    const data = {
        content: document.getElementById('updateContent').value,
        isUrgent: document.getElementById('updateIsUrgent').checked
    };

    fetch(`/api/notification/update/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('更新通知失败');
        }
        return response.json();
    })
    .then(notification => {
        alert('通知更新成功');
        // 刷新页面
        const container = document.getElementById('dynamic-content');
        loadNotificationManagement(container);
    })
    .catch(error => {
        console.error('更新通知失败:', error);
        alert('更新通知失败，请重试');
    });
}

今天的任务：
必须要把通知中心模块完成，并且在检查前尽可能的对页面进行优化。