188 lines
6.5 KiB
HTML
188 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.container-fluid {
|
|
height: 90vh;
|
|
}
|
|
.row {
|
|
height: 100%;
|
|
}
|
|
.left-section {
|
|
border-right: 2px solid #dee2e6;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.right-section {
|
|
padding: 0;
|
|
}
|
|
.right-top {
|
|
height: 50%;
|
|
padding: 20px;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
.right-bottom {
|
|
height: 50%;
|
|
padding: 20px;
|
|
}
|
|
.task-block {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.code-block {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 10px 0;
|
|
}
|
|
.input-output {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
textarea {
|
|
flex: 1;
|
|
resize: none;
|
|
font-family: 'Courier New', monospace;
|
|
padding: 10px;
|
|
}
|
|
.output-area {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
.run-button {
|
|
margin-top: 15px;
|
|
padding: 10px 30px;
|
|
font-size: 16px;
|
|
}
|
|
.result-title {
|
|
margin-bottom: 10px;
|
|
color: #495057;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
|
|
<!-- Левая секция -->
|
|
<div class="col-md-6 left-section">
|
|
<h3>Условие задачи</h3>
|
|
<div class="task-block" th:utext="${description}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Правая секция -->
|
|
<div class="col-md-6 right-section">
|
|
<!-- Верхняя часть правой секции -->
|
|
<div class="right-top">
|
|
<h4>Введите решение</h4>
|
|
<div class="input-output">
|
|
<div class="code-prompt mb-2" th:utext="${codeTitle}">
|
|
<!-- Текст подсказки для ввода кода -->
|
|
</div>
|
|
<textarea id="codeInput" class="form-control" th:text="${inputCode}">
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Нижняя часть правой секции -->
|
|
<div class="right-bottom">
|
|
<h4>Результат выполнения</h4>
|
|
<div class="input-output">
|
|
<div class="result-title">Вывод программы:</div>
|
|
<div id="outputArea" class="output-area">
|
|
<!-- Здесь будет появляться результат -->
|
|
Результат выполнения появится здесь...
|
|
</div>
|
|
<div class="text-center">
|
|
<button id="runButton" class="btn btn-primary run-button">
|
|
<i class="fas fa-play"></i> Запустить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Подключаем FontAwesome для иконок -->
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
document.getElementById('runButton').addEventListener('click', function() {
|
|
const codeInput = document.getElementById('codeInput').value;
|
|
const outputArea = document.getElementById('outputArea');
|
|
|
|
// Показываем индикатор загрузки
|
|
outputArea.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Отправка данных...</div>';
|
|
|
|
// Получаем данные пользователя и контекста
|
|
// Предположим, что эти значения хранятся в data-атрибутах или скрытых полях
|
|
const contextId = document.getElementById('contextId')?.value || 'unknown_context';
|
|
const participantId = document.getElementById('participantId')?.value || 'unknown_participant';
|
|
|
|
// Формируем JSON-объект для отправки
|
|
const payload = {
|
|
contextId: contextId,
|
|
participantId: participantId,
|
|
text: codeInput
|
|
};
|
|
|
|
fetch('/tool/result/docker', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Ошибка сети: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Успешный ответ от сервера
|
|
outputArea.innerHTML = '<div class="text-success">✓ Данные успешно отправлены!</div>';
|
|
console.log('Ответ сервера:', data);
|
|
})
|
|
.catch(error => {
|
|
// Обработка ошибок сети или сервера
|
|
outputArea.innerHTML = `
|
|
<div class="text-danger">
|
|
<strong>Ошибка отправки:</strong><br>
|
|
${error.message}
|
|
</div>
|
|
`;
|
|
console.error('Ошибка при отправке:', error);
|
|
});
|
|
});
|
|
|
|
// Автоматический рост textarea при вводе
|
|
document.getElementById('codeInput').addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = (this.scrollHeight) + 'px';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |