알림 시스템

let csrfHash = 'f0be7ed736320352666141e11cc1b209';

async function ajaxPost(url) {
    const form = new FormData();
    form.append('csrf_test_name', csrfHash);

    const res  = await fetch(url, { method: 'POST', body: form });
    const data = await res.json();

    // CI4는 응답 JSON에 새 CSRF 해시를 포함하지 않으므로
    // 각 요청 후 갱신이 필요한 경우 별도 처리
    return data;
}

async function createNotification() {
    const data = await ajaxPost('/examples/notification/create');
    if (!data.success) return;

    // 새 알림 행을 목록 맨 위에 추가
    const row = renderNotifRow(data.notification);
    row.style.opacity = '0';
    list.prepend(row);
    requestAnimationFrame(() => row.style.opacity = '1');

    updateBadge(data.unreadCount);
    updateCount(+1);
}

async function markRead(id, rowEl) {
    const data = await ajaxPost(`/examples/notification/read/${id}`);
    if (!data.success) return;

    // 행 스타일을 "읽음" 상태로 변경
    rowEl.style.background = '#fff';
    rowEl.style.opacity    = '.7';
    rowEl.dataset.read     = '1';
    rowEl.querySelector('.unread-dot')?.remove();
    rowEl.querySelector('.notif-title')?.classList.add('text-muted', 'fw-normal');
    rowEl.querySelector('.notif-message')?.classList.add('text-muted');
    rowEl.querySelector('.read-action').innerHTML =
        '<span class="text-muted small"><i class="bi bi-check2-all"></i></span>';

    updateBadge(data.unreadCount);
}

// redirect() 대신 JSON 응답 반환
public function create(): Response
{
    $this->model->insert($data);
    return $this->response->setJSON([
        'success'      => true,
        'notification' => $this->model->find($id),
        'unreadCount'  => $this->model->countUnread(),
    ]);
}

public function read(int $id): Response
{
    $this->model->markRead($id);
    return $this->response->setJSON([
        'success'    => true,
        'unreadCount' => $this->model->countUnread(),
    ]);
}

const es = new EventSource('/examples/notification/stream');

es.addEventListener('notification', e => {
    const { unread } = JSON.parse(e.data);
    updateBadge(unread);
});

function updateBadge(count) {
    const badge = document.getElementById('unread-badge');
    badge.textContent      = count;
    badge.style.background = count > 0 ? '#dd4814' : '#6c757d';
}