some modifies with admin page

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "chrome",
+			"request": "launch",
+			"name": "Launch Chrome against localhost",
+			"url": "http://localhost:8080",
+			"webRoot": "${workspaceFolder}"
+		}
+	]
+}

admin.html

@@ -55,28 +55,37 @@
 		<div class="control-group py-2">
 			<button id="items-add" class="btn btn-light">Добавить фильм (диалог)</button>
 		</div>
-		<table class="table table-sm table-responsive table-bordered border-primary table-hover">
+		<table class="table table-sm table-responsive table-bordered border-primary table-hover" id="table">
-			<thead>
+			<div class="table">
-				<tr>
+				<thead>
-					<th scope="col">№</th>
+					<tr>
-					<th scope="col">Название</th>
+						<th scope="col">№</th>
-					<th scope="col">Жанр</th>
+						<th scope="col">Название</th>
-					<th scope="col" class="text-center">
+						<th scope="col">Жанр</th>
-						<span class="d-none d-sm-block">
+						<th scope="col" class="text-center">
-							Длительность
+							<span class="d-none d-sm-block">
-						</span><i class="bi bi-clock-history d-block d-sm-none"></i>
+								Логлайн
-					</th>
+							</span><i class="bi bi-clock-history d-block d-sm-none"></i>
+						</th>
+						<th scope="col" class="text-center">
+							<span class="d-none d-sm-block">
+								Длительность
+							</span><i class="bi bi-clock-history d-block d-sm-none"></i>
+						</th>
+
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>1</td>
+						<td>Постучись в мою дверь</td>
+						<td>Драма</td>
+						<td>Это какой-то очередной слезливый сериал про великую любовь и Серкана Болата</td>
+						<td>2:03</td>
+					</tr>
+				</tbody>
+			</div>
 
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td>1</td>
-					<td>Постучись в мою дверь</td>
-					<td>Драма</td>
-					<td>2:03</td>
-				</tr>
-			</tbody>
 		</table>
 	</main>
 
@@ -85,6 +94,8 @@
 			&copy; 2023, Live Cinema. All rights reserved.
 		</span>
 	</footer>
+
+	<script type="module" src="./static/js/admin.js"></script>
 </body>
 
 </html>

data.json

@@ -180,5 +180,48 @@
       "title": "Детектив",
       "img": "./static/images-genres/detective/img6.jpg"
     }
+  ],
+  "lines": [
+    {
+      "itemsID": "1",
+      "logline": "Романтическая комедия",
+      "img": "",
+      "time": "2:03"
+    },
+    {
+      "itemsID": "2",
+      "logline": "Фильм о Великой Отечественной Войне",
+      "img": "",
+      "time": "2:40"
+    },
+    {
+      "itemsID": "3",
+      "logline": "Мультфильм-мюзикл",
+      "img": "",
+      "time": "2:03"
+    }
+  ],
+  "movies": [
+    {
+      "id": 1,
+      "name": "Постучись в мою дверь",
+      "categoryId": 1,
+      "logline": "Какой-то очередной романтический фильм, где ктко-то кого-то любит, а кто-то нет, грустно :(",
+      "time": "2:03"
+    },
+    {
+      "id": 2,
+      "name": "А зори здесь тихие",
+      "categoryId": 2,
+      "logline": "Фильм про войну, здесь больше нечего сказать",
+      "time": "2:54"
+    },
+    {
+      "id": 3,
+      "name": "Леди Баг и Супер Кот",
+      "categoryId": 1,
+      "logline": "Божья коровка и кот пытаются найти друг друга и спасают мир от бабочек",
+      "time": "1:03"
+    }
   ]
 }

static/js/admin.js

@@ -0,0 +1,58 @@
+import { ApiEndpoint } from "./apiendpoint";
+
+const moviesApiEndpoint = new ApiEndpoint("movies");
+const categoriesApiEndpoint = new ApiEndpoint("categories");
+
+//document.addEventListener('', loadMoviesTableData);
+document.addEventListener('DOMContentLoaded', loadMoviesTableData());
+
+async function loadMoviesTableData() {
+	const movies = await moviesApiEndpoint.getObjects();
+	const category = await categoriesApiEndpoint.getObjects();
+
+	const tableWrapper = document.getElementById("table");
+	console.log("table is founded")
+	tableWrapper.innerHTML = "";
+
+	let tempRow = `<div class="table">
+	<thead>
+		<tr>
+			<th scope="col">№</th>
+			<th scope="col">Название</th>
+			<th scope="col">Жанр</th>
+			<th scope="col" class="text-center">
+				<span class="d-none d-sm-block">
+					Логлайн
+				</span><i class="bi bi-clock-history d-block d-sm-none"></i>
+			</th>
+			<th scope="col" class="text-center">
+				<span class="d-none d-sm-block">
+					Длительность
+				</span><i class="bi bi-clock-history d-block d-sm-none"></i>
+			</th>
+		</tr>
+	</thead>`;
+
+	for (let i = 0; i < movies.length; i++) {
+		console.log("array lenght == " + movies.lenght);
+
+		const movie = movies[i];
+		const categ = category[i];
+		tempRow += `<tbody>
+			<tr>
+				
+				<td>${movie.id}</td>
+				<td>${movie.name}</td>
+				<td>${movie.categoryId}</td>
+				<td>${movie.logline}</td>
+				<td>${movie.time}</td>
+			</tr>`;
+	}
+	tempRow += `</tbody>
+	</div>
+	</table>`;
+	tableWrapper.innerHTML += tempRow;
+
+}
+
+{/* <td>${(categ.name).movie.id}</td> */ }

static/js/apiendpoint.js

@@ -24,7 +24,6 @@ export class ApiEndpoint {
         if (!response.ok) {
             throw response.statusText;
         }
-
         return response.json();
     }