Browse code
Make booking list in backend more compact by adding a toggle to show more informations
Benjamin Roth authored on29/08/2025 11:35:08 Showing2 changed files
| ... | ... |
@@ -101,7 +101,85 @@ |
| 101 | 101 |
{% else %}
|
| 102 | 102 |
{% set status = 'pending' %}
|
| 103 | 103 |
{% endif %}
|
| 104 |
- <div class="row u-items-flex-start my-1 status status--{{ status }}">
|
|
| 104 |
+ {% if booking.checked_in == '1' %}
|
|
| 105 |
+ {% set checkin_state = 'checked_in' %}
|
|
| 106 |
+ {% else %}
|
|
| 107 |
+ {% set checkin_state = 'pending' %}
|
|
| 108 |
+ {% endif %}
|
|
| 109 |
+ <div class="row u-items-flex-start my-1 status status--{{ status }} checkin--{{ checkin_state }}">
|
|
| 110 |
+ <div class="col-11 m-0"> |
|
| 111 |
+ <div class="row u-items-flex-start pt-0"> |
|
| 112 |
+ <div class="col-1"> |
|
| 113 |
+ <i class="status-icon" title="{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}">{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}</i>
|
|
| 114 |
+ <i class="toggle-icon" title="Details ein-/ausblenden"></i> |
|
| 115 |
+ </div> |
|
| 116 |
+ <div class="col-4 rebsorten icon-reben-outline"> |
|
| 117 |
+ <div class="t-label">Mitglied</div> |
|
| 118 |
+ {% if booking.member is not null %}
|
|
| 119 |
+ <div> |
|
| 120 |
+ {% if booking.member.memberno is defined %}
|
|
| 121 |
+ <span>{{ booking.member.memberno }}</span>{% endif %}
|
|
| 122 |
+ <span>{{ booking.member.firstname }} {{ booking.member.lastname }}</span>
|
|
| 123 |
+ {% if booking.member.phone is defined %}
|
|
| 124 |
+ <span>{{ booking.member.phone }}</span>{% endif %}
|
|
| 125 |
+ </div> |
|
| 126 |
+ {% endif %}
|
|
| 127 |
+ </div> |
|
| 128 |
+ <div class="col-4 behaelter icon-behaelter-outline"> |
|
| 129 |
+ <div class="t-label">Anliefernde Sorten</div> |
|
| 130 |
+ {{ booking.sorte|join(', ') }}
|
|
| 131 |
+ </div> |
|
| 132 |
+ <div class="col-3 behaelter icon-behaelter-outline"> |
|
| 133 |
+ <div class="t-label">Gebuchte Behälterkapazität</div> |
|
| 134 |
+ {{ booking.behaelter }}
|
|
| 135 |
+ </div> |
|
| 136 |
+ <div class="additional-facts col-12 p-0 m-0"> |
|
| 137 |
+ <div class="row u-items-flex-start pb-0"> |
|
| 138 |
+ <div class="col-1"> |
|
| 139 |
+ <i>{{ ('MSC.wa_checkin_status.'~checkin_state)|trans([], 'contao_default') }}</i>
|
|
| 140 |
+ </div> |
|
| 141 |
+ <div class="col-4 rebsorten icon-reben-outline"> |
|
| 142 |
+ {% if booking.member.email is defined %}
|
|
| 143 |
+ <div> |
|
| 144 |
+ <a href="mailto:{{ booking.member.email }}">{{ booking.member.email }}</a>
|
|
| 145 |
+ </div> |
|
| 146 |
+ {% endif %}
|
|
| 147 |
+ </div> |
|
| 148 |
+ <div class="col-4 behaelter icon-behaelter-outline"> |
|
| 149 |
+ <div class="t-label">Lage</div> |
|
| 150 |
+ {{ booking.lage|join(', ') }}
|
|
| 151 |
+ </div> |
|
| 152 |
+ <div class="col-3 behaelter icon-behaelter-outline"> |
|
| 153 |
+ <div class="t-label">Ernteart</div> |
|
| 154 |
+ {{ booking.ernteart|join(', ') }}
|
|
| 155 |
+ </div> |
|
| 156 |
+ {% if booking.checked_in %}
|
|
| 157 |
+ <div class="col-1"> </div> |
|
| 158 |
+ <div class="col-10 behaelter_nummern"> |
|
| 159 |
+ <div class="t-label">Eingecheckte Behälternummern</div> |
|
| 160 |
+ {% for behaelter in booking.behaelter_numbers %}
|
|
| 161 |
+ {% if loop.index != 1 %}, {% endif %}{{ behaelter.behaelter }} [M:{{ behaelter.member }}]
|
|
| 162 |
+ {% endfor %}
|
|
| 163 |
+ </div> |
|
| 164 |
+ {% endif %}
|
|
| 165 |
+ </div> |
|
| 166 |
+ </div> |
|
| 167 |
+ </div> |
|
| 168 |
+ </div> |
|
| 169 |
+ <div class="col u-text-right action"> |
|
| 170 |
+ <a |
|
| 171 |
+ href="/contao?do=weinanlieferung&table=tl_vr_wa_reservation&act=edit&id={{ booking.id }}&rt={{ request_token }}&ref={{ ref }}"
|
|
| 172 |
+ {# onclick="Backend.openModalIframe({'title':'Quellelement ID {{ booking.id }} bearbeiten','url':this.href});return false" #}
|
|
| 173 |
+ title="Element ID {{ booking.id }} bearbeiten"
|
|
| 174 |
+ ><img src="/system/themes/flexible/icons/edit.svg" width="16" height="16" alt="Element ID {{ booking.id }} bearbeiten"></a>
|
|
| 175 |
+ <a |
|
| 176 |
+ href="/contao?do=weinanlieferung&table=tl_vr_wa_reservation&act=delete&id={{ booking.id }}&rt={{ request_token }}"
|
|
| 177 |
+ onclick="if(!confirm('Soll das Element ID {{ booking.id }} wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"
|
|
| 178 |
+ title="Element ID {{ booking.id }} löschen"
|
|
| 179 |
+ ><img src="/system/themes/flexible/icons/delete.svg" width="16" height="16" alt="Element ID {{ booking.id }} löschen"></a>
|
|
| 180 |
+ </div> |
|
| 181 |
+ </div> |
|
| 182 |
+ {#<div class="row u-items-flex-start my-1 status status--{{ status }}">
|
|
| 105 | 183 |
<div class="col-1"> |
| 106 | 184 |
<i class="status-icon" title="{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}">{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}</i>
|
| 107 | 185 |
</div> |
| ... | ... |
@@ -150,7 +228,7 @@ |
| 150 | 228 |
<div class="col px-1 u-text-right action"> |
| 151 | 229 |
<a |
| 152 | 230 |
href="/contao?do=weinanlieferung&table=tl_vr_wa_reservation&act=edit&id={{ booking.id }}&rt={{ request_token }}&ref={{ ref }}"
|
| 153 |
- {# onclick="Backend.openModalIframe({'title':'Quellelement ID {{ booking.id }} bearbeiten','url':this.href});return false" #}
|
|
| 231 |
+ #}{# onclick="Backend.openModalIframe({'title':'Quellelement ID {{ booking.id }} bearbeiten','url':this.href});return false" #}{#
|
|
| 154 | 232 |
title="Element ID {{ booking.id }} bearbeiten"
|
| 155 | 233 |
><img src="/system/themes/flexible/icons/edit.svg" width="16" height="16" alt="Element ID {{ booking.id }} bearbeiten"></a>
|
| 156 | 234 |
<a |
| ... | ... |
@@ -159,7 +237,7 @@ |
| 159 | 237 |
title="Element ID {{ booking.id }} löschen"
|
| 160 | 238 |
><img src="/system/themes/flexible/icons/delete.svg" width="16" height="16" alt="Element ID {{ booking.id }} löschen"></a>
|
| 161 | 239 |
</div> |
| 162 |
- </div> |
|
| 240 |
+ </div>#} |
|
| 163 | 241 |
{% endfor %}
|
| 164 | 242 |
</div> |
| 165 | 243 |
{% endfor %}
|
| ... | ... |
@@ -173,4 +251,24 @@ |
| 173 | 251 |
|
| 174 | 252 |
</div> |
| 175 | 253 |
</div> |
| 254 |
+<script> |
|
| 255 |
+document.addEventListener('DOMContentLoaded', function() {
|
|
| 256 |
+ // Add click event listeners to all toggle icons |
|
| 257 |
+ document.querySelectorAll('.toggle-icon').forEach(function(icon) {
|
|
| 258 |
+ icon.addEventListener('click', function() {
|
|
| 259 |
+ // Toggle the active class on the icon |
|
| 260 |
+ this.classList.toggle('active');
|
|
| 261 |
+ |
|
| 262 |
+ // Find the closest row and then find the additional-facts div within it |
|
| 263 |
+ var row = this.closest('.row');
|
|
| 264 |
+ var additionalFacts = row.querySelector('.additional-facts');
|
|
| 265 |
+ |
|
| 266 |
+ // Toggle the show class on the additional-facts div |
|
| 267 |
+ if (additionalFacts) {
|
|
| 268 |
+ additionalFacts.classList.toggle('show');
|
|
| 269 |
+ } |
|
| 270 |
+ }); |
|
| 271 |
+ }); |
|
| 272 |
+}); |
|
| 273 |
+</script> |
|
| 176 | 274 |
{% endblock %}
|
| ... | ... |
@@ -91,6 +91,7 @@ |
| 91 | 91 |
width: 100%; |
| 92 | 92 |
margin-left: 0; |
| 93 | 93 |
padding: 0 0.5rem; |
| 94 |
+ box-sizing: border-box; |
|
| 94 | 95 |
} |
| 95 | 96 |
|
| 96 | 97 |
@media screen and (min-width: 768px) {
|
| ... | ... |
@@ -6373,3 +6374,27 @@ |
| 6373 | 6374 |
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-thumb-down' width='100%25' height='100%25' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ff2825' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3' /%3E%3C/svg%3E");
|
| 6374 | 6375 |
} |
| 6375 | 6376 |
|
| 6377 |
+ |
|
| 6378 |
+.toggle-icon {
|
|
| 6379 |
+ display: block; |
|
| 6380 |
+ width: 16px; |
|
| 6381 |
+ height: 16px; |
|
| 6382 |
+ margin-top: 8px; |
|
| 6383 |
+ cursor: pointer; |
|
| 6384 |
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
| 6385 |
+ background-size: 16px 16px; |
|
| 6386 |
+ background-repeat: no-repeat; |
|
| 6387 |
+ background-position: center; |
|
| 6388 |
+} |
|
| 6389 |
+ |
|
| 6390 |
+.toggle-icon.active {
|
|
| 6391 |
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
|
|
| 6392 |
+} |
|
| 6393 |
+ |
|
| 6394 |
+.additional-facts {
|
|
| 6395 |
+ display: none; |
|
| 6396 |
+} |
|
| 6397 |
+ |
|
| 6398 |
+.additional-facts.show {
|
|
| 6399 |
+ display: block; |
|
| 6400 |
+} |