83 lines
3.5 KiB
JavaScript
83 lines
3.5 KiB
JavaScript
const Stand_list = {
|
|
list: [],
|
|
init: async () => {
|
|
let html = await fetch('/lib/pages/stand/list/index.html').then((response) => response.text());
|
|
app.innerHTML = html;
|
|
|
|
Stand_list.setHTML();
|
|
|
|
if (USER.possibilities.can_add_stand) {
|
|
document.getElementById("buttons-list").style.display = "flex";
|
|
document.getElementById("constructorButton").style.display = "";
|
|
}
|
|
},
|
|
loadAPI: async function (url) {
|
|
const uuid = localStorage.getItem("uuid");
|
|
const response = await fetch(url, {
|
|
method: 'GET',
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Authorization": uuid
|
|
}
|
|
});
|
|
Stand_list.list = await response.json();
|
|
return Stand_list.list;
|
|
},
|
|
setHTML: async function () {
|
|
const block = document.getElementById('list');
|
|
const null_list = document.getElementById('null-list');
|
|
const load_list = document.getElementById('load-list');
|
|
|
|
null_list.setAttribute("data-visible", "false");
|
|
load_list.setAttribute("data-visible", "true");
|
|
|
|
|
|
const url = `${CONFIG.api}stand/list`;
|
|
let list = this.list.length > 0 ? this.list : await this.loadAPI(url);
|
|
|
|
if (list.length == 0) {
|
|
null_list.setAttribute("data-visible", "true");
|
|
load_list.setAttribute("data-visible", "false");
|
|
|
|
return;
|
|
} else {
|
|
null_list.setAttribute("data-visible", "false");
|
|
load_list.setAttribute("data-visible", "false");
|
|
|
|
let html = "";
|
|
for (const element of list) {
|
|
html += this.renderCard({ element });
|
|
}
|
|
|
|
block.innerHTML = html;
|
|
}
|
|
},
|
|
renderCard: ({ element, pack=0 }) => {
|
|
const images = [
|
|
['stand_1.png', 'stand_2.png', 'stand_3.png'],
|
|
['stand_4.png', 'stand_5.png']
|
|
];
|
|
const randomImage = images[pack][Math.floor(Math.random() * images[pack].length)];
|
|
|
|
const editor = USER.possibilities.can_add_stand
|
|
? `<a id="editor_button" class="button-edit" data-route title="Змінити графік" href="/stand/editor/${element.id}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path></svg></a>`
|
|
: ``;
|
|
|
|
return `
|
|
<div class="card">
|
|
<div class="contents">
|
|
<div class="image">
|
|
<img src="/img/${randomImage}">
|
|
</div>
|
|
<div class="info">
|
|
<div>
|
|
<p>${element.title}</p>
|
|
</div>
|
|
${editor}
|
|
</div>
|
|
</div>
|
|
<a href="/stand/card/${element.id}" data-route></a>
|
|
</div>
|
|
`;
|
|
},
|
|
} |