шаблон для Docker задач
This commit is contained in:
Anton Dzyk
@@ -0,0 +1,188 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user