Skip to content

Commit a1099d9

Browse files
Csaba79-coderCsaba79-coder
authored
Merge pull request #13 from Csaba79-coder/feature-refactor-searchbar-and-addLitter-button-vasile
Feature refactor searchbar and add litter button vasile
2 parents 667e668 + f7f533f commit a1099d9

File tree

6 files changed

+169
-88
lines changed

6 files changed

+169
-88
lines changed

‎src/main/java/com/csaba79coder/littersnap/controller/LitterController.java‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,5 @@ public ResponseEntity<Void> deleteExistingLitter(@PathVariable("id") UUID id) {
5454

5555
return ResponseEntity.status(204).build();
5656
}
57+
5758
}

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

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@
77
import com.csaba79coder.littersnap.util.Mapper;
88
import org.springframework.stereotype.Controller;
99
import org.springframework.ui.Model;
10-
import org.springframework.web.bind.annotation.GetMapping;
11-
import org.springframework.web.bind.annotation.ModelAttribute;
12-
import org.springframework.web.bind.annotation.PathVariable;
13-
import org.springframework.web.bind.annotation.PostMapping;
14-
import org.springframework.web.bind.annotation.RequestMapping;
15-
import org.springframework.web.bind.annotation.RequestParam;
10+
import org.springframework.web.bind.annotation.*;
1611
import org.springframework.web.multipart.MultipartFile;
1712

1813
import java.util.Base64;
@@ -71,25 +66,23 @@ public String getLitterById(@PathVariable("id") UUID id, Model model) {
7166
}
7267

