juplo.de Git - demos/spring-boot/blob - src/main/resources/templates/form.html

   1 <!DOCTYPE html>
   2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <title>Demo: Multidimensional Map With Dynamic Binding</title>
   7     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   8   </head>
   9   <body>
  10     <nav class="navbar navbar-dark bg-primary navbar-expand navbar-dark flex-column">
  11       <h2 class="navbar-brand">Demo: Multidimensional Map With Dynamic Binding</h2>
  12     </nav>
  13     <main class="container mt-5">
  14       <form action="#" th:action="@{/}" th:object="${form}" method="get">
  15         <div class="card" th:each="card : *{cards.entrySet()}">
  16           <div class="card-header"><h1 th:text="|Card #${card.key}|">Card #X</h1></div>
  17           <div class="card-body">
  18             <div class="card-text">
  19               <div class="form-group" th:each="row : ${card.value.entrySet()}">
  20                 <input type="checkbox" id="x" class="form-control" th:field="*{cards[__${card.key}__][__${row.key}__]}" />
  21                 <label for="x" th:for="${#ids.prev('cards[__${card.key}__][__${row.key}__]')}" th:text="${row.value}">ROW_NAME</label>
  22                 <button type="submit" name="remove" class="btn btn-primary" th:value="|${card.key}:${row.key}|">Remove</button>
  23               </div>
  24               <div class="form-group">
  25                 <input type="text" th:field="*{row[__${card.key}__]}" />
  26                 <button type="submit" name="add" value="row" class="btn btn-primary">Add Row</button>
  27               </div>
  28             </div>
  29             <div class="card-footer">
  30               <button type="submit" name="remove" value="card" class="btn btn-primary">Remove Card</button>
  31             </div>
  32           </div>
  33         </div>
  34         <p><button type="submit" name="add" value="card" class="btn btn-primary">Add Card</button></p>
  35       </form>
  36     </main>
  37   </body>
  38 </html>