source: src/main/resources/templates/post.html@ 6fa3d09

Last change on this file since 6fa3d09 was 6fa3d09, checked in by NikolaCenevski <cenevskinikola@…>, 2 years ago

part 3
  • Property mode set to 100644
File size: 11.7 KB
Line 
1<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
2<head>
3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1"/>
5 <title>Register</title>
6 <!-- Bootstrap core CSS -->
7 <link href="css/bootstrap.min.css" rel="stylesheet"/>
8 <link href="css/carousel.css" rel="stylesheet"/>
9 <meta name="theme-color" content="#7952b3"/>
10</head>
11<body>
12<header th:replace="common/navbar :: navbar"></header>
13<br/>
14<br/>
15<br/>
16<div th:if="${notFound}">
17 Post not found
18</div>
19<div th:unless="${notFound}">
20<div class="row">
21 <div class="col-md-6" style="margin-left: 5px">
22 <div class="col-md-12">
23
24 <div id="myCarousel" class="carousel carousel-dark slide card" data-bs-ride="carousel">
25 <div class="carousel-indicators">
26 <button th:each="image, itrStat : ${post.imagesPath}" type="button" data-bs-target="#myCarousel"
27 th:data-bs-slide-to="${itrStat.index}" th:classappend="${itrStat.index} == 0 ? active"></button>
28 </div>
29 <div class="carousel-inner">
30 <div th:each="image, itrStat : ${post.imagesPath}" th:classappend="${itrStat.index} == 0 ? active"
31 class="carousel-item">
32 <img class="card-img" th:src="${image}" style="object-fit: contain">
33 </div>
34 </div>
35 <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
36 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
37 <span class="visually-hidden">Previous</span>
38 </button>
39 <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
40 <span class="carousel-control-next-icon" aria-hidden="true"></span>
41 <span class="visually-hidden">Next</span>
42 </button>
43 </div>
44 </div>
45 </div>
46 <div class="col-md-5" style="margin-left: 5px">
47 <div class="col-md-12">
48 <h1 th:text="${post.title}"></h1>
49 <h5>Description:</h5>
50 <p th:text="${post.description}"></p>
51 <h5>Funds needed:</h5>
52 <p><span th:text="${post.totalFundsCollected}"></span>/<span th:text="${post.fundsNeeded}"></span> - <span th:text="${post.currency}"></span></p>
53 <h5>Date due:</h5>
54 <p th:text="${post.dateDue}"></p>
55 <h5>Chance:</h5>
56 <p th:if="${post.riskFactor<100}" th:text="${post.riskFactor}"></p>
57 <p th:if="${post.riskFactor==100}" th:text="${post.riskFactor+'+'}"></p>
58 <p th:if="${post.riskFactor==101}">too early to calculate</p>
59 <p th:if="${post.riskFactor==102}">Donation completed!</p>
60 <h5>Bank account:</h5>
61 <p th:text="${post.bankAccount}"></p>
62 <h5>Phone numbers:</h5>
63 <p><span th:text="${post.phoneNumbers[0]}"></span> - Telekom</p>
64 <p><span th:text="${post.phoneNumbers[1]}"></span> - A1</p>
65 <h5>Created by:</h5>
66 <p><span th:text="${createdByFirstName}"></span> <span th:text="${createdByLastName}"></span></p>
67 <h5>Approved by:</h5>
68 <p th:unless="${moderatorFirstName}">Not approved</p>
69 <p><span th:text="${moderatorFirstName}"></span> <span th:text="${moderatorLastName}"></span></p>
70
71 <button sec:authorize="isAuthenticated()" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
72 Donate
73 </button>
74 <button sec:authorize="isAnonymous()" type="button" class="btn btn-primary" disabled>
75 Donate
76 </button>
77 <button sec:authorize="isAuthenticated()" type="button" class="btn btn-danger" data-bs-toggle="modal"
78 data-bs-target="#staticBackdrop1">
79 Report
80 </button>
81 <button sec:authorize="isAnonymous()" type="button" class="btn btn-danger" disabled>
82 Report
83 </button>
84 <div id="error" class="text-danger" hidden>Donation error</div>
85
86 <!-- Modal -->
87 <div sec:authorize="isAuthenticated()" class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
88 <div class="modal-dialog modal-dialog-centered">
89 <div class="modal-content">
90 <div class="modal-header">
91 <h5 class="modal-title" id="staticBackdropLabel">Donate</h5>
92 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
93 </div>
94 <div class="modal-body">
95 <div class="card-body">
96 <div style="float: right">
97 <img src="https://img.icons8.com/color/48/000000/visa.png"/>
98 <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png"/>
99 <img src="https://img.icons8.com/color/48/000000/maestro.png"/>
100 </div>
101 <br/>
102 <br/>
103 <form th:action="@{/donate(postid=${post.id})}" method="post" id="myForm">
104 <div class="row">
105 <div class="col-md-6">
106 <label for="cardName" class="form-label">Cardholder's name</label>
107 <input type="text" class="form-control" id="cardName" name="cardName"
108 placeholder="Name on card" required>
109 </div>
110 <div class="col-md-6 mb-0">
111 <label for="cardNumber" class="form-label">Card Number</label>
112 <input type="text" class="form-control" id="cardNumber" name="cardNumber"
113 placeholder="0000 0000 0000 0000" required>
114 </div>
115 </div>
116 <div class="row">
117 <div class="col-md-6">
118 <label for="expiryDate" class="form-label">Expiry date</label>
119 <input type="text" class="form-control" id="expiryDate" name="expiryDate"
120 placeholder="MM/YY" required>
121 </div>
122 <div class="col-md-6">
123 <label for="cvv" class="form-label">CVV</label>
124 <input type="text" class="form-control" id="cvv" name="cvv" placeholder="XXX" required>
125 </div>
126 </div>
127 <hr>
128 <div class="row">
129 <div class="col-md-6">
130 <label for="amount" class="form-label">Amount</label>
131 <div class="input-group">
132 <input type="number" class="form-control" id="amount" name="amount" required>
133 <span class="input-group-text">MKD</span>
134 </div>
135 </div>
136 </div>
137 </form>
138 </div>
139 </div>
140 <div class="modal-footer">
141 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
142 <input type="submit" class="btn btn-primary" form="myForm" value="Confirm">
143 </div>
144 </div>
145 </div>
146 </div>
147 <div sec:authorize="isAuthenticated()" class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false"
148 tabindex="-1" aria-labelledby="staticBackdropLabel1" aria-hidden="true">
149 <div class="modal-dialog modal-dialog-centered">
150 <div class="modal-content">
151 <div class="modal-header">
152 <h5 class="modal-title" id="staticBackdropLabel1">Report post</h5>
153 <button type="button" class="btn-close" data-bs-dismiss="modal"
154 aria-label="Close"></button>
155 </div>
156 <div class="modal-body">
157 <div class="card-body">
158 <form th:action="@{/report(postid=${post.id})}" method="post"
159 id="myForm1">
160 <label for="description">Description</label>
161 <textarea class="form-control" id="description" name="description"
162 rows="5"></textarea>
163 </form>
164 </div>
165 </div>
166 <div class="modal-footer">
167 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
168 <input type="submit" class="btn btn-primary" form="myForm1" value="Confirm">
169 </div>
170 </div>
171 </div>
172 </div>
173 </div>
174 </div>
175</div>
176<div class="row">
177 <div class="col-md-12">
178 <div class="col-md-8">
179 <h3>Funds collected</h3>
180 <div class="card mb-3">
181 <div class="card-body">
182 <div class="row">
183 <div class="col">
184 <h6>Type</h6>
185 </div>
186 <div class="col text-secondary">
187 <h6>Amount (MKD)</h6>
188 </div>
189 </div>
190 <div class="row" th:each="funds : ${post.fundsCollected}">
191 <div class="col">
192 <h6 th:text="${funds.description}"></h6>
193 </div>
194 <div class="col text-secondary" th:text="${funds.funds}">
195 </div>
196 <hr class="dropdown-divider">
197 </div>
198 </div>
199 </div>
200 </div>
201</div>
202</div>
203</div>
204<script src="/js/bootstrap.min.js"></script>
205<script>
206 location.search
207 .substr(1)
208 .split("&")
209 .forEach(function (item) {
210 tmp = item.split("=");
211 if (tmp[0] === "error") {
212 document.getElementById("error").hidden = false;
213 }
214 });
215</script>
216<script th:inline="javascript" th:unless="${notFound}" sec:authorize="isAuthenticated()">
217 /*<![CDATA[*/
218
219 var creditCardInfo = /*[[${user.creditCardInfo}]]*/ 'default';
220 if(creditCardInfo) {
221 var parts = creditCardInfo.split(",");
222 document.getElementById("cardName").value=parts[0];
223 document.getElementById("cardNumber").value=parts[1];
224 document.getElementById("expiryDate").value=parts[2];
225 document.getElementById("cvv").value=parts[3];
226 }
227
228 /*]]>*/
229</script>
230</body>
231</html>
Note: See TracBrowser for help on using the repository browser.