95 lines
2.6 KiB
JavaScript
95 lines
2.6 KiB
JavaScript
// модуль с логикой
|
||
|
||
|
||
import {
|
||
getAllLines
|
||
} from "./lines-rest-api";
|
||
import rememberIdOfBook from "./page"
|
||
|
||
|
||
export const cntrls = {
|
||
button: document.getElementById("items-add"),
|
||
table: document.getElementById("body"),
|
||
form: document.getElementById("items-form"),
|
||
id: document.getElementById("id"),
|
||
name: document.getElementById("name-book"),
|
||
autor: document.getElementById("autor"),
|
||
annotation: document.getElementById("annotation"),
|
||
info: document.getElementById("info")
|
||
};
|
||
|
||
|
||
|
||
export async function drawCardsCatalog(){
|
||
console.info("Try to load data");
|
||
const data = await getAllLines();
|
||
|
||
let catalog = document.getElementById("catalog")
|
||
catalog.innerHTML = "";
|
||
let catalogHTML = ""
|
||
|
||
console.log(data)
|
||
data.forEach((item, index) => {
|
||
console.log(index)
|
||
catalogHTML +=
|
||
createCard(
|
||
item,
|
||
index,
|
||
)
|
||
|
||
});
|
||
catalogHTML += `<div class="row justify-content-evenly mt-4">
|
||
<div class="col-md-3 col-6 align-self-end col-bott">
|
||
<div class="card" style="width: 100%;">
|
||
<a href="/pageAdmin.html"> <img src="/src/covers/addbook1.png" class="card-img-top" alt="..." ></a>
|
||
<div class="card-body">
|
||
<p class="card-title mt-0 mb-0">???</p>
|
||
<p class="card-text">?????</p>
|
||
<a href="#" class="btn btn-catalog btn-primary rounded-0 mt-1 border ">Добавить книгу</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`
|
||
catalog.innerHTML = catalogHTML
|
||
console.log(catalogHTML)
|
||
|
||
|
||
}
|
||
|
||
export function createCard(item, index) {
|
||
|
||
let card = `
|
||
<div class="col-md-3 col-6 mb-sm-0 align-self-end ">
|
||
<div class="card" style="width: 100%;">
|
||
<a href="/pageOfBook1.html"> <img src="/src/covers/image${item.id}book.png" class="card-img-top" alt="..." lowsrc=></a>
|
||
<div class="card-body">
|
||
<p class="card-title mt-0 mb-0">${item.name}</p>
|
||
<p class="card-text ">${item.autor}</p>
|
||
<a href="/pageOfBook1.html"><div class="btn btn-catalog btn-primary rounded-0 mt-1 border" onclick="rememberId(${item.id});" >Добавить в корзину</div></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
`
|
||
if ((index)% 3 == 0){
|
||
card = `<div class="row justify-content-evenly mt-4">
|
||
` + card
|
||
}
|
||
if (Number(index - 2) % 3 == 0){
|
||
card += `</div>
|
||
`
|
||
}
|
||
|
||
return card;
|
||
}
|
||
let tempId = 0
|
||
export function rememberId(id){
|
||
rememberIdOfBook(id)
|
||
console.log("F")
|
||
|
||
}
|
||
|
||
export default drawCardsCatalog |