added json editor for configuration files

app/routes/admin.py

@@ -6,7 +6,7 @@ from datetime import datetime
 
 from flask import Blueprint, render_template, request, jsonify, redirect, url_for, current_app
 from app.state import current_config
-from app.utils.helpers import load_configs, load_default_sounds
+from app.utils.helpers import load_configs, load_default_sounds, load_soundboard_configs
 
 admin_bp = Blueprint('admin', __name__)
 logger = logging.getLogger(__name__)
@@ -14,7 +14,8 @@ logger = logging.getLogger(__name__)
 @admin_bp.route('/')
 def admin():
     configs = load_configs()
-    return render_template('admin.html', configs=configs)
+    sb_configs = load_soundboard_configs(current_app.config['SOUNDBOARD_CONFIG_DIR'])
+    return render_template('admin.html', configs=configs, sb_configs=sb_configs)
 
 
 @admin_bp.route('/edit/<filename>', methods=['GET', 'POST'])
@@ -112,3 +113,63 @@ def admin_logs(date=None):
                            dates=dates,
                            today=current_month)
     pass
+
+
+def _slugify(name: str) -> str:
+    return "".join(c.lower() if c.isalnum() else "_" for c in name).strip("_") or "config"
+
+
+@admin_bp.route('/create_config', methods=['POST'])
+def admin_create_config():
+    data = request.get_json() or {}
+    name = data.get('name') or 'Neue Lok'
+    hub_id = int(data.get('hub_id', 0))
+    hub_type = data.get('hub_type', '4channel')
+    image = data.get('image')
+
+    filename = _slugify(name) + '.json'
+    path = os.path.join(current_app.config['CONFIG_DIR'], filename)
+    if os.path.exists(path):
+        return jsonify({"success": False, "message": "Datei existiert bereits"}), 400
+
+    template = {
+        "name": name,
+        "image": image or "",
+        "hub_id": hub_id,
+        "hub_type": hub_type,
+        "channels": [],
+        "sounds": []
+    }
+    os.makedirs(current_app.config['CONFIG_DIR'], exist_ok=True)
+    with open(path, 'w', encoding='utf-8') as f:
+        json.dump(template, f, ensure_ascii=False, indent=2)
+    logger.info(f"Neue Config angelegt: {filename}")
+    return jsonify({"success": True, "filename": filename})
+
+
+@admin_bp.route('/create_theme', methods=['POST'])
+def admin_create_theme():
+    data = request.get_json() or {}
+    name = data.get('name') or 'Neues Theme'
+    folder = data.get('folder') or _slugify(name)
+    filename = data.get('filename') or 'theme.json'
+
+    base_dir = current_app.config['SOUNDBOARD_CONFIG_DIR']
+    theme_dir = os.path.join(base_dir, folder)
+    os.makedirs(theme_dir, exist_ok=True)
+    path = os.path.join(theme_dir, filename)
+    if os.path.exists(path):
+        return jsonify({"success": False, "message": "Theme-Datei existiert bereits"}), 400
+
+    template = {
+        "name": name,
+        "backgrounds": [],
+        "sounds": [],
+        "random_pool": [],
+        "random_limit_per_hour": 2,
+        "random_window_minutes": 60
+    }
+    with open(path, 'w', encoding='utf-8') as f:
+        json.dump(template, f, ensure_ascii=False, indent=2)
+    logger.info(f"Neues Theme angelegt: {os.path.relpath(path, base_dir)}")
+    return jsonify({"success": True, "path": os.path.relpath(path, base_dir)})

templates/admin.html

@@ -12,9 +12,12 @@
         <i class="bi bi-journal-text me-2"></i>Logs ansehen
       </a>
     </div>
-    <div class="col text-end">
+    <div class="col text-end d-flex gap-2 justify-content-end">
       <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#newConfigModal">
-        <i class="bi bi-plus-circle me-2"></i>Neue Konfiguration
+        <i class="bi bi-plus-circle me-2"></i>Neue MK-Konfiguration
+      </a>
+      <a href="#" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#newThemeModal">
+        <i class="bi bi-music-note-list me-2"></i>Neues Soundboard-Theme
       </a>
     </div>
   </div>
@@ -59,9 +62,33 @@
       Noch keine Konfigurationen vorhanden. Erstelle eine neue.
     </div>
   {% endif %}
+
+  <h3 class="mt-5 mb-3">Soundboard-Themes</h3>
+  {% if sb_configs %}
+    <div class="table-responsive">
+      <table class="table table-hover align-middle">
+        <thead class="table-dark">
+          <tr>
+            <th>Name</th>
+            <th>Datei</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for sb in sb_configs %}
+            <tr>
+              <td>{{ sb.name }}</td>
+              <td><code>{{ sb.filename }}</code></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% else %}
+    <div class="alert alert-info">Noch keine Themes vorhanden.</div>
+  {% endif %}
 </div>
 
