Breaking News: Grepper is joining You.com. Read the official announcement!

thymeleaf template

Innocent Iguana answered on February 11, 2024 Popularity 10/10 Helpfulness 4/10

answer thymeleaf template

thymeleaf template

Comment

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Landon Hotel | Occupancy</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Header">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Landon Hotel</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#site-nav" aria-controls="site-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="site-nav">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#" th:href="@{/rooms}">Rooms</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" aria-current="page" href="#" th:href="@{/occupancy}">Occupancy</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<main class="container">
  <h1>Occupancy</h1>
  <div class="container">
    <input id="picker" type="date" onchange="handleDate()" th:text="${date}" />
  </div>
  <table class="table">
    <thead>
    <th scope="col">Room Number</th>
    <th scope="col">Room Name</th>
    <th scope="col">Guest</th>
    </thead>
    <tbody>
    <tr th:each="reservation : ${reservations}">
      <td th:text="${reservation.roomNumber}">Room Number</td>
      <td th:text="${reservation.roomName}">Room Name</td>
      <td th:text="${reservation.lastName}!=null? ${reservation.lastName} + ', ' + ${reservation.firstName}: 'VACANT'">Guest</td>
    </tr>
    </tbody>
  </table>

</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script type="text/javascript">
  function handleDate(){
    let date = document.getElementById("picker").valueAsDate
    let result = date.toISOString().split('T')[0]
    if ('URLSearchParams' in window) {
      var searchParams = new URLSearchParams(window.location.search);
      searchParams.set("date", result);
      window.location.search = searchParams.toString();
    }
  }
</script>
</body>
</html>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: html thymeleaf

Link to this answer
Share Copy Link

Contributed on Feb 11 2024

Innocent Iguana

0 Answers Avg Quality 2/10

thymeleaf template

Contents

More Related Answers

thymeleaf template

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.