How to organize the client part in thymeleaf?

Hello , I have a problem with the client part
after registration and authentication the user gets to the page where personalAccount sees their name and list their boxes(originally they are not there) and he has the ability to add them there as well as to alter and remove
ie initially, their user IDs are all the boxes , if the user adds a new box , it is created and bound to it then is placed in the database, if the same box already has the id for this box she pulled out on the form page to comisaria , and then again stored in the database
here jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
the <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>personList</title>
</head>
the <body>
<th:block th:include="/_menu"></th:block>
<div class="container">
 <div class="col-md-offset-1 col-md-10">

<h2>Personal Account Page</h2>
the <h3>Welcome : <span>${userInfo}</span> </h3>
<b>This is protected page!</b>

<a href="addGrowBox">Add GrowBox</a>
<br/><br/>

<div class="panel panel-info">
 <div class="panel-heading">
 <div class="panel-title">Customer List</div>
</div>
 <div class="panel-body">
 <table class="table table-striped table-bordered">
the <tr>
<th>Length</th>
<th>Width</th>
<th>Height</th>
<th>Plants</th>
<th>Sensors</th>
<th>Action</th>
</tr>

 <!-- loop over and print our growboxes -->
 <c:forEach var="growBox" items="${growboxes}">

 <!-- construct an "update" link with id -->
 <c:url var="updateLink" value="/updateForm">
 <c:param name="growBoxId" value="${growBox.id}" />
</c:url>

 <!-- construct an "delete" link with id -->
 <c:url var="deleteLink" value="/delete">
 <c:param name="growBoxId" value="${growBox.id}" />
</c:url>

 <c:url var = "plantsLink" value = "/plants">
 <c:param name = "growBoxId" value = "${growBox.id}" />
</c:url>

 <c:url var = "sensorsLink" value = "/sensors">
 <c:param name = "growBoxId" value = "${growBox.id}" />
</c:url>

the <tr>
<td>${growBox.length}</td>
<td>${growBox.width}</td>
<td>${growBox.height}</td>

 <td><a href="${plantsLink}">Plants</a>
 <td><a href = "${sensorsLink}">Sensors</a>

<td>
 <!-- display the update link -->
 <a href="${updateLink}">Update</a>
|
 <a href="${deleteLink}">Delete</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>


the kostyumizatsiey boxes occurs on the page growBoxForm
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
the <head>
<meta charset="ISO-8859-1">
<title>GrowBoxForm </title>
</head>
the <body>
 <div class="container">
 <div class="col-md-offset-2 col-md-7">
 <div class="panel panel-info">
 <div class="panel-heading">
 <div class="panel-title">Add GrowBox</div>
</div>
 <div class="panel-body">
 <form:form action="saveGrowBox" method="post" modelAttribute="growBox">

 <!-- need to associate this data with the customer id -->
 <form:hidden path="id" />

 <div class="form-group">
 <label for="length" class="col-md-3 control-label">Length</label>
 <div class="col-md-9">
 <form:input path="length" />
</div>
</div>

 <div class="form-group">
 <label for="width" class="col-md-3 control-label">Width</label>
 <div class="col-md-9">
 <form:input path="width"/>
</div>
</div>

 <div class="form-group">
 <label for="height" class="col-md-3 control-label">Height</label>
 <div class="col-md-9">
 <form:input path="height"/>
</div>
</div>
</form:form>
</div>
</div>
</div>
</div>
</body>
</html>


all actions described in the controllers
@Controller // This means that this class is a Controller
@RequestMapping
public class AuthSuccessController {

@Autowired
 UserRepo userRepo;

@Autowired
 GrowBoxRepo growBoxRepo;

 @RequestMapping(value = "/personalAccount", method = RequestMethod.GET)
 public String personalAccount(Model model, Principal principal){

 User user = userRepo.findByUsername(principal.getName());

 model.addAttribute("userInfo", user.getUsername());

 List<GrowBox> growBoxes = growBoxRepo.findByResponsibleUserId(user.getId());

 model.addAttribute("growboxes", growBoxes);

 return "personalAccount";
}

 @RequestMapping(value = "/showForm", method = RequestMethod.GET)
 public String showFormForAdd(Model theModel) {
 GrowBox growBox = new GrowBox();
 theModel.addAttribute("growBox", growBox);
 return "growBoxForm";
}

 @RequestMapping(value = "/saveGrowBox", method = RequestMethod.POST)
 public String saveCustomer(@ModelAttribute("growBox") GrowBox growBox, Principal principal) {
 User user = userRepo.findByUsername(principal.getName());

growBox.setResponsibleUser(user);

growBoxRepo.save(growBox);

 return "redirect:/personalAccount";
}

 @RequestMapping(value = "/updateForm", method = RequestMethod.GET)
 public String showFormForUpdate(@RequestParam("growBoxId") Long theId,
 Model theModel) {
 GrowBox growBox = growBoxRepo.getOne(theId);
 theModel.addAttribute("growBox", growBox);
 return "growBoxForm";
}

 @RequestMapping(value = "/delete", method = RequestMethod.GET)
 public String deleteCustomer(@RequestParam("growBoxId") Long theId) {
growBoxRepo.deleteById(theId);
 return "redirect:/personalAccount";
}
}

it is written based on the tutorial https://www.javaguides.net/2018/12/spring-mvc-spri... and https://o7planning.org/ru/11681/spring-boot-and-js... (read about how to use thymeleaf and jsp,and I realized that many have with this pile of problems)
Here is my link to the git if it is more convenient https://github.com/gladys.Bail/NetCracker
Now these jsp should be converted into regular html in thymeleaf based on the functionality in the controllers , if you have any comments about the controllers , I'll be glad because I have some doubts about the correct operation of a related entity
Thanks in advance
March 23rd 20 at 18:51
1 answer
March 23rd 20 at 18:53
Solution
Here, an example of a method in the controller and template engine respectively.

Suppose you have a page with a list of "boxes".
For example,

@GetMapping("/boxes")
public String getBoxesList(
 Model model
) {

 model.addAttribute("boxes", boxService.getBoxesList());
 return "/boxes-template";
}

<!DOCTYPE html>
<html>
the <head>
<title></title>
</head>
the <body>

 <!-- here terirem on the list -->
 <div th:each="box : ${boxes}">
 <span th:inline="text">[[${box.boxTitle}]]</span> <!-- or you can -->
 <span th:text="${box.boxTitle}">Title box</span>
 <a th:href="'/boxes/edit/'+${box.boxId}">Edit</a> <!--please note this link -->
</div>

</body>
</html>


By clicking on the edit button open the form with information on the box
@GetMapping("/boxes/edit/{id}") 
public String boxEditForm(
 @Pathvariable("id") Long id,
 Model model
) {
 Box box = boxRepository.findById(id);
 model.addAttribute("box", box);
 return "box-edit-template";
}

And everything else is done also....

You can use. For example, send the id of the box is not in the form of a pathVariable and RequestParam. You can use a POST request if you don't want to pass id in URL, etc. I have described the easiest option.

If I understand correctly your question, then this is what you need...
thank you very much )) this is exactly what you need - gladys.Bail commented on March 23rd 20 at 18:56
@gladys.Bail, not for that - Ella.Swift commented on March 23rd 20 at 18:59

Find more questions by tags ThymeleafJSPSpringJava