Skip to content

Commit 739ec5b

Browse files
committed
before converting the litterdetails to a fragment
1 parent 7da7fc5 commit 739ec5b

File tree

4 files changed

+59
-109
lines changed

4 files changed

+59
-109
lines changed

src/main/java/com/csaba79coder/littersnap/view/LitterViewController.java

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,15 @@ public String getLitterById(@PathVariable("id") UUID id, Model model) {
4242

4343
try {
4444
LitterModel litter = litterService.getLitterById(id);
45-
model.addAttribute("litter", litter);
45+
model.addAttribute("createdAt", litter.getCreatedAt());
46+
model.addAttribute("updatedAt", litter.getUpdatedAt());
47+
model.addAttribute("firstline", litter.getAddress().getFirstLine());
48+
model.addAttribute("city", litter.getAddress().getCity());
49+
model.addAttribute("country", litter.getAddress().getCountry());
50+
model.addAttribute("postcode", litter.getAddress().getPostCode());
51+
model.addAttribute("description", litter.getDescription());
52+
model.addAttribute("image", litter.getImage());
53+
model.addAttribute("status", litter.getStatus());
4654
return "litter_details";
4755
} catch (NoSuchElementException e) {
4856
model.addAttribute("errorMessage", e.getMessage());

src/main/resources/static/style.css

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ body {
2020
.fixed-buttons {
2121
position: fixed;
2222
top: 0;
23-
right: 20px;
23+
right: 0;
2424
z-index: 999;
2525
}
2626

@@ -70,36 +70,18 @@ body {
7070
.logged-logo .logged-logo-name {
7171
position: absolute;
7272
bottom: 20px;
73-
left: 0;
74-
right: 0;
73+
right: 305px;
7574
font-family: 'Niagara Solid', cursive;
76-
font-size: 60px;
75+
font-size: 80px;
7776
color: #1c5486;
7877
text-align: center; /* Center the text horizontally */
7978
}
8079

81-
.logged-logo .logged-logo-slogan {
82-
position: absolute;
83-
bottom: 1px;
84-
left: 0;
85-
right: 0;
86-
font-family: 'Arial Black', sans-serif;
87-
font-size: 10px;
88-
color: darkmagenta;
89-
text-align: center; /* Center the text horizontally */
90-
}
91-
9280
.logged-logo .man-with-the-phone-icon {
9381
width: 300px;
9482
opacity: 0.965;
9583
}
9684

97-
.fixed-buttons {
98-
position: fixed;
99-
top: 0;
100-
right: 0;
101-
}
102-
10385

10486
/*Modal Container on index page*/
10587

src/main/resources/templates/litter_details.html

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,33 @@ <h5 class="modal-title" id="addLitterModalLabel">Litter Details</h5>
1111
<div class="row">
1212
<div class="col-md-6 offset-md-3">
1313
<hr>
14-
<!-- <h4><span class="text-muted">Created At:</span></h4>-->
15-
<!-- <p><span th:text="${litter.getCreatedAt()}"></span></p>-->
14+
<h4><span class="text-muted">Created At:</span></h4>
15+
<p><span th:text="${createdAt}"></span></p>
1616

17-
<!-- <h4><span class="text-muted">Created By:</span></h4>-->
18-
<!-- <p><span th:text="${litter.getCreatedBy()}"></span></p>-->
17+
<h4><span class="text-muted">Updated At:</span></h4>
18+
<p><span th:text="${updatedAt}"></span></p>
1919

20-
<!-- <h4><span class="text-muted">Updated At:</span></h4>-->
21-
<!-- <p><span th:text="${litter.getUpdatedAt()}"></span></p>-->
20+
<h4><span class="text-muted">Street:</span></h4>
21+
<p><span th:text="${firstline}"></span></p>
22+
<h4><span class="text-muted">City:</span></h4>
23+
<p><span th:text="${city}"></span></p>
24+
<h4><span class="text-muted">Country:</span></h4>
25+
<p><span th:text="${country}"></span></p>
26+
<h4><span class="text-muted">PostCode:</span></h4>
27+
<p><span th:text="${postcode}"></span></p>
2228

23-
<!-- <h4><span class="text-muted">Updated By:</span></h4>-->
24-
<!-- <p><span th:text="${litter.getUpdatedBy()}"></span></p>-->
29+
<h4><span class="text-muted">Description:</span></h4>
30+
<p><span th:text="${description}"></span></p>
2531

26-
<!-- <h4><span class="text-muted">Address:</span></h4>-->
27-
<!-- <p><span th:text="${litter.getAddress().firstLine + ', ' +-->
28-
<!-- litter.getAddress().postCode + ', ' +-->
29-
<!-- litter.getAddress().city + ', ' +-->
30-
<!-- litter.getAddress().country}"></span></p>-->
31-
32-
<!-- <h4><span class="text-muted">Description:</span></h4>-->
33-
<!-- <p><span th:text="${litter.getDescription()}"></span></p>-->
34-
35-
<!-- <h4><span class="text-muted">Image:</span></h4>-->
36-
<!-- <p><span th:text="${litter.getImage()}"></span></p>-->
32+
<h4><span class="text-muted">Image:</span></h4>
33+
<p><span th:text="${image}"></span></p>
3734

35+
<h4><span class="text-muted">Status:</span></h4>
36+
<p><span th:text="${status}"></span></p>
3837
</div>
3938
</div>
39+
4040
</div>
4141
</div>
4242
</div>
43+
Lines changed: 27 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Title</title>
6-
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
8-
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
9-
10-
<!-- Font Awesome CSS -->
11-
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>
12-
<!-- Include jQuery from Google CDN -->
13-
<link rel="stylesheet" th:href="@{/style.css}">
14-
<link th:src="@{/index.js}">
15-
16-
</head>
17-
18-
</html>
19-
20-
<!DOCTYPE html>
21-
<html lang="en" xmlns:th="http://www.thymeleaf.org">
223
<head>
234
<meta charset="UTF-8">
245
<meta name="viewport" content="width=device-width, initial-scale=1.0">
25-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
26-
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
27-
28-
<!-- Font Awesome CSS -->
6+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
297
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>
30-
<link rel="preconnect" href="https://fonts.googleapis.com">
31-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
32-
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
33-
<!-- Include jQuery from Google CDN -->
34-
<link rel="stylesheet" th:href="@{/style.css}">
35-
<link th:src="@{script.js}">
36-
8+
<link rel="stylesheet" href="/style.css">
9+
<script src="/index.js"></script>
3710
<title>Litter Snap</title>
3811
</head>
3912

4013
<body>
41-
4214
<div class="background-overlay"></div>
4315
<div class="container-fluid">
4416
<!-- Button to trigger the modal -->
4517
<div class="row justify-content-end m-3">
46-
<div class="btn-group col-12 col-md-4 col-lg-2 fixed-buttons">
18+
<div class="btn-group col-12 col-md-4 col-lg-2 fixed-buttons justify-content-end">
4719
<div class="d-flex justify-content-end align-items-center">
4820
<div class="me-2">Welcome, <span th:text="${username}"></span></div>
4921
<div class="dropdown">
@@ -68,83 +40,70 @@
6840
<thead>
6941
<tr>
7042
<th>Date</th>
71-
<th>By</th>
72-
<th>Address</th>
43+
<th>Street</th>
44+
<th>City</th>
45+
<th>Country</th>
7346
<th>PostCode</th>
7447
<th>Status</th>
7548
<th>Action</th>
7649
</tr>
7750
</thead>
7851
<tbody>
79-
<div th:if="${not #lists.isEmpty(litters)}">
80-
<tr th:each="litter : ${litters}">
81-
<td th:text="${litter.getCreatedAt()}"></td>
82-
<td th:text="${litter.getCreatedBy()}"></td>
83-
<td th:text="${litter.getAddress().firstLine}"></td>
84-
<td th:text="${litter.getAddress().postCode}"></td>
85-
<td th:text="${litter.getStatus()}"></td>
86-
<td>
87-
<div class="btn-group">
88-
<a th:href="@{/thy/{id}(id=${litter.id})}"
89-
class="btn btn-success btn-sm">View</a>
90-
<a th:href="@{/thy/{id}/edit(id=${litter.id})}" class="btn btn-warning btn-sm">Edit</a>
91-
<a th:href="@{/thy/{id}/delete(id=${litter.id})}" class="btn btn-danger btn-sm">Delete</a>
92-
</div>
93-
</td>
94-
</tr>
95-
</div>
96-
<div th:if="${#lists.isEmpty(litters)}">
97-
<tr>
98-
<td colspan="6">
99-
100-
</td>
101-
</tr>
102-
</div>
52+
<tr th:if="${not #lists.isEmpty(litters)}" th:each="litter : ${litters}">
53+
<td th:text="${litter.getCreatedAt()}"></td>
54+
<td th:text="${litter.getAddress().firstLine}"></td>
55+
<td th:text="${litter.getAddress().city}"></td>
56+
<td th:text="${litter.getAddress().country}"></td>
57+
<td th:text="${litter.getAddress().postCode}"></td>
58+
<td th:text="${litter.getStatus()}"></td>
59+
<td>
60+
<div class="btn-group">
61+
<a th:href="@{/thy/litter/{id}(id=${litter.id})}" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#showLitterDetailsModal">View</a>
62+
<a th:href="@{/thy/litter/edit/{id}(id=${litter.id})}" class="btn btn-warning btn-sm" >Edit</a>
63+
<a th:href="@{/thy/litter/delete/{id}(id=${litter.id})}" class="btn btn-danger btn-sm">Delete</a>
64+
</div>
65+
</td>
66+
</tr>
67+
<tr th:if="${#lists.isEmpty(litters)}">
68+
<td colspan="6"></td>
69+
</tr>
10370
</tbody>
10471
</table>
10572
</div>
10673
</div>
10774
</div>
10875
</div>
10976

110-
11177
<div class="row d-flex align-items-end justify-content-end min-vh-100">
112-
<div class="col-12 col-md-8 col-lg-6 ">
78+
<div class="col-12 col-md-8 col-lg-6">
11379
<div class="container logged-logo">
11480
<div class="row">
11581
<div class="col-10 col-md-9 col-lg-9">
11682
<!-- Content of the first column -->
11783
<span class="logged-logo-name">LitterSnap</span>
11884
<br>
119-
<span class="logged-logo-slogan">IF YOU CAN SEE IT, YOU CAN FIX IT...</span>
12085
</div>
12186
<div class="col-2 col-md-3 col-lg-3 d-flex justify-content-end align-items-end">
122-
<img th:src="@{/images/ManAndPhone.png}" alt="Image" class="man-with-the-phone-icon">
87+
<img src="/images/ManAndPhone.png" alt="Image" class="man-with-the-phone-icon">
12388
</div>
12489
</div>
12590
</div>
12691
</div>
12792
</div>
12893

129-
130-
13194
</div>
132-
133-
13495
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
13596
integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
13697
crossorigin="anonymous"></script>
13798
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
13899
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
139100
crossorigin="anonymous"></script>
140-
141101
<div class="footer-overlay">
142102
<footer>
143103
<div class="container-fluid">
144104
<p>&copy; 2023 Vasile, Csaba and Kevin. Wiley Edge. All rights reserved.</p>
145105
</div>
146106
</footer>
147107
</div>
148-
149108
</body>
150109
</html>

0 commit comments

Comments
 (0)