[deploy]

public/ts/components/modules/dynamicVoice.ts

@@ -0,0 +1,22 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderDynamicVoiceModule(guildId: string) {
+  const container = document.getElementById('module-dynamicvoice');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Dynamic Voice...</p>';
+  try {
+    const data: any = await api.dynamicVoice(guildId);
+    const cfg = data?.config || data?.dynamicVoiceConfig || {};
+    container.innerHTML = `
+      <h3 class="label">Dynamic Voice</h3>
+      <p class="muted">Lobby: ${cfg.lobbyChannelId || '-'}</p>
+      <p class="muted">Template: ${cfg.template || '-'}</p>
+      <p class="muted">User-Limit: ${cfg.userLimit ?? '-'}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Dynamic Voice konnte nicht geladen werden.</div>';
+    showToast('Fehler beim Laden von Dynamic Voice', true);
+  }
+}

public/ts/components/modules/index.ts

@@ -0,0 +1,99 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+import { setSwitch, getSwitch } from '../../ui/switch.js';
+import { renderWelcomeModule } from './welcome.js';
+import { renderLoggingModule } from './logging.js';
+import { renderReactionRolesModule } from './reactionRoles.js';
+import { renderDynamicVoiceModule } from './dynamicVoice.js';
+import { renderStatuspageModule } from './statuspage.js';
+import { renderServerStatsModule } from './serverstats.js';
+
+export async function initModulesSection(guildId: string) {
+  const section = document.getElementById('section-modules');
+  if (!section) return;
+  section.innerHTML = `
+    <h2 class="section-title">Module</h2>
+    <div class="card">
+      <div class="module-list" id="module-toggles"></div>
+    </div>
+    <div class="grid" style="margin-top:16px;">
+      <div class="card" id="module-welcome"></div>
+      <div class="card" id="module-logging"></div>
+      <div class="card" id="module-reactionroles"></div>
+      <div class="card" id="module-dynamicvoice"></div>
+      <div class="card" id="module-statuspage"></div>
+      <div class="card" id="module-serverstats"></div>
+    </div>
+  `;
+  await Promise.all([
+    renderModuleToggles(guildId),
+    renderWelcomeModule(guildId),
+    renderLoggingModule(guildId),
+    renderReactionRolesModule(guildId),
+    renderDynamicVoiceModule(guildId),
+    renderStatuspageModule(guildId),
+    renderServerStatsModule(guildId)
+  ]);
+}
+
+async function renderModuleToggles(guildId: string) {
+  const container = document.getElementById('module-toggles');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Module...</p>';
+  try {
+    const data: any = await api.modules(guildId);
+    const modules = data?.modules || data || {};
+    container.innerHTML = '';
+    const entries: Array<{ key: string; label: string; desc: string }> = [
+      { key: 'ticketsEnabled', label: 'Tickets', desc: 'Ticket-System aktivieren' },
+      { key: 'automodEnabled', label: 'Automod', desc: 'Moderations-Filter' },
+      { key: 'welcomeEnabled', label: 'Welcome', desc: 'Begrueßungsnachrichten' },
+      { key: 'musicEnabled', label: 'Musik', desc: 'Musiksteuerung' },
+      { key: 'levelingEnabled', label: 'Leveling', desc: 'XP/Level System' },
+      { key: 'statuspageEnabled', label: 'Statuspage', desc: 'Statusberichte' },
+      { key: 'serverStatsEnabled', label: 'Server Stats', desc: 'Stat-Channel' },
+      { key: 'birthdayEnabled', label: 'Birthday', desc: 'Geburtstagsmodul' },
+      { key: 'reactionRolesEnabled', label: 'Reaction Roles', desc: 'Selbstzuweisbare Rollen' },
+      { key: 'eventsEnabled', label: 'Events', desc: 'Event-Planung' },
+      { key: 'dynamicVoiceEnabled', label: 'Dynamic Voice', desc: 'Dynamische Voice Channels' }
+    ];
+    entries.forEach((entry) => {
+      const row = document.createElement('div');
+      row.className = 'module-item';
+      row.innerHTML = `
+        <div class="module-meta">
+          <div class="module-title">${entry.label}</div>
+          <div class="module-desc">${entry.desc}</div>
+        </div>
+        <div class="switch ${modules[entry.key] ? 'on' : ''}" data-key="${entry.key}"></div>
+      `;
+      const toggle = row.querySelector('.switch') as HTMLElement;
+      toggle.addEventListener('click', async () => {
+        setSwitch(toggle, !getSwitch(toggle));
+        await saveModules(guildId);
+      });
+      container.appendChild(row);
+    });
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Module konnten nicht geladen werden.</div>';
+    showToast('Fehler beim Laden der Module', true);
+  }
+}
+
+async function saveModules(guildId: string) {
+  const toggles = Array.from(document.querySelectorAll<HTMLElement>('#module-toggles .switch'));
+  const payload: Record<string, unknown> = { guildId };
+  toggles.forEach((t) => {
+    const key = t.dataset.key;
+    if (!key) return;
+    payload[key] = t.classList.contains('on');
+  });
+  try {
+    await api.saveSettings(payload);
+    showToast('Module gespeichert');
+  } catch (err) {
+    console.error(err);
+    showToast('Module speichern fehlgeschlagen', true);
+  }
+}

public/ts/components/modules/logging.ts

@@ -0,0 +1,22 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderLoggingModule(guildId: string) {
+  const container = document.getElementById('module-logging');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Logging...</p>';
+  try {
+    const data: any = await api.settings(guildId);
+    const cfg = data?.settings?.loggingConfig || data?.loggingConfig || {};
+    container.innerHTML = `
+      <h3 class="label">Logging</h3>
+      <p class="muted">Channel: ${cfg.logChannelId || '-'}</p>
+      <p class="muted">Join/Leave: ${cfg.categories?.joinLeave ? 'an' : 'aus'}</p>
+      <p class="muted">System: ${cfg.categories?.system ? 'an' : 'aus'}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Logging konnte nicht geladen werden.</div>';
+    showToast('Fehler beim Laden von Logging', true);
+  }
+}

