Spaces:

NathMen12
/

Translator-API

Sleeping

App Files Files Community

NathMen12 commited on 12 days ago

Commit

d416a0b

verified ·

1 Parent(s): 46dc300

Update public/admin.html

Browse files

Files changed (1) hide show

public/admin.html +133 -4

public/admin.html CHANGED Viewed

@@ -1,4 +1,130 @@
-<script>
         let adminCode = '';
         let charts = {};
         let refreshInterval;
@@ -131,10 +257,10 @@
             const now = Date.now();
             const windowStart = now - WINDOW_MS;
-            // --- CPU : fusionner l'historique + nouveaux points, garder fenêtre 120s ---
             const cpuMap = new Map();
             data.cpuHistory.forEach(m => cpuMap.set(m.timestamp, m.cpu));
-            // Ajouter le point actuel si dispo
             if (data.currentCpu !== undefined) cpuMap.set(now, data.currentCpu);
             const cpuLabels = [];
@@ -254,7 +380,10 @@
             document.getElementById(tabId).classList.add('active');
         }
         document.getElementById('adminCode')?.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') login();
         });
-    </script>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Panel - Translator API</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; }
+        .header { background: #1a1a2e; color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
+        .header h1 { font-size: 24px; }
+        .logout-btn { background: #e94560; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
+        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+        .tabs { display: flex; gap: 10px; margin-bottom: 20px; background: white; border-radius: 8px; padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+        .tab { padding: 12px 24px; background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; color: #666; transition: all 0.2s; }
+        .tab.active { background: #1a73e8; color: white; }
+        .tab:hover:not(.active) { background: #f0f0f0; }
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 20px; }
+        .card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; }
+        .card h3 { margin-bottom: 15px; color: #333; font-size: 16px; }
+        .chart-container { height: 300px; position: relative; }
+        .workers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 15px; }
+        .worker-card { background: #f8f9fa; border-radius: 8px; padding: 15px; border: 1px solid #e9ecef; }
+        .worker-card h4 { color: #1a73e8; margin-bottom: 10px; }
+        .metric { display: flex; justify-content: space-between; margin: 8px 0; font-size: 14px; }
+        .metric-label { color: #666; }
+        .metric-value { font-weight: 600; }
+        .status { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
+        .status.online { background: #28a745; }
+        .status.offline { background: #dc3545; }
+        .logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+        .logs-table th, .logs-table td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
+        .logs-table th { background: #f8f9fa; font-weight: 600; color: #333; }
+        .logs-table tr:hover { background: #f8f9fa; }
+        .logs-table .text-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .loading { text-align: center; padding: 40px; color: #666; }
+        .auth-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+        .auth-modal.hidden { display: none; }
+        .auth-box { background: white; padding: 30px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
+        .auth-box h2 { margin-bottom: 20px; color: #333; }
+        .auth-box input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; margin-bottom: 15px; }
+        .auth-box button { width: 100%; padding: 12px; background: #1a73e8; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
+        .auth-box button:hover { background: #1557b0; }
+        .error-msg { color: #dc3545; margin-bottom: 15px; display: none; }
+    </style>
+</head>
+<body>
+    <div class="auth-modal" id="authModal">
+        <div class="auth-box">
+            <h2>🔐 Accès Admin</h2>
+            <div class="error-msg" id="authError"></div>
+            <input type="password" id="adminCode" placeholder="Code d'accès admin" autocomplete="off">
+            <button onclick="login()">Accéder</button>
+        </div>
+    </div>
+    <header class="header">
+        <h1>📊 Panel Admin - Translator API</h1>
+        <button class="logout-btn" onclick="logout()">Déconnexion</button>
+    </header>
+    <div class="container">
+        <div class="tabs">
+            <button class="tab active" onclick="switchTab('machines')">🖥️ Machines</button>
+            <button class="tab" onclick="switchTab('requests')">📈 Requêtes (120s)</button>
+            <button class="tab" onclick="switchTab('logs')">📋 Logs</button>
+        </div>
+        <div id="machines" class="tab-content active">
+            <div class="grid">
+                <div class="card">
+                    <h3>����️ Machine Centrale - CPU</h3>
+                    <div class="chart-container"><canvas id="cpuChart"></canvas></div>
+                </div>
+                <div class="card">
+                    <h3>💾 Machine Centrale - RAM</h3>
+                    <div class="chart-container"><canvas id="ramChart"></canvas></div>
+                </div>
+            </div>
+            <div class="card">
+                <h3>👥 Workers Connectés</h3>
+                <div class="workers-list" id="workersList">
+                    <div class="loading">Chargement...</div>
+                </div>
+            </div>
+        </div>
+        <div id="requests" class="tab-content">
+            <div class="grid">
+                <div class="card">
+                    <h3>📊 Requêtes par minute (120s)</h3>
+                    <div class="chart-container"><canvas id="requestsChart"></canvas></div>
+                </div>
+                <div class="card">
+                    <h3>📈 Statistiques</h3>
+                    <div id="requestStats" style="padding: 10px;">Chargement...</div>
+                </div>
+            </div>
+        </div>
+        <div id="logs" class="tab-content">
+            <div class="card">
+                <h3>📋 Derniers logs de traduction</h3>
+                <table class="logs-table">
+                    <thead>
+                        <tr>
+                            <th>Heure</th>
+                            <th>IP</th>
+                            <th>Durée (ms)</th>
+                            <th>Langues</th>
+                            <th>Entrée</th>
+                            <th>Sortie</th>
+                        </tr>
+                    </thead>
+                    <tbody id="logsBody">
+                        <tr><td colspan="6" class="loading">Chargement...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <script>
         let adminCode = '';
         let charts = {};
         let refreshInterval;
             const now = Date.now();
             const windowStart = now - WINDOW_MS;
+            // --- CPU : fusionner l'historique + point actuel, garder fenêtre 120s ---
             const cpuMap = new Map();
             data.cpuHistory.forEach(m => cpuMap.set(m.timestamp, m.cpu));
+            // Ajouter le point actuel (currentCpu) si dispo
             if (data.currentCpu !== undefined) cpuMap.set(now, data.currentCpu);
             const cpuLabels = [];
             document.getElementById(tabId).classList.add('active');
         }
+        // Allow Enter key in auth input
         document.getElementById('adminCode')?.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') login();
         });
+    </script>
+</body>
+</html>