Spaces:

HTW-KI-Werkstatt
/

DiffMT

Running

App Files Files Community

Koddenbrock commited on 15 days ago

Commit

76bec74

1 Parent(s): 1ba3759

add admin dashboard for viewing DiffMT results

Browse files

Files changed (1) hide show

public/admin.html +16 -84

public/admin.html CHANGED Viewed

@@ -14,14 +14,6 @@
     }
     body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; padding: 2rem 1rem; }
-    #auth-screen { display: flex; justify-content: center; align-items: center; min-height: 80dvh; }
-    .auth-card {
-      background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
-      padding: 2.5rem; width: min(420px, 100%); box-shadow: 0 6px 32px rgba(26,58,112,.09);
-    }
-    .auth-card h2 { margin-bottom: 1.25rem; }
-    .auth-card p  { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
     #dashboard { max-width: 920px; margin: 0 auto; }
     .page-header {
@@ -31,9 +23,7 @@
     .page-header h1 { font-size: 1.6rem; }
     .page-header .sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
-    .stats-row {
-      display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
-    }
     .stat-card {
       flex: 1; min-width: 120px; background: var(--surface);
       border: 1px solid var(--border); border-radius: var(--r);
@@ -52,8 +42,7 @@
       background: var(--surface2); padding: .7rem 1rem; text-align: left;
       color: var(--muted); font-weight: 600; font-size: .75rem;
       text-transform: uppercase; letter-spacing: .06em;
-      border-bottom: 1px solid var(--border);
-      white-space: nowrap;
     }
     th.sortable { cursor: pointer; user-select: none; }
     th.sortable:hover { color: var(--accent); }
@@ -70,38 +59,13 @@
       text-decoration: none; transition: opacity .15s;
     }
     .btn:hover { opacity: .85; }
-    .btn.outline {
-      background: none; color: var(--accent);
-      border: 1px solid var(--accent);
-    }
-    .input {
-      background: var(--surface2); border: 1px solid var(--border);
-      color: var(--text); padding: .65rem 1rem; border-radius: var(--r);
-      font-size: .95rem; font-family: var(--font); outline: none; width: 100%;
-      margin-bottom: .75rem;
-    }
-    .input:focus { border-color: var(--accent); }
-    .error-msg { color: var(--red); font-size: .85rem; margin-top: .5rem; }
     #status { color: var(--muted); font-size: .82rem; font-style: italic; }
   </style>
 </head>
 <body>
-  <!-- ── Auth gate ────────────────────────────────────────────── -->
-  <div id="auth-screen">
-    <div class="auth-card">
-      <h2>Admin Dashboard</h2>
-      <p>Enter your admin token to view results.</p>
-      <input id="token-input" class="input" type="password" placeholder="Admin token…" autocomplete="off">
-      <button class="btn" style="width:100%" onclick="login()">Unlock</button>
-      <div id="auth-error" class="error-msg"></div>
-    </div>
-  </div>
-  <!-- ── Dashboard ────────────────────────────────────────────── -->
-  <div id="dashboard" style="display:none">
     <div class="page-header">
       <div>
         <h1>DiffMT Results</h1>
@@ -124,11 +88,11 @@
       <table>
         <thead>
           <tr>
-            <th class="sortable" data-col="rank" onclick="sortBy('rank')">#<span class="arrow" id="arr-rank"></span></th>
-            <th class="sortable" data-col="player_name" onclick="sortBy('player_name')">Name<span class="arrow" id="arr-player_name"></span></th>
-            <th class="sortable" data-col="score" onclick="sortBy('score')">Score<span class="arrow" id="arr-score"></span></th>
-            <th class="sortable" data-col="percentage" onclick="sortBy('percentage')">Accuracy<span class="arrow" id="arr-percentage">↓</span></th>
-            <th class="sortable" data-col="timestamp" onclick="sortBy('timestamp')">Date<span class="arrow" id="arr-timestamp"></span></th>
             <th>Session ID</th>
           </tr>
         </thead>
@@ -138,53 +102,22 @@
   </div>
   <script>
-    let token   = '';
     let entries = [];
     let sortCol = 'percentage';
     let sortAsc = false;
-    // ── Auth ──────────────────────────────────────────────────────
-    // Accept token from ?token= URL param so you can bookmark the page
-    const urlToken = new URLSearchParams(location.search).get('token');
-    if (urlToken) {
-      token = urlToken;
-      // Remove token from URL bar without reloading
-      history.replaceState(null, '', location.pathname);
-      showDashboard();
-    }
-    async function login() {
-      token = document.getElementById('token-input').value.trim();
-      if (!token) return;
-      const ok = await showDashboard();
-      if (!ok) {
-        document.getElementById('auth-error').textContent = 'Invalid token.';
-        token = '';
-      }
-    }
-    document.getElementById('token-input').addEventListener('keydown', e => {
-      if (e.key === 'Enter') login();
-    });
-    // ── Load data ─────────────────────────────────────────────────
-    async function showDashboard() {
-      const res = await fetch('/api/admin/sessions', {
-        headers: { 'X-Admin-Token': token }
-      });
-      if (!res.ok) return false;
       entries = await res.json();
-      document.getElementById('auth-screen').style.display  = 'none';
-      document.getElementById('dashboard').style.display    = '';
       renderAll();
-      return true;
     }
     async function refresh() {
       document.getElementById('status').textContent = 'Refreshing…';
-      await showDashboard();
     }
-    // ── Render ────────────────────────────────────────────────────
     function renderAll() {
       renderStats();
       renderTable();
@@ -212,12 +145,10 @@
       const sorted = [...entries].sort((a, b) => {
         let va = a[sortCol], vb = b[sortCol];
         if (sortCol === 'timestamp') { va = new Date(va); vb = new Date(vb); }
-        if (sortCol === 'rank') return 0; // handled by order
         return sortAsc ? (va > vb ? 1 : -1) : (va < vb ? 1 : -1);
       });
-      // Update arrow indicators
-      ['rank','player_name','score','percentage','timestamp'].forEach(col => {
         const el = document.getElementById('arr-' + col);
         if (!el) return;
         el.textContent = col === sortCol ? (sortAsc ? '↑' : '↓') : '';
@@ -255,7 +186,6 @@
       renderTable();
     }
-    // ── CSV download ──────────────────────────────────────────────
     function downloadCSV() {
       const header = ['rank','player_name','score','total','percentage','timestamp','session_id'];
       const sorted = [...entries].sort((a, b) => b.percentage - a.percentage || new Date(b.timestamp) - new Date(a.timestamp));
@@ -283,6 +213,8 @@
       return String(str ?? '').replace(/[&<>"']/g, c =>
         ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
     }
   </script>
 </body>
 </html>

     }
     body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; padding: 2rem 1rem; }
     #dashboard { max-width: 920px; margin: 0 auto; }
     .page-header {
     .page-header h1 { font-size: 1.6rem; }
     .page-header .sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
+    .stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
     .stat-card {
       flex: 1; min-width: 120px; background: var(--surface);
       border: 1px solid var(--border); border-radius: var(--r);
       background: var(--surface2); padding: .7rem 1rem; text-align: left;
       color: var(--muted); font-weight: 600; font-size: .75rem;
       text-transform: uppercase; letter-spacing: .06em;
+      border-bottom: 1px solid var(--border); white-space: nowrap;
     }
     th.sortable { cursor: pointer; user-select: none; }
     th.sortable:hover { color: var(--accent); }
       text-decoration: none; transition: opacity .15s;
     }
     .btn:hover { opacity: .85; }
+    .btn.outline { background: none; color: var(--accent); border: 1px solid var(--accent); }
     #status { color: var(--muted); font-size: .82rem; font-style: italic; }
   </style>
 </head>
 <body>
+  <div id="dashboard">
     <div class="page-header">
       <div>
         <h1>DiffMT Results</h1>
       <table>
         <thead>
           <tr>
+            <th>#</th>
+            <th class="sortable" onclick="sortBy('player_name')">Name<span class="arrow" id="arr-player_name"></span></th>
+            <th class="sortable" onclick="sortBy('score')">Score<span class="arrow" id="arr-score"></span></th>
+            <th class="sortable" onclick="sortBy('percentage')">Accuracy<span class="arrow" id="arr-percentage">↓</span></th>
+            <th class="sortable" onclick="sortBy('timestamp')">Date<span class="arrow" id="arr-timestamp"></span></th>
             <th>Session ID</th>
           </tr>
         </thead>
   </div>
   <script>
     let entries = [];
     let sortCol = 'percentage';
     let sortAsc = false;
+    async function load() {
+      const res = await fetch('/api/admin/sessions');
+      if (!res.ok) { document.getElementById('status').textContent = 'Error loading data.'; return; }
       entries = await res.json();
       renderAll();
     }
     async function refresh() {
       document.getElementById('status').textContent = 'Refreshing…';
+      await load();
     }
     function renderAll() {
       renderStats();
       renderTable();
       const sorted = [...entries].sort((a, b) => {
         let va = a[sortCol], vb = b[sortCol];
         if (sortCol === 'timestamp') { va = new Date(va); vb = new Date(vb); }
         return sortAsc ? (va > vb ? 1 : -1) : (va < vb ? 1 : -1);
       });
+      ['player_name','score','percentage','timestamp'].forEach(col => {
         const el = document.getElementById('arr-' + col);
         if (!el) return;
         el.textContent = col === sortCol ? (sortAsc ? '↑' : '↓') : '';
       renderTable();
     }
     function downloadCSV() {
       const header = ['rank','player_name','score','total','percentage','timestamp','session_id'];
       const sorted = [...entries].sort((a, b) => b.percentage - a.percentage || new Date(b.timestamp) - new Date(a.timestamp));
       return String(str ?? '').replace(/[&<>"']/g, c =>
         ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
     }
+    load();
   </script>
 </body>
 </html>