<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Генеалогическое древо семьи</title>
<meta charset="UTF-8">
<style>
.container { display: flex; height: 100vh; }
.sidebar { width: 250px; overflow-y: auto; padding: 10px; border-right: 1px solid #ccc; }
.content { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.person-item { cursor: pointer; padding: 8px; border-bottom: 1px solid #eee; }
.person-item:hover { background-color: #f5f5f5; }
.person-item.selected { background-color: #e3f2fd; font-weight: bold; }
.pdf-btn { margin-bottom: 15px; background-color: #d32f2f; color: white; padding: 10px 15px;
border: none; border-radius: 4px; cursor: pointer; align-self: flex-start; }
.pdf-btn:hover { background-color: #b71c1c; }
.tree-container { flex: 1; overflow: auto; border: 1px solid #ddd; padding: 10px;
background-color: #f9f9f9; }
.tree-image { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.loading { text-align: center; padding: 50px; color: #666; }
.error { color: #d32f2f; padding: 10px; background-color: #ffebee; border-radius: 4px; }
.new-person-btn { margin-bottom: 15px; background-color: #2196F3; }
.new-person-btn:hover { background-color: #0b7dda; }
</style>
</head>
<body>
<div class="container">
<!-- Левая панель -->
<div class="sidebar">
<h2>Члены семьи</h2>
<button class="new-person-btn" onclick="window.location.href='/persons'" style="background-color: #4CAF50; margin-bottom: 10px;">
Члены семьи
</button>
<div th:each="person : ${persons}"
class="person-item"
th:classappend="${selectedPerson != null and selectedPerson.id == person.id} ? 'selected' : ''"
th:onclick="'window.location.href=\'/tree/' + ${person.id} + '\''"
th:text="${person.fullName}">
</div>
</div>
<!-- Правая панель -->
<div class="content">
<h2>Генеалогическое древо</h2>
<div th:if="${selectedPerson != null}">
<p>Дерево для: <span th:text="${selectedPerson.fullName}"></span></p>
<button class="pdf-btn" th:onclick="'generatePdf(' + ${selectedPerson.id} + ')'">
Скачать PDF
</button>
<div class="tree-container" id="treeContainer">
<div class="loading" id="loading">
Загрузка дерева...
</div>
<div class="error" id="error" style="display: none;">
Ошибка при загрузке дерева
</div>
<img id="treeImage" class="tree-image" style="display: none;"
th:src="@{'/tree/image/' + ${selectedPerson.id} + '?t=' + ${#dates.createNow().time}}"
onload="hideLoading()"
onerror="showError()">
</div>
</div>
<div th:if="${selectedPerson == null}">
<p>Выберите члена семьи из списка слева для отображения генеалогического древа</p>
</div>
</div>
</div>
<script>
function loadTree(personId) {
// Показываем loading
document.getElementById('loading').style.display = 'block';
document.getElementById('error').style.display = 'none';
document.getElementById('treeImage').style.display = 'none';
// Обновляем URL и перезагружаем страницу
window.location.href = '/tree/' + personId;
}
function generatePdf(personId) {
window.open('/tree/pdf/' + personId, '_blank');
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
document.getElementById('treeImage').style.display = 'block';
}
function showError() {
document.getElementById('loading').style.display = 'none';
document.getElementById('error').style.display = 'block';
}
// Автоматически скрываем loading после загрузки страницы
document.addEventListener('DOMContentLoaded', function() {
// Если есть выбранный человек, пытаемся загрузить изображение
if (document.getElementById('treeImage').src) {
// Изображение уже загружается через th:src
}
});
</script>
</body>
</html>
