Server/templates/teacher_panel.html

72 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Панель учителя</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.status { padding: 10px; margin: 10px 0; }
.active { background: #dff0d8; }
.inactive { background: #f2dede; }
</style>
</head>
<body>
<div id="status" class="status"></div>
<input type="text" id="className" placeholder="Название класса">
<button onclick="controlSession('start')">Начать сессию</button>
<button onclick="controlSession('stop')">Остановить сессию</button>
<script>
async function controlSession(action) {
try {
const className = action === 'start'
? document.getElementById('className').value.trim()
: null;
if (action === 'start' && !className) {
alert('Введите название класса!');
return;
}
const response = await fetch('/teacher/control', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Password': 'teacher_password_123'
},
body: JSON.stringify({
action: action,
class_name: className
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
alert(result.status || (action === 'start' ? 'Сессия начата' : 'Сессия остановлена'));
updateStatus();
} catch (error) {
console.error('Ошибка управления сессией:', error);
alert(`Ошибка: ${error.message}`);
}
}
async function updateStatus() {
const response = await fetch('/api/session_status');
const status = await response.json();
const statusDiv = document.getElementById('status');
statusDiv.className = `status ${status.active ? 'active' : 'inactive'}`;
statusDiv.textContent = status.active
? `Активная сессия: ${status.class_name}`
: 'Сессия не активна';
}
setInterval(updateStatus, 3000);
updateStatus();
</script>
</body>
</html>