7368
@GetMapping("/create")
74-
public String showAddLitterForm(Model model) {
69+
public String showAddLitterForm(Model model, @RequestParam(value = "city", required = false) String capturedCity) {
7570
try {
7671
LitterCreateOrModifyModel litterModel = new LitterCreateOrModifyModel();
77-
7872
// Set any other necessary properties in the litterModel object
7973

74+
model.addAttribute("city", capturedCity);
8075
model.addAttribute("litter", litterModel);
81-
return "litter_add_form";
76+
model.addAttribute("view","litter_add_form");
77+
return "welcome";
8278
} catch (NoSuchElementException e) {
8379
model.addAttribute("errorMessage", e.getMessage());
8480
return "error_page"; // Redirect to the error page to display the error message
8581
}
8682
}
8783

8884
@PostMapping("/create")
89-
public String addNewLitter(@ModelAttribute("litter") LitterCreateOrModifyModel litterModel,
90-
@ModelAttribute("address") Address address,
91-
@RequestParam("file") MultipartFile file,
92-
Model model) {
85+
public String addNewLitter(@ModelAttribute("litter") LitterCreateOrModifyModel litterModel, @ModelAttribute("address") Address address, @RequestParam("file") MultipartFile file, Model model) {
9386
try {
9487
litterService.addNewLitter(litterModel, address, file);
9588
return "redirect:/thy/litter";
@@ -110,7 +103,7 @@ public String showEditForm(@PathVariable UUID id, Model model) {
110103
model.addAttribute("postcode", litter.getAddress().getPostCode());
111104
model.addAttribute("description", litter.getDescription());
112105
model.addAttribute("image", litter.getImage());
113-
model.addAttribute("view","litter_edit_form");
106+
model.addAttribute("view", "litter_edit_form");
114107
return "welcome";
115108
} catch (NoSuchElementException e) {
116109
model.addAttribute("errorMessage", e.getMessage());
@@ -131,7 +124,7 @@ public String updateLitter(@PathVariable UUID id, @ModelAttribute("report") Litt
131124

132125

133126
@GetMapping("/delete/{id}")
134-
public String deleteLitter(@PathVariable UUID id,Model model) {
127+
public String deleteLitter(@PathVariable UUID id, Model model) {
135128

136129
try {
137130
litterService.deleteLitter(id);
@@ -144,5 +137,4 @@ public String deleteLitter(@PathVariable UUID id,Model model) {
144137
}
145138

146139

147-
148140
}

‎src/main/resources/static/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,46 @@ body {
2424
z-index: 999;
2525
}
2626

27+
/*Image redendering size controll*/
28+
.image-container {
29+
max-width: 350px; /* Set the maximum width for the image container */
30+
margin: auto; /* Center the container horizontally */
31+
cursor: pointer; /* Show the pointer cursor when hovering */
32+
}
33+
34+
.image-container img {
35+
width: 100%; /* Make the image fill the container */
36+
height: auto; /* Maintain aspect ratio */
37+
transition: transform 0.3s; /* Add a smooth transition effect */
38+
}
39+
40+
.image-container img:hover {
41+
transform: scale(1.2); /* Scale the image to 120% on hover */
42+
}
43+
44+
/*NavBar style*/
45+
.navbar {
46+
background-color: #f8f9fa;
47+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
48+
}
49+
50+
.navbar-brand {
51+
font-size: 1.5rem;
52+
font-weight: bold;
53+
color: #333;
54+
}
55+
56+
.navbar-nav .nav-link {
57+
font-size: 1.1rem;
58+
color: #333;
59+
transition: color 0.3s;
60+
}
61+
62+
.navbar-nav .nav-link:hover {
63+
color: #007bff;
64+
}
65+
66+
/*Logo Style*/
2767
.logo-and-slogan-container {
2868
position: relative;
2969
}

‎src/main/resources/templates/litter_add_form.html‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,40 @@
1-
<div class="modal fade" id="addLitterModal" tabindex="-1" aria-labelledby="addLitterModalLabel" aria-hidden="true">
2-
<div class="modal-dialog">
3-
<div class="modal-content">
4-
<!-- Modal header -->
5-
<div class="modal-header">
6-
<h5 class="modal-title" id="addLitterModalLabel">Add Litter</h5>
7-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
8-
</div>
9-
10-
<!-- Modal body -->
11-
<div class="modal-body">
12-
<div class="d-flex justify-content-center">
13-
<div class="add-litter-container">
14-
<form th:action="@{/thy/litter/create}" method="post" enctype="multipart/form-data">
15-
<div class="form-group">
16-
<label for="firstLine">First Line</label>
17-
<input type="text" class="form-control" id="firstLine" name="firstLine" required>
18-
</div>
19-
<div class="form-group">
20-
<label for="postCode">Post Code</label>
21-
<input type="text" class="form-control" id="postCode" name="postCode" required>
22-
</div>
23-
<div class="form-group">
24-
<label for="city">City</label>
25-
<input type="text" class="form-control" id="city" name="city" required>
26-
</div>
27-
<div class="form-group">
28-
<label for="country">Country</label>
29-
<input type="text" class="form-control" id="country" name="country" required>
30-
</div>
31-
<div class="form-group">
32-
<label for="description">Description</label>
33-
<textarea class="form-control" id="description" name="description"
34-
required></textarea>
35-
</div>
36-
<div class="form-group mt-3">
37-
<label for="file">Photo</label>
38-
<input type="file" class="form-control-file" id="file" name="file" accept="image/*"
39-
required>
40-
</div>
41-
42-
<button type="submit" class="btn btn-primary mt-3">Submit</button>
43-
</form>
1+
<div class="container mt-4 bg-white">
2+
<div class="row">
3+
<div class="col">
4+
<div class="d-flex justify-content-center">
5+
<div class="add-litter-container">
6+
<form th:action="@{/thy/litter/create}" method="post" enctype="multipart/form-data">
7+
<div class="form-group">
8+
<label for="firstLine">First Line</label>
9+
<input type="text" class="form-control" id="firstLine" name="firstLine" required>
10+
</div>
11+
<div class="form-group">
12+
<label for="postCode">Post Code</label>
13+
<input type="text" class="form-control" id="postCode" name="postCode" required>
14+
</div>
15+
<div class="form-group">
16+
<label for="city">City</label>
17+
<input type="text" class="form-control" id="city" name="city" th:value="${city}" required>
4418
</div>
45-
</div>
19+
<div class="form-group">
20+
<label for="country">Country</label>
21+
<input type="text" class="form-control" id="country" name="country" required>
22+
</div>
23+
<div class="form-group">
24+
<label for="description">Description</label>
25+
<textarea class="form-control" id="description" name="description"
26+
required></textarea>
27+
</div>
28+
<div class="form-group mt-3">
29+
<label for="file">Photo</label>
30+
<input type="file" class="form-control-file" id="file" name="file" accept="image/*"
31+
required>
32+
</div>
33+
34+
<button type="submit" class="btn btn-primary mt-3">Submit</button>
35+
</form>
4636
</div>
4737
</div>
4838
</div>
49-
</div>
39+
</div>
40+
</div>

‎src/main/resources/templates/litter_details.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ <h4><span class="text-muted">Description:</span></h4>
2626
<p><span th:text="${description}"></span></p>
2727

2828
<h4><span class="text-muted">Image:</span></h4>
29-
<img th:src="@{'data:image/png;base64,' + ${image}}" alt="Litter Image" />
29+
<div class="image-container" onclick="expandImage()">
30+
<img th:src="@{'data:image/png;base64,' + ${image}}" alt="Litter Image" />
31+
</div>
32+
3033

3134
<h4><span class="text-muted">Status:</span></h4>
3235
<p><span th:text="${status}"></span></p>
@@ -35,4 +38,11 @@ <h4><span class="text-muted">Status:</span></h4>
3538

3639
</div>
3740

41+
<script>
42+
function expandImage() {
43+
var img = document.querySelector('.image-container img');
44+
img.style.transform = img.style.transform === 'scale(1.2)' ? 'none' : 'scale(1.2)';
45+
}
46+
</script>
47+
3848

‎src/main/resources/templates/welcome.html‎

Lines changed: 73 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,49 +22,97 @@
2222

2323
<div class="background-overlay"></div>
2424
<div class="container-fluid">
25-
<!-- Button to trigger the modal -->
26-
<div class="row justify-content-end m-3">
27-
<div class="btn-group col-12 col-md-4 col-lg-2 fixed-buttons">
28-
<div class="d-flex justify-content-end align-items-center">
29-
<div class="me-2">Welcome, <span th:text="Csaba"></span></div>
30-
<div class="dropdown">
31-
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
32-
data-bs-toggle="dropdown" aria-expanded="false">
33-
<i class="fas fa-bars"></i>
34-
</button>
35-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
36-
<li><a class="dropdown-item" href="#">Logout</a></li>
37-
<li><a class="dropdown-item" th:href="@{/thy/litter}">View Reports</a></li>
38-
</ul>
39-
</div>
25+
26+
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary">
27+
<div class="container-fluid">
28+
<a class="navbar-brand" style=" color:#1c5485;" th:href="@{/thy/litter}">LitterSnap</a>
29+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33+
<div class="me-2">Welcome, <span style=" color:green; font-weight: bold" th:text="Csaba"></span></div>
34+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
35+
<li class="nav-item">
36+
<a class="nav-link active" aria-current="page" th:href="@{/thy/litter}">View Reports</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link active" th:href="@{/thy/users}">View Users</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link active" aria-current="page" th:href="@{/}">Logout</a>
43+
</li>
44+
45+
</ul>
46+
47+
<form th:action="@{/thy/litter/create}" method="get" class="d-flex">
48+
<div class="form-group flex-grow-1">
49+
<input type="text" class="form-control" id="cityInput" name="city"
50+
placeholder="Enter the city..." required>
51+
</div>
52+
<button type="submit" class="btn btn-primary btn-sm-md">Add Litter</button>
53+
</form>
4054
</div>
4155
</div>
42-
</div>
56+
</nav>
4357

44-
<button class="btn btn-primary btn-sm btn-block ml-20" data-bs-toggle="modal" data-bs-target="#addLitterModal">
45-
Add Litter
46-
</button>
47-
<a th:href="@{/thy/users}" class="btn btn-success btn-sm">User List</a>
4858

4959

50-
<div th:replace="~{litter_add_form}"></div>
5160

5261

53-
<div class="container mt-4 bg-white">
5462

63+
64+
<!-- Hamburger button-->
65+
<!-- <div class="row justify-content-end m-3">-->
66+
<!-- <div class="btn-group col-12 col-md-4 col-lg-2 fixed-buttons">-->
67+
<!-- <div class="d-flex align-items-center">-->
68+
<!-- <div class="me-2">Welcome, <span th:text="Csaba"></span></div>-->
69+
<!-- <div class="dropdown">-->
70+
<!-- <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"-->
71+
<!-- data-bs-toggle="dropdown" aria-expanded="false">-->
72+
<!-- <i class="fas fa-bars"></i>-->
73+
<!-- </button>-->
74+
<!-- <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">-->
75+
<!-- <li><a class="dropdown-item" >Logout</a></li>-->
76+
<!-- <li><a class="dropdown-item" th:href="@{/thy/litter}">View Reports</a></li>-->
77+
<!-- <li><a class="dropdown-item" th:href="@{/thy/users}">User List</a></li>-->
78+
<!-- </ul>-->
79+
<!-- </div>-->
80+
<!-- </div>-->
81+
<!-- </div>-->
82+
<!-- </div>-->
83+
84+
85+
86+
87+
<!--Getting the input and populating the addlitter-->
88+
<!-- <div class="row justify-content-center mt-10">-->
89+
<!-- <div class="col-12 col-md-7 col-lg-6">-->
90+
<!-- <form th:action="@{/thy/litter/create}" method="get" class="d-flex">-->
91+
<!-- <div class="form-group flex-grow-1">-->
92+
<!-- <input type="text" class="form-control" id="cityInput" name="city"-->
93+
<!-- placeholder="Enter the city..." required>-->
94+
<!-- </div>-->
95+
<!-- <button type="submit" class="btn btn-primary btn-sm-md">Add Litter</button>-->
96+
<!-- </form>-->
97+
<!-- </div>-->
98+
<!-- </div>-->
99+
100+
101+
<!-- Container for dynamic content -->
102+
<div class="container mt-4 bg-white">
55103
<div class="row">
56104
<div class="col">
57-
105+
<!-- Dynamic content placeholder -->
58106
<div th:if="~{${view}}" class="row m-4">
59107
<div class="col">
60108
<!-- Dynamic Content Placeholder -->
61109
<div th:insert="~{${view}}"></div>
62-
63110
</div>
64111
</div>
65112
</div>
66113
</div>
67114
</div>
115+
68116
<!-- Middle Part -->
69117
<div class="row d-flex align-items-end justify-content-end min-vh-100">
70118
<div class="col-12 col-md-8 col-lg-6">
@@ -82,8 +130,6 @@
82130
</div>
83131
</div>
84132
</div>
85-
86-
87133
</div>
88134

89135

@@ -94,6 +140,7 @@
94140
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
95141
crossorigin="anonymous"></script>
96142

143+
97144
<div class="footer-overlay">
98145
<footer>
99146
<div class="container-fluid">

0 commit comments

Comments
 (0)