Spaces:
Sleeping
Sleeping
File size: 7,234 Bytes
043c44b 623bf54 043c44b c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 043c44b 623bf54 c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 8e31f57 623bf54 feec993 623bf54 feec993 623bf54 c2a8f15 623bf54 c2a8f15 623bf54 c2a8f15 043c44b feec993 c39ac88 623bf54 c2a8f15 65717d2 c39ac88 623bf54 c39ac88 623bf54 c39ac88 623bf54 c39ac88 043c44b 623bf54 043c44b c39ac88 623bf54 c39ac88 623bf54 c2a8f15 623bf54 c39ac88 623bf54 c39ac88 623bf54 c39ac88 623bf54 043c44b 623bf54 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | <!DOCTYPE html>
<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> |