187 lines
5.9 KiB
HTML
187 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Лабораторная работа No6</title>
|
||
<style>
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
border: 1px solid #dddddd;
|
||
text-align: left;
|
||
padding: 8px;
|
||
}
|
||
|
||
th {
|
||
background-color: #f2f2f2;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div>
|
||
<label for="N">Количество книг: </label>
|
||
<input type="number" id="N" value="10">
|
||
<button onclick="createBooksTable()">Сгенерировать</button>
|
||
<br>
|
||
<br>
|
||
<button onclick="loadBooksFromJSON()">Загрузить из JSON</button>
|
||
<br>
|
||
<br>
|
||
<button onclick="calculateBooksAge()">Посчитать возраст</button>
|
||
<br>
|
||
<br>
|
||
<label for="pages">Количество страниц: </label>
|
||
<input type="number" id="pages" value="0">
|
||
<button onclick="deletePagesInfo()">Удалить информацию о количестве страниц</button>
|
||
<br>
|
||
<br>
|
||
<h3>Поиск книг:</h3>
|
||
<label for="author">Фамилия автора: </label>
|
||
<input type="text" id="author">
|
||
<button onclick="searchBooksByAuthorSurname()">Найти</button>
|
||
<br>
|
||
<label for="genre">Жанр: </label>
|
||
<input type="text" id="genre">
|
||
<button onclick="searchBooksByGenre()">Найти</button>
|
||
<br>
|
||
<label for="yearMin">Минимальное значение года: </label>
|
||
<input type="number" id="yearMin">
|
||
<label for="yearMax">Максимальное значение года: </label>
|
||
<input type="number" id="yearMax">
|
||
<button onclick="searchBooksByYear()">Найти</button>
|
||
<br>
|
||
<br>
|
||
<button onclick="fillBooksTable(books)">Обновить</button>
|
||
<button onclick="cancel()">Отмена</button>
|
||
<br>
|
||
<br>
|
||
<button onclick="clearBooksTable()">Очистить</button>
|
||
</div>
|
||
|
||
<h1>Информация о книгах</h1>
|
||
<table id="books-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Название</th>
|
||
<th>Автор</th>
|
||
<th>Жанр</th>
|
||
<th>Дата издания</th>
|
||
<th>Количество страниц</th>
|
||
<th>Возраст</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="books-table-body">
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
<div>
|
||
<label for="json">JSON: </label>
|
||
<br>
|
||
<textarea id="json" cols="60" rows="40"></textarea>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
<script>
|
||
let lastBooks = [];
|
||
let books = [];
|
||
|
||
function cancel() {
|
||
books = structuredClone(lastBooks);
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function searchBooksByAuthorSurname() {
|
||
const author = document.getElementById("author").value;
|
||
const filteredBooks = findBooksByAuthor(books, author);
|
||
fillBooksTable(filteredBooks);
|
||
}
|
||
|
||
function searchBooksByGenre() {
|
||
const genre = document.getElementById("genre").value;
|
||
const filteredBooks = findBooksByGenre(books, genre);
|
||
fillBooksTable(filteredBooks);
|
||
}
|
||
|
||
function searchBooksByYear() {
|
||
const yearMin = document.getElementById("yearMin").value;
|
||
const yearMax = document.getElementById("yearMax").value;
|
||
const filteredBooks = findBooksByPublishYearRange(books, yearMin, yearMax);
|
||
fillBooksTable(filteredBooks);
|
||
}
|
||
|
||
function createBooksTable() {
|
||
lastBooks = structuredClone(books);
|
||
const N = document.getElementById("N").value;
|
||
books = createBooksArray(N);
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function loadBooksFromJSON() {
|
||
lastBooks = structuredClone(books);
|
||
const json = document.getElementById("json").value;
|
||
books = JSON.parse(json);
|
||
|
||
books.map(book => {
|
||
book.publishDate = new Date(book.publishDate);
|
||
});
|
||
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function calculateBooksAge() {
|
||
lastBooks = structuredClone(books);
|
||
books = addAgeInfoToBooks(books);
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function clearBooksTable() {
|
||
lastBooks = structuredClone(books);
|
||
books = [];
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function deletePagesInfo() {
|
||
lastBooks = structuredClone(books);
|
||
books = removeBooksPageCount(books, document.getElementById("pages").value);
|
||
fillBooksTable(books);
|
||
}
|
||
|
||
function fillBooksTable(books) {
|
||
const tableBody = document.getElementById("books-table-body");
|
||
|
||
tableBody.innerHTML = "";
|
||
|
||
books.forEach(book => {
|
||
const row = document.createElement("tr");
|
||
let bookAge = 'Не просчитано';
|
||
if (book.age) {
|
||
bookAge = book.age;
|
||
}
|
||
row.innerHTML = `
|
||
<td>${book.title}</td>
|
||
<td>${book.author.name} ${book.author.surname}</td>
|
||
<td>${book.genre}</td>
|
||
<td>${book.publishDate.toISOString().split('T')[0]}</td>
|
||
<td>${book.pageCount}</td>
|
||
<td>${bookAge}</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
|
||
const json = JSON.stringify(books, null, 2);
|
||
document.getElementById("json").value = json;
|
||
}
|
||
|
||
fillBooksTable(books);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |