// модуль для работы с элементами управления // объект для удобного получения элементов // при обращении к атрибуту объекта вызывается // нужная функция для поиска элемента 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; }