| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8"/>
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|---|
| 6 | <title>Album</title>
|
|---|
| 7 | <!-- Bootstrap core CSS -->
|
|---|
| 8 | <link href="css/bootstrap.min.css" rel="stylesheet"/>
|
|---|
| 9 | <link rel="stylesheet" href="css/risk.css"/>
|
|---|
| 10 | </head>
|
|---|
| 11 | <body>
|
|---|
| 12 | <header th:replace="common/navbar :: navbar"></header>
|
|---|
| 13 | <hr class="dropdown-divider">
|
|---|
| 14 | <br/>
|
|---|
| 15 | <br/>
|
|---|
| 16 | <main>
|
|---|
| 17 | <p th:if="${noPosts}">No posts</p>
|
|---|
| 18 | <div th:unless="${noPosts}" class="album py-5 bg-light">
|
|---|
| 19 |
|
|---|
| 20 | <div class="container">
|
|---|
| 21 | <div class="row">
|
|---|
| 22 | <div class="col-md-2">
|
|---|
| 23 | <label class="form-label" for="sortBy">Sort By</label>
|
|---|
| 24 | <select class="input-group-text" id="sortBy">
|
|---|
| 25 | <option value="id">Default</option>
|
|---|
| 26 | <option value="title">Title</option>
|
|---|
| 27 | <option value="dateDue">Date due</option>
|
|---|
| 28 | <option value="fundsNeeded">Funds needed</option>
|
|---|
| 29 | <option value="riskFactor">Chance to collect funds</option>
|
|---|
| 30 | </select>
|
|---|
| 31 | </div>
|
|---|
| 32 | <div class="col-md-2">
|
|---|
| 33 | <label class="form-label" for="order">Order</label>
|
|---|
| 34 | <select class="input-group-text" id="order">
|
|---|
| 35 | <option value="asc">Ascending</option>
|
|---|
| 36 | <option value="desc">Descending</option>
|
|---|
| 37 | </select>
|
|---|
| 38 | </div>
|
|---|
| 39 | <div class="col-md-2">
|
|---|
| 40 | <label class="form-label" for="groupBy">Group by</label>
|
|---|
| 41 | <select class="input-group-text" id="groupBy">
|
|---|
| 42 | <option value="all">All</option>
|
|---|
| 43 | <option value="completed">Completed</option>
|
|---|
| 44 | <option value="expired">Expired</option>
|
|---|
| 45 | </select>
|
|---|
| 46 | </div>
|
|---|
| 47 | </div>
|
|---|
| 48 | <br>
|
|---|
| 49 | <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|---|
| 50 | <div class="col" th:each="post : ${postList}">
|
|---|
| 51 | <div class="card shadow-sm" th:classappend="${post.riskFactor < 25 ? 'red' : (post.riskFactor < 50 ? 'orange' : (post.riskFactor < 75 ? 'yellow' : (post.riskFactor < 100 ? 'light-yellow' : (post.riskFactor == 100 ? 'green' : '') )))}">
|
|---|
| 52 | <img class="card-img" style="object-fit: contain" width="100%" height="225"
|
|---|
| 53 | th:src="${post.imagesPath[0]}">
|
|---|
| 54 | <div class="card-body overflow-hidden">
|
|---|
| 55 | <h4 th:text="${post.title}" style="height: 60px"></h4>
|
|---|
| 56 | <p class="card-text text-truncate" style="height: 45px" th:text="${post.description}"></p>
|
|---|
| 57 | <span th:if="${post.riskFactor == 100}" class="" style="color: black; margin-left: 62%;">Chance: <small th:text="${post.riskFactor+'+'}"></small></span>
|
|---|
| 58 | <span th:if="${post.riskFactor < 100}" class="" style="color: black; margin-left: 62%;">Chance: <small th:text="${post.riskFactor}"></small></span>
|
|---|
| 59 | <span th:if="${post.riskFactor == 101}" style="color: black; margin-left: 46%;">Chance: too early to calculate</span>
|
|---|
| 60 | <span th:if="${post.riskFactor == 102}" style="color: black; margin-left: 61%;">Donation completed!</span>
|
|---|
| 61 | <div class="d-flex justify-content-between align-items-center">
|
|---|
| 62 | <div class="btn-group">
|
|---|
| 63 | <a class="btn btn-sm btn-outline-secondary" style="color: black" th:href="@{/post(postid=${post.id})}">Open</a>
|
|---|
| 64 | </div>
|
|---|
| 65 | <span class="" style="color: black">Date due: <small th:text="${post.dateDue}"></small></span>
|
|---|
| 66 | </div>
|
|---|
| 67 | </div>
|
|---|
| 68 | </div>
|
|---|
| 69 | </div>
|
|---|
| 70 | </div>
|
|---|
| 71 | </div>
|
|---|
| 72 | <hr class="ui-menu-divider"/>
|
|---|
| 73 | <nav>
|
|---|
| 74 | <div id="pagination"></div>
|
|---|
| 75 | </nav>
|
|---|
| 76 | </div>
|
|---|
| 77 |
|
|---|
| 78 | </main>
|
|---|
| 79 | <script src="/js/bootstrap.min.js"></script>
|
|---|
| 80 | <script id="helper" src="/js/pagination.js" th:data-pages="${totalPages}"></script>
|
|---|
| 81 | </body>
|
|---|
| 82 | </html> |
|---|
