Internet_Programming_PIbd-21_Rodionov_I_A/js/lines-ui.js

// модуль для работы с элементами управления

// объект для удобного получения элементов
// при обращении к атрибуту объекта вызывается
// нужная функция для поиска элемента
export const cntrls = {
    table: document.querySelector("#items-table tbody"),
    form: document.getElementById("items-form"),
    lineId: document.getElementById("items-line-id"),
    title: document.getElementById("item-title"),
    author: document.getElementById("item-author"),
    price: document.getElementById("item-price"),
    count: document.getElementById("item-count"),
    descrition: document.getElementById("item-descrition"),
    annotation: document.getElementById("item-annotation"),
    itemId: document.getElementById("item-id"),
    publisher: document.getElementById("item-publisher"),
    series: document.getElementById("item-series"),
    publicationYear: document.getElementById("item-publication-year"),
    pagesNum: document.getElementById("item-pages-num"),
    size: document.getElementById("item-size"),
    coverType: document.getElementById("item-cover-type"),
    circulation: document.getElementById("item-circulation"),
    weight: document.getElementById("item-weight"),
    сategoriesType: document.getElementById("item-category"),
    image: document.getElementById("image"),
    imagePreview: document.getElementById("image-preview"),
    catalogBooks: document.getElementById("book-container"),
};

// Дефолтное превью
export const imagePlaceholder = "https://placehold.co/400x600/#DCDCDC/black";

// функция создает тег option для select
// <option value="" selected>name</option>
export function createCategoriesOption(name, value = "", isSelected = false) {
    const option = document.createElement("option");
    option.value = value || "";
    option.selected = isSelected;
    option.text = name;
    return option;
}

// функция создает ссылку (a) для таблицы
// при нажатии вызывается callback
// ссылка "оборачивается" тегом td
function createTableAnchor(button, callback) {
    const a = document.createElement("a");
    a.href = "#";
    a.appendChild(button);
    a.onclick = (event) => {
        // чтобы в URL не добавлялась решетка
        event.preventDefault();
        event.stopPropagation();
        callback();
    };

    const td = document.createElement("td");
    td.appendChild(a);
    return td;
}

function createCatalogAnchor(image, callback) {
    const a = document.createElement("a");
    a.href = "#";
    a.appendChild(image);
    a.onclick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        callback();
    };

    return a;
}

// функция создает колонку таблицы с текстом value
// <td>value</td>
function createTableColumn(value) {
    const td = document.createElement("td");
    td.textContent = value;
    return td;
}

// функция создает строку таблицы
export function createTableRow(item, index, editPageCallback, deleteCallback) {
    const rowNumber = document.createElement("th");
    rowNumber.scope = "row";
    rowNumber.textContent = index + 1;

    const row = document.createElement("tr");
    row.id = `line-${item.id}`;

    row.appendChild(rowNumber);
    row.appendChild(createTableColumn(item.title));
    row.appendChild(createTableColumn(item.author));
    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
    row.appendChild(createTableColumn(item.count));
    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
    row.appendChild(createTableColumn(item.categories.name));
    // редактировать на странице add-item
    const btnEdit = document.createElement('button');
    btnEdit.className = 'btn btn-primary w-100';
    btnEdit.textContent = 'Редактировать';
    row.appendChild(createTableAnchor(btnEdit, editPageCallback));
    // удаление
    const btnDelete = document.createElement('button');
    btnDelete.className = 'btn btn-primary w-100';
    btnDelete.textContent = 'Удалить';
    row.appendChild(createTableAnchor(btnDelete, deleteCallback));
    return row;
}

export function createCatalogItem(item, callback) {
    const col = document.createElement("div");
    col.className = 'col-sm-6 col-md-4 col-lg-3 mt-4';

    const block = document.createElement("div");
    block.className = 'block d-flex flex-column h-100';

    const imgDiv = document.createElement("div");
    imgDiv.className = 'd-flex justify-content-center mb-4';

    const img = document.createElement("img");
    img.src = item.image;
    img.className = 'catalog-book-cover';
    img.alt = 'book-cover-catalog-1';
    img.width = '155';
    img.height = '245';
    imgDiv.appendChild(createCatalogAnchor(img, callback));

    const bookDescription = document.createElement("div");
    bookDescription.className = 'catalog-book-description d-flex flex-column align-items-start';

    const price = document.createElement("p");
    price.className = 'catalog-price mb-3';
    const priceValue = parseInt(item.price, 10);
    price.textContent = `${priceValue} ₽`;
    const title = document.createElement("p");
    title.className = 'catalog-book-title mb-3';
    title.textContent = item.title;
    const author = document.createElement("p");
    author.className = 'catalog-author mb-3';
    author.textContent = item.author;

    bookDescription.appendChild(price);
    bookDescription.appendChild(title);
    bookDescription.appendChild(author);

    const flexDiv = document.createElement("div");
    flexDiv.className = 'flex-grow-1';

    const btnDiv = document.createElement("div");
    btnDiv.className = 'catalog-btn-checkout-div d-flex justify-content-start';

    const btn = document.createElement("btn");
    btn.className = 'catalog-bth-checkout btn rounded-5 px-3';
    btn.textContent = 'В корзину';
    btnDiv.appendChild(btn);

    block.appendChild(imgDiv);
    block.appendChild(bookDescription);
    block.appendChild(flexDiv);
    block.appendChild(btnDiv);

    col.appendChild(block);
    return col;
}