Spaces:
Sleeping
Sleeping
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script> | |
| function renderPendingRound(round) { | |
| if (!round) { | |
| $('#pending-question').text('Wacht op een vraag...'); | |
| $('#human-response').prop('disabled', true); | |
| $('#send-round-button').prop('disabled', true); | |
| $('#ai1-content').text('Wacht op een vraag...'); | |
| $('#ai2-content').text('Wacht op een vraag...'); | |
| $('#reload-ai1').prop('disabled', true); | |
| $('#reload-ai2').prop('disabled', true); | |
| return; | |
| } | |
| $('#pending-question').text(round.question); | |
| $('#human-response').prop('disabled', false); | |
| $('#send-round-button').prop('disabled', false); | |
| $('#reload-ai1').prop('disabled', false); | |
| $('#reload-ai2').prop('disabled', false); | |
| if (round.ai_options && round.ai_options.length >= 1) { | |
| $('#ai1-content').text(round.ai_options[0].content); | |
| } | |
| if (round.ai_options && round.ai_options.length >= 2) { | |
| $('#ai2-content').text(round.ai_options[1].content); | |
| } | |
| } | |
| function renderHistory(rounds) { | |
| let html = ''; | |
| rounds.forEach(function(round, i) { | |
| html += ` | |
| <li> | |
| <strong>Vraag ${i+1}:</strong> ${round.question}<br> | |
| <strong>Jouw antwoord:</strong> ${round.human_response}<br> | |
| <strong>AI 1:</strong> ${round.ai_options[0] ? round.ai_options[0].content : '-'}<br> | |
| <strong>AI 2:</strong> ${round.ai_options[1] ? round.ai_options[1].content : '-'} | |
| </li>`; | |
| }); | |
| if (!html) html = '<li class="response-empty">Nog geen rondes gespeeld.</li>'; | |
| $('#message-history').html(html); | |
| } | |
| function fetchAdminState() { | |
| $.getJSON('/get_admin_state', function(state) { | |
| $('#admin-questions-left').text(state.questions_left); | |
| renderPendingRound(state.pending_round); | |
| renderHistory(state.rounds); | |
| }); | |
| } | |
| function reloadAI(agentIndex, buttonId, contentId) { | |
| const btn = $('#' + buttonId); | |
| btn.prop('disabled', true).text('⏳ Bezig...'); | |
| $.post('/admin_dashboard', { | |
| action: 'reload_ai', | |
| agent_index: agentIndex | |
| }, function() { | |
| fetchAdminState(); | |
| btn.prop('disabled', false).text('🔄 Herladen'); | |
| }); | |
| } | |
| $(document).ready(function() { | |
| fetchAdminState(); | |
| setInterval(fetchAdminState, 1000); | |
| $('#reload-ai1').on('click', function(e) { | |
| e.preventDefault(); | |
| reloadAI(1, 'reload-ai1', 'ai1-content'); | |
| }); | |
| $('#reload-ai2').on('click', function(e) { | |
| e.preventDefault(); | |
| reloadAI(2, 'reload-ai2', 'ai2-content'); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body class="theme-app theme-admin"> | |
| <div class="app-bg"></div> | |
| <div class="app-shell"> | |
| <div class="container admin-dashboard-container"> | |
| <div class="buttons admin-top-bar" style="margin-bottom: 16px;"> | |
| <a href="{{ url_for('admin_rules') }}" class="button button-ghost">← Regels</a> | |
| <div class="question-counter question-counter--admin"> | |
| <span id="admin-questions-left">{{ questions_left }}</span> | |
| <span class="question-label">vragen over</span> | |
| </div> | |
| </div> | |
| <!-- QUESTION --> | |
| <section class="admin-section card" id="pending"> | |
| <h2>Vraag:</h2> | |
| <p id="pending-question" style="font-size: 2rem; font-weight: 700; margin-top: 10px; line-height: 1.4;"> | |
| Wacht op een vraag... | |
| </p> | |
| </section> | |
| <!-- ADMIN RESPONSE + AI SUGGESTIONS + SEND --> | |
| <section class="admin-section card" id="send-message"> | |
| <h2>Jouw antwoord</h2> | |
| <form action="/admin_dashboard" method="POST" id="send-round-form"> | |
| <input type="hidden" name="action" value="send_round"> | |
| <textarea name="human_response" id="human-response" placeholder="Schrijf hier jouw antwoord als mens..." disabled></textarea> | |
| <h3 style="margin-top: 20px; margin-bottom: 10px;">AI-suggesties</h3> | |
| <div class="admin-section card" style="margin-bottom: 10px;"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;"> | |
| <div style="flex: 1;"> | |
| <strong>AI 1:</strong> | |
| <p id="ai1-content" style="margin-top: 6px;">Wacht op een vraag...</p> | |
| </div> | |
| <button type="button" class="button button-ghost" id="reload-ai1" disabled>🔄 Herladen</button> | |
| </div> | |
| </div> | |
| <div class="admin-section card" style="margin-bottom: 16px;"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;"> | |
| <div style="flex: 1;"> | |
| <strong>AI 2:</strong> | |
| <p id="ai2-content" style="margin-top: 6px;">Wacht op een vraag...</p> | |
| </div> | |
| <button type="button" class="button button-ghost" id="reload-ai2" disabled>🔄 Herladen</button> | |
| </div> | |
| </div> | |
| <div class="buttons"> | |
| <button type="submit" id="send-round-button" class="button" disabled>Verstuur antwoorden</button> | |
| </div> | |
| </form> | |
| </section> | |
| <!-- HISTORY --> | |
| <section class="admin-section card" id="history"> | |
| <h2>Geschiedenis</h2> | |
| <ul class="pending-message-list" id="message-history"> | |
| <li class="response-empty">Nog geen rondes gespeeld.</li> | |
| </ul> | |
| </section> | |
| <!-- REINITIALIZE --> | |
| <section class="admin-section card"> | |
| <h2>Nieuw spel starten</h2> | |
| <p class="response-empty" style="margin-bottom: 12px;">Dit wist alle antwoorden en begint opnieuw vanaf de regelspagina.</p> | |
| <form action="/reinitialize" method="POST"> | |
| <button type="submit" class="button">Nieuw spel</button> | |
| </form> | |
| </section> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |