Add support modal for displaying formatted support messages

2026-03-21 17:25:51 +01:00 · 2025-11-20 18:20:12 +01:00
parent 04e68adef0
commit b12d645fbf
8 changed files with 122 additions and 8 deletions
--- a/ports/RGSX/languages/de.json
+++ b/ports/RGSX/languages/de.json
@@ -339,7 +339,7 @@
    "web_restart_error": "Fehler beim Neustart: {0}",
    "web_support": "Support",
    "web_support_title": "📦 Support-Datei erstellt",
-    "web_support_message": "Support-Datei erfolgreich erstellt!\\n\\n📁 Inhalt:\\n• Steuerungskonfiguration\\n• Download-Verlauf\\n• RGSX-Einstellungen\\n• Anwendungsprotokolle\\n• Webserver-Protokolle\\n\\n💬 Um Hilfe zu erhalten:\\n1. Trete dem RGSX Discord bei\\n2. Beschreibe dein Problem\\n3. Teile diese ZIP-Datei\\n\\nDownload startet...",
+    "web_support_message": "Support-Datei erfolgreich erstellt!\n\n📁 Inhalt:\n• Steuerungskonfiguration\n• Download-Verlauf\n• RGSX-Einstellungen\n• Anwendungsprotokolle\n• Webserver-Protokolle\n\n💬 Um Hilfe zu erhalten:\n1. Trete dem RGSX Discord bei\n2. Beschreibe dein Problem\n3. Teile diese ZIP-Datei\n\nDownload startet...",
    "web_support_generating": "Support-Datei wird generiert...",
    "web_support_download": "Support-Datei herunterladen",
    "web_support_error": "Fehler beim Erstellen der Support-Datei: {0}",
--- a/ports/RGSX/languages/en.json
+++ b/ports/RGSX/languages/en.json
@@ -341,7 +341,7 @@
    "web_restart_error": "Restart error: {0}",
    "web_support": "Support",
    "web_support_title": "📦 Support File Generated",
-    "web_support_message": "Support file created successfully!\\n\\n📁 Contents:\\n• Controls configuration\\n• Download history\\n• RGSX settings\\n• Application logs\\n• Web server logs\\n\\n💬 To get help:\\n1. Join RGSX Discord\\n2. Describe your issue\\n3. Share this ZIP file\\n\\nDownload will start...",
+    "web_support_message": "Support file created successfully!\n\n📁 Contents:\n• Controls configuration\n• Download history\n• RGSX settings\n• Application logs\n• Web server logs\n\n💬 To get help:\n1. Join RGSX Discord\n2. Describe your issue\n3. Share this ZIP file\n\nDownload will start...",
    "web_support_generating": "Generating support file...",
    "web_support_download": "Download support file",
    "web_support_error": "Error generating support file: {0}",
--- a/ports/RGSX/languages/es.json
+++ b/ports/RGSX/languages/es.json
@@ -341,7 +341,7 @@
    "web_restart_error": "Error al reiniciar: {0}",
    "web_support": "Soporte",
    "web_support_title": "📦 Archivo de soporte generado",
-    "web_support_message": "¡Archivo de soporte creado con éxito!\\n\\n📁 Contenido:\\n• Configuración de controles\\n• Historial de descargas\\n• Configuración RGSX\\n• Registros de la aplicación\\n• Registros del servidor web\\n\\n💬 Para obtener ayuda:\\n1. Únete al Discord de RGSX\\n2. Describe tu problema\\n3. Comparte este archivo ZIP\\n\\nLa descarga comenzará...",
+    "web_support_message": "¡Archivo de soporte creado con éxito!\n\n📁 Contenido:\n• Configuración de controles\n• Historial de descargas\n• Configuración RGSX\n• Registros de la aplicación\n• Registros del servidor web\n\n💬 Para obtener ayuda:\n1. Únete al Discord de RGSX\n2. Describe tu problema\n3. Comparte este archivo ZIP\n\nLa descarga comenzará...",
    "web_support_generating": "Generando archivo de soporte...",
    "web_support_download": "Descargar archivo de soporte",
    "web_support_error": "Error al generar el archivo de soporte: {0}",
--- a/ports/RGSX/languages/fr.json
+++ b/ports/RGSX/languages/fr.json
@@ -341,7 +341,7 @@
    "web_restart_error": "Erreur lors du redémarrage : {0}",
    "web_support": "Support",
    "web_support_title": "📦 Fichier de support généré",
-    "web_support_message": "Le fichier de support a été créé avec succès !\\n\\n📁 Contenu :\\n• Configuration des contrôles\\n• Historique des téléchargements\\n• Paramètres RGSX\\n• Logs de l'application\\n• Logs du serveur web\\n\\n💬 Pour obtenir de l'aide :\\n1. Rejoignez le Discord RGSX\\n2. Décrivez votre problème\\n3. Partagez ce fichier ZIP\\n\\nLe téléchargement va démarrer...",
+    "web_support_message": "Le fichier de support a été créé avec succès !\n\n📁 Contenu :\n• Configuration des contrôles\n• Historique des téléchargements\n• Paramètres RGSX\n• Logs de l'application\n• Logs du serveur web\n\n💬 Pour obtenir de l'aide :\n1. Rejoignez le Discord RGSX\n2. Décrivez votre problème\n3. Partagez ce fichier ZIP\n\nLe téléchargement va démarrer...",
    "web_support_generating": "Génération du fichier de support...",
    "web_support_download": "Télécharger le fichier de support",
    "web_support_error": "Erreur lors de la génération du fichier de support : {0}",
