Skip to content

Commit 772d05e

Browse files
charles-augustincharles-augustin
committed
Typo fix
1 parent ace6e20 commit 772d05e

1 file changed

Lines changed: 118 additions & 99 deletions

File tree

‎Vehicle Rental System/src/main/resources/templates/clerk/reservationRecord.html‎

Lines changed: 118 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@
1818
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
1919
rel="stylesheet">
2020

21-
<link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/png">
21+
<link rel="shortcut icon" th:href="@{/images/favicon.ico}"
22+
type="image/png">
2223

2324
</head>
2425
<style>
25-
table th { user-select: none; background: #eee;}
26+
table th {
27+
user-select: none;
28+
background: #eee;
29+
}
2630
</style>
2731

2832

@@ -31,71 +35,76 @@
3135
<div th:replace="clerk/header :: navbar"></div>
3236
<span class="glyphicon glyphicon-envelope"></span>
3337
<nav class="bodyMargin" aria-label="breadcrumb">
34-
<ol class="breadcrumb">
35-
<li class="breadcrumb-item"><a th:href="@{/clerk/home}">Home</a></li>
36-
<li class="breadcrumb-item active" aria-current="page">Cancle Reservation</li>
37-
</ol>
38+
<ol class="breadcrumb">
39+
<li class="breadcrumb-item"><a th:href="@{/clerk/home}">Home</a></li>
40+
<li class="breadcrumb-item active" aria-current="page">Cancel
41+
Reservation</li>
42+
</ol>
3843
</nav>
39-
44+
4045
<main role="main" class="container-fluid">
41-
42-
<h2> Reservation Catalog : Cancle Reservation </h3>
43-
44-
<br>
45-
46-
47-
<div align="center" th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert" th:utext="${successMessage}">
48-
</div>
49-
50-
<table class="table table-bordered" id="filterableTable">
51-
<thead>
52-
<tr>
53-
<th data-sort-prop="id">Id</th>
54-
<th data-sort-prop="firstName">FirstName</th>
55-
<th data-sort-prop="lastName">LastName</th>
56-
<th data-sort-prop="driverLicienceNo">Driver Licence No</th>
57-
<th data-sort-prop="expiryDate">Expiry Date</th>
58-
<th data-sort-prop="phoneNo">Phone No</th>
59-
<th data-sort-prop="color">Color</th>
60-
<th data-sort-prop="plateNo">Plate No</th>
61-
<th data-sort-prop="make">Make</th>
62-
<th data-sort-prop="year">Year</th>
63-
<th data-sort-prop="fromDateTime">Booking From</th>
64-
<th data-sort-prop="toDateTime">Booking Due</th>
65-
<th data-sort-prop="createdOn">Reservation Created on</th>
66-
<th >Cancel Booking</th>
67-
</tr>
68-
</thead>
69-
<tbody>
70-
<tr th:each="record : ${records}">
71-
<td th:text="${record.id}"></td>
72-
<td th:text="${record.client.firstName}"></td>
73-
<td th:text="${record.client.lastName}"></td>
74-
<td th:text="${record.client.driverLicienceNo}"></td>
75-
<td th:text="${#dates.format(record.client.expiryDate, 'MM/dd/yyyy')}"></td>
76-
<td th:text="${record.client.phoneNo}"></td>
77-
<td th:text="${record.vehicle.color}"></td>
78-
<td th:text="${record.vehicle.plateNo}"></td>
79-
<td th:text="${record.vehicle.make}"></td>
80-
<td th:text="${record.vehicle.year}"></td>
81-
<td th:text="${#dates.format(record.fromDateTime, 'MM/dd/yyyy hh:mm')}"></td>
82-
<td th:text="${#dates.format(record.toDateTime, 'MM/dd/yyyy hh:mm')}"></td>
83-
<td th:text="${#dates.format(record.createdOn, 'MM/dd/yyyy hh:mm')}"></td>
84-
85-
<td>
86-
<a
87-
th:href="@{'/clerk/reservation/cancel/' + ${record.id} }">
88-
<button type="button" class="btn btn-labeled btn-danger">
89-
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel</button>
90-
</a>
91-
</td>
92-
93-
</tr>
94-
</tbody>
95-
</table>
9646

47+
<h2>
48+
Reservation Catalog : Cancel Reservation
49+
</h3>
50+
51+
<br>
52+
53+
54+
<div align="center" th:if="${successMessage}"
55+
class="alert alert-success alert-dismissible fade show" role="alert"
56+
th:utext="${successMessage}"></div>
9757

58+
<table class="table table-bordered" id="filterableTable">
59+
<thead>
60+
<tr>
61+
<th data-sort-prop="id">Id</th>
62+
<th data-sort-prop="firstName">FirstName</th>
63+
<th data-sort-prop="lastName">LastName</th>
64+
<th data-sort-prop="driverLicienceNo">Driver Licence No</th>
65+
<th data-sort-prop="expiryDate">Expiry Date</th>
66+
<th data-sort-prop="phoneNo">Phone No</th>
67+
<th data-sort-prop="color">Color</th>
68+
<th data-sort-prop="plateNo">Plate No</th>
69+
<th data-sort-prop="make">Make</th>
70+
<th data-sort-prop="year">Year</th>
71+
<th data-sort-prop="fromDateTime">Booking From</th>
72+
<th data-sort-prop="toDateTime">Booking Due</th>
73+
<th data-sort-prop="createdOn">Reservation Created on</th>
74+
<th>Cancel Booking</th>
75+
</tr>
76+
</thead>
77+
<tbody>
78+
<tr th:each="record : ${records}">
79+
<td th:text="${record.id}"></td>
80+
<td th:text="${record.client.firstName}"></td>
81+
<td th:text="${record.client.lastName}"></td>
82+
<td th:text="${record.client.driverLicienceNo}"></td>
83+
<td
84+
th:text="${#dates.format(record.client.expiryDate, 'MM/dd/yyyy')}"></td>
85+
<td th:text="${record.client.phoneNo}"></td>
86+
<td th:text="${record.vehicle.color}"></td>
87+
<td th:text="${record.vehicle.plateNo}"></td>
88+
<td th:text="${record.vehicle.make}"></td>
89+
<td th:text="${record.vehicle.year}"></td>
90+
<td
91+
th:text="${#dates.format(record.fromDateTime, 'MM/dd/yyyy hh:mm')}"></td>
92+
<td
93+
th:text="${#dates.format(record.toDateTime, 'MM/dd/yyyy hh:mm')}"></td>
94+
<td
95+
th:text="${#dates.format(record.createdOn, 'MM/dd/yyyy hh:mm')}"></td>
9896

97+
<td><a
98+
th:href="@{'/clerk/reservation/cancel/' + ${record.id} }">
99+
<button type="button" class="btn btn-labeled btn-danger">
100+
<span class="btn-label"><i
101+
class="glyphicon glyphicon-remove"></i></span>Cancel
102+
</button>
103+
</a></td>
104+
105+
</tr>
106+
</tbody>
107+
</table>
99108
</main>
100109
<!-- /.container -->
101110

@@ -115,42 +124,52 @@ <h2> Reservation Catalog : Cancle Reservation </h3>
115124
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
116125
crossorigin="anonymous"></script>
117126

118-
<script th:src="@{/js/filter.js}"> </script>
119-
<script th:src="@{/js/main.js}" > </script>
120-
<script th:inline="javascript">
121-
//thymeleaf to javascript variables
122-
/*<![CDATA[*/
123-
var sortProperty = /*[[${sortProperty}]]*/ null;
124-
var sortDesc = /*[[${order}]]*/ null;
125-
126-
/*]]>*/
127-
128-
$(document).ready(function(){
129-
//show up/down arrows
130-
$("table thead th").each(function(){
131-
var head = $(this);
132-
if(head.attr('data-sort-prop')==sortProperty){
133-
head.append(sortDesc == "desc" ? ' <i class="fa fa-sort-desc"></i>' : ' <i class="fa fa-sort-asc"></i>');
134-
}
135-
});
136-
137-
//set click action, reload page on clicking with all query params
138-
/* $("table thead th").click(function() {
139-
var headerSortPropName = $(this).attr("data-sort-prop");
140-
if(headerSortPropName==undefined){
141-
return;
142-
}
143-
if(headerSortPropName==sortProperty){
144-
window.location.href = window.location.pathname+
145-
'?sort='+ headerSortPropName+'&order='+
146-
(sortDesc == "desc" ?'asc':'desc');
147-
console.log("a");
148-
}else{
149-
window.location.href = window.location.pathname+
150-
'?sort='+ headerSortPropName+'&order=asc';
151-
}
152-
}); */
153-
});
154-
</script>
127+
<script th:src="@{/js/filter.js}">
128+
129+
</script>
130+
<script th:src="@{/js/main.js}">
131+
132+
</script>
133+
<script th:inline="javascript">
134+
//thymeleaf to javascript variables
135+
/*<![CDATA[*/
136+
var sortProperty = /*[[${sortProperty}]]*/null;
137+
var sortDesc = /*[[${order}]]*/null;
138+
139+
/*]]>*/
140+
141+
$(document)
142+
.ready(
143+
function() {
144+
//show up/down arrows
145+
$("table thead th")
146+
.each(
147+
function() {
148+
var head = $(this);
149+
if (head.attr('data-sort-prop') == sortProperty) {
150+
head
151+
.append(sortDesc == "desc" ? ' <i class="fa fa-sort-desc"></i>'
152+
: ' <i class="fa fa-sort-asc"></i>');
153+
}
154+
});
155+
156+
//set click action, reload page on clicking with all query params
157+
/* $("table thead th").click(function() {
158+
var headerSortPropName = $(this).attr("data-sort-prop");
159+
if(headerSortPropName==undefined){
160+
return;
161+
}
162+
if(headerSortPropName==sortProperty){
163+
window.location.href = window.location.pathname+
164+
'?sort='+ headerSortPropName+'&order='+
165+
(sortDesc == "desc" ?'asc':'desc');
166+
console.log("a");
167+
}else{
168+
window.location.href = window.location.pathname+
169+
'?sort='+ headerSortPropName+'&order=asc';
170+
}
171+
}); */
172+
});
173+
</script>
155174
</body>
156175
</html>

0 commit comments

Comments
 (0)