EnableRestAPI

adminchanel.html

@@ -16,7 +16,7 @@
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
-        <i class="fa-solid fa-microchip"></i>
+        <i class="fa-solid fa-camera"></i>
         Тарелька
       </a>
 
@@ -54,56 +54,31 @@
   </div>
   <div class="chanel-text column">
     <div>НАЗВАНИЕ КАНАЛА</div>
-    <button class="chanel-subscribe">
-      Выпустить видео
-    </button>
   </div>
-  <button class="chanel-subscribe">
+  <button class="chanel-subscribe" onclick="document.location='videored.html'">
     Редактировать
   </button>
 </div>
-<div class="rows images">
+<div>
-  <button onclick="document.location='/videowatch.html'" class="vid">
+  <table id="items-table" class="table table-striped">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
+    <thead>
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
+    <th scope="col">№</th>
-  </button>
+    <th scope="col" class="w-25">Название</th>
-  <button onclick="document.location='/videowatch.html'" class="vid">
+    <th scope="col" class="w-25">Автор</th>
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
+    <th scope="col"></th>
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
+    <th scope="col"></th>
-  </button>
+    </thead>
-  <button onclick="document.location='/videowatch.html'" class="vid">
+    <tbody></tbody>
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
+  </table>
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-  <button onclick="document.location='/videowatch.html'" class="vid">
-    <img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
-    <h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
-  </button>
-
 </div>
+<script type="module">
+  import validation from "./js/validation";
+  import { linesForm } from "./js/lines";
+
+  document.addEventListener('DOMContentLoaded', () => {
+    validation();
+    linesForm();
+  });
+</script>
 </body>
 </html>

chanel.html

@@ -16,7 +16,7 @@
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
-        <i class="fa-solid fa-microchip"></i>
+        <i class="fa-solid fa-camera"></i>
         Тарелька
       </a>
 

css/style.css

@@ -631,4 +631,15 @@ button:not(:disabled) {
 
 }
 
+.vid-admin
+{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 30%;
+}
 
+
+#image-preview {
+  width: 200px;
+}

index.html

@@ -15,7 +15,7 @@
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
-        <i class="fa-solid fa-microchip"></i>
+        <i class="fa-solid fa-camera"></i>
         Тарелька
       </a>
 

js/lines-modal.js

@@ -0,0 +1,35 @@
+// Модуль для работы с модальным окном
+
+// импорт компонента Modal из bootstrap
+import { Modal } from "bootstrap";
+import { cntrls, imagePlaceholder } from "./lines-ui";
+
+// поиск модального окна на странице
+const modal = document.getElementById("items-update");
+// если он найден, то создается экземпляр компонента Modal
+// для программного управления модальным окном
+const myModal = modal ? new Modal(modal, {}) : null;
+
+// поиск тега с заголовком модального кона для его смены
+const modalTitle = document.getElementById("items-update-title");
+
+// обнуление значений модального окна, т. к.
+// используется одно окно для всех операций
+function resetValues() {
+    cntrls.lineId.value = "";
+    cntrls.itemsType.value = "";
+    cntrls.price.value = parseFloat(0).toFixed(2);
+    cntrls.count.value = 0;
+    cntrls.image.value = "";
+    cntrls.imagePreview.src = imagePlaceholder;
+}
+
+// функция для скрытия модального окна
+export function hideUpdateModal() {
+    resetValues();
+
+    // удаление класса was-validated для скрытия результатов валидации
+    cntrls.form.classList.remove("was-validated");
+
+    myModal.hide();
+}

js/lines-rest-api.js

