build.gradle

@@ -18,8 +18,8 @@ repositories {
     mavenCentral()
 }
 
-sourceCompatibility = 17
-targetCompatibility = 17
+sourceCompatibility = 11
+targetCompatibility = 11
 
 dependencies {
     implementation group: 'org.springframework.boot', name: 'spring-boot-starter-web'

src/main/java/email/AjaxController.java

@@ -0,0 +1,48 @@
+package email;
+
+import email.model.Email;
+import email.service.EmailService;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import java.util.List;
+
+@Controller
+@RequestMapping("/ajax")
+public class AjaxController {
+    private final EmailService emailService;
+
+    public AjaxController(EmailService emailService) {
+        this.emailService = emailService;
+    }
+
+    @ResponseBody
+    @GetMapping("/getEmail/{id}")
+    public Email getEmail(@PathVariable("id") Integer id) {
+        return emailService.getEmailById(id);
+    }
+
+    @ResponseBody
+    @GetMapping("/list")
+    public List<Email> getList() {
+        return emailService.getAllEmails();
+    }
+
+    @ResponseBody
+    @PostMapping("/saveEmail")
+    public Email saveEmail(@RequestBody Email email) {
+        if (email.getTo().isEmpty()) {
+            throw new RuntimeException("Поле 'Кому' не должно быть пустым");
+        }
+        Email previousEmail = emailService.getEmailById(email.getId());
+        previousEmail.setMessage(email.getMessage());
+        previousEmail.setSubject(email.getSubject());
+        previousEmail.setTo(email.getTo());
+        return emailService.save(previousEmail);
+    }
+}

src/main/java/email/service/EmailService.java

@@ -23,7 +23,7 @@ public class EmailService {
     }
 
     public Email getEmailById(Integer id) {
-        return emailRepository.getOne(id);
+        return emailRepository.getById(id);
     }
 
     public void delete(Integer setId) {

src/main/resources/application.properties

@@ -4,6 +4,7 @@ server.port=8080
 # Log settings (TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF)
 logging.level.ru.ulstu=DEBUG
 #JPA
+spring.jackson.serialization.fail-on-empty-beans=false
 # go to  http://localhost:8080/h2-console
 spring.datasource.url=jdbc:h2:file:./data/emails
 spring.datasource.driverClassName=org.h2.Driver

src/main/resources/public/js/ajax.js

@@ -0,0 +1,51 @@
+function edit(id) {
+    $.get("ajax/getEmail/"+id, function( data ) {
+        $('#editId').text(data.id);
+        $('#editTo').val(data.to);
+        $('#editMessage').val(data.message);
+        $('#editSubject').val(data.subject);
+        $('#editModal').modal('show');
+    });
+}
+
+function save() {
+    postData = {
+                id:$('#editId').text(),
+                to:$('#editTo').val(),
+                message:$('#editMessage').val(),
+                subject:$('#editSubject').val(),
+                version:0
+                };
+
+    $.ajax({
+        url: 'ajax/saveEmail',
+        cache: false,
+        dataType: "json",
+        data: JSON.stringify(postData),
+        contentType: "application/json; charset=utf-8",
+        processData: false,
+        method: "POST",
+        success: function (response) {
+            $('#editModal').modal('hide');
+            $("#records").html('');
+            loadList();
+        },
+        error: function( error) {
+            alert(error.responseText);
+        }
+    });
+}
+
+function loadList() {
+        $.get("ajax/list", function( data ) {
+            $.each(data, function(key, value) {
+                $("#records").append(
+                    "<div class='col-md-2'>"+value.to+"</div>"+
+                    "<div class='col-md-4'>"+value.subject+"</div>"+
+                    "<div class='col-md-4'>"+value.message+"</div>"+
+                    "<div class='col-md-2' onclick='edit("+value.id+")'><i class='fa-solid fa-pen-to-square'></i></div>"
+                );
+            });
+        });
+}
+

src/main/resources/templates/ajax.html

@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Список записей в БД</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/fa/fa.min.css" rel="stylesheet">
+    <script src="/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/jquery-3.6.1.min.js"></script>
+    <script src="/js/ajax.js"></script>
+</head>
+<body>
+<!-- компонент меню-->
+<nav class="navbar navbar-expand-lg bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">Название web-приложения</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/">Главная страница</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/list">Список отправленных сообщений</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/ajax">Динамическая страница</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        Выпадающее меню
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Пункт 1</a></li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled">Недоступно</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8 col-sm-12">
+            <h2>Список записей в БД:</h2>
+            <div class="row">
+                <div class="col-md-2" style="font-weight: bold">
+                    Кому
+                </div>
+                <div class="col-md-4" style="font-weight: bold">
+                    Тема
+                </div>
+                <div class="col-md-4" style="font-weight: bold">
+                    Сообщение
+                </div>
+            </div>
+            <div class="row" id="records">
+            </div>
+            <a class="btn btn-primary" href="/">Отправить другое сообщение</a>
+            <!--            <img src="img/logo.png"/>-->
+        </div>
+    </div>
+    <!-- Modal -->
+    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p style="color:red"></p>
+                    <div class="d-none" id="editId"></div>
+                    <div class="form-group">
+                        <label for="editSubject">Тема</label>
+                        <input type="text" class="form-control" id="editSubject" placeholder="Введите тему">
+                    </div>
+                    <div class="form-group">
+                        <label for="editTo">Кому</label>
+                        <input class="form-control" type="email" id="editTo" placeholder="Кому"/>
+                    </div>
+                    <div class="form-group">
+                        <label for="editMessage">Сообщение</label>
+                        <textarea class="form-control" id="editMessage" placeholder="Сообщение"></textarea>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
+                            onclick="$('#editModal').modal('hide');">Close
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="save()">Сохранить</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="/js/bootstrap.bundle.min.js"></script>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+        console.log("load");
+        loadList();
+    });
+
+
+</script>
+</body>
+</html>

src/main/resources/templates/index.html

@@ -24,6 +24,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/list">Список отправленных сообщений</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/ajax">Динамическая страница</a>
+                </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">

src/main/resources/templates/list.html

@@ -25,6 +25,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/list">Список отправленных сообщений</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/ajax">Динамическая страница</a>
+                </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">