Skip to content

Commit 020142e

Browse files
brunodrugowickbrunodrugowick
committed
Adds bootstrap via webjars.
Also makes use of Thymeleaf fragments.
1 parent dd6793b commit 020142e

5 files changed

Lines changed: 106 additions & 32 deletions

File tree

‎pom.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@
3131
<groupId>org.springframework.boot</groupId>
3232
<artifactId>spring-boot-starter-thymeleaf</artifactId>
3333
</dependency>
34+
<dependency>
35+
<groupId>org.webjars</groupId>
36+
<artifactId>bootstrap</artifactId>
37+
<version>4.4.1</version>
38+
</dependency>
39+
<dependency>
40+
<groupId>org.webjars</groupId>
41+
<artifactId>webjars-locator</artifactId>
42+
<version>0.38</version>
43+
</dependency>
44+
<dependency>
45+
<groupId>org.webjars</groupId>
46+
<artifactId>jquery</artifactId>
47+
<version>3.4.1</version>
48+
</dependency>
3449
<dependency>
3550
<groupId>com.h2database</groupId>
3651
<artifactId>h2</artifactId>

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en" xmlns:th="http://www.thymeleaf.org">
33
<head>
4+
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
5+
46
<meta charset="UTF-8">
57
<title>Cuisine</title>
68
</head>
7-
<body>
8-
<h1 th:text="${cuisine.getName()}">Cuisine 1</h1>
9+
<body class="container">
10+
11+
<div th:replace="fragments/header :: header (title='Cuisine')"></div>
912

10-
<table>
13+
<br>
14+
<h1 th:text="${cuisine.getName()}">Cuisine 1</h1>
15+
<br>
16+
<table class="table table-striped table-bordered">
1117
<thead>
12-
<tr bgcolor="#d3d3d3">
18+
<tr>
1319
<td colspan="2"><b>Cuisine Info</b></td>
1420
</tr>
1521
</thead>
@@ -31,5 +37,7 @@ <h1 th:text="${cuisine.getName()}">Cuisine 1</h1>
3137
</tbody>
3238
</table>
3339

40+
<script src="/webjars/jquery/jquery.min.js"></script>
41+
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
3442
</body>
35-
</html>
43+
</html>

‎src/main/resources/templates/fragments/header.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
5+
6+
<meta charset="UTF-8">
7+
<title>Restaurants</title>
8+
</head>
9+
<body class="container">
10+
11+
<nav th:fragment="header (title)" class="navbar navbar-expand-lg navbar-light bg-light">
12+
<a class="navbar-brand" href="/" th:text="${title}"></a>
13+
</nav>
14+
15+
<script src="/webjars/jquery/jquery.min.js"></script>
16+
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
17+
</body>
18+
</html>

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

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,59 @@
11
<!DOCTYPE html>
22
<html lang="en" xmlns:th="http://www.thymeleaf.org">
33
<head>
4+
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
5+
46
<meta charset="UTF-8">
57
<title>Restaurants</title>
68
</head>
7-
<body>
8-
<h1>Restaurants</h1>
9+
<body class="container">
10+
11+
<div th:replace="fragments/header :: header (title='Restaurants')"></div>
912

13+
<br>
1014
<form th:action="@{/search}">
11-
Search by:
12-
<select id="field" name="field">
13-
<option th:selected="${field == 'name'}" value="name">Name</option>
14-
<option th:selected="${field == 'cuisine'}" value="cuisine">Cuisine</option>
15-
<option th:selected="${field == 'delivery-fee'}" value="delivery-fee">Delivery Fee</option>
16-
</select>
17-
<input placeholder="Your search query" th:name="query" th:value="${query}" type="text"/>
18-
<input type="submit" value="Search">
15+
<div class="card mb-auto">
16+
<div class="card-header">
17+
<h4>Filter Restaurants</h4>
18+
</div>
19+
<div class="card-body">
20+
<div class="form-group row">
21+
<label for="field" class="col-sm-4 col-form-label">Search by</label>
22+
<select class="form-control col-sm-8" id="field" name="field">
23+
<option th:selected="${field == 'name'}" value="name">Name</option>
24+
<option th:selected="${field == 'cuisine'}" value="cuisine">Cuisine</option>
25+
<option th:selected="${field == 'delivery-fee'}" value="delivery-fee">Delivery Fee</option>
26+
</select>
27+
</div>
28+
<div class="form-group row">
29+
<label for="query" class="col col-sm-4">Your search query</label>
30+
<input id="query" class="form-control col-sm-8" placeholder="<empty>" th:name="query" th:value="${query}" type="text"/>
31+
</div>
32+
<div class="form-group row">
33+
<div class="col col-sm-4"></div>
34+
<input class="btn btn-primary col col-sm-8" type="submit" value="Submit">
35+
</div>
36+
</div>
37+
</div>
1938
</form>
2039

