|
|
@@ -0,0 +1,193 @@
|
|
|
+<!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>
|
