java - 已在数据库中使用时如何将复选框设置为非活动状态 - thymeleaf spring boot
问题描述
我有一个预订应用程序,它使用 jpa 将门票存储在 h2 数据库中。当有人预订座位时,该复选框应该为下一个人禁用/禁用,因为现在您可以一遍又一遍地预订座位 - 用户应该看到一些座位已经预订了。如何解决这个问题?我必须在reservation-seat.html 中添加一些内容吗?
预订座位.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Movies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container my-2">
<div class="card">
<div class="card-body">
<div class="container my-5">
<h1 th:text="${movieName}"> Movie Name</h1>
<form th:action="@{'/reservation/save/' + ${repertoireId}}" th:object="${seatInfo}" method="post">
<div class="seatStructure">
<center>
<table id="seatsBlock">
<p id="notification"></p>
<tr>
<td colspan="14">
<div class="screen">SCREEN</div>
</td>
<br/>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>A</td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A1"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A2"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A3"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A4"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A5"></td>
<td class="seatGap"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A6"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A7"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A8"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A9"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A10"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A11"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A12"></td>
</tr>
</table>
<input type = "hidden" th:value="${movieName}">
<input type = "hidden" th:value="${repertoireId}">
</br>
<button type="submit">Order.</button>
</center>
</div>
</form>
<br/><br/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
预订控制器.java
@Controller
// @Transactional
public class ReservationController {
TicketRepo ticketRepo;
ReservationRepo reservationRepo;
AppUserRepo appUserRepo;
MovieRepo movieRepo;
RepertoireRepo repertoireRepo;
@Autowired
public ReservationController(TicketRepo ticketRepo, ReservationRepo reservationRepo, AppUserRepo appUserRepo,
MovieRepo movieRepo, RepertoireRepo repertoireRepo) {
this.ticketRepo = ticketRepo;
this.reservationRepo = reservationRepo;
this.appUserRepo = appUserRepo;
this.movieRepo = movieRepo;
this.repertoireRepo = repertoireRepo;
}
@GetMapping("/movies/{movieName}/reservation")
public String reservationPage(Model model, @PathVariable ("movieName") String movieName) {
Movie movie = movieRepo.findByTitle(movieName);
List<Repertoire> repertoires = repertoireRepo.findByMovieId(movie.getId());
// model.addAttribute("seat", new SeatReservation());
// model.addAttribute("movieName", movirepertoireseName);
model.addAttribute("repertoires", repertoires);
return "reservation";
}
@GetMapping("/movies/{movieName}/reservation/{repertoireId}")
public String reservationSeatPage(Model model, @PathVariable("movieName") String movieName,
@PathVariable("repertoireId") Long repertoireId) {
Testing testing1 = new Testing();
testing1.setSeatReservation(new SeatReservation());
model.addAttribute("seatInfo", testing1);
model.addAttribute("movieName", movieName);
model.addAttribute("repertoireId", repertoireId);
return "reservation-seat";
}
@PostMapping("/reservation/save/{repertoireId}")
public String reserve(@ModelAttribute ("seatInfo") Testing testing, Principal principal,
@ModelAttribute("repertoireId") Long repertoireId) {
UUID uuid = UUID.randomUUID();
Ticket ticket = new Ticket();
ticket.setSeat(testing.getSeatReservation().getSeat());
ticket.setPrice(20);
ticket.setUuid(uuid);
ticketRepo.save(ticket);
Reservation reservation = new Reservation();
reservation.setTicket(ticketRepo.findByUuid(uuid).get());
Repertoire repertoire = repertoireRepo.findById(repertoireId).get();
reservation.setMovie(movieRepo.findByTitle(repertoire.getMovie().getTitle()));
reservation.setRepertoire(repertoire);
reservation.setAppUser(appUserRepo.findByUsername(principal.getName()));
reservationRepo.save(reservation);
return "redirect:/movies/list";
}
}
SeatReservation.java
import lombok.Data;
@Data
public class SeatReservation {
private String seat;
private boolean active;
public boolean isActive() {
return active;
}
}
测试.java
import lombok.Data;
@Data
public class Testing {
private SeatReservation seatReservation;
private Long id;
private String string;
private boolean active;
public boolean isActive() {
return active;
}
}
票务.java
import lombok.Data;
import javax.persistence.*;
import java.util.UUID;
@Data
@Entity
public class Ticket {
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Id
@Column(name = "id")
private Long id;
private UUID uuid;
private String seat;
private Integer price;
public Ticket() {
}
}
解决方案
我做过类似的事情,所以会发布我的方法。
我曾使用 ajax 提交以发布座位预订信息,如果响应成功,那么我将禁用单击的复选框/复选框。
正如您在评论部分所说,您想在没有 javascript 的情况下实现这一点,然后采用以下方法。
每次提交表单时,将占用的座位图(座位 ID 键、状态值)保存在模型属性中,然后通过检查座位 ID 和状态(活动/非活动)来遍历地图,并使渲染的复选框基于禁用/未禁用国旗上。
推荐阅读
- forms - HtmlUnit not finding form and not handling postback
- java - Custom json when using javers library
- docker - Can we run docker on already created image (Ubuntu)
- sap - SAP Webi Frequency Table
- laravel - 无法使用 Laravel SMTP 驱动程序将邮件发送到 gmail 帐户并且没有错误
- java - 全局序列比对中的追溯
- google-cloud-data-fusion - 输出的 CSV 文件与 Google Cloud Storage Sink 插件分开
- apache - 使用 Apache Batik 从 SVG 转换图像后,如何在 PDF 中调整大小或放置图像
- java - 无法正确排列底部应用栏图标
- java - 带有球衣库的 Odoo ERP java API 客户端