public/ts/components/modules/reactionRoles.ts

@@ -0,0 +1,33 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderReactionRolesModule(guildId: string) {
+  const container = document.getElementById('module-reactionroles');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Reaction Roles...</p>';
+  try {
+    const data: any = await api.reactionRoles(guildId);
+    const entries = data?.entries || data?.reactionRoles || [];
+    container.innerHTML = '<h3 class="label">Reaction Roles</h3>';
+    if (!entries.length) {
+      container.innerHTML += '<div class="empty-state">Keine Reaction Roles.</div>';
+      return;
+    }
+    const list = document.createElement('div');
+    list.className = 'ticket-list';
+    entries.slice(0, 3).forEach((e: any) => {
+      const item = document.createElement('div');
+      item.className = 'ticket-item';
+      item.innerHTML = `
+        <div style="font-weight:750;">${e.title || e.messageId || 'Eintrag'}</div>
+        <div class="muted">${e.channelId || ''}</div>
+      `;
+      list.appendChild(item);
+    });
+    container.appendChild(list);
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Reaction Roles konnten nicht geladen werden.</div>';
+    showToast('Fehler beim Laden der Reaction Roles', true);
+  }
+}

public/ts/components/modules/serverstats.ts

@@ -0,0 +1,23 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderServerStatsModule(guildId: string) {
+  const container = document.getElementById('module-serverstats');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Server Stats...</p>';
+  try {
+    const data: any = await api.serverStats(guildId);
+    const cfg = data?.config || data || {};
+    const items = cfg.items || [];
+    container.innerHTML = `
+      <h3 class="label">Server Stats</h3>
+      <p class="muted">Kategorie: ${cfg.categoryId || '-'}</p>
+      <p class="muted">Refresh: ${cfg.refresh || '-'}m</p>
+      <p class="muted">Items: ${items.length}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Server Stats konnten nicht geladen werden.</div>';
+    showToast('Fehler beim Laden der Server Stats', true);
+  }
+}

public/ts/components/modules/statuspage.ts

@@ -0,0 +1,23 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderStatuspageModule(guildId: string) {
+  const container = document.getElementById('module-statuspage');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Statuspage...</p>';
+  try {
+    const data: any = await api.statuspage(guildId);
+    const cfg = data?.config || data || {};
+    const services = cfg.services || [];
+    container.innerHTML = `
+      <h3 class="label">Statuspage</h3>
+      <p class="muted">Channel: ${cfg.channelId || '-'}</p>
+      <p class="muted">Intervall: ${cfg.interval || '-'}m</p>
+      <p class="muted">Services: ${services.length}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Statuspage konnte nicht geladen werden.</div>';
+    showToast('Fehler beim Laden der Statuspage', true);
+  }
+}

public/ts/components/modules/welcome.ts

@@ -0,0 +1,22 @@
+import { api } from '../../services/api.js';
+import { showToast } from '../../ui/toast.js';
+
+export async function renderWelcomeModule(guildId: string) {
+  const container = document.getElementById('module-welcome');
+  if (!container) return;
+  container.innerHTML = '<p class="muted">Lade Welcome...</p>';
+  try {
+    const data: any = await api.settings(guildId);
+    const cfg = data?.settings?.welcomeConfig || data?.welcomeConfig || {};
+    container.innerHTML = `
+      <h3 class="label">Welcome</h3>
+      <p class="muted">Channel: ${cfg.channelId || '-'}</p>
+      <p class="muted">Embed Titel: ${cfg.embedTitle || '-'}</p>
+      <p class="muted">Status: ${data?.settings?.welcomeEnabled ? 'aktiv' : 'inaktiv'}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<div class="empty-state">Welcome konnte nicht geladen werden.</div>';
+    showToast('Fehler beim Laden von Welcome', true);
+  }
+}