情報の読み込みに失敗しました。再ログインしてください。
ログインページへ`; + } + }, + + loadPage: async (pageName) => { + try { + clearIntervals(); + navItems.forEach(item => item.classList.remove('active')); + const activeItem = document.querySelector(`[data-page="${pageName}"]`); + if (activeItem) activeItem.classList.add('active'); + + pageContent.innerHTML = ''; + + if (App.renderers[pageName]) { + await App.renderers[pageName](); + } else { + pageContent.innerHTML = 'ページが見つかりません
'; + } + feather.replace(); + } catch (error) { + pageContent.innerHTML = `エラー: ${error.message}
本当にログアウトしますか？
', + [ + { id: 'cancel-logout', text: 'キャンセル', class: 'btn-secondary' }, + { id: 'confirm-logout', text: 'ログアウト', class: 'btn-danger' } + ] + ); + document.getElementById('cancel-logout').onclick = closeModal; + document.getElementById('confirm-logout').onclick = async () => { + try { + await api.post('/api/admin/logout'); + window.location.href = '/admin-login.html'; + } catch (err) { + showMessage('ログアウトに失敗しました', 'error'); + } + }; + }); + + menuToggle.addEventListener('click', () => { + sidebar.classList.toggle('is-open'); + }); + + document.getElementById('global-user-search').addEventListener('keypress', async (e) => { + if (e.key === 'Enter') { + const userId = e.target.value.trim(); + if (!userId) return; + try { + showMessage(`ユーザーID ${userId} を検索中...`, 'info'); + const data = await api.get(`/api/admin/user-search?userId=${userId}`); + + createModal('ユーザー検索結果', ` +所属サーバー (${data.guilds.length}):
+${guild.id}
- ${escapeHTML(guild.id)}
サーバーが見つかりません
'; + + document.getElementById('page-info').textContent = `Page ${data.currentPage} of ${data.totalPages}`; + document.getElementById('prev-page').disabled = data.currentPage <= 1; + document.getElementById('next-page').disabled = data.currentPage >= data.totalPages; + feather.replace(); + } catch (e) { + listEl.innerHTML = '読み込み失敗
'; + } + }; - // 検索機能 - document.getElementById('server-search').addEventListener('input', (e) => { - const searchTerm = e.target.value.toLowerCase(); - document.querySelectorAll('.server-card').forEach(card => { - const serverName = card.dataset.serverName; - card.style.display = serverName.includes(searchTerm) ? 'block' : 'none'; - }); + document.getElementById('server-search').addEventListener('input', () => { + currentPage = 1; + renderServers(); }); + document.getElementById('prev-page').onclick = () => { currentPage--; renderServers(); }; + document.getElementById('next-page').onclick = () => { currentPage++; renderServers(); }; - feather.replace(); + await renderServers(); }, announcements: async () => { @@ -443,15 +596,19 @@ document.addEventListener('DOMContentLoaded', async () => { `; // ログ更新機能 - let logCount = 4; document.getElementById('refresh-logs').addEventListener('click', () => { const logViewer = document.getElementById('log-viewer'); const newLog = document.createElement('p'); newLog.style.color = 'var(--success-color)'; newLog.textContent = `[${new Date().toLocaleTimeString()}] [INFO] ログ更新 - システム正常`; logViewer.appendChild(newLog); + + // Limit logs to prevent infinite growth + while (logViewer.children.length > 50) { + logViewer.removeChild(logViewer.firstChild); + } + logViewer.scrollTop = logViewer.scrollHeight; - logCount++; }); document.getElementById('clear-logs').addEventListener('click', () => { @@ -471,6 +628,193 @@ document.addEventListener('DOMContentLoaded', async () => { feather.replace(); }, + maintenance: async () => { + pageTitle.textContent = 'メンテナンス設定'; + pageSubtitle.textContent = 'ボット全体のメンテナンスモードを管理'; + + const status = await api.get('/api/admin/maintenance'); + + pageContent.innerHTML = ` +| ユーザーID | アクション |
|---|---|
| ${id} | ++ |
| ブラックリストは空です。 | |
| 時刻 | +メモリ (MB) | +Ping (ms) | +
|---|
ページが見つかりません
'; - } - } catch (error) { - pageContent.innerHTML = `エラー: ${error.message}
本当にログアウトしますか？
', - [ - { id: 'cancel-logout', text: 'キャンセル', class: 'btn-secondary' }, - { id: 'confirm-logout', text: 'ログアウト', class: 'btn-danger' } - ] - ); - document.getElementById('cancel-logout').onclick = closeModal; - document.getElementById('confirm-logout').onclick = async () => { - try { - await api.post('/api/admin/logout'); - window.location.href = '/admin-login.html'; - } catch (err) { - showMessage('ログアウトに失敗しました', 'error'); - } - }; - }); - - menuToggle.addEventListener('click', () => { - sidebar.classList.toggle('is-open'); - }); - - // Load initial page - const hash = window.location.hash.slice(1) || 'servers'; - loadPage(hash); - - } catch (error) { - loader.innerHTML = `情報の読み込みに失敗しました。再ログインしてください。
ログインページへ`; - } - }; + } +}; - init(); + window.App = App; + App.init(); }); diff --git a/public/client.js b/public/client.js index 2ef51e2..164ed05 100644 --- a/public/client.js +++ b/public/client.js @@ -180,82 +180,301 @@ document.addEventListener('DOMContentLoaded', async () => { console.log('isDirty reset to false.'); }; - // --- Page Rendering --- - const renderers = { - dashboard: async () => { + // --- Dashboard Application Module --- + const escapeHTML = (str) => { + if (!str) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + }; + + const App = { + state: { + currentPage: 'dashboard', + isInitialLoad: true + }, + + init: async () => { + try { + guildInfo = await api.get('/api/guild-info'); + document.getElementById('server-icon').src = guildInfo.icon || 'https://cdn.discordapp.com/embed/avatars/0.png'; + document.getElementById('server-name').textContent = guildInfo.name; + + loader.style.display = 'none'; + dashboardWrapper.style.display = 'flex'; + + window.addEventListener('hashchange', App.handleRoute, false); + await App.handleRoute(); + + App.bindGlobalEvents(); + } catch (error) { + console.error('App init error:', error); + loader.innerHTML = `ログインページへ`; + } + }, + + handleRoute: async (event) => { + const proceed = async () => { + resetDirtyState(); + if (window.innerWidth <= 768) { + sidebar.classList.remove('is-open'); + } + + const page = window.location.hash.substring(1) || 'dashboard'; + App.state.currentPage = page; + + navItems.forEach(item => item.classList.toggle('active', item.dataset.page === page)); + pageContent.innerHTML = ''; + + if (App.renderers[page]) { + try { + await App.renderers[page](); + } catch (error) { + console.error(`Render error on ${page}:`, error); + pageContent.innerHTML = ``; + } + } else { + pageContent.innerHTML = ``; + } + + feather.replace(); + window.scrollTo(0, 0); + }; + + if (isDirty) { + if (event && event.type === 'hashchange') { + event.preventDefault(); + const oldHash = event.oldURL.split('#')[1] || 'dashboard'; + history.pushState(null, null, `#${oldHash}`); + } + + createModal('未保存の変更があります', + 'ページを移動すると、保存されていない変更は失われます。本当に移動しますか？
', + [ + { id: 'cancel-nav', text: 'キャンセル', class: 'btn-secondary' }, + { id: 'confirm-nav', text: '移動する', class: 'btn-danger' } + ] + ); + document.getElementById('cancel-nav').onclick = closeModal; + document.getElementById('confirm-nav').onclick = () => { + closeModal(); + if (event) { + const newHash = new URL(event.newURL).hash; + window.location.hash = newHash; + } + proceed(); + }; + } else { + proceed(); + } + }, + + bindGlobalEvents: () => { + logoutBtn.addEventListener('click', () => { + createModal('ログアウトの確認', + '本当にログアウトしますか？
', + [ + { id: 'cancel-logout', text: 'キャンセル', class: 'btn-secondary' }, + { id: 'confirm-logout', text: 'ログアウト', class: 'btn-danger' } + ] + ); + document.getElementById('cancel-logout').onclick = closeModal; + document.getElementById('confirm-logout').onclick = async () => { + try { + isDirty = false; + await api.post('/api/logout'); + window.location.href = '/login'; + } catch (err) { + showMessage('ログアウトに失敗しました', 'error'); + } + }; + }); + + menuToggle.addEventListener('click', () => { + sidebar.classList.toggle('is-open'); + }); + + window.addEventListener('beforeunload', (e) => { + if (isDirty) { + e.preventDefault(); + e.returnValue = ''; + return ''; + } + }); + }, + + renderers: { + dashboard: async () => { pageTitle.textContent = 'ダッシュボード'; - const settings = await api.get('/api/settings/guilds'); + pageContent.innerHTML = ''; + const [settings, trends] = await Promise.all([ + api.get('/api/settings/guilds'), + api.get('/api/analytics/trends') + ]); + + const recentLogs = await api.get('/api/audit-logs?limit=5'); + pageContent.innerHTML = ` -| 日時 | +アクション | +ユーザー | +
|---|---|---|
| ${new Date(log.timestamp.seconds * 1000).toLocaleString()} | +${escapeHTML(log.eventType)} | +${escapeHTML(log.executorTag || 'System')} | +
| 表示可能なログはありません。 | ||
| ユーザー | ロール | 参加日 | 統計 | -アクション | +操作 |
|---|