f548a95767
- notificationRecipientModel에 ntfy CRUD 메서드 추가 (같은 DB 직접 쿼리) - ntfy 라우트 3개 추가 (GET/POST/DELETE, /:type 위에 배치) - 알림 수신자 탭 상단에 ntfy 구독 관리 카드 렌더링 - ntfy 추가 모달에 앱 설정 안내 문구 포함 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
265 lines
11 KiB
JavaScript
265 lines
11 KiB
JavaScript
/* ===== 알림 수신자 관리 ===== */
|
|
let nrLoaded = false;
|
|
let nrData = {}; // { type: { label, recipients: [...] } }
|
|
let nrTypes = {}; // { type: label }
|
|
let nrCategories = {}; // { category: { label, icon, types: [...] } }
|
|
let nrAllUsers = []; // 사용자 목록 (수신자 추가용)
|
|
let ntfySubscribers = []; // ntfy 구독자 목록
|
|
|
|
async function loadNotificationRecipientsTab() {
|
|
if (nrLoaded) return;
|
|
try {
|
|
const [typesRes, allRes, usersRes, ntfyRes] = await Promise.all([
|
|
api('/notification-recipients/types'),
|
|
api('/notification-recipients'),
|
|
api('/users?status=active'),
|
|
api('/notification-recipients/ntfy')
|
|
]);
|
|
nrTypes = typesRes.data?.types || typesRes.data || {};
|
|
nrCategories = typesRes.data?.categories || {};
|
|
nrData = allRes.data || {};
|
|
nrAllUsers = (usersRes.data || usersRes || []).filter(u => u.status !== 'inactive');
|
|
ntfySubscribers = ntfyRes.data || [];
|
|
nrLoaded = true;
|
|
renderNrTab();
|
|
} catch (e) {
|
|
document.getElementById('nrContent').innerHTML =
|
|
`<p class="text-red-500 text-center py-8">데이터 로드 실패: ${escapeHtml(e.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderNrTab() {
|
|
const container = document.getElementById('nrContent');
|
|
if (!Object.keys(nrTypes).length) {
|
|
container.innerHTML = '<p class="text-gray-400 text-center py-8">등록된 알림 유형이 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
// ntfy 구독 관리 카드 (최상단)
|
|
html += renderNtfyCard();
|
|
|
|
const categoryKeys = Object.keys(nrCategories);
|
|
|
|
if (categoryKeys.length > 0) {
|
|
// 카테고리별 그룹 렌더링
|
|
for (const [catKey, cat] of Object.entries(nrCategories)) {
|
|
html += `
|
|
<div class="mb-6">
|
|
<h2 class="text-base font-bold text-gray-700 mb-3 flex items-center gap-2">
|
|
<i class="fas ${cat.icon} text-slate-500"></i>${escapeHtml(cat.label)}
|
|
</h2>
|
|
<div class="pl-4 space-y-3">`;
|
|
|
|
for (const type of cat.types) {
|
|
const label = nrTypes[type];
|
|
if (!label) continue;
|
|
const recipients = nrData[type]?.recipients || [];
|
|
html += renderNrTypeCard(type, label, recipients);
|
|
}
|
|
|
|
html += `
|
|
</div>
|
|
</div>`;
|
|
}
|
|
} else {
|
|
// 폴백: 카테고리 없이 flat 리스트
|
|
for (const [type, label] of Object.entries(nrTypes)) {
|
|
const recipients = nrData[type]?.recipients || [];
|
|
html += renderNrTypeCard(type, label, recipients);
|
|
}
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
/* ===== ntfy 구독 관리 카드 ===== */
|
|
function renderNtfyCard() {
|
|
return `
|
|
<div class="bg-white rounded-xl shadow-sm p-5 mb-6 border-l-4 border-blue-400">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-sm font-semibold text-gray-800">
|
|
<i class="fas fa-mobile-alt text-blue-500 mr-2"></i>ntfy 앱 알림
|
|
<span class="ml-2 text-xs font-normal text-gray-400">${ntfySubscribers.length}명</span>
|
|
</h3>
|
|
<button onclick="openNtfyAddModal()" class="px-3 py-1 bg-blue-600 text-white rounded-lg text-xs hover:bg-blue-700">
|
|
<i class="fas fa-plus mr-1"></i>추가
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mb-3">ntfy 앱으로 푸시 알림을 받을 사용자를 관리합니다.</p>
|
|
<div class="flex flex-wrap gap-2" id="ntfySubscriberList">
|
|
${ntfySubscribers.length === 0
|
|
? '<span class="text-gray-400 text-sm">구독자 없음</span>'
|
|
: ntfySubscribers.map(s => `
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 rounded-full text-sm">
|
|
<span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">${escapeHtml((s.user_name || s.username || '?')[0])}</span>
|
|
${escapeHtml(s.user_name || s.username)}
|
|
<button onclick="removeNtfySubscriber(${s.user_id})" class="text-gray-400 hover:text-red-500 ml-1" title="해제">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</span>
|
|
`).join('')
|
|
}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function openNtfyAddModal() {
|
|
const currentIds = ntfySubscribers.map(s => s.user_id);
|
|
const available = nrAllUsers.filter(u => !currentIds.includes(u.user_id));
|
|
|
|
const listEl = document.getElementById('ntfyAddUserList');
|
|
if (available.length === 0) {
|
|
listEl.innerHTML = '<p class="text-gray-400 text-sm text-center py-4">추가 가능한 사용자가 없습니다.</p>';
|
|
} else {
|
|
listEl.innerHTML = available.map(u => `
|
|
<label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
|
|
<input type="checkbox" value="${u.user_id}" class="ntfyAddCheck rounded">
|
|
<span class="text-sm">${escapeHtml(u.name || u.username)}</span>
|
|
<span class="text-xs text-gray-400">${escapeHtml(u.username)}</span>
|
|
</label>
|
|
`).join('');
|
|
}
|
|
|
|
document.getElementById('ntfyAddModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeNtfyAddModal() {
|
|
document.getElementById('ntfyAddModal').classList.add('hidden');
|
|
}
|
|
|
|
async function submitNtfyAdd() {
|
|
const checked = [...document.querySelectorAll('.ntfyAddCheck:checked')].map(c => Number(c.value));
|
|
if (checked.length === 0) { showToast('사용자를 선택해주세요.', 'error'); return; }
|
|
|
|
try {
|
|
for (const userId of checked) {
|
|
await api(`/notification-recipients/ntfy/${userId}`, { method: 'POST' });
|
|
}
|
|
showToast(`${checked.length}명 ntfy 구독 등록 완료`);
|
|
closeNtfyAddModal();
|
|
nrLoaded = false;
|
|
await loadNotificationRecipientsTab();
|
|
} catch (e) {
|
|
showToast('ntfy 구독 등록 실패: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function removeNtfySubscriber(userId) {
|
|
if (!confirm('이 사용자의 ntfy 구독을 해제하시겠습니까?')) return;
|
|
try {
|
|
await api(`/notification-recipients/ntfy/${userId}`, { method: 'DELETE' });
|
|
showToast('ntfy 구독 해제 완료');
|
|
nrLoaded = false;
|
|
await loadNotificationRecipientsTab();
|
|
} catch (e) {
|
|
showToast('ntfy 구독 해제 실패: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
/* ===== 유형별 수신자 카드 ===== */
|
|
function renderNrTypeCard(type, label, recipients) {
|
|
return `
|
|
<div class="bg-white rounded-xl shadow-sm p-5 mb-3">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-sm font-semibold text-gray-800">
|
|
<i class="fas ${nrTypeIcon(type)} text-slate-500 mr-2"></i>${escapeHtml(label)}
|
|
<span class="ml-2 text-xs font-normal text-gray-400">${recipients.length}명</span>
|
|
</h3>
|
|
<button onclick="openNrAddModal('${type}')" class="px-3 py-1 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
|
|
<i class="fas fa-plus mr-1"></i>추가
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2" id="nrList-${type}">
|
|
${recipients.length === 0
|
|
? '<span class="text-gray-400 text-sm">수신자 없음</span>'
|
|
: recipients.map(r => `
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 rounded-full text-sm">
|
|
<span class="w-6 h-6 bg-slate-600 text-white rounded-full flex items-center justify-center text-xs font-bold">${escapeHtml((r.user_name || r.username || '?')[0])}</span>
|
|
${escapeHtml(r.user_name || r.username)}
|
|
<button onclick="removeNrRecipient('${type}', ${r.user_id})" class="text-gray-400 hover:text-red-500 ml-1" title="제거">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</span>
|
|
`).join('')
|
|
}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function nrTypeIcon(type) {
|
|
const icons = {
|
|
repair: 'fa-wrench',
|
|
safety: 'fa-shield-alt',
|
|
nonconformity: 'fa-exclamation-triangle',
|
|
partner_work: 'fa-hard-hat',
|
|
day_labor: 'fa-user-clock',
|
|
system: 'fa-server'
|
|
};
|
|
return icons[type] || 'fa-bell';
|
|
}
|
|
|
|
/* ===== 수신자 추가 모달 ===== */
|
|
let nrAddType = '';
|
|
|
|
function openNrAddModal(type) {
|
|
nrAddType = type;
|
|
const label = nrTypes[type] || type;
|
|
document.getElementById('nrAddModalTitle').textContent = `${label} 수신자 추가`;
|
|
|
|
const currentIds = (nrData[type]?.recipients || []).map(r => r.user_id);
|
|
const available = nrAllUsers.filter(u => !currentIds.includes(u.user_id));
|
|
|
|
const listEl = document.getElementById('nrAddUserList');
|
|
if (available.length === 0) {
|
|
listEl.innerHTML = '<p class="text-gray-400 text-sm text-center py-4">추가 가능한 사용자가 없습니다.</p>';
|
|
} else {
|
|
listEl.innerHTML = available.map(u => `
|
|
<label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
|
|
<input type="checkbox" value="${u.user_id}" class="nrAddCheck rounded">
|
|
<span class="text-sm">${escapeHtml(u.name || u.username)}</span>
|
|
<span class="text-xs text-gray-400">${escapeHtml(u.username)}</span>
|
|
</label>
|
|
`).join('');
|
|
}
|
|
|
|
document.getElementById('nrAddModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeNrAddModal() {
|
|
document.getElementById('nrAddModal').classList.add('hidden');
|
|
}
|
|
|
|
async function submitNrAdd() {
|
|
const checked = [...document.querySelectorAll('.nrAddCheck:checked')].map(c => Number(c.value));
|
|
if (checked.length === 0) { showToast('사용자를 선택해주세요.', 'error'); return; }
|
|
|
|
try {
|
|
for (const userId of checked) {
|
|
await api('/notification-recipients', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ notification_type: nrAddType, user_id: userId })
|
|
});
|
|
}
|
|
showToast(`${checked.length}명 수신자 추가 완료`);
|
|
closeNrAddModal();
|
|
nrLoaded = false;
|
|
await loadNotificationRecipientsTab();
|
|
} catch (e) {
|
|
showToast('수신자 추가 실패: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function removeNrRecipient(type, userId) {
|
|
if (!confirm('이 수신자를 제거하시겠습니까?')) return;
|
|
try {
|
|
await api(`/notification-recipients/${type}/${userId}`, { method: 'DELETE' });
|
|
showToast('수신자 제거 완료');
|
|
nrLoaded = false;
|
|
await loadNotificationRecipientsTab();
|
|
} catch (e) {
|
|
showToast('수신자 제거 실패: ' + e.message, 'error');
|
|
}
|
|
}
|