Arseniy_Yurchenko
/
16-express-chat-mongo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>чат</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container bg-info">
    <h2>Чат mongoose with crud</h2>
    <form name="userForm">
        <input type="hidden" name="id" value="0" />
        <div class="form-group">
            <label for="name">Имя:</label>
            <input class="form-control" name="name" />
        </div>
        <div class="form-group">
            <label for="message">Сообщение:</label>
            <input class="form-control" name="message" />
        </div>
        <div class="panel-body">
            <button type="submit" class="btn btn-sm btn-primary">Отправить</button>
            <!-- <a id="reset" class="btn btn-sm btn-primary">Сбросить</a> -->
        </div>
    </form>
    <table class="table table-condensed table-striped table-bordered">
        <thead><tr><th>Id</th><th>Имя</th><th>Сообщение</th><th>Дата</th></tr></thead>
        <tbody>
        </tbody>
    </table>
   
    <script>
    // Получение всех пользователей
        async function GetMessages() {
            // отправляет запрос и получаем ответ
            const response = await fetch("/api/messages", {
                method: "GET",
                headers: { "Accept": "application/json" }
            });
            // если запрос прошел нормально
            if (response.ok === true) {
                // получаем данные
                const messages = await response.json();
                let rows = document.querySelector("tbody"); 
                messages.forEach(message => {
                    // добавляем полученные элементы в таблицу
                    rows.append(row(message));
                });
            }
        }
        // Получение одного пользователя
        async function GetMessage(id) {
            const response = await fetch("/api/messages/" + id, {
                method: "GET",
                headers: { "Accept": "application/json" }
            });
            if (response.ok === true) {
                const message = await response.json();
                const form = document.forms["userForm"];
                form.elements["id"].value = message._id;
                form.elements["name"].value = message.name;
                form.elements["message"].value = message.message;
            }
        }
        // Добавление пользователя
        async function CreateMessage(userName, userMessage) {
  
            const response = await fetch("api/messages", {
                method: "POST",
                headers: { "Accept": "application/json", "Content-Type": "application/json" },
                body: JSON.stringify({
                    name: userName,
                    message: userMessage,
                })
            });
            if (response.ok === true) {
                const message = await response.json();
                reset();
                document.querySelector("tbody").append(row(message));
            }
        }
        // Изменение пользователя
        async function EditMessage(messageId, userName, userMessage) {
            const response = await fetch("api/messages", {
                method: "PUT",
                headers: { "Accept": "application/json", "Content-Type": "application/json" },
                body: JSON.stringify({
                    id: messageId,
                    name: userName,
                    message: userMessage,
                })
            });
            if (response.ok === true) {
                const messageItem = await response.json();
                reset();
                document.querySelector("tr[data-rowid='" + messageItem._id + "']").replaceWith(row(messageItem));
            }
        }
        // Удаление пользователя
        async function DeleteMessage(id) {
            const response = await fetch("/api/messages/" + id, {
                method: "DELETE",
                headers: { "Accept": "application/json" }
            });
            if (response.ok === true) {
                const messageItem = await response.json();
                document.querySelector("tr[data-rowid='" + messageItem._id + "']").remove();
            }
        }
  
        // сброс формы
        function reset() {
            const form = document.forms["userForm"];
            form.reset();
            form.elements["id"].value = 0;
        }
        // создание строки для таблицы
        function row(message) {
  
          const date = new Date().getTime();
          const createdAt = new Date(date).toLocaleString();

            const tr = document.createElement("tr");
            tr.setAttribute("data-rowid", message._id);
  
            const idTd = document.createElement("td");
            idTd.append(message._id);
            tr.append(idTd);
  
            const nameTd = document.createElement("td");
            nameTd.append(message.name);
            tr.append(nameTd);
  
            const ageTd = document.createElement("td");
            ageTd.append(message.message);
            tr.append(ageTd);

            const createdAtTd = document.createElement("td");
            createdAtTd.append(createdAt);
            tr.append(createdAtTd);
              
            const linksTd = document.createElement("td");
  
            const editLink = document.createElement("a");
            editLink.setAttribute("data-id", message._id);
            editLink.setAttribute("style", "cursor:pointer;padding:15px;");
            editLink.append("Изменить");
            editLink.addEventListener("click", e => {
  
                e.preventDefault();
                GetMessage(message._id);
            });
            linksTd.append(editLink);
  
            const removeLink = document.createElement("a");
            removeLink.setAttribute("data-id", message._id);
            removeLink.setAttribute("style", "cursor:pointer;padding:15px;");
            removeLink.append("Удалить");
            removeLink.addEventListener("click", e => {
  
                e.preventDefault();
                DeleteMessage(message._id);
            });
  
            linksTd.append(removeLink);
            tr.appendChild(linksTd);
  
            return tr;
        }
        // сброс значений формы
        // document.getElementById("reset").click(function (e) {
  
        //     e.preventDefault();
        //     reset();
        // })
  
        // отправка формы
        document.forms["userForm"].addEventListener("submit", e => {
            e.preventDefault();
            const form = document.forms["userForm"];
            const id = form.elements["id"].value;
            const name = form.elements["name"].value;
            const message = form.elements["message"].value;
            if (id == 0)
                CreateMessage(name, message);
            else
                EditMessage(id, name, message);
        });
  
        GetMessages();
    </script>
</body>
</html>