Работает удлаение фильмов

admin.html

@@ -99,6 +99,9 @@
                 <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>Действие</span>
+              </th>
             </tr>
           </thead>
           <tbody id="movie-table-body">
@@ -111,6 +114,12 @@
                 Серкана Болата
               </td>
               <td>2:03</td>
+              <td>
+                <span class="d-flex justify-content-around">
+                  <a id="movie-button-edit-1"><i class="bi bi-pen"></i></a>
+                  <a id="movie-button-delete-1"><i class="bi bi-trash"></i></a>
+                </span>
+              </td>
             </tr>
           </tbody>
         </div>
@@ -128,7 +137,7 @@
         <form id="movie-form" class="needs-validation" novalidate>
           <div class="modal-content">
             <div class="modal-header">
-              <h1 class="modal-title fs-5" id="items-update-title"></h1>
+              <h1 class="modal-title fs-5" id="movie-modal-title"></h1>
               <button
                 type="button"
                 class="btn-close"
@@ -166,7 +175,7 @@
                 />
               </div>
               <div class="mb-2">
-                <label class="form-label" for="description">Описание</label>
+                <label class="form-label" for="description"> Описание </label>
                 <input
                   id="description"
                   name="description"
@@ -176,9 +185,9 @@
                 />
               </div>
               <div class="mb-2">
-                <label class="form-label" for="duration"
-                  >Продолжителность</label
-                >
+                <label class="form-label" for="duration">
+                  Продолжителность
+                </label>
                 <input
                   id="duration"
                   name="duration"

data.json

@@ -41,30 +41,5 @@
       "img": "./static/images/cover-placeholder160x230.png"
     }
   ],
-  "movies": [
-    {
-      "id": 1,
-      "name": "Постучись в мою дверь",
-      "categoryId": 1,
-      "description": "Какой-то очередной романтический фильм, где ктко-то кого-то любит, а кто-то нет, грустно :(",
-      "duration": "2:03",
-      "img": "./static/images/cover-placeholder160x230.png"
-    },
-    {
-      "id": 2,
-      "name": "А зори здесь тихие",
-      "categoryId": 2,
-      "description": "Фильм про войну, здесь больше нечего сказать",
-      "duration": "2:54",
-      "img": "./static/images/cover-placeholder160x230.png"
-    },
-    {
-      "id": 3,
-      "name": "Леди Баг и Супер Кот",
-      "categoryId": 1,
-      "description": "Божья коровка и кот пытаются найти друг друга и спасают мир от бабочек",
-      "duration": "1:03",
-      "img": "./static/images/cover-placeholder160x230.png"
-    }
-  ]
-}
+  "movies": []
+}

static/js/admin.js

@@ -9,7 +9,16 @@ document.addEventListener("DOMContentLoaded", loadMoviesTableData());
 const modal = document.getElementById("modal-movie");
 const myModal = modal ? new Modal(modal, {}) : null;
 
-myModal.show();
+// myModal.show();
+
+async function movieDeleteButtonClicked(e) {
+  console.log(e.target);
+  const movieId = parseInt(e.target.id.split("-")[3]);
+  await moviesApiEndpoint.deleteObject(movieId);
+  await loadMoviesTableData();
+}
+
+async function movieEditButtonClicked(e) {}
 
 async function loadMoviesTableData() {
   const movies = await moviesApiEndpoint.getObjects();
@@ -29,6 +38,20 @@ async function loadMoviesTableData() {
 				<td>${movieCategory.name}</td>
 				<td>${movie.description}</td>
 				<td>${movie.duration}</td>
+        <td>
+          <span class="d-flex justify-content-around">
+            <a href="#"><i class="bi bi-pen movie-button-edit" id="movie-button-edit-${movie.id}"></i></a>
+            <a href="#"><i class="bi bi-trash movie-button-delete" id="movie-button-delete-${movie.id}"></i></a>
+          </span>
+        </td>
 			</tr>`;
   }
+  const movieEditButtons = document.getElementsByClassName("movie-button-edit");
+  const movieDeleteButtons = document.getElementsByClassName(
+    "movie-button-delete"
+  );
+  for (let i = 0; i < movieDeleteButtons.length; i++) {
+    movieDeleteButtons[i].addEventListener("click", movieDeleteButtonClicked);
+    movieEditButtons[i].addEventListener("click", movieEditButtonClicked);
+  }
 }