-<!-- Modal für neue Config (Platzhalter – später ausbauen) -->
+<!-- Modal für neue MK-Konfiguration -->
 <div class="modal fade" id="newConfigModal" tabindex="-1" aria-labelledby="newConfigModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
@@ -70,11 +97,77 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>Hier könnte später ein Formular kommen (Name, Hub-ID, Kanäle...).<br>
+        <form id="form-new-config">
-           Für den Moment: Erstelle einfach eine .json-Datei im <code>configs/</code>-Ordner.</p>
+          <div class="row g-3">
+            <div class="col-md-6">
+              <label class="form-label">Name</label>
+              <input class="form-control" name="name" required placeholder="z.B. Dampflok BR 01">
+            </div>
+            <div class="col-md-3">
+              <label class="form-label">Hub-ID</label>
+              <input class="form-control" name="hub_id" type="number" min="0" max="2" value="0">
+            </div>
+            <div class="col-md-3">
+              <label class="form-label">Hub-Typ</label>
+              <select class="form-select" name="hub_type">
+                <option value="4channel">4channel</option>
+                <option value="6channel">6channel</option>
+              </select>
+            </div>
+            <div class="col-12">
+              <label class="form-label">Bilddatei (optional)</label>
+              <input class="form-control" name="image" placeholder="z.B. dampflok1.jpg">
+              <small class="text-muted">Datei im configs/-Ordner ablegen.</small>
+            </div>
+          </div>
+        </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        <button type="button" class="btn btn-primary" id="btn-save-config">Anlegen</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal für neues Soundboard-Theme -->
+<div class="modal fade" id="newThemeModal" tabindex="-1" aria-labelledby="newThemeModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="newThemeModalLabel">Neues Soundboard-Theme anlegen</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form id="form-new-theme">
+          <div class="row g-3">
+            <div class="col-md-6">
+              <label class="form-label">Name</label>
+              <input class="form-control" name="name" required placeholder="z.B. Wilder Westen">
+            </div>
+            <div class="col-md-6">
+              <label class="form-label">Ordner (optional)</label>
+              <input class="form-control" name="folder" placeholder="wilder-westen">
+              <small class="text-muted">Unterordner in soundboards/. Standard: Slug des Namens.</small>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label">Dateiname</label>
+              <input class="form-control" name="filename" value="theme.json">
+            </div>
+            <div class="col-md-3">
+              <label class="form-label">Limit/h (Random)</label>
+              <input class="form-control" name="random_limit_per_hour" type="number" min="1" value="2">
+            </div>
+            <div class="col-md-3">
+              <label class="form-label">Fenster (Min)</label>
+              <input class="form-control" name="random_window_minutes" type="number" min="1" value="60">
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        <button type="button" class="btn btn-primary" id="btn-save-theme">Anlegen</button>
       </div>
     </div>
   </div>
@@ -107,5 +200,46 @@
       });
     });
   });
+
+  // Neue Config speichern
+  document.getElementById('btn-save-config')?.addEventListener('click', async () => {
+    const form = document.getElementById('form-new-config');
+    const data = Object.fromEntries(new FormData(form).entries());
+    data.hub_id = parseInt(data.hub_id || 0, 10);
+    try {
+      const res = await fetch('/admin/create_config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data)
+      });
+      const json = await res.json();
+      if (!json.success) throw new Error(json.message || 'Fehler');
+      alert('Konfiguration angelegt: ' + json.filename);
+      location.reload();
+    } catch (e) {
+      alert('Fehler: ' + e.message);
+    }
+  });
+
+  // Neues Theme speichern
+  document.getElementById('btn-save-theme')?.addEventListener('click', async () => {
+    const form = document.getElementById('form-new-theme');
+    const data = Object.fromEntries(new FormData(form).entries());
+    data.random_limit_per_hour = parseInt(data.random_limit_per_hour || 2, 10);
+    data.random_window_minutes = parseInt(data.random_window_minutes || 60, 10);
+    try {
+      const res = await fetch('/admin/create_theme', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data)
+      });
+      const json = await res.json();
+      if (!json.success) throw new Error(json.message || 'Fehler');
+      alert('Theme angelegt: ' + json.path);
+      location.reload();
+    } catch (e) {
+      alert('Fehler: ' + e.message);
+    }
+  });
 </script>
-{% endblock %}
+{% endblock %}