Работает вывод категорий
This commit is contained in:
parent
14f720cd33
commit
4041561c61
34
data.json
34
data.json
@ -3,32 +3,42 @@
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Драма",
|
||||
"img": "./static/img/img1.webp"
|
||||
"img": "./static/images/cover-golodnye-igry.jpg"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Комедия",
|
||||
"img": "./static/img/img2.webp"
|
||||
"img": "./static/images/cover-marriage-story.jpg"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Боевик",
|
||||
"img": "./static/img/img3.webp"
|
||||
"img": "./static/images/cover-narkoz.jpg"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Триллер",
|
||||
"img": "./static/img/img4.webp"
|
||||
"img": "./static/images/cover-posle-glava-2.jpg"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Фантастика",
|
||||
"img": "./static/img/img5.webp"
|
||||
"img": "./static/images/cover-split.jpg"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Детектив",
|
||||
"img": "./static/img/img6.webp"
|
||||
"img": "./static/images/cover-anna-detektiv.jpg"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Фантастика",
|
||||
"img": "./static/images/cover-placeholder160x230.png"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Аниме",
|
||||
"img": "./static/images/cover-placeholder160x230.png"
|
||||
}
|
||||
],
|
||||
"movies": [
|
||||
@ -36,25 +46,25 @@
|
||||
"id": 1,
|
||||
"name": "Постучись в мою дверь",
|
||||
"categoryId": 1,
|
||||
"desc": "Какой-то очередной романтический фильм, где ктко-то кого-то любит, а кто-то нет, грустно :(",
|
||||
"description": "Какой-то очередной романтический фильм, где ктко-то кого-то любит, а кто-то нет, грустно :(",
|
||||
"duration": "2:03",
|
||||
"img": "https://placehold.co/160x230/png"
|
||||
"img": "./static/images/cover-placeholder160x230.png"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "А зори здесь тихие",
|
||||
"categoryId": 2,
|
||||
"desc": "Фильм про войну, здесь больше нечего сказать",
|
||||
"description": "Фильм про войну, здесь больше нечего сказать",
|
||||
"duration": "2:54",
|
||||
"img": "https://placehold.co/160x230/png"
|
||||
"img": "./static/images/cover-placeholder160x230.png"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Леди Баг и Супер Кот",
|
||||
"categoryId": 1,
|
||||
"desc": "Божья коровка и кот пытаются найти друг друга и спасают мир от бабочек",
|
||||
"description": "Божья коровка и кот пытаются найти друг друга и спасают мир от бабочек",
|
||||
"duration": "1:03",
|
||||
"img": "https://placehold.co/160x230/png"
|
||||
"img": "./static/images/cover-placeholder160x230.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
121
katalog.html
121
katalog.html
@ -81,56 +81,75 @@
|
||||
class="content d-flex flex-column justify-content-around"
|
||||
id="content"
|
||||
>
|
||||
<div
|
||||
class="categories-row d-flex flex-column flex-md-row justify-content-around mt-5"
|
||||
>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
<div id="categories" class="d-flex flex-column justify-content-around">
|
||||
<div
|
||||
class="categories-row d-flex flex-column flex-md-row justify-content-around mt-5"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-bez-pravil.webp"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-dva-holma.webp"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Боевик</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-kiberderevnya.webp"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Триллер</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="categories-row d-flex flex-column flex-md-row justify-content-around mt-5"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="categories-row d-flex flex-column flex-md-row justify-content-around mt-0 mt-md-5"
|
||||
>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img src="./static/img/img1.webp" class="rounded-3" />
|
||||
<span class="category-name text-center mt-2">Драма</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-apgreyd.jpeg"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Ужасы</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-57-sekund.jpeg"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Детектив</span>
|
||||
</a>
|
||||
<a
|
||||
class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html"
|
||||
>
|
||||
<img
|
||||
src="./static/images/cover-cherniy-lotos.jpg"
|
||||
class="rounded-3 category-img"
|
||||
/>
|
||||
<span class="category-name text-center mt-2">Фантастика</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="premiers-row d-flex justify-content-center my-5">
|
||||
@ -160,7 +179,7 @@
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
src="./static/img/img11.webp"
|
||||
src="./static/images/poster-posle-navsegda.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
@ -174,7 +193,7 @@
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
src="./static/img/img12.webp"
|
||||
src="./static/images/poster-posredniki.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
@ -188,7 +207,7 @@
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
src="./static/img/img13.webp"
|
||||
src="./static/images/poster-korolevskiy-korgi.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
|
||||
@ -26,4 +26,8 @@ main {
|
||||
|
||||
.category-card:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.category-img {
|
||||
height: 250px;
|
||||
}
|
||||
@ -4,44 +4,33 @@ document.addEventListener("DOMContentLoaded", onPageLoaded);
|
||||
|
||||
const categoriesApi = new ApiEndpoint("categories");
|
||||
|
||||
// export class IdElem {
|
||||
// constructor(endpoint) {
|
||||
// this.endpoint = endpoint;
|
||||
// }
|
||||
|
||||
// async getId() {
|
||||
// const id = document.getElementById("content");
|
||||
// returnid;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
async function onPageLoaded(e) {
|
||||
const countInRow = 3;
|
||||
const categories = await categoriesApi.getObjects();
|
||||
const contentWrapper = document.getElementById("content");
|
||||
contentWrapper.innerHTML = "";
|
||||
let rowEnd = true;
|
||||
let tempRow = "";
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (rowEnd) {
|
||||
tempRow = `<div class="categories-row d-flex flex-column flex-md-row justify-content-around mt-mb-5">`;
|
||||
rowEnd = false;
|
||||
}
|
||||
const category = categories[i];
|
||||
tempRow += `<a class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
const countInRow = 3;
|
||||
const categories = await categoriesApi.getObjects();
|
||||
const contentWrapper = document.getElementById("categories");
|
||||
contentWrapper.innerHTML = "";
|
||||
let rowEnd = true;
|
||||
let tempRow = "";
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (rowEnd) {
|
||||
tempRow = `<div class="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">`;
|
||||
rowEnd = false;
|
||||
}
|
||||
const category = categories[i];
|
||||
tempRow += `<a class="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
|
||||
href="/categoryfilm.html?category=${category.id}">
|
||||
<img src="${category.img}" class="rounded-3">
|
||||
<span class="category-name text-center mt-2">${category.title}</span>
|
||||
<img src="${category.img}" class="rounded-3 category-img">
|
||||
<span class="category-name text-center mt-2">${category.name}</span>
|
||||
</a>`;
|
||||
if ((i + 1) % countInRow == 0) {
|
||||
tempRow += `</div>`;
|
||||
contentWrapper.innerHTML += tempRow;
|
||||
rowEnd = true;
|
||||
}
|
||||
}
|
||||
if (rowEnd) {
|
||||
tempRow += `</div>`;
|
||||
//contentWrapper.innerHTML += tempRow;
|
||||
}
|
||||
if ((i + 1) % countInRow == 0) {
|
||||
tempRow += `</div>`;
|
||||
contentWrapper.innerHTML += tempRow;
|
||||
rowEnd = true;
|
||||
tempRow = "";
|
||||
}
|
||||
}
|
||||
if (categories.length % countInRow != 0) {
|
||||
tempRow += `</div>`;
|
||||
contentWrapper.innerHTML += tempRow;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user