source: TruckIO/truckio/src/main/resources/templates/routeDetails.html

Last change on this file was d48b326, checked in by Zorana <bmind275@…>, 20 months ago

source-code-scripts-added
  • Property mode set to 100644
File size: 8.0 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
3 xmlns:th="http://www.thymeleaf.org">
4<head>
5 <meta charset="UTF-8">
6 <title>Routes</title>
7 <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
8 <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
9 <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
10 <link th:href="@{/css/style.css}" rel="stylesheet"/>
11</head>
12<body>
13<nav class="navbar navbar-expand-md">
14 <div class="container">
15 <!-- Navbar Brand -->
16 <a class="navbar-brand" href="/home">
17 <img th:src="@{/img/logo.png}">
18 </a>
19
20 <!-- Navbar -->
21 <div class="collapsed navbar-collapse" id="navbarDefault">
22 <ul class="navbar-nav ml-auto mr-auto">
23 <li class="nav-item">
24 <a href="/routes" class="nav-link">Рути</a>
25 </li>
26 <li class="nav-item">
27 <a href="/reservations" class="nav-link">Мои Резервации</a>
28 </li>
29 </ul>
30 <ul class="navbar-nav ml-auto">
31 <li class="nav-item">
32 <a href="/logout" class="nav-link">Одјави се</a>
33 </li>
34 </ul>
35 </div>
36
37 </div>
38</nav>
39
40<th:block>
41
42 <div class="route-details">
43
44 <div class="container">
45 <h3>Резервирај рута</h3>
46 <div class="route-box">
47 <div class="row">
48 <div class="col-md-6">
49
50 <div class="row">
51 <div class="col-md-6">
52 <div>
53 <p>Од</p>
54 <h4><th:block th:text="${ruta.zapocnuva_vo.getGrad_ime()}"></th:block></h4>
55 </div>
56 </div>
57 <div class="col-md-6">
58 <div>
59 <p>До</p>
60 <h4><th:block th:text="${ruta.zavrsuva_vo.getGrad_ime()}"></th:block></h4>
61 </div>
62 </div>
63 </div>
64
65 <div class="row">
66 <div class="col-md-6">
67 <div>
68 <p>Тргнува на</p>
69 <h4><th:block th:text="${ruta.datum_poagjanje}"></th:block></h4>
70 </div>
71 </div>
72 <div class="col-md-6">
73 <div>
74 <p>Пристигнува на</p>
75 <h4><th:block th:text="${ruta.datum_pristiganje}"></th:block></h4>
76 </div>
77 </div>
78 </div>
79
80 <div class="row">
81 <div class="col-md-6">
82 <div>
83 <p>Компанија</p>
84 <h4><th:block th:text="${ruta.vozilo.kompanija.getKompanija_ime()}"></th:block></h4>
85 </div>
86 </div>
87 <div class="col-md-6">
88 <div>
89 <p>Возач</p>
90 <h4><th:block th:text="${ruta.vozac.vraboten.getVraboten_ime()}"></th:block></h4>
91 </div>
92 </div>
93 </div>
94
95 <div class="row">
96 <div class="col-md-6">
97 <div>
98 <p>Тип на возило</p>
99 <h4><th:block th:text="${ruta.vozilo.tip.getTip_ime()}"></th:block></h4>
100 </div>
101 </div>
102 <div class="col-md-6">
103 <div>
104 <p>Преостанат капацитет на возило</p>
105 <h4 th:if="${preostanatKapacitet == 1}" th:text="${preostanatKapacitet} + ' тон'"></h4>
106 <h4 th:if="${preostanatKapacitet != 1}" th:text="${preostanatKapacitet} + ' тона'"></h4>
107 </div>
108 </div>
109 </div>
110
111 </div>
112
113 <div class="col-md-6">
114 <div>
115 <p>Роба за транспорт</p>
116 <h4>Роба</h4>
117
118 <form class="form-signin" method="post" action="/reservations">
119 <div th:if="${hasError == true && error.equals('noCategorySelectedError')}">
120 <p class="text-danger">Немате селектирано категорија на роба.</p>
121 </div>
122 <div th:if="${hasError == true && error.equals('capacityError')}">
123 <p class="text-danger">Резервацијата не е успешна. Капацитетот на возилото е исполнет.</p>
124 </div>
125 <input type="hidden" name="ruta_id" th:value="${ruta.getRuta_id()}">
126 <div id="entries">
127 <div class="row">
128 <div class="col-md-6" style="padding-right: 5px;">
129 <select name="kategorija[]" id="category_0" class="form-control" required="">
130 <option value="" selected disabled hidden>Категорија</option>
131 <option
132 th:each="kategorija : ${kategorii}"
133 th:text="${kategorija.getKategorija_ime()}"
134 th:value="${kategorija.getKategorija_id()}">
135 </option>
136 </select>
137 </div>
138 <div class="col-md-5" style="padding-left: 5px; padding-right: 5px;">
139 <input type="text" id="kolicina_0" name="kolicina[]" class="form-control" placeholder="Количина"
140 required="">
141 </div>
142 <div class="col-md-1" style="padding-left: 5px;">
143 <a class="remove-entry" data-action="deleteEntry">X</a>
144 </div>
145 </div>
146 </div>
147 <a class="btn btn-secondary btn-block" data-action="addNewEntry">Додај нова ставка</a>
148 <button id="submit" class="btn btn-lg btn-primary btn-block" type="submit">Резервирај</button>
149 </form>
150
151 </div>
152 </div>
153
154 </div>
155 </div>
156 </div>
157
158 </div>
159
160</th:block>
161
162
163<div class="footer">
164 <div class="container">
165 <p>© Сите права се задржани. 2023</p>
166 </div>
167</div>
168
169<script>
170 $(document).ready(function() {
171
172 // Get categories
173 let categories = [];
174 $("#category_0 option").each(function() {
175 categories.push({
176 value: $(this).attr("value"),
177 text: $(this).text(),
178 });
179 });
180
181 // On button add click
182 let entries = 1;
183 $('[data-action="addNewEntry"]').click(function (e) {
184 e.preventDefault();
185
186 let options = '';
187 categories.forEach(category => {
188 options += '<option value="'+ category.value +'">'+ category.text +'</option>';
189 })
190
191 $("#entries").append(`
192 <div class="row">
193 <div class="col-md-6" style="padding-right: 5px;">
194 <select name="kategorija[]" id="category_`+ entries +`" class="form-control" required="">
195 <option value="" selected disabled hidden>Категорија</option>
196 `+ options +`
197 </select>
198 </div>
199 <div class="col-md-5" style="padding-left: 5px; padding-right: 5px;">
200 <input type="text" id="kolicina_`+ entries +`" name="kolicina[]" class="form-control" placeholder="Количина"
201 required="">
202 </div>
203 <div class="col-md-1" style="padding-left: 5px;">
204 <a class="remove-entry" data-action="deleteEntry">X</a>
205 </div>
206 </div>
207 `);
208 entries++;
209 });
210
211 // On button delete click
212 $(document).on("click", '[data-action="deleteEntry"]', function (e) {
213 e.preventDefault();
214
215 let row = $(this).parent().parent();
216 console.log(row);
217 $("#entries").find(row).remove();
218
219 })
220
221
222 })
223</script>
224
225</body>
226</html>
Note: See TracBrowser for help on using the repository browser.