@@ -0,0 +1,99 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(chanel, title, image, video) {
+    return {
+        itemsId: chanel,
+        title,
+        image,
+        video,
+    };
+}
+
+// обращение к серверу для получения всех типов товара (get)
+export async function getAllItemTypes() {
+    const response = await fetch(`${serverUrl}/items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения всех записей (get)
+export async function getAllLines() {
+    const response = await fetch(`${serverUrl}/lines?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения записи по первичному ключу (id) (get)
+// id передается в качестве части пути URL get-запроса
+export async function getLine(id) {
+    const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для создания записи (post)
+// объект отправляется в теле запроса (body)
+export async function createLine(chanel, title, image, video) {
+    const itemObject = createLineObject(chanel, title, image, video);
+
+    const options = {
+        method: "POST",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для обновления записи по id (put)
+// объект отправляется в теле запроса (body)
+// id передается в качестве части пути URL get-запроса
+export async function updateLine(id, chanel, title, image, video) {
+    const itemObject = createLineObject(chanel, title, image, video);
+
+    const options = {
+        method: "PUT",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для удаления записи по id (delete)
+// id передается в качестве части пути URL get-запроса
+export async function deleteLine(id) {
+    const options = {
+        method: "DELETE",
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}

js/lines-ui.js

@@ -0,0 +1,91 @@
+// модуль для работы с элементами управления
+
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    button: document.getElementById("items-add"), //
+    table: document.querySelector("#items-table tbody"),
+    form: document.getElementById("items-form"),
+    lineId: document.getElementById("items-line-id"), //
+    chanel: document.getElementById("item"),
+    title: document.getElementById("title"),
+    video: document.getElementById("video"),
+    image: document.getElementById("image"),
+    imagePreview: document.getElementById("image-preview"),
+
+};
+
+// Дефолтное превью
+export const imagePlaceholder = "https://via.placeholder.com/200";
+
+// функция создает тег option для select
+// <option value="" selected>name</option>
+export function createItemsOption(name, value = "", isSelected = false) {
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name;
+    return option;
+}
+
+// функция создает ссылку (a) для таблицы
+// содержимое тега a заполняется необходимой иконкой (icon)
+// при нажатии вызывается callback
+// ссылка "оборачивается" тегом td
+// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
+function createTableAnchor(icon, callback) {
+    const i = document.createElement("i");
+    i.classList.add("fa-solid", icon);
+
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(i);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+    };
+
+    const td = document.createElement("td");
+    td.appendChild(a);
+    return td;
+}
+
+// функция создает колонку таблицы с текстом value
+// <td>value</td>
+function createTableColumn(value) {
+    const td = document.createElement("td");
+    td.textContent = value;
+    return td;
+}
+
+// функция создает строку таблицы
+// <tr>
+// <th scope="row">index + 1</th>
+// <td>item.items.name</td>
+// <td>parseFloat(item.price).toFixed(2))</td>
+// <td>item.count</td>
+// <td>parseFloat(item.sum).toFixed(2))</td>
+// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
+// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
+// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
+// </tr>
+export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(item.items.name));
+    row.appendChild(createTableColumn(item.title));
+    // редактировать на странице page-edit
+    row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
+    // удаление
+    row.appendChild(createTableAnchor("fa-trash", deleteCallback));
+    return row;
+}

js/lines.js

@@ -0,0 +1,238 @@
+// модуль с логикой
+
+import {
+    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRow, imagePlaceholder,
+} from "./lines-ui";
+
+async function drawItemsSelect() {
+    // вызов метода REST API для получения списка типов товаров
+    const data = await getAllItemTypes();
+    // очистка содержимого select
+    // удаляется все, что находится между тегами <select></select>
+    // но не атрибуты
+    //cntrls.chanel.innerHTML = "";
+    // пустое значение
+    cntrls.chanel.appendChild(createItemsOption("Выберите значение", "", true));
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item) => {} аналогично function(item) {}
+    data.forEach((item) => {
+        cntrls.chanel.appendChild(createItemsOption(item.name, item.id));
+    });
+}
+
+async function drawLinesTable() {
+    console.info("Try to load data");
+    if (!cntrls.table) {
+        return;
+    }
+    // вызов метода REST API для получения всех записей
+    const data = await getAllLines();
+    // очистка содержимого table
+    // удаляется все, что находится между тегами <table></table>
+    // но не атрибуты
+    cntrls.table.innerHTML = "";
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item, index) => {} аналогично function(item, index) {}
+    data.forEach((item, index) => {
+        cntrls.table.appendChild(
+            createTableRow(
+                item,
+                index,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+              () => location.assign(`videored.html?id=${item.id}`),
+                () => location.assign(`videored.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(chanel, title, image, video) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(chanel, title, image, video);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, chanel, title, image, video) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, chanel, title, image, video);
+    console.info("Updated");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function removeLine(id) {
+    if (!confirm("Do you really want to remove this item?")) {
+        console.info("Canceled");
+        return;
+    }
+    console.info("Try to remove item");
+    // вызов метода REST API для удаления записи
+    const data = await deleteLine(id);
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+// функция для получения содержимого файла в виде base64 строки
+// https://ru.wikipedia.org/wiki/Base64
+async function readFile(file) {
+    const reader = new FileReader();
+
+    // создание Promise-объекта для использования функции
+    // с помощью await (асинхронно) без коллбэков (callback)
+    // https://learn.javascript.ru/promise
+    return new Promise((resolve, reject) => {
+        // 2. "Возвращаем" содержимое когда файл прочитан
+        // через вызов resolve
+        // Если не использовать Promise, то всю работу по взаимодействию
+        // с REST API пришлось бы делать в обработчике (callback) функции
+        // onloadend
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            // Здесь могла бы быть работа с REST API
+            // Чтение заканчивает выполняться здесь
+            resolve(fileContent);
+        };
+        // 3. Возвращаем ошибку
+        reader.onerror = () => {
+            // Или здесь в случае ошибки
+            reject(new Error("oops, something went wrong with the file reader."));
+        };
+        // Шаг 1. Сначала читаем файл
+        // Чтение начинает выполняться здесь
+        reader.readAsDataURL(file);
+    });
+}
+
+// функция для обновления блока с превью выбранного изображения
+async function updateImagePreview() {
+    // получение выбранного файла
+    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
+    const file = cntrls.image.files[0];
+    // чтение содержимого файла в виде base64 строки
+    const fileContent = await readFile(file);
+    console.info("base64 ", fileContent);
+    // обновление атрибута src для тега img с id image-preview
+    cntrls.imagePreview.src = fileContent;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    //drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
+// Если хотите делать через модальное окно, то удалите эту функцию
+export async function linesPageForm() {
+    console.info("linesPageForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+
+    // func1 = (id) => {} аналогично function func1(id) {}
+    const goBack = () => location.assign("/adminchanel.html");
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события onchange в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    // получение параметров GET-запроса из URL
+    // параметры перечислены после символа ? (?id=1&color=black&...)
+    const urlParams = new URLSearchParams(location.search);
+
+    // получение значения конкретного параметра (id)
+    // указан только при редактировании
+    const currentId = urlParams.get("id");
+    // если id задан
+    if (currentId) {
+        try {
+            // вызов метода REST API для получения записи по первичному ключу(id)
+            const line = await getLine(currentId);
+            // заполнение формы для редактирования
+            cntrls.chanel.value = line.itemsId;
+            cntrls.title.value = line.title;
+            // заполнение превью
+            // Если пользователь выбрал изображение, то оно загружается
+            // в тэг image с id image - preview
+            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
+        } catch {
+            // в случае ошибки происходит возврат к page4
+            goBack();
+        }
+    }
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+
+        let imageBase64 = "imageTag";
+        let videoBase64 = "videoTag"; // Оно должно добавлять видео, но не умеет
+        // Получение выбранного пользователем изображения в виде base64 строки
+        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+        // дефолтное изображение
+        if (cntrls.imagePreview.src !== imagePlaceholder) {
+            // Загрузка содержимого атрибута src тэга img с id image-preview
+            // Здесь выполняется HTTP запрос с типом GET
+            const result = await fetch(cntrls.imagePreview.src);
+            // Получение из HTTP-ответа бинарного содержимого
+            const blob = await result.blob();
+            // Получение base64 строки для файла
+            // Здесь выполняется Promise из функции readFile
+            // Promise позволяет писать линейный код для работы с асинхронными методами
+            // без использования обработчиков (callback) с помощью await
+            imageBase64 = await readFile(blob);
+        }
+
+      if (!currentId) {
+        await addLine(
+          cntrls.chanel.value,
+          cntrls.title.value,
+          imageBase64,
+          videoBase64,
+        );
+      } else {
+        await editLine(
+          currentId,
+          cntrls.chanel.value,
+          cntrls.title.value,
+          imageBase64,
+          videoBase64,
+        );
+      }
+        // возврат к странице page4
+        goBack();
+    });
+}

js/validation.js

@@ -0,0 +1,25 @@
+// модуль используется для валидации форма на странице
+
+function validation() {
+    // поиск всех форма с классом .needs-validation
+    const forms = document.querySelectorAll("form.needs-validation");
+
+    for (let i = 0; i < forms.length; i += 1) {
+        const form = forms[i];
+        // для каждой формы добавляется обработчик события отправки
+        form.addEventListener("submit", (event) => {
+            // если форма не прошла валидацию
+            // то выключить стандартное действие
+            if (!form.checkValidity()) {
+                event.preventDefault();
+                // предотвращает распространение preventDefault
+                // на другие объекты
+                event.stopPropagation();
+            }
+            // добавляет к форме класс was-validated
+            form.classList.add("was-validated");
+        });
+    }
+}
+
+export default validation;

jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "preserve",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

package.json

@@ -3,18 +3,24 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "vite": "vite",
     "serve": "http-server -p 3000 ./dist/",
     "build": "vite build",
-    "prod": "npm-run-all build serve"
+    "rest": "json-server --watch data.json -p 8081",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all build --parallel serve rest"
   },
   "dependencies": {
     "bootstrap": "5.3.2",
     "@fortawesome/fontawesome-free": "6.4.2"
   },
   "devDependencies": {
-    "http-server": "14.1.1",
     "vite": "4.4.9",
+    "eslint": "8.50.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "http-server": "14.1.1",
+    "json-server": "0.17.4",
     "npm-run-all": "4.1.5"
   }
 }

search.html

@@ -16,7 +16,7 @@
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
-        <i class="fa-solid fa-microchip"></i>
+        <i class="fa-solid fa-camera"></i>
         Тарелька
       </a>
 

videored.html

@@ -0,0 +1,86 @@
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+    <title>Моя страница</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+  <header>
+  <nav class="navbar navbar-expand-md navbar-dark">
+    <div class="container-fluid">
+
+      <a class="navbar-brand" href="/">
+        <i class="fa-solid fa-camera"></i>
+        Тарелька
+      </a>
+
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="navbar-collapse collapse justify-content-end" id="navbarNav">
+        <div class="navbar-nav" >
+          <div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
+            <input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
+            <button class="back" type="submit" onclick="document.location='/search.html'">
+              <i class="fa-solid fa-search"> </i>
+            </button>
+          </div>
+          <div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
+            <button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
+            <button class="user nav-link"  type="submit" onclick="document.location='/chanel.html'">
+              <i class="fa-solid fa-user"> </i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </nav>
+</header>
+    <main class="container-fluid p-2">
+        <div class="text-center">
+          <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+               alt="placeholder">
+        </div>
+        <form id="items-form" class="needs-validation" novalidate>
+            <div class="mb-2">
+                <label for="item" class="form-label">Канал</label>
+                <select id="item" class="form-select" name="chanel" required>
+                </select>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="title">Название</label>
+                <input id="title" name="title" class="form-control" type="text" required>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="image">Изображение</label>
+                <input id="image" type="file" name="image" class="form-control" accept="image/*">
+            </div>
+            <div class="mb-2">
+              <label class="form-label" for="video">Видео</label>
+              <input id="video" type="file" name="video" class="form-control" accept="video/*">
+            </div>
+            <a href="/adminchanel.html" class="btn btn-secondary">Назад</a>
+            <button type="submit" class="btn btn-primary">Сохранить</button>
+        </form>
+    </main>
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesPageForm } from "./js/lines"
+
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesPageForm();
+        });
+    </script>
+</body>
+
+</html>

videowatch.html

@@ -16,7 +16,7 @@
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
-        <i class="fa-solid fa-microchip"></i>
+        <i class="fa-solid fa-camera"></i>
         Тарелька
       </a>
 

vite.config.js

@@ -9,8 +9,10 @@ export default defineConfig({
                 search: resolve(__dirname, 'search.html'),
                 login: resolve(__dirname, 'login.html'),
                 chanel: resolve(__dirname, 'chanel.html'),
-                registration: resolve(__dirname, 'regisr.html'),
+                registration: resolve(__dirname, 'registr.html'),
-                video: resolve(__dirname, 'videowatch.html')
+                video: resolve(__dirname, 'videowatch.html'),
+                admin: resolve(__dirname, 'adminchanel.html'),
+                red: resolve(__dirname, 'videored.html')
             },
         },
     },