<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Генеалогическое древо семьи</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.container { display: flex; height: 100vh; }
.sidebar { width: 30%; overflow-y: auto; padding: 10px; border-right: 1px solid #ccc; }
.content { width: 70%; padding: 20px; }
.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; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #45a049; }
.new-person-btn { margin-bottom: 15px; background-color: #2196F3; }
.new-person-btn:hover { background-color: #0b7dda; }
.search-box { margin-bottom: 15px; display: flex; }
.search-box input { flex: 1; margin-right: 10px; }
</style>
</head>
<body>
<div class="container">
<!-- Левая панель -->
<div class="sidebar">
<h2>Члены семьи</h2>
<button class="new-person-btn" onclick="window.location.href='/persons/new'">Добавить нового члена семьи</button>
<button class="new-person-btn" onclick="window.location.href='/tree'" style="background-color: #4CAF50; margin-bottom: 10px;">
Показать дерево
</button>
<div class="search-box">
<input type="text" id="searchInput" placeholder="Поиск по фамилии...">
<button onclick="searchPersons()">Найти</button>
</div>
<div th:each="person : ${persons}"
class="person-item"
th:classappend="${selectedPerson.id != null && selectedPerson.id == person.id} ? 'selected' : ''"
th:onclick="'window.location.href=\'/persons/' + ${person.id} + '\''"
th:text="${person.fullName}">
</div>
</div>
<!-- Правая панель -->
<div class="content">
<h2 th:text="${selectedPerson.id != null} ? 'Редактирование члена семьи' : 'Добавление нового члена семьи'">
Информация о члене семьи
</h2>
<form th:object="${selectedPerson}" th:action="@{/persons}" method="post">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>Фамилия:</label>
<input type="text" th:field="*{lastName}" required/>
</div>
<div class="form-group">
<label>Имя:</label>
<input type="text" th:field="*{firstName}" required/>
</div>
<div class="form-group">
<label>Отчество:</label>
<input type="text" th:field="*{patronymic}" required/>
</div>
<div class="form-group">
<label>Пол:</label>
<select th:field="*{gender}" id="genderSelect" required>
<option value="">Выберите пол</option>
<option th:each="gender : ${genders}"
th:value="${gender}"
th:text="${gender.displayName}">
</option>
</select>
</div>
<div class="form-group" id="maidenNameGroup" style="display: none;">
<label>Девичья фамилия:</label>
<input type="text" th:field="*{maidenName}" id="maidenNameInput"/>
</div>
<div class="form-group">
<label>Дата рождения:</label>
<input type="date" th:field="*{birthDate}"/>
</div>
<div class="form-group">
<label>Дата смерти (если applicable):</label>
<input type="date" th:field="*{deathDate}"/>
</div>
<div class="form-group">
<label>Биография:</label>
<textarea th:field="*{biography}" rows="4"></textarea>
</div>
<div class="form-group">
<label>Мать:</label>
<select th:field="*{mother}">
<option value="">Не указана</option>
<option th:each="person : ${allPersons}"
th:if="${person.gender?.name() == 'FEMALE'}"
th:value="${person.id}"
th:text="${person.fullName}">
</option>
</select>
</div>
<div class="form-group">
<label>Отец:</label>
<select th:field="*{father}">
<option value="">Не указан</option>
<option th:each="person : ${allPersons}"
th:if="${person.gender?.name() == 'MALE'}"
th:value="${person.id}"
th:text="${person.fullName}">
</option>
</select>
</div>
<button type="submit">Сохранить</button>
</form>
</div>
</div>
<script>
$(document).ready(function() {
// Функция для показа/скрытия поля девичьей фамилии
function toggleMaidenNameField() {
const gender = $('#genderSelect').val();
if (gender === 'FEMALE') {
$('#maidenNameGroup').show();
$('#maidenNameInput').prop('required', true);
} else {
$('#maidenNameGroup').hide();
$('#maidenNameInput').prop('required', false);
}
}
// Инициализация при загрузке
toggleMaidenNameField();
// Обработчик изменения пола
$('#genderSelect').change(toggleMaidenNameField);
// Поиск по нажатию Enter
$('#searchInput').keypress(function(e) {
if (e.which === 13) {
searchPersons();
return false;
}
});
});
function searchPersons() {
const searchText = $('#searchInput').val();
if (searchText.trim()) {
window.location.href = '/persons/search?lastName=' + encodeURIComponent(searchText);
} else {
window.location.href = '/persons';
}
}
</script>
</body>
</html>
