source: src/main/resources/templates/candidates_list.html

main
Last change on this file was ac151d1, checked in by David <darsov2@…>, 7 months ago

initial
  • Property mode set to 100644
File size: 10.1 KB
RevLine 
[ac151d1]1<nav class="navbar bg-secondary bg-gradient container-fluid px-0">
2 <div class="container-fluid">
3 <span class="navbar-brand mb-0 h1">Податоци за кандидатски листи</span>
4 </div>
5</nav>
6
7<div class="container-fluid">
8 <div class="container my-3">
9
10 <form th:object="${candidatesList}" action="/admin/candidatesList" method="post">
11 <input type="hidden" th:field="*{id}" name="id">
12 <div class="mb-3">
13 <label for="name" class="form-label">Име</label>
14 <input type="text" th:field="*{description}" class="form-control" id="name"
15 aria-describedby="emailHelp">
16 </div>
17
18 <div class="mb-3">
19 <label class="form-label">Партија</label>
20 <select class="form-select" id="party" th:field="*{party}">
21 <option value=""></option>
22 <option th:each="party : ${parties}" th:value="${party.id}"
23 th:text="${party.name}"></option>
24 </select>
25 </div>
26 <div class="mb-3">
27 <label class="form-label">Реализација на избори</label>
28 <select class="form-select" id="eletionsRealizations" th:field="*{candidatesListElectionRealization}">
29 <option value=""></option>
30 <option th:each="realization : ${candidatesListElectionRealizations}" th:value="${realization.id}"
31 th:text="${realization.name}"></option>
32 </select>
33 </div>
34 <div class="mb-3">
35 <label class="form-label">Општина</label>
36 <select class="form-select" id="municipality" th:field="*{municipality}">
37 <option value="">Цела држава</option>
38 <option th:each="municipality : ${municipalities}" th:value="${municipality.id}"
39 th:text="${municipality.name}"></option>
40 </select>
41 </div>
42 <div class="mb-3">
43 <label class="form-label">Изборна Е</label>
44 <select class="form-select" id="electoralUnit" th:field="*{electoralUnit}">
45 <option value="">Цела држава</option>
46 <option th:each="unit : ${electoralUnits}" th:value="${unit.id}"
47 th:text="${unit.name}"></option>
48 </select>
49 </div>
50
51 <div class="container mt-5">
52 <div class="row">
53 <div class="col-md-5">
54 <label for="leftSelect">Сите кандидати</label>
55 <select id="leftSelect" class="form-control" size="20" multiple>
56 <option th:each="candidate : ${candidatesNames}" th:value="${candidate?.id}" th:text="${candidate?.name + ' ' + candidate?.surname}">Избери членови</option>
57 </select>
58 </div>
59 <div class="col-md-2 text-center">
60 <button id="moveRight" class="btn btn-primary mb-2">&gt;&gt;</button>
61 <button id="moveLeft" class="btn btn-primary mb-2">&lt;&lt;</button>
62 </div>
63 <div class="col-md-5">
64 <label for="rightSelect">Избрани кандидати</label>
65 <select id="rightSelect" class="form-control" size="20" name="candidatesInList" multiple>
66 <!-- Options moved from left select will appear here -->
67 </select>
68 </div>
69 </div>
70 </div>
71
72<!-- <div class="container">-->
73<!-- <table class="table">-->
74<!-- <thead class="table-header">-->
75<!-- <tr>-->
76<!-- <th>#</th>-->
77<!-- <th>Кандидат</th>-->
78<!-- </tr>-->
79<!-- </thead>-->
80<!-- <tbody>-->
81<!-- <tr class="lista" th:each="candidate, iter : ${candidates}">-->
82<!-- <td th:text="${iter.index + 1}"></td>-->
83<!-- <td>-->
84<!-- <select class="form-select" th:id="|${candidate.id}-${iter.index}|"-->
85<!-- th:name="${'candidatesInList'}" th:value="${candidate.id}">-->
86<!-- <option></option>-->
87<!-- <option th:each="cand : ${candidatesNames}" th:value="${cand.id}"-->
88<!-- th:text="|${cand.idNum} ${cand.name} ${cand.surname}|"-->
89<!-- th:selected="${cand.id == candidate.id}"></option>-->
90<!-- </select>-->
91<!-- </td>-->
92<!-- </tr>-->
93<!-- </tbody>-->
94<!-- </table>-->
95<!-- </div>-->
96 <button type="submit" class="btn btn-primary">Запиши</button>
97 </form>
98 </div>
99
100 <div class="container-fluid">
101 <table class="table table-striped table-hover">
102 <thead class="table-header">
103 <tr>
104 <th>#</th>
105 <th>Име</th>
106 <th>Партија</th>
107 <th>Реализација на избори</th>
108 <th>Општина</th>
109 <th>Изборна единица</th>
110 </tr>
111 </thead>
112 <tbody class="accordion" id="accordionExample">
113 <div th:each="list, iter : ${candidatesLists}">
114 <tr class="accordion-item" th:id="${list.id}">
115 <td th:text="${iter.count}"></td>
116 <td th:text="${list.description}"></td>
117 <td th:text="${list?.party?.name}"></td>
118 <td th:text="${list?.candidatesListElectionRealization?.name}"></td>
119 <td th:text="${list?.municipality?.name}"></td>
120 <td th:text="${list?.electoralUnit?.name}"></td>
121 <td>
122 <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse"
123 th:data-bs-target="'#collapse' + ${list.id}" aria-expanded="false"
124 aria-controls="'collapse' + ${list.id}">
125 Прикажи кандидати
126 </button>
127 </td>
128 </tr>
129 <tr>
130 <td colspan="7" class="hiddenRow">
131 <div class="collapse" th:id="'collapse' + ${list?.id}">
132 <div class="accordion-body">
133 <table class="table">
134 <thead class="table-header">
135 <tr>
136 <th>#</th>
137 <th>Име</th>
138 <th>Презиме</th>
139 <th>ЕМБГ</th>
140 </tr>
141 </thead>
142 <tbody>
143 <tr th:each="candidate, iter : ${list.candidates}">
144 <td th:text="${iter.index + 1}"></td>
145 <td th:text="${candidate.name}"></td>
146 <td th:text="${candidate.surname}"></td>
147 <td th:text="${candidate.idNum}"></td>
148 </tr>
149 </tbody>
150 </table>
151 </div>
152 </div>
153 </td>
154 </tr>
155</div>
156 </tbody>
157 </table>
158 </div>
159
160</div>
161
162<script>
163
164 document.querySelectorAll("tr.accordion-item").forEach(x => x.addEventListener('click', (e) => {
165 console.log(e.target.parentElement)
166 if(e.target.tagName !== 'BUTTON' && !e.target.parentElement.classList.contains("lista"))
167 {
168 window.location.href = `/admin/candidatesList/${e.target.parentElement.id}`
169 }
170 }))
171</script>
172
173<script>
174 document.getElementById('moveRight').addEventListener('click', function(e) {
175 e.preventDefault();
176 moveSelectedOptions('leftSelect', 'rightSelect', true);
177 });
178
179 document.getElementById('moveLeft').addEventListener('click', function(e) {
180 e.preventDefault();
181 moveSelectedOptions('rightSelect', 'leftSelect', false);
182 });
183
184 function moveSelectedOptions(sourceId, destinationId, addNumbers) {
185 let sourceSelect = document.getElementById(sourceId);
186 let destinationSelect = document.getElementById(destinationId);
187
188 let selectedOptions = Array.from(sourceSelect.selectedOptions);
189
190 console.log(destinationSelect.selectedOptions.length)
191 if (destinationId === 'rightSelect' && destinationSelect.selectedOptions.length >= 20){
192 alert("Бројот на пратеници во изборна единица мора да биде 20")
193 return;
194 }
195
196 selectedOptions.forEach(option => {
197 if (addNumbers) {
198 destinationSelect.appendChild(option);
199 } else {
200 // Remove numbers when moving back to the left side
201 console.log('replace')
202 option.text = option.text.replace(/^\d+\.\s*/, '');
203 destinationSelect.appendChild(option);
204 }
205 });
206
207 updateRightSelectNumbers();
208
209
210 }
211
212 function updateRightSelectNumbers() {
213 const options = document.getElementById("rightSelect").options;
214 for (let i = 0; i < options.length; i++) {
215 options[i].text = `${i + 1}. ${options[i].text.replace(/^\d+\.\s*/, '')}`;
216 }
217 }
218</script>
219
220<!--th:onclick="|window.location.href='/admin/candidatesList/${candidatesList.id}/edit';|"-->
Note: See TracBrowser for help on using the repository browser.