Internet-programming_PIbd-2.../Library/js/lines-ui.js

77 lines
3.1 KiB
JavaScript
Raw Permalink Normal View History

2023-11-30 18:35:42 +04:00
// модуль для работы с элементами управления
// объект для удобного получения элементов
2023-12-02 19:11:32 +04:00
// при обращении к атрибуту объекта вызывается нужная функция для поиска элемента
2023-11-30 18:35:42 +04:00
export const cntrls = {
table: document.querySelector("#items-table tbody"),
2023-12-02 19:11:32 +04:00
button: document.getElementById("items-add"),
2023-11-30 18:35:42 +04:00
form: document.getElementById("items-form"),
lineId: document.getElementById("items-line-id"),
2023-12-02 19:11:32 +04:00
categoryInput: document.getElementById("item"),
nameInput: document.getElementById("name"),
authorInput: document.getElementById("author"),
yearInput: document.getElementById("year"),
imageInput: document.getElementById("image"),
2023-11-30 18:35:42 +04:00
imagePreview: document.getElementById("image-preview"),
};
// Дефолтное превью
export const imagePlaceholder = "https://via.placeholder.com/200";
2023-12-02 19:11:32 +04:00
// функция создает тег option для select (для списков категорий, авторов и т. д.)
2023-11-30 18:35:42 +04:00
// <option value="" selected>name</option>
2023-12-02 19:11:32 +04:00
export function createOption(name, value = "", isSelected = false) {
2023-11-30 18:35:42 +04:00
const option = document.createElement("option");
option.value = value || "";
option.selected = isSelected;
option.text = name;
return option;
}
// функция создает ссылку (a) для таблицы
// содержимое тега a заполняется необходимой иконкой (icon)
// при нажатии вызывается callback
// ссылка "оборачивается" тегом td
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
function createTableAnchor(icon, callback) {
const i = document.createElement("i");
i.classList.add("fa-solid", icon);
const a = document.createElement("a");
a.href = "#";
a.appendChild(i);
a.onclick = (event) => {
// чтобы в URL не добавлялась решетка
event.preventDefault();
event.stopPropagation();
callback();
};
const td = document.createElement("td");
td.appendChild(a);
return td;
}
// функция создает колонку таблицы с текстом value
// <td>value</td>
function createTableColumn(value) {
const td = document.createElement("td");
td.textContent = value;
return td;
}
// функция создает строку таблицы
2023-12-02 17:50:30 +04:00
export function createTableRow(book, index, editPageCallback, deleteCallback) {
2023-11-30 18:35:42 +04:00
const rowNumber = document.createElement("th");
rowNumber.scope = "row";
rowNumber.textContent = index + 1;
const row = document.createElement("tr");
2023-12-02 17:50:30 +04:00
row.id = `line-${book.id}`;
2023-11-30 18:35:42 +04:00
row.appendChild(rowNumber);
2023-12-02 17:50:30 +04:00
row.appendChild(createTableColumn(book.categories.name));
row.appendChild(createTableColumn(book.name));
row.appendChild(createTableColumn(book.authors.name));
row.appendChild(createTableColumn(book.year));
2023-11-30 18:35:42 +04:00
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
return row;
}