source: trip-planner/src/main/resources/templates/trip-locations.html@ 84d0fbb

Last change on this file since 84d0fbb was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 3.3 KB
Line 
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
6 <title>Trip Locations</title>
7 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
10 <script src="/getrequest.js"></script>
11 <style>
12 .bg-modal{
13 width: 100%;
14 height: 100%;
15 background-color: rgba(0,0,0,0.7);
16 appacity: 0.7;
17 position: absolute;
18 top:0;
19 display: flex;
20 justify-content: center;
21 align-items: center;
22 display: none;
23 }
24 .modal-content{
25 width: 500px;
26 height: 300px;
27 background-color: white;
28 border-radius: 4px;
29 padding: 20px;
30 position: relative;
31 top: 25%;
32 margin: 0 auto;
33 }
34 .close{
35 position: absolute;
36 top: 0;
37 right: 14px;
38 font-size: 42px;
39 transform: rotate(45deg);
40 cursor: pointer;
41 }
42 </style>
43</head>
44<body>
45
46<div class="container mb-4" >
47 <div class="row">
48 <div class="col-12">
49 <div class="table-responsive">
50 <table class="table table-striped">
51 <thead>
52 <tr>
53 <th scope="col">Location name</th>
54 </tr>
55 </thead>
56 <tbody>
57 <tr th:each="loc : ${countryLocations}" >
58 <td th:text="${loc.getName()}" ></td>
59 <td th:text="${loc.getId()}" ></td>
60 <td><img th:src="*{'data:image/jpeg;base64,'+ imgUtil.getImgData(loc.getPhoto())}" alt="" /></td>
61 <td class="selectedLocation">
62 <a th:href="@{'/create/trip/locations/{id}' (id=${loc.getId()})}" class="btn btn-primary " >Add to planner</a>
63 <input type="hidden" id="selected_location_id" name="selected_location_id" th:value="${loc.getId()}">
64 </td>
65 <td>
66 <form th:action="@{'/create/trip/locations/{id}' (id=${loc.getId()})}" th:method="GET">
67 <button type="submit"
68 class="btn btn-sm btn-primary cart-product">
69 <i class="fa fa-trash">Details</i>
70 </button>
71 </form>
72 </td>
73 </tr>
74 </tbody>
75 </table>
76 </div>
77 </div>
78 </div>
79
80</div>
81
82<form method="POST" >
83 <div class="bg-modal">
84 <div class="modal-content">
85 <div class="close">
86 +
87 </div>
88 <br>
89 <table class="table">
90 <thead>
91 <tbody>
92 <tr th:each="plan : ${getAllPlanners}">
93 <td th:text="${plan.getName()}" th:value="${plan.getId()}">
94 </td>
95 <td>
96 <a type="submit"
97 class="btn btn-sm btn-primary cart-product" th:href="@{'/create/planner/{id}' (id=${plan.getId()})}">
98 <i class="fa fa-trash">Save</i>
99 </a>
100 <input type="hidden" id="selected_planner_id" name="selected_planner_id" th:value="${plan.getId()}">
101 </td>
102 </tr>
103 </tbody>
104 </table>
105 </div>
106 </div>
107</form>
108</body>
109</html>
Note: See TracBrowser for help on using the repository browser.