add system of temporary vocal

2026-06-03 23:36:37 +02:00 · 2026-01-17 23:35:16 +01:00
parent e321e38c19
commit 23d6326ca7
7 changed files with 389 additions and 1 deletions
@@ -516,6 +516,24 @@ body {
  color: var(--text-muted);
 }

+/* ===== Info Box ===== */
+.info-box {
+  background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(88, 101, 242, 0.05));
+  border: 1px solid rgba(88, 101, 242, 0.3);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.info-box strong {
+  color: var(--primary);
+  display: block;
+  margin-bottom: var(--spacing-xs);
+}
+
 /* ===== Mobile Sidebar Toggle ===== */
 .mobile-toggle {
  display: none;
@@ -50,6 +50,10 @@
            <span class="nav-item-icon">💰</span>
            Économie
          </a>
+          <a class="nav-item" data-section="privateroom">
+            <span class="nav-item-icon">🔊</span>
+            Salons temporaires
+          </a>
        </div>
      </nav>
      
@@ -599,6 +603,58 @@
          </div>
        </section>

+        <!-- Section: Salons vocaux temporaires -->
+        <section class="config-section" id="section-privateroom">
+          <div class="config-card">
+            <div class="config-card-header">
+              <div class="config-card-title">
+                <span class="icon">🔊</span>
+                <h3>Salons vocaux temporaires</h3>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="privateroom-enabled">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="config-card-body">
+              <div class="info-box">
+                <strong>💡 Comment ça marche ?</strong><br>
+                Quand un membre rejoint le salon "créateur", un nouveau salon vocal est automatiquement créé pour lui.
+                Le salon est supprimé quand il devient vide.
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Salon créateur</label>
+                <span class="form-sublabel">Le salon vocal que les membres rejoignent pour créer leur salon</span>
+                <select class="form-select" id="privateroom-creator-channel"></select>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Catégorie des salons créés</label>
+                <span class="form-sublabel">Les salons temporaires seront créés dans cette catégorie</span>
+                <select class="form-select" id="privateroom-category"></select>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Format du nom du salon</label>
+                <input type="text" class="form-input" id="privateroom-name-format" value="🔊 Salon de {user}" placeholder="🔊 Salon de {user}">
+              </div>
+
+              <div class="variables-box">
+                <div class="variables-box-title">Variables disponibles</div>
+                <div class="variables-list">
+                  <span class="variable-tag"><code>{user}</code> <span>→ nom d'utilisateur</span></span>
+                  <span class="variable-tag"><code>{displayname}</code> <span>→ pseudo serveur</span></span>
+                </div>
+              </div>
+            </div>
+            <div class="config-card-footer">
+              <div id="status-privateroom-form" class="status-message"></div>
+              <button type="button" class="btn btn-primary" id="save-privateroom">Sauvegarder</button>
+            </div>
+          </div>
+        </section>
+
      </div>
    </main>

@@ -613,5 +669,6 @@
    <script src="/guild/autoroleVocalForm.js"></script>
    <script src="/guild/levelForm.js"></script>
    <script src="/guild/economyForm.js"></script>
+    <script src="/guild/privateroomForm.js"></script>
  </body>
 </html>
@@ -0,0 +1,104 @@
+// ===== PRIVATE ROOM FORM =====
+(async function () {
+  const enabledCheckbox = document.getElementById("privateroom-enabled");
+  const creatorChannelSelect = document.getElementById("privateroom-creator-channel");
+  const categorySelect = document.getElementById("privateroom-category");
+  const nameFormatInput = document.getElementById("privateroom-name-format");
+  const saveBtn = document.getElementById("save-privateroom");
+  const statusDiv = document.getElementById("status-privateroom-form");
+
+  // Charger les salons vocaux
+  async function loadVoiceChannels() {
+    try {
+      const res = await fetch(`/api/bot/get-voice-channels/${guildId}`);
+      const channels = await res.json();
+      creatorChannelSelect.innerHTML = '<option value="">-- Sélectionner un salon --</option>';
+      channels.forEach(ch => {
+        const opt = document.createElement("option");
+        opt.value = ch.id;
+        opt.textContent = ch.name;
+        creatorChannelSelect.appendChild(opt);
+      });
+    } catch (err) {
+      console.error("Erreur chargement salons vocaux:", err);
+    }
+  }
+
+  // Charger les catégories
+  async function loadCategories() {
+    try {
+      const res = await fetch(`/api/bot/get-categories/${guildId}`);
+      const categories = await res.json();
+      categorySelect.innerHTML = '<option value="">-- Sélectionner une catégorie --</option>';
+      categories.forEach(cat => {
+        const opt = document.createElement("option");
+        opt.value = cat.id;
+        opt.textContent = cat.name;
+        categorySelect.appendChild(opt);
+      });
+    } catch (err) {
+      console.error("Erreur chargement catégories:", err);
+    }
+  }
+
+  // Charger la configuration
+  async function loadConfig() {
+    try {
+      const res = await fetch(`/api/bot/get-privateroom-config/${guildId}`);
+      const data = await res.json();
+      
+      enabledCheckbox.checked = data.enabled;
+      nameFormatInput.value = data.channelNameFormat || '🔊 Salon de {user}';
+      
+      // Attendre que les selects soient remplis
+      await Promise.all([loadVoiceChannels(), loadCategories()]);
+      
+      if (data.creatorChannelId) {
+        creatorChannelSelect.value = data.creatorChannelId;
+      }
+      if (data.categoryId) {
+        categorySelect.value = data.categoryId;
+      }
+    } catch (err) {
+      console.error("Erreur chargement config privateroom:", err);
+    }
+  }
+
+  // Sauvegarder
+  saveBtn.addEventListener("click", async () => {
+    saveBtn.disabled = true;
+    saveBtn.textContent = "Sauvegarde...";
+
+    const data = {
+      guildId,
+      enabled: enabledCheckbox.checked,
+      creatorChannelId: creatorChannelSelect.value || null,
+      categoryId: categorySelect.value || null,
+      channelNameFormat: nameFormatInput.value || '🔊 Salon de {user}'
+    };
+
+    try {
+      const res = await fetch("/api/bot/save-privateroom-config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data)
+      });
+      const result = await res.json();
+
+      if (result.success) {
+        showStatus("status-privateroom-form", "Configuration sauvegardée ✅", "success");
+      } else {
+        showStatus("status-privateroom-form", "Erreur lors de la sauvegarde ❌", "error");
+      }
+    } catch (err) {
+      console.error("Erreur sauvegarde:", err);
+      showStatus("status-privateroom-form", "Erreur de connexion ❌", "error");
+    }
+
+    saveBtn.disabled = false;
+    saveBtn.textContent = "Sauvegarder";
+  });
+
+  // Init
+  loadConfig();
+})();
@@ -72,6 +72,11 @@
        <h3>Rôles Automatiques</h3>
        <p>Attribuez automatiquement des rôles aux nouveaux membres ou aux utilisateurs en vocal. Configurez les salons à exclure.</p>
      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🔊</div>
+        <h3>Salons Temporaires</h3>
+        <p>Créez des salons vocaux privés à la demande. Quand un membre rejoint le salon créateur, un salon personnel est créé automatiquement.</p>
+      </div>
      <div class="feature-card">
        <div class="feature-icon">⚙️</div>
        <h3>Dashboard Intuitif</h3>