yacine/edubox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agent): amélioration UI étudiante - instances, statut et lien site

Browse Source
This commit is contained in:
root
2026-06-12 18:36:31 +00:00
parent 479a8de858
commit 7ecc2abe0a
4 changed files with 259 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agent/ui/index.html
+94 -27
View File
@@ -3,32 +3,54 @@
<head>
<meta charset="UTF-8">
<title>EduBox Agent</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<style>
body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 2rem; }
.card { background: white; border-radius: 8px; padding: 1.5rem; max-width: 400px; margin: 2rem auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #1e293b; }
input { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 4px; margin-bottom: 0.75rem; box-sizing: border-box; }
button { width: 100%; padding: 0.6rem; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: #f1f5f9; margin: 0; padding: 2rem; color: #1e293b; }
.container { max-width: 640px; margin: 0 auto; }
.card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; margin: 0 0 1rem; }
input { width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 0.75rem; font-size: 1rem; }
button { width: 100%; padding: 0.7rem; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; }
button:hover { background: #1d4ed8; }
.status { margin-top: 1rem; font-size: 0.875rem; }
.status { margin-top: 0.75rem; font-size: 0.9rem; min-height: 1.2rem; }
.success { color: #16a34a; }
.error { color: #dc2626; }
.instance-list { margin-top: 1rem; }
.instance-item { padding: 0.5rem; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 0.5rem; }
.info { color: #64748b; }
.instance-list { display: flex; flex-direction: column; gap: 0.75rem; }
.instance-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.instance-meta { flex: 1; }
.instance-name { font-weight: 600; margin-bottom: 0.25rem; }
.instance-port { font-size: 0.85rem; color: #64748b; }
.badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.badge-running { background: #dcfce7; color: #166534; }
.badge-starting { background: #fef9c3; color: #854d0e; }
.badge-stopped { background: #f1f5f9; color: #475569; }
.badge-error { background: #fee2e2; color: #991b1b; }
.instance-link { font-size: 0.875rem; color: #2563eb; text-decoration: none; font-weight: 500; }
.instance-link:hover { text-decoration: underline; }
.empty { text-align: center; color: #64748b; padding: 1rem 0; }
</style>
</head>
<body>
<div class="card">
<h1>EduBox Agent</h1>
<div id="main">
<p>Chargement...</p>
<div class="container">
<div class="card">
<h1>EduBox Agent</h1>
<div id="main">
<p class="info">Connexion en cours...</p>
</div>
</div>
<div id="instances-card" class="card" style="display:none;">
<h2>Mes instances</h2>
<div id="instances" class="instance-list"></div>
</div>
</div>
<script>
const ws = new WebSocket('ws://' + location.host + '/ws');
const main = document.getElementById('main');
const instancesCard = document.getElementById('instances-card');
const instancesContainer = document.getElementById('instances');
ws.onopen = () => {
ws.send(JSON.stringify({action: 'check'}));
@@ -36,35 +58,42 @@
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
if (msg.action === 'not_activated') {
main.innerHTML = `
<p>Veuillez entrer votre code d'activation (6 caractères) :</p>
<input type="text" id="code" maxlength="6" placeholder="XXXXXX">
<p>Entre ton code d'activation (6 caractères) :</p>
<input type="text" id="code" maxlength="6" placeholder="XXXXXX" onkeydown="if(event.key==='Enter')activate()">
<button onclick="activate()">Activer</button>
<div id="status" class="status"></div>
`;
} else if (msg.action === 'activated') {
main.innerHTML = `
<p class="success">✅ Activé : <strong>${msg.studentName}</strong></p>
<div class="instance-list" id="instances"></div>
<p class="success">✅ Activé : <strong>${escapeHtml(msg.studentName || '')}</strong></p>
<p class="info">Tes instances apparaissent ci-dessous.</p>
`;
instancesCard.style.display = 'block';
ws.send(JSON.stringify({action: 'instances'}));
} else if (msg.action === 'activation_failed') {
document.getElementById('status').innerHTML = `<span class="error">❌ ${msg.error || 'Code invalide'}</span>`;
const status = document.getElementById('status');
if (status) status.innerHTML = `<span class="error">❌ ${escapeHtml(msg.error || 'Code invalide')}</span>`;
} else if (msg.action === 'instances_list') {
const container = document.getElementById('instances');
if (!container) return;
if (msg.instances.length === 0) {
container.innerHTML = '<p class="status">Aucune instance assignée.</p>';
} else {
container.innerHTML = '<p class="status"><strong>Instances :</strong></p>' +
msg.instances.map(i => `<div class="instance-item">${i.id}</div>`).join('');
}
renderInstances(msg.instances);
} else if (msg.action === 'instances_updated') {
ws.send(JSON.stringify({action: 'instances'}));
}
};
ws.onclose = () => {
main.innerHTML = `<p class="error">Déconnecté. Recharge la page.</p>`;
};
ws.onerror = (err) => {
main.innerHTML = `<p class="error">Erreur de connexion.</p>`;
};
function activate() {
const code = document.getElementById('code').value.trim().toUpperCase();
const input = document.getElementById('code');
const code = input.value.trim().toUpperCase();
if (code.length !== 6) {
document.getElementById('status').innerHTML = '<span class="error">Le code doit faire 6 caractères.</span>';
return;
@@ -72,6 +101,44 @@
document.getElementById('status').innerHTML = 'Activation en cours...';
ws.send(JSON.stringify({action: 'activate', code}));
}
function renderInstances(instances) {
if (!instances || instances.length === 0) {
instancesContainer.innerHTML = '<p class="empty">Aucune instance assignée.</p>';
return;
}
instancesContainer.innerHTML = instances.map(i => {
const badgeClass = i.status === 'running' ? 'badge-running' :
i.status === 'starting' ? 'badge-starting' :
i.status === 'error' ? 'badge-error' : 'badge-stopped';
const link = i.status === 'running' && i.url
? `<a class="instance-link" href="${escapeHtml(i.url)}" target="_blank" rel="noopener">Ouvrir le site →</a>`
: '';
const name = escapeHtml(i.templateName || i.id);
return `
<div class="instance-item">
<div class="instance-meta">
<div class="instance-name">${name}</div>
<div class="instance-port">Port ${i.port || '-'}</div>
</div>
<div style="text-align:right;">
<span class="badge ${badgeClass}">${i.status || 'stopped'}</span>
${link ? '<div style="margin-top:0.4rem;">' + link + '</div>' : ''}
</div>
</div>
`;
}).join('');
}
function escapeHtml(text) {
if (text == null) return '';
return String(text)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
</script>
</body>
</html>