Server-Monitor v3, Composer v2, Temp-Voice-Panel und Embed-Polish
- Server-Monitor v3: gamedig-Integration (300+ Spiele), GSM-Stil-Embeds (Spieler-Balken mit %, Map, Spieler-Liste, klickbarer Connect-Link, Ping im Footer), Down/Up-Alerts (2 Fails → 🚨, Recovery → ✅ mit Downtime) in konfigurierbaren Alert-Kanal; Server-Tab mit 19 Spiel-Presets, Host/Port bzw. Query-URL und Connect-URL - Composer v2: visueller Embed-Builder mit Live-Discord-Preview (Autor, Felder, Bilder, Farbe, Footer, Timestamp), speicherbare Vorlagen (/api/templates), /api/compose versteht volle Embeds - Temp-Voice: Control-Panel im erstellten Kanal (Umbenennen, Sperren, Limit, Löschen) — nur der Kanal-Besitzer darf bedienen - Embed-Polish: brandEmbed-Factory (src/embeds.js), Footer überall mit Bot-Avatar-Icon Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,262 @@
|
||||
// Composer v2 (Vorbild: message.style / embed-generator): voller Embed-Builder
|
||||
// mit Live-Vorschau im Discord-Look + speicherbaren Vorlagen.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
|
||||
import { Markdown } from '../markdown.jsx';
|
||||
|
||||
const EMPTY_EMBED = {
|
||||
author_name: '', author_icon: '', title: '', url: '', description: '',
|
||||
color: '#f5c518', thumbnail: '', image: '', footer: '', timestamp: true,
|
||||
fields: [],
|
||||
};
|
||||
|
||||
/** Builder-State → Discord-Embed-Objekt (nur gesetzte Felder) */
|
||||
function toApiEmbed(e) {
|
||||
const out = {};
|
||||
if (e.author_name.trim()) {
|
||||
out.author = { name: e.author_name.trim() };
|
||||
if (e.author_icon.trim()) out.author.icon_url = e.author_icon.trim();
|
||||
}
|
||||
if (e.title.trim()) out.title = e.title.trim();
|
||||
if (e.url.trim()) out.url = e.url.trim();
|
||||
if (e.description.trim()) out.description = e.description;
|
||||
out.color = parseInt(e.color.replace('#', ''), 16) || 0xf5c518;
|
||||
if (e.thumbnail.trim()) out.thumbnail = { url: e.thumbnail.trim() };
|
||||
if (e.image.trim()) out.image = { url: e.image.trim() };
|
||||
if (e.footer.trim()) out.footer = { text: e.footer.trim() };
|
||||
if (e.timestamp) out.timestamp = new Date().toISOString();
|
||||
const fields = e.fields.filter((f) => f.name.trim() && f.value.trim());
|
||||
if (fields.length) out.fields = fields;
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Discord-Embed-Objekt (aus Vorlage) → Builder-State */
|
||||
function fromApiEmbed(embed) {
|
||||
if (!embed) return { ...EMPTY_EMBED, fields: [] };
|
||||
return {
|
||||
author_name: embed.author?.name ?? '',
|
||||
author_icon: embed.author?.icon_url ?? '',
|
||||
title: embed.title ?? '',
|
||||
url: embed.url ?? '',
|
||||
description: embed.description ?? '',
|
||||
color: `#${Number(embed.color ?? 0xf5c518).toString(16).padStart(6, '0')}`,
|
||||
thumbnail: embed.thumbnail?.url ?? '',
|
||||
image: embed.image?.url ?? '',
|
||||
footer: embed.footer?.text ?? '',
|
||||
timestamp: Boolean(embed.timestamp),
|
||||
fields: (embed.fields ?? []).map((f) => ({ name: f.name, value: f.value, inline: Boolean(f.inline) })),
|
||||
};
|
||||
}
|
||||
|
||||
/** Live-Vorschau im Discord-Look */
|
||||
function DiscordPreview({ content, embed, useEmbed }) {
|
||||
const hasEmbed = useEmbed && (embed.title || embed.description || embed.author_name || embed.fields.some((f) => f.name));
|
||||
return (
|
||||
<div className="dpv">
|
||||
<div className="dpv-msg">
|
||||
<div className="dpv-avatar">🤖</div>
|
||||
<div className="dpv-body">
|
||||
<div className="dpv-name">d4rkbot <span className="dpv-tag">APP</span> <span className="dpv-time">heute um {new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr</span></div>
|
||||
{content.trim() && <div className="dpv-content"><Markdown text={content} /></div>}
|
||||
{hasEmbed && (
|
||||
<div className="dpv-embed" style={{ borderLeftColor: embed.color }}>
|
||||
<div className="dpv-embed-main">
|
||||
{embed.author_name && (
|
||||
<div className="dpv-author">
|
||||
{embed.author_icon && <img src={embed.author_icon} alt="" />}
|
||||
{embed.author_name}
|
||||
</div>
|
||||
)}
|
||||
{embed.title && <div className="dpv-title">{embed.title}</div>}
|
||||
{embed.description && <div className="dpv-desc"><Markdown text={embed.description} /></div>}
|
||||
{embed.fields.filter((f) => f.name && f.value).length > 0 && (
|
||||
<div className="dpv-fields">
|
||||
{embed.fields.filter((f) => f.name && f.value).map((f, i) => (
|
||||
<div className={`dpv-field ${f.inline ? 'inline' : ''}`} key={i}>
|
||||
<div className="dpv-field-name">{f.name}</div>
|
||||
<div className="dpv-field-value"><Markdown text={f.value} /></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{embed.image && <img className="dpv-image" src={embed.image} alt="" />}
|
||||
{(embed.footer || embed.timestamp) && (
|
||||
<div className="dpv-footer">
|
||||
{embed.footer}{embed.footer && embed.timestamp ? ' • ' : ''}{embed.timestamp ? 'heute' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{embed.thumbnail && <img className="dpv-thumb" src={embed.thumbnail} alt="" />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EmbedComposer({ channelOptions, flash }) {
|
||||
const [channel, setChannel] = useState('');
|
||||
const [messageId, setMessageId] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [useEmbed, setUseEmbed] = useState(true);
|
||||
const [embed, setEmbed] = useState({ ...EMPTY_EMBED, fields: [] });
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [templateName, setTemplateName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
apiGet('/api/templates').then((d) => setTemplates(d.templates)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const setE = (patch) => setEmbed({ ...embed, ...patch });
|
||||
const setField = (i, patch) =>
|
||||
setE({ fields: embed.fields.map((f, j) => (j === i ? { ...f, ...patch } : f)) });
|
||||
|
||||
async function send() {
|
||||
if (!channel) return flash('✗ Kanal wählen');
|
||||
const apiEmbed = useEmbed ? toApiEmbed(embed) : undefined;
|
||||
if (!content.trim() && !useEmbed) return flash('✗ Text oder Embed nötig');
|
||||
try {
|
||||
const res = await apiPost('/api/compose', {
|
||||
channel_id: channel,
|
||||
message_id: messageId.trim() || undefined,
|
||||
content,
|
||||
embed: apiEmbed,
|
||||
});
|
||||
flash(res.edited ? '✓ Aktualisiert' : `✓ Gesendet (ID ${res.message_id})`);
|
||||
if (!res.edited) setMessageId(res.message_id);
|
||||
} catch {
|
||||
flash('✗ Senden fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveTemplate() {
|
||||
if (!templateName.trim()) return flash('✗ Vorlagen-Name nötig');
|
||||
try {
|
||||
const res = await apiPut(`/api/templates/${encodeURIComponent(templateName.trim())}`, {
|
||||
content,
|
||||
embed: useEmbed ? toApiEmbed(embed) : null,
|
||||
});
|
||||
setTemplates(res.templates);
|
||||
flash('✓ Vorlage gespeichert');
|
||||
} catch {
|
||||
flash('✗ Vorlage fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
|
||||
function loadTemplate(name) {
|
||||
const t = templates.find((x) => x.name === name);
|
||||
if (!t) return;
|
||||
setContent(t.payload.content ?? '');
|
||||
setUseEmbed(Boolean(t.payload.embed));
|
||||
setEmbed(fromApiEmbed(t.payload.embed));
|
||||
setTemplateName(name);
|
||||
}
|
||||
|
||||
async function removeTemplate() {
|
||||
if (!templateName.trim() || !window.confirm(`Vorlage „${templateName}" löschen?`)) return;
|
||||
const res = await apiDelete(`/api/templates/${encodeURIComponent(templateName.trim())}`).catch(() => null);
|
||||
if (res) { setTemplates(res.templates); setTemplateName(''); flash('✓ Vorlage gelöscht'); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Post verfassen</h2>
|
||||
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<select value={channel} onChange={(e) => setChannel(e.target.value)}>
|
||||
<option value="" disabled>— Kanal wählen —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
<input type="text" style={{ flex: 'none', width: '13rem' }} placeholder="Message-ID (= bearbeiten)" value={messageId} onChange={(e) => setMessageId(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<select style={{ flex: 1 }} value={templateName} onChange={(e) => loadTemplate(e.target.value)}>
|
||||
<option value="">— Vorlage laden —</option>
|
||||
{templates.map((t) => <option key={t.name} value={t.name}>{t.name}</option>)}
|
||||
</select>
|
||||
<input type="text" style={{ flex: 1 }} placeholder="Als Vorlage speichern unter…" value={templateName} onChange={(e) => setTemplateName(e.target.value)} />
|
||||
<button className="btn" onClick={saveTemplate}>💾</button>
|
||||
<button className="card-delete" title="Vorlage löschen" onClick={removeTemplate}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="composer-grid">
|
||||
<div className="composer-form">
|
||||
<div className="field">
|
||||
<label>Text über dem Embed <span className="field-hint">Discord-Markdown</span></label>
|
||||
<textarea rows={3} value={content} onChange={(e) => setContent(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="toggle">
|
||||
<input type="checkbox" checked={useEmbed} onChange={(e) => setUseEmbed(e.target.checked)} />
|
||||
<span>Embed anhängen</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{useEmbed && (
|
||||
<>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="color" className="color-pick" title="Embed-Farbe" value={embed.color} onChange={(e) => setE({ color: e.target.value })} />
|
||||
<input type="text" placeholder="Author-Name" value={embed.author_name} onChange={(e) => setE({ author_name: e.target.value })} />
|
||||
<input type="text" placeholder="Author-Icon-URL" value={embed.author_icon} onChange={(e) => setE({ author_icon: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Titel" value={embed.title} onChange={(e) => setE({ title: e.target.value })} />
|
||||
<input type="text" placeholder="Titel-URL" value={embed.url} onChange={(e) => setE({ url: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<textarea rows={5} placeholder="Beschreibung (Markdown: **fett**, Listen, ## Überschriften …)" value={embed.description} onChange={(e) => setE({ description: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Thumbnail-URL (klein, rechts)" value={embed.thumbnail} onChange={(e) => setE({ thumbnail: e.target.value })} />
|
||||
<input type="text" placeholder="Bild-URL (groß, unten)" value={embed.image} onChange={(e) => setE({ image: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Felder</label>
|
||||
{embed.fields.map((f, i) => (
|
||||
<div className="rr-row" key={i}>
|
||||
<input type="text" style={{ flex: 'none', width: '11rem' }} placeholder="Feld-Name" value={f.name} onChange={(e) => setField(i, { name: e.target.value })} />
|
||||
<input type="text" placeholder="Feld-Wert" value={f.value} onChange={(e) => setField(i, { value: e.target.value })} />
|
||||
<label className="scope-pick" title="Nebeneinander">
|
||||
<input type="checkbox" checked={f.inline} onChange={(e) => setField(i, { inline: e.target.checked })} />
|
||||
inline
|
||||
</label>
|
||||
<button className="card-delete" onClick={() => setE({ fields: embed.fields.filter((_, j) => j !== i) })}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-mini" style={{ marginTop: '.4rem' }} disabled={embed.fields.length >= 25}
|
||||
onClick={() => setE({ fields: [...embed.fields, { name: '', value: '', inline: true }] })}>+ Feld</button>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Footer-Text" value={embed.footer} onChange={(e) => setE({ footer: e.target.value })} />
|
||||
<label className="scope-pick"><input type="checkbox" checked={embed.timestamp} onChange={(e) => setE({ timestamp: e.target.checked })} /> Zeitstempel</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="settings-actions">
|
||||
<button className="btn btn-save" onClick={send}>{messageId.trim() ? 'Aktualisieren' : 'Senden'}</button>
|
||||
{messageId.trim() && <button className="btn btn-ghost" onClick={() => setMessageId('')}>Neu statt bearbeiten</button>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="composer-preview">
|
||||
<label>Vorschau</label>
|
||||
<DiscordPreview content={content} embed={embed} useEmbed={useEmbed} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user