spring-petclinic/src/main/resources/templates/owners/ownerDetails.html at 204dca95bb67b1565894c5accb7715d20e5c95b5 · spring-projects/spring-petclinic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'owners')}">

<body>

  <h2 th:text="#{ownerInformation}">Owner Information</h2>

  <div th:if="${message}" class="alert alert-success" id="success-message">
    <span th:text="${message}"></span>
  </div>

  <div th:if="${error}" class="alert alert-danger" id="error-message">
    <span th:text="${error}"></span>
  </div>

  <table class="table table-striped" th:object="${owner}">
    <tr>
      <th th:text="#{name}">Name</th>
      <td><b th:text="*{firstName + ' ' + lastName}"></b></td>
    </tr>
    <tr>
      <th th:text="#{address}">Address</th>
      <td th:text="*{address}"></td>
    </tr>
    <tr>
      <th th:text="#{city}">City</th>
      <td th:text="*{city}"></td>
    </tr>
    <tr>
      <th th:text="#{telephone}">Telephone</th>
      <td th:text="*{telephone}"></td>
    </tr>
  </table>

  <a th:href="@{__${owner.id}__/edit}" class="btn btn-primary" th:text="#{editOwner}">Edit
    Owner</a>
  <a th:href="@{__${owner.id}__/pets/new}" class="btn btn-primary" th:text="#{addNewPet}">Add
    New Pet</a>
  <br />
  <br />
  <br />
  <h2 th:text="#{petsAndVisits}">Pets and Visits</h2>

  <div th:each="pet : ${owner.pets}" class="panel panel-default">

    <div class="panel-heading">
      <strong th:text="${pet.name}"></strong>
      <strong> | </strong>
      <strong th:text="${pet.type}"></strong>
      <strong> | </strong>
      <strong th:text="${#temporals.format(pet.birthDate, 'yyyy-MM-dd')}"></strong>
    </div>

    <div class="panel-body">
      <table class="table table-striped">
        <thead>
        <tr>
          <th th:text="#{visitDate}">Visit Date</th>
          <th th:text="#{description}">Description</th>
          <th>Actions</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="visit : ${pet.visits}">
          <td th:text="${#temporals.format(visit.date, 'yyyy-MM-dd')}"></td>
          <td th:text="${visit.description}"></td>
          <td>
            <a class="btn btn-sm btn-primary"
               th:href="@{/owners/{ownerId}/pets/{petId}/visits/{visitId}/edit(
                               ownerId=${owner.id},
                               petId=${pet.id},
                               visitId=${visit.id}
                           )}">
              Edit
            </a>
          </td>
        </tr>

        <tr th:if="${#lists.isEmpty(pet.visits)}">
          <td colspan="3">No visits yet</td>
        </tr>
        </tbody>
      </table>

      <div>
        <a class="btn btn-default"
           th:href="@{__${owner.id}__/pets/__${pet.id}__/edit}">
          Edit Pet
        </a>

        <a class="btn btn-success"
           th:href="@{__${owner.id}__/pets/__${pet.id}__/visits/new}">
          Add Visit
        </a>
      </div>

    </div>
  </div>
  <script>
    // Function to hide the success and error messages after 3 seconds
    function hideMessages() {
      setTimeout(function () {
        document.getElementById("success-message").style.display = "none";
        document.getElementById("error-message").style.display = "none";
      }, 3000); // 3000 milliseconds (3 seconds)
    }

    // Call the function to hide messages
    hideMessages();
  </script>

</body>


</html>