// модуль для работы с элементами управления
// объект для удобного получения элементов
// при обращении к атрибуту объекта вызывается
// нужная функция для поиска элемента
export const cntrls = {
button: document.getElementById("items-add"),
table: document.querySelector("#items-table tbody"),
form: document.getElementById("items-form"),
lineId: document.getElementById("items-line-id"),
itemsType: document.getElementById("item"),
price: document.getElementById("price"),
count: document.getElementById("count"),
description: document.getElementById("description"),
image: document.getElementById("image"),
imagePreview: document.getElementById("image-preview"),
};
// Дефолтное превью
export const imagePlaceholder = "https://via.placeholder.com/200";
// функция создает тег option для select
//
export function createItemsOption(name, value = "", isSelected = false) {
const option = document.createElement("option");
option.value = value || "";
option.selected = isSelected;
option.text = name;
return option;
}
// функция создает ссылку (a) для таблицы
// содержимое тега a заполняется необходимой иконкой (icon)
// при нажатии вызывается callback
// ссылка "оборачивается" тегом td
//
|
function createTableAnchor(icon, callback) {
const i = document.createElement("i");
i.classList.add("fa-solid", icon);
const a = document.createElement("a");
a.classList.add("me-3", "ms-5");
a.href = "#";
a.appendChild(i);
a.onclick = (event) => {
// чтобы в URL не добавлялась решетка
event.preventDefault();
event.stopPropagation();
callback();
};
return a;
}
// функция создает колонку таблицы с текстом value
// value |
function createTableRow(value) {
const td = document.createElement("tr");
td.textContent = value;
return td;
}
function createTableImage(image) {
const td = document.createElement("img");
td.src = image;
return td;
}
function createTablePrice(value) {
const td = document.createElement("div");
td.textContent = value;
return td;
}
// функция создает строку таблицы
//
// index + 1 |
// item.items.name |
// parseFloat(item.price).toFixed(2)) |
// item.count |
// parseFloat(item.sum).toFixed(2)) |
// |
// |
// |
//
export function createTableCol(item, index, editCallback, deleteCallback) {
const container = document.createElement("div");
container.classList.add("col", "pb-4");
container.id = `line-${item.id}`;
const card = document.createElement("div");
card.classList.add("card", "mx-auto");
card.appendChild(createTableImage(item.image));
const cardbody = document.createElement("div");
cardbody.classList.add("card-body");
const cardtitle = document.createElement("h5");
cardtitle.classList.add("card-title");
cardtitle.appendChild(createTableRow(item.items.name));
const cardtext = document.createElement("p");
cardtext.classList.add("card-text");
cardtext.appendChild(createTableRow(item.description));
const row = document.createElement("row");
const a = document.createElement("a");
a.href = "#";
a.classList.add("btn", "btn-primary");
a.appendChild(createTablePrice(parseFloat(item.price).toFixed(2)));
row.appendChild(a);
// редактировать в модальном окне
row.appendChild(createTableAnchor("fa-pencil", editCallback));
// удаление
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
cardbody.appendChild(cardtitle);
cardbody.appendChild(cardtext);
cardbody.appendChild(row);
card.appendChild(cardbody);
container.appendChild(card);
return container;
}