--- a/ports/RGSX/languages/it.json
+++ b/ports/RGSX/languages/it.json
@@ -338,7 +338,7 @@
    "web_restart_error": "Errore durante il riavvio: {0}",
    "web_support": "Supporto",
    "web_support_title": "📦 File di supporto generato",
-    "web_support_message": "File di supporto creato con successo!\\n\\n📁 Contenuto:\\n• Configurazione controlli\\n• Cronologia download\\n• Impostazioni RGSX\\n• Log dell'applicazione\\n• Log del server web\\n\\n💬 Per ottenere aiuto:\\n1. Unisciti al Discord RGSX\\n2. Descrivi il tuo problema\\n3. Condividi questo file ZIP\\n\\nIl download inizierà...",
+    "web_support_message": "File di supporto creato con successo!\n\n📁 Contenuto:\n• Configurazione controlli\n• Cronologia download\n• Impostazioni RGSX\n• Log dell'applicazione\n• Log del server web\n\n💬 Per ottenere aiuto:\n1. Unisciti al Discord RGSX\n2. Descrivi il tuo problema\n3. Condividi questo file ZIP\n\nIl download inizierà...",
    "web_support_generating": "Generazione file di supporto...",
    "web_support_download": "Scarica file di supporto",
    "web_support_error": "Errore nella generazione del file di supporto: {0}",
--- a/ports/RGSX/languages/pt.json
+++ b/ports/RGSX/languages/pt.json
@@ -340,7 +340,7 @@
    "web_restart_error": "Erro ao reiniciar: {0}",
    "web_support": "Suporte",
    "web_support_title": "📦 Arquivo de suporte gerado",
-    "web_support_message": "Arquivo de suporte criado com sucesso!\\n\\n📁 Conteúdo:\\n• Configuração de controles\\n• Histórico de downloads\\n• Configurações RGSX\\n• Logs da aplicação\\n• Logs do servidor web\\n\\n💬 Para obter ajuda:\\n1. Entre no Discord RGSX\\n2. Descreva seu problema\\n3. Compartilhe este arquivo ZIP\\n\\nO download vai começar...",
+    "web_support_message": "Arquivo de suporte criado com sucesso!\n\n📁 Conteúdo:\n• Configuração de controles\n• Histórico de downloads\n• Configurações RGSX\n• Logs da aplicação\n• Logs do servidor web\n\n💬 Para obter ajuda:\n1. Entre no Discord RGSX\n2. Descreva seu problema\n3. Compartilhe este arquivo ZIP\n\nO download vai começar...",
    "web_support_generating": "Gerando arquivo de suporte...",
    "web_support_download": "Baixar arquivo de suporte",
    "web_support_error": "Erro ao gerar arquivo de suporte: {0}",
--- a/ports/RGSX/static/css/app.css
+++ b/ports/RGSX/static/css/app.css
@@ -473,3 +473,70 @@ header p { opacity: 0.9; font-size: 1.1em; }
        padding: 3px 10px;
    }
 }
+
+/* Modal Support */
+.support-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.support-modal-content {
+    background: #2c2c2c;
+    color: #ffffff;
+    padding: 30px;
+    border-radius: 12px;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    position: relative;
+}
+
+.support-modal h2 {
+    margin: 0 0 20px 0;
+    color: #4CAF50;
+    font-size: 24px;
+}
+
+.support-modal-message {
+    white-space: pre-wrap;
+    line-height: 1.6;
+    margin-bottom: 25px;
+    color: #e0e0e0;
+}
+
+.support-modal button {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    width: 100%;
+    transition: background 0.2s;
+}
+
+.support-modal button:hover {
+    background: #45a049;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
--- a/ports/RGSX/static/js/app.js
+++ b/ports/RGSX/static/js/app.js
@@ -109,6 +109,53 @@
            document.head.appendChild(style);
        }
        
+        // Modal pour afficher les messages support avec formatage
+        function showSupportModal(title, message) {
+            // Remplacer les \n littéraux par de vrais retours à la ligne
+            message = message.replace(/\\n/g, '\n');
+            
+            // Créer la modal
+            const modal = document.createElement('div');
+            modal.className = 'support-modal';
+            
+            const modalContent = document.createElement('div');
+            modalContent.className = 'support-modal-content';
+            
+            // Titre
+            const titleElement = document.createElement('h2');
+            titleElement.textContent = title;
+            
+            // Message avec retours à la ligne préservés
+            const messageElement = document.createElement('div');
+            messageElement.className = 'support-modal-message';
+            messageElement.textContent = message;
+            
+            // Bouton OK
+            const okButton = document.createElement('button');
+            okButton.textContent = 'OK';
+            okButton.onclick = () => {
+                modal.style.animation = 'fadeOut 0.2s ease-in';
+                setTimeout(() => modal.remove(), 200);
+            };
+            
+            // Assembler la modal
+            modalContent.appendChild(titleElement);
+            modalContent.appendChild(messageElement);
+            modalContent.appendChild(okButton);
+            modal.appendChild(modalContent);
+            
+            // Ajouter au DOM
+            document.body.appendChild(modal);
+            
+            // Fermer en cliquant sur le fond
+            modal.onclick = (e) => {
+                if (e.target === modal) {
+                    modal.style.animation = 'fadeOut 0.2s ease-in';
+                    setTimeout(() => modal.remove(), 200);
+                }
+            };
+        }
+        
        // Charger les traductions au démarrage
        async function loadTranslations() {
            try {
@@ -2218,8 +2265,8 @@
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
                
-                // Afficher le message d'instructions
-                alert(t('web_support_title') + '\\n\\n' + t('web_support_message'));
+                // Afficher le message d'instructions dans une modal
+                showSupportModal(t('web_support_title'), t('web_support_message'));
                
                // Restaurer le bouton
                if (originalButton) {