forked from Spurthi-Ravula/Group2-Student-Info-Exchange-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
market-place.html
121 lines (105 loc) · 4.42 KB
/
market-place.html
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
118
119
120
121
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head::head}">
<body>
<div th:replace="fragments/header.html :: header"></div>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="mb-5 d-flex justify-content-between">
<input type="text" id="searchbar" name="search" placeholder="Search by title ...">
<a th:href="@{/my-market-place}">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#addMarketPlaceModal">My products
</button>
</a>
</div>
<h1 class="mb-4 text-center">Available products</h1>
<div class="row">
<div th:each="marketPlace : ${marketPlaces}" class="col-md-4 mb-4">
<div class="card-marketPlace">
<a th:href="@{'/products?marketPlaceId=' + ${marketPlace.id}}">
<img th:src="@{'data:image/jpeg;base64,'+${marketPlace.generateBase64Image()}}"
alt="marketPlace Image" class="card-accommodation-img-top">
</a>
<div class="card-body">
<h5 class="card-title" th:text="${marketPlace.title}"></h5>
<p class="card-title" th:text="'Address: ' +${marketPlace.address}"></p>
<p class="card-title" th:text="'Description: ' +${marketPlace.description}"></p>
<p class="card-title" th:text="'Price: $' + ${marketPlace.price}"></p>
<div class="mb-3 d-flex justify-content-end">
<button type="button" class="btn btn-primary" data-toggle="modal"
onclick="confirmReservation(this)" th:value="${marketPlace.id}"
data-target="#addmarketPlaceModal">Reserve Product
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input th:value="${success}" disabled hidden="hidden" id="success">
<input th:value="${message}" disabled hidden="hidden" id="message">
</div>
<div th:replace="~{fragments/footer::footer}"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var success = document.getElementById('success').value;
if (success != 'null') {
var message = document.getElementById('message').value;
if (success === 'true') {
swal({
title: "Success!",
text: message,
icon: "success",
button: "close!",
});
} else if (success === 'false') {
swal({
title: "Failure!",
text: message,
icon: "failure",
button: "close!",
});
}
}
$('#searchbar').keyup(function(){
let marketPlaces = $('.card-marketPlace').parent();
let keyword = $(this).val().toLowerCase();
if(keyword == "")
marketPlaces.show();
else{
marketPlaces.each(function(element) {
let title = $(this).find('.card-title').text().toLowerCase();
(title.indexOf(keyword) >= 0) ? $(this).show() : $(this).hide();
});
}
});
});
function confirmReservation(button) {
const id = button.value;
console.log(id);
swal({
title: 'Are you sure?',
text: 'Do you want to reserve the product?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes, Reserve',
cancelButtonText: 'No, cancel',
}).then((result) => {
if (result.value === true) {
console.log(result)
console.log(result.isConfirmed)
window.location.href = '/reserve-market-place?id=' + id;
} else {
console.log(result)
console.log(result.isConfirmed)
// If the user cancels, prevent the default action
event.preventDefault();
}
});
}
</script>
</body>
</html>