445 lines
16 KiB
HTML
445 lines
16 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>MinePanel Dashboard - Announcements</title>
|
||
|
|
<link rel="stylesheet" href="/panel.css">
|
||
|
|
<script src="/theme.js"></script>
|
||
|
|
<style>
|
||
|
|
.announce-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-stat {
|
||
|
|
border: 1px solid var(--card-border);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 12px;
|
||
|
|
background: var(--panel-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-stat-title {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--muted-text);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.04em;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-stat-value {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-list {
|
||
|
|
display: grid;
|
||
|
|
gap: 8px;
|
||
|
|
margin-top: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-item {
|
||
|
|
border: 1px solid var(--table-row-border);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 10px;
|
||
|
|
background: var(--panel-bg);
|
||
|
|
display: grid;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-item-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-meta {
|
||
|
|
color: var(--muted-text);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-message {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-toggle {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--muted-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-toolbar {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-message-input {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
background: var(--input-bg);
|
||
|
|
color: var(--text);
|
||
|
|
padding: 10px 11px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.4;
|
||
|
|
min-height: 90px;
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-message-input:focus {
|
||
|
|
outline: 2px solid var(--focus-ring);
|
||
|
|
outline-offset: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-empty {
|
||
|
|
color: var(--muted-text);
|
||
|
|
font-size: 14px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.announce-placeholders {
|
||
|
|
margin-top: 8px;
|
||
|
|
color: var(--muted-text);
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layout">
|
||
|
|
<aside class="sidebar">
|
||
|
|
<div class="sidebar-brand">MinePanel</div>
|
||
|
|
<div id="me" class="sidebar-meta"></div>
|
||
|
|
<nav class="side-nav">
|
||
|
|
<a class="side-link" href="/dashboard/overview">Overview</a>
|
||
|
|
<button class="side-category-toggle" data-category="server" type="button">Server</button>
|
||
|
|
<div class="side-category-items" data-category-items="server">
|
||
|
|
<a class="side-link" href="/console">Console</a>
|
||
|
|
<a class="side-link" href="/dashboard/resources">Resources</a>
|
||
|
|
<a class="side-link" href="/dashboard/players">Players</a>
|
||
|
|
<a class="side-link" href="/dashboard/bans">Bans</a>
|
||
|
|
<a class="side-link" href="/dashboard/plugins">Plugins</a>
|
||
|
|
</div>
|
||
|
|
<button class="side-category-toggle" data-category="panel" type="button">Panel</button>
|
||
|
|
<div class="side-category-items" data-category-items="panel">
|
||
|
|
<a class="side-link" href="/dashboard/users">Users</a>
|
||
|
|
<a class="side-link" href="/dashboard/discord-webhook">Discord Webhook</a>
|
||
|
|
<a class="side-link" href="/dashboard/themes">Themes</a>
|
||
|
|
<a class="side-link" href="/dashboard/extensions">Extensions</a>
|
||
|
|
<a class="side-link" href="/dashboard/extension-config">Extension Config</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<button id="logout" class="secondary sidebar-logout">Logout</button>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main class="content-area">
|
||
|
|
<h1>Announcements</h1>
|
||
|
|
<p>Broadcast rotating server announcements to all online players.</p>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<h2>Status</h2>
|
||
|
|
<div class="announce-grid">
|
||
|
|
<div class="announce-stat">
|
||
|
|
<div class="announce-stat-title">State</div>
|
||
|
|
<div id="stateValue" class="announce-stat-value">Disabled</div>
|
||
|
|
</div>
|
||
|
|
<div class="announce-stat">
|
||
|
|
<div class="announce-stat-title">Interval</div>
|
||
|
|
<div id="intervalValue" class="announce-stat-value">300s</div>
|
||
|
|
</div>
|
||
|
|
<div class="announce-stat">
|
||
|
|
<div class="announce-stat-title">Next Broadcast</div>
|
||
|
|
<div id="nextRunValue" class="announce-stat-value">-</div>
|
||
|
|
</div>
|
||
|
|
<div class="announce-stat">
|
||
|
|
<div class="announce-stat-title">Messages</div>
|
||
|
|
<div id="countValue" class="announce-stat-value">0</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card spaced-top">
|
||
|
|
<h2>Configuration</h2>
|
||
|
|
<label class="checkbox-line"><input id="enabledInput" type="checkbox"> Enable automatic announcements</label>
|
||
|
|
<label for="intervalInput">Broadcast interval (seconds)</label>
|
||
|
|
<input id="intervalInput" type="number" min="10" max="86400" value="300">
|
||
|
|
<div class="announce-toolbar">
|
||
|
|
<button id="saveConfigBtn">Save Configuration</button>
|
||
|
|
<button id="sendNowBtn" class="secondary">Send Next Message Now</button>
|
||
|
|
<button id="refreshBtn" class="secondary">Refresh</button>
|
||
|
|
</div>
|
||
|
|
<p id="status" class="action-status"></p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card spaced-top">
|
||
|
|
<h2>Create Message</h2>
|
||
|
|
<textarea id="messageInput" class="announce-message-input" maxlength="220" placeholder="Welcome to the server! Use /ticket if you need support."></textarea>
|
||
|
|
<p class="announce-placeholders">
|
||
|
|
Add your own prefix directly in the message text (for example <code>[Network]</code> or <code><gold>[MinePanel]</gold></code>).<br>
|
||
|
|
Placeholders: <code>%player%</code>, <code>%time%</code>, <code>%date%</code>, <code>%datetime%</code>, <code>%online%</code>, <code>%max_players%</code>, <code>%world%</code>, <code>%server%</code>, <code>%tps%</code>.
|
||
|
|
</p>
|
||
|
|
<div class="announce-toolbar">
|
||
|
|
<button id="createBtn">Add Message</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card spaced-top">
|
||
|
|
<h2>Messages</h2>
|
||
|
|
<div id="messageList" class="announce-list"></div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function initSidebarCategories() {
|
||
|
|
const storageKey = 'minepanel.sidebar.categories';
|
||
|
|
let savedState = {};
|
||
|
|
try {
|
||
|
|
savedState = JSON.parse(sessionStorage.getItem(storageKey) || '{}') || {};
|
||
|
|
} catch (ignored) {
|
||
|
|
savedState = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
function persistState() {
|
||
|
|
try {
|
||
|
|
sessionStorage.setItem(storageKey, JSON.stringify(savedState));
|
||
|
|
} catch (ignored) {
|
||
|
|
// Ignore unavailable sessionStorage.
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('.side-category-toggle').forEach(toggle => {
|
||
|
|
const category = toggle.dataset.category;
|
||
|
|
const items = document.querySelector(`.side-category-items[data-category-items="${category}"]`);
|
||
|
|
if (!items || !category) return;
|
||
|
|
|
||
|
|
const expanded = savedState[category] === true;
|
||
|
|
items.classList.toggle('expanded', expanded);
|
||
|
|
toggle.classList.toggle('expanded', expanded);
|
||
|
|
|
||
|
|
toggle.addEventListener('click', () => {
|
||
|
|
const nextExpanded = !items.classList.contains('expanded');
|
||
|
|
items.classList.toggle('expanded', nextExpanded);
|
||
|
|
toggle.classList.toggle('expanded', nextExpanded);
|
||
|
|
savedState[category] = nextExpanded;
|
||
|
|
persistState();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function api(url, options) {
|
||
|
|
const response = await fetch(url, options);
|
||
|
|
const payload = await response.json();
|
||
|
|
if (!response.ok) {
|
||
|
|
const error = new Error(payload.error || 'Request failed');
|
||
|
|
error.status = response.status;
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
return payload;
|
||
|
|
}
|
||
|
|
|
||
|
|
function setStatus(message, isError) {
|
||
|
|
const status = document.getElementById('status');
|
||
|
|
status.textContent = message || '';
|
||
|
|
status.className = isError ? 'action-status error-text' : 'action-status success-text';
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadMe() {
|
||
|
|
const data = await api('/api/me');
|
||
|
|
document.getElementById('me').textContent = `Logged in as ${data.user.username} (${data.user.role})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTimestamp(timestamp) {
|
||
|
|
const millis = Number(timestamp || 0);
|
||
|
|
if (!Number.isFinite(millis) || millis <= 0) {
|
||
|
|
return '-';
|
||
|
|
}
|
||
|
|
return new Date(millis).toLocaleString();
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyState(state) {
|
||
|
|
const enabled = state && state.enabled === true;
|
||
|
|
const interval = Number(state && state.intervalSeconds ? state.intervalSeconds : 300);
|
||
|
|
const messages = Array.isArray(state && state.messages) ? state.messages : [];
|
||
|
|
|
||
|
|
document.getElementById('stateValue').textContent = enabled ? 'Enabled' : 'Disabled';
|
||
|
|
document.getElementById('intervalValue').textContent = `${interval}s`;
|
||
|
|
document.getElementById('nextRunValue').textContent = formatTimestamp(state ? state.nextRunAt : 0);
|
||
|
|
document.getElementById('countValue').textContent = String(messages.length);
|
||
|
|
|
||
|
|
document.getElementById('enabledInput').checked = enabled;
|
||
|
|
document.getElementById('intervalInput').value = String(interval);
|
||
|
|
|
||
|
|
renderMessages(messages);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderMessages(messages) {
|
||
|
|
const list = document.getElementById('messageList');
|
||
|
|
list.innerHTML = '';
|
||
|
|
|
||
|
|
if (!Array.isArray(messages) || messages.length === 0) {
|
||
|
|
const empty = document.createElement('p');
|
||
|
|
empty.className = 'announce-empty';
|
||
|
|
empty.textContent = 'No announcements configured yet.';
|
||
|
|
list.appendChild(empty);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const entry of messages) {
|
||
|
|
const item = document.createElement('div');
|
||
|
|
item.className = 'announce-item';
|
||
|
|
|
||
|
|
const header = document.createElement('div');
|
||
|
|
header.className = 'announce-item-header';
|
||
|
|
|
||
|
|
const meta = document.createElement('div');
|
||
|
|
meta.className = 'announce-meta';
|
||
|
|
meta.textContent = `#${entry.id} · Updated ${formatTimestamp(entry.updatedAt)}`;
|
||
|
|
|
||
|
|
const controls = document.createElement('div');
|
||
|
|
controls.className = 'announce-toolbar';
|
||
|
|
|
||
|
|
const toggleLabel = document.createElement('label');
|
||
|
|
toggleLabel.className = 'announce-toggle';
|
||
|
|
toggleLabel.innerHTML = `<input type="checkbox" ${entry.enabled ? 'checked' : ''}> Enabled`;
|
||
|
|
toggleLabel.querySelector('input').addEventListener('change', async (event) => {
|
||
|
|
try {
|
||
|
|
await api(`/api/extensions/announcements/messages/${entry.id}/toggle`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
credentials: 'same-origin',
|
||
|
|
body: JSON.stringify({ enabled: !!event.target.checked })
|
||
|
|
});
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
setStatus(`Could not update message #${entry.id}: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const deleteButton = document.createElement('button');
|
||
|
|
deleteButton.type = 'button';
|
||
|
|
deleteButton.className = 'danger';
|
||
|
|
deleteButton.textContent = 'Delete';
|
||
|
|
deleteButton.addEventListener('click', async () => {
|
||
|
|
try {
|
||
|
|
await api(`/api/extensions/announcements/messages/${entry.id}/delete`, {
|
||
|
|
method: 'POST',
|
||
|
|
credentials: 'same-origin'
|
||
|
|
});
|
||
|
|
setStatus(`Deleted announcement #${entry.id}`, false);
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
setStatus(`Could not delete message #${entry.id}: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
controls.appendChild(toggleLabel);
|
||
|
|
controls.appendChild(deleteButton);
|
||
|
|
header.appendChild(meta);
|
||
|
|
header.appendChild(controls);
|
||
|
|
|
||
|
|
const message = document.createElement('div');
|
||
|
|
message.className = 'announce-message';
|
||
|
|
message.textContent = entry.message || '';
|
||
|
|
|
||
|
|
item.appendChild(header);
|
||
|
|
item.appendChild(message);
|
||
|
|
list.appendChild(item);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function refresh() {
|
||
|
|
const state = await api('/api/extensions/announcements', { credentials: 'same-origin', cache: 'no-store' });
|
||
|
|
applyState(state);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function saveConfig() {
|
||
|
|
const enabled = document.getElementById('enabledInput').checked;
|
||
|
|
const interval = Number(document.getElementById('intervalInput').value || 300);
|
||
|
|
|
||
|
|
try {
|
||
|
|
await api('/api/extensions/announcements/config', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
credentials: 'same-origin',
|
||
|
|
body: JSON.stringify({ enabled, intervalSeconds: interval })
|
||
|
|
});
|
||
|
|
setStatus('Configuration saved', false);
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
setStatus(`Could not save configuration: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function createMessage() {
|
||
|
|
const input = document.getElementById('messageInput');
|
||
|
|
const message = (input.value || '').trim();
|
||
|
|
if (!message) {
|
||
|
|
setStatus('Enter a message first.', true);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
await api('/api/extensions/announcements/messages', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
credentials: 'same-origin',
|
||
|
|
body: JSON.stringify({ message })
|
||
|
|
});
|
||
|
|
input.value = '';
|
||
|
|
setStatus('Announcement added', false);
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
setStatus(`Could not create announcement: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function sendNow() {
|
||
|
|
try {
|
||
|
|
await api('/api/extensions/announcements/send-now', {
|
||
|
|
method: 'POST',
|
||
|
|
credentials: 'same-origin'
|
||
|
|
});
|
||
|
|
setStatus('Sent next announcement', false);
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
setStatus(`Could not send announcement: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function logout() {
|
||
|
|
await api('/api/logout', { method: 'POST', credentials: 'same-origin' });
|
||
|
|
window.location.href = '/';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('saveConfigBtn').addEventListener('click', saveConfig);
|
||
|
|
document.getElementById('createBtn').addEventListener('click', createMessage);
|
||
|
|
document.getElementById('sendNowBtn').addEventListener('click', sendNow);
|
||
|
|
document.getElementById('refreshBtn').addEventListener('click', refresh);
|
||
|
|
document.getElementById('logout').addEventListener('click', logout);
|
||
|
|
|
||
|
|
(async function boot() {
|
||
|
|
try {
|
||
|
|
initSidebarCategories();
|
||
|
|
await loadMe();
|
||
|
|
await refresh();
|
||
|
|
} catch (error) {
|
||
|
|
if (error && error.status === 401) {
|
||
|
|
window.location.href = '/';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setStatus(`Could not load announcements page: ${error.message}`, true);
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|