2140
<br><br>
2241

23-
<table>
42+
<table class="table table-striped table-bordered">
2443
<thead>
25-
<tr bgcolor="#d3d3d3">
26-
<td>Name</td>
27-
<td>Address</td>
28-
<td>Delivery Fee</td>
29-
<td>Cuisine</td>
44+
<tr>
45+
<th>Name</th>
46+
<th>Address</th>
47+
<th>Delivery Fee</th>
48+
<th>Cuisine</th>
3049
</tr>
3150
</thead>
3251
<tr th:each="restaurant : ${restaurants}">
33-
<td style="cursor: pointer; background-color: aquamarine "
34-
th:onclick="'window.location.href=\'/restaurants/' + ${restaurant.getId()} + '\''"
35-
th:text="${restaurant.getName()}"></td>
52+
<td>
53+
<button
54+
class="btn btn-primary"
55+
th:text="${restaurant.getName()}"
56+
th:onclick="'window.location.href=\'/restaurants/' + ${restaurant.getId()} + '\''"></button></td>
3657
<td th:text="${restaurant.getAddress()}"></td>
3758
<td th:text="${restaurant.getDeliveryFee()}"></td>
3859
<td th:text="${restaurant.getCuisine().getName()}"></td>
@@ -42,5 +63,7 @@ <h1>Restaurants</h1>
4263
</tbody>
4364
</table>
4465

66+
<script src="/webjars/jquery/jquery.min.js"></script>
67+
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
4568
</body>
46-
</html>
69+
</html>

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en" xmlns:th="http://www.thymeleaf.org">
33
<head>
4+
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
5+
46
<meta charset="UTF-8">
57
<title>Restaurant</title>
68
</head>
7-
<body>
8-
<h1 th:text="${restaurant.getName()}">Restaurant 1</h1>
9+
<body class="container">
10+
11+
<div th:replace="fragments/header :: header (title='Restaurant')"></div>
912

10-
<table>
13+
<br>
14+
<h1 th:text="${restaurant.getName()}">Restaurant 1</h1>
15+
<br>
16+
<table class="table table-striped table-bordered">
1117
<thead>
12-
<tr bgcolor="#d3d3d3">
18+
<tr>
1319
<td colspan="2"><b>Restaurant Info</b></td>
1420
</tr>
1521
</thead>
@@ -27,9 +33,11 @@ <h1 th:text="${restaurant.getName()}">Restaurant 1</h1>
2733
</tr>
2834
<tr>
2935
<td>Cuisine</td>
30-
<td style="cursor: pointer; background-color: aquamarine "
36+
<td>
37+
<button class="btn btn-primary"
3138
th:onclick="'window.location.href=\'/cuisines/' + ${restaurant.getCuisine().getId()} + '\''"
32-
th:text="${restaurant.getCuisine().getName()}"></td>
39+
th:text="${restaurant.getCuisine().getName()}"></button>
40+
</td>
3341
</tr>
3442
<tr>
3543
<td>Updated Date</td>
@@ -44,5 +52,7 @@ <h1 th:text="${restaurant.getName()}">Restaurant 1</h1>
4452
</tbody>
4553
</table>
4654

55+
<script src="/webjars/jquery/jquery.min.js"></script>
56+
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
4757
</body>
48-
</html>
58+
</html>

0 commit comments

Comments
 (0)