... | ... |
@@ -1,39 +1,54 @@ |
1 | 1 |
{% block content %} |
2 | 2 |
{% if modal %}<div class="modal-content">{% endif %} |
3 |
- <div id="wa-slot-{{ id }}"> |
|
4 |
- <dl> |
|
5 |
- <dt>Tag/Uhrzeit</dt> |
|
6 |
- <dd>{{ slot.time|date('d.m.Y H:i') }}</dd> |
|
3 |
+ <div id="wa-slot-{{ id }}" class="frame"> |
|
4 |
+ <div class="frame__header"> |
|
5 |
+ <h3>Reservierung</h3> |
|
6 |
+ <div class="row"> |
|
7 |
+ <div class="col"> |
|
8 |
+ <i class="icon-uhr-outline u-justify-center"></i> |
|
9 |
+ <div class="t-label">Tag/Urzeit</div> |
|
10 |
+ <div class="">{{ slot.time|date('d.m.Y H:i') }}</div> |
|
11 |
+ </div> |
|
12 |
+ |
|
13 |
+ <div class="col"> |
|
14 |
+ <i class="icon-behaelter-outline u-justify-center"></i> |
|
15 |
+ <div class="t-label">Verfügbare Behälterkapazität</div> |
|
16 |
+ <div class="">{{ buchung.behaelter }}</div> |
|
17 |
+ </div> |
|
18 |
+ |
|
19 |
+ <div class="col"> |
|
20 |
+ <i class="icon-reben-outline u-justify-center"></i> |
|
21 |
+ <div class="t-label">Verarbeitete Sorten</div> |
|
22 |
+ <div class="">{{ buchung.sorten|join(', ') }}</div> |
|
23 |
+ </div> |
|
24 |
+ </div> |
|
25 |
+ </div> |
|
7 | 26 |
|
8 |
- <dt>Gebuchte Behälterkapazität</dt> |
|
9 |
- <dd>{{ buchung.behaelter }}</dd> |
|
27 |
+ <div class="divider m-0 mb-2"></div> |
|
28 |
+ |
|
29 |
+ <div class="frame__body"> |
|
10 | 30 |
|
11 |
- <dt>Anliefernde Sorten</dt> |
|
12 |
- <dd>{{ buchung.sorten|join(', ') }}</dd> |
|
13 |
- </dl> |
|
14 | 31 |
<h3>Reservierung ändern</h3> |
15 | 32 |
<form hx-post="/_ajax/vr_wa/v1/slot?do=updateReservation"> |
16 | 33 |
<input type="hidden" name="id" value="{{ id }}"> |
17 |
- <div class="dflex"> |
|
18 |
- <div> |
|
19 |
- <label for="res-behaelter">Liefernde Behältermenge</label> |
|
20 |
- <select id="res-behaelter" name="behaelter" required> |
|
21 |
- <option value="">-</option> |
|
22 |
- {% for option in buchen.behaelter %} |
|
23 |
- <option value="{{ option }}"{{ buchung.behaelter == option ? ' selected' : '' }}>{{ option }}</option> |
|
24 |
- {% endfor %} |
|
25 |
- </select> |
|
26 |
- </div> |
|
27 |
- <fieldset> |
|
28 |
- <legend>Anliefernde Rebsorte(n)</legend> |
|
29 |
- {% for value,label in buchen.sorten %} |
|
30 |
- <label><input type="checkbox" name="sorten[]" value="{{ value }}"{{ value in buchung.sorten|keys ? ' checked' : '' }}> <span class="checkable">{{ label }}</span></label><br> |
|
34 |
+ <fieldset> |
|
35 |
+ <label for="res-behaelter">Liefernde Behältermenge</label> |
|
36 |
+ <select id="res-behaelter" name="behaelter" required> |
|
37 |
+ <option value="">-</option> |
|
38 |
+ {% for option in buchen.behaelter %} |
|
39 |
+ <option value="{{ option }}"{{ buchung.behaelter == option ? ' selected' : '' }}>{{ option }}</option> |
|
31 | 40 |
{% endfor %} |
32 |
- </fieldset> |
|
33 |
- <div> |
|
34 |
- <button type="submit">Speichern</button> |
|
35 |
- </div> |
|
36 |
- </div> |
|
41 |
+ </select> |
|
42 |
+ </fieldset> |
|
43 |
+ <fieldset> |
|
44 |
+ <legend>Anliefernde Rebsorte(n)</legend> |
|
45 |
+ {% for value,label in buchen.sorten %} |
|
46 |
+ <label><input type="checkbox" name="sorten[]" value="{{ value }}"{{ value in buchung.sorten|keys ? ' checked' : '' }}> <span class="checkable">{{ label }}</span></label><br> |
|
47 |
+ {% endfor %} |
|
48 |
+ </fieldset> |
|
49 |
+ <fieldset> |
|
50 |
+ <button type="submit">Speichern</button> |
|
51 |
+ </fieldset> |
|
37 | 52 |
</form> |
38 | 53 |
</div> |
39 | 54 |
{% if modal %}</div>{% endif %} |
... | ... |
@@ -1,42 +1,61 @@ |
1 | 1 |
{% block content %} |
2 | 2 |
{% if modal %}<div class="modal-content">{% endif %} |
3 |
- <div id="wa-slot-{{ id }}" hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ id }}&modal=false" hx-target="this" hx-swap="outerHTML" hx-trigger="updateWaBooking from:body"> |
|
4 |
- <dl> |
|
5 |
- <dt>Tag/Uhrzeit</dt> |
|
6 |
- <dd>{{ slot.time|date('d.m.Y H:i') }}</dd> |
|
3 |
+ <div id="wa-slot-{{ id }}" class="frame" hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ id }}&modal=false" hx-target="this" hx-swap="outerHTML" hx-trigger="updateWaBooking from:body"> |
|
4 |
+ <div class="frame__header"> |
|
5 |
+ <h3>Zeitslot</h3> |
|
6 |
+ <div class="row"> |
|
7 |
+ <div class="col"> |
|
8 |
+ <i class="icon-uhr-outline u-justify-center"></i> |
|
9 |
+ <div class="t-label">Tag/Urzeit</div> |
|
10 |
+ <div class="">{{ slot.time|date('d.m.Y H:i') }}</div> |
|
11 |
+ </div> |
|
7 | 12 |
|
8 |
- <dt>Verfügbare Behälterkapazität</dt> |
|
9 |
- <dd>{{ slot.behaelterAvailable }}</dd> |
|
13 |
+ <div class="col"> |
|
14 |
+ <i class="icon-behaelter-outline u-justify-center"></i> |
|
15 |
+ <div class="t-label">Verfügbare Behälterkapazität</div> |
|
16 |
+ <div class="">{{ slot.behaelterAvailable }}</div> |
|
17 |
+ </div> |
|
10 | 18 |
|
11 |
- <dt>Verarbeitete Sorten</dt> |
|
12 |
- <dd>{{ slot.sorte|join(', ') }}</dd> |
|
13 |
- </dl> |
|
19 |
+ <div class="col"> |
|
20 |
+ <i class="icon-reben-outline u-justify-center"></i> |
|
21 |
+ <div class="t-label">Verarbeitete Sorten</div> |
|
22 |
+ <div class="">{{ slot.sorte|join(', ') }}</div> |
|
23 |
+ </div> |
|
24 |
+ </div> |
|
25 |
+ </div> |
|
14 | 26 |
|
15 | 27 |
{% if reservations|length %} |
16 |
- <h4>Ihre Reservierungen</h4> |
|
17 |
- <ul class="reservations"> |
|
18 |
- {% for reservation in reservations %} |
|
19 |
- <li class="flex align-items-center"> |
|
20 |
- <div class="full fifth-500"> |
|
21 |
- <div class="icon-behaelter-outline">{{ reservation.behaelter }}</div> |
|
22 |
- </div> |
|
23 |
- <div class="full three-fifth-500"> |
|
24 |
- <div class="icon-reben-outline">{{ reservation.sorten|join(', ') }}</div> |
|
25 |
- </div> |
|
26 |
- <div class="full fifth-500"> |
|
27 |
- <div><a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ reservation.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;">Bearbeiten</a></div> |
|
28 |
- </div> |
|
29 |
- </li> |
|
30 |
- {% endfor %} |
|
31 |
- </ul> |
|
28 |
+ <div class="divider m-0 mb-2"></div> |
|
29 |
+ |
|
30 |
+ <div class="frame__body"> |
|
31 |
+ |
|
32 |
+ <h4>Ihre Reservierungen</h4> |
|
33 |
+ <ul class="no-bullets mx-0 reservations"> |
|
34 |
+ {% for reservation in reservations %} |
|
35 |
+ <li class="row u-items-center p-0"> |
|
36 |
+ <div class="col-2"> |
|
37 |
+ <div class="icon-behaelter-outline">{{ reservation.behaelter }}</div> |
|
38 |
+ </div> |
|
39 |
+ <div class="col-6"> |
|
40 |
+ <div class="icon-reben-outline">{{ reservation.sorten|join(', ') }}</div> |
|
41 |
+ </div> |
|
42 |
+ <div class="col u-text-right"> |
|
43 |
+ <div><a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ reservation.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs m-0">Bearbeiten</a></div> |
|
44 |
+ </div> |
|
45 |
+ </li> |
|
46 |
+ {% endfor %} |
|
47 |
+ </ul> |
|
48 |
+ </div> |
|
32 | 49 |
{% endif %} |
33 | 50 |
|
34 |
- <h3>Reservieren</h3> |
|
35 |
- {% if buchen.buchbar %} |
|
36 |
- <form hx-post="/_ajax/vr_wa/v1/slot?do=reservate"> |
|
37 |
- <input type="hidden" name="id" value="{{ id }}"> |
|
38 |
- <div class="dflex"> |
|
39 |
- <div> |
|
51 |
+ <div class="divider m-0 mb-2"></div> |
|
52 |
+ |
|
53 |
+ <div class="frame__body"> |
|
54 |
+ <h4>Reservieren</h4> |
|
55 |
+ {% if buchen.buchbar %} |
|
56 |
+ <form hx-post="/_ajax/vr_wa/v1/slot?do=reservate"> |
|
57 |
+ <input type="hidden" name="id" value="{{ id }}"> |
|
58 |
+ <fieldset> |
|
40 | 59 |
<label for="res-behaelter">Liefernde Behältermenge</label> |
41 | 60 |
<select id="res-behaelter" name="behaelter" required> |
42 | 61 |
<option value="">-</option> |
... | ... |
@@ -44,21 +63,24 @@ |
44 | 63 |
<option value="{{ option }}">{{ option }}</option> |
45 | 64 |
{% endfor %} |
46 | 65 |
</select> |
47 |
- </div> |
|
66 |
+ </fieldset> |
|
48 | 67 |
<fieldset> |
49 | 68 |
<legend>Anliefernde Rebsorte(n)</legend> |
50 | 69 |
{% for value,label in buchen.sorten %} |
51 | 70 |
<label><input type="checkbox" name="sorten[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br> |
52 | 71 |
{% endfor %} |
53 | 72 |
</fieldset> |
54 |
- <div> |
|
73 |
+ <fieldset> |
|
55 | 74 |
<button type="submit">Reservieren</button> |
56 |
- </div> |
|
75 |
+ </fieldset> |
|
76 |
+ </form> |
|
77 |
+ {% else %} |
|
78 |
+ <div class="toast toast--warning mx-0"> |
|
79 |
+ <p class="warning">Dieser Zeit-Slot ist bereits ausgebucht</p> |
|
57 | 80 |
</div> |
58 |
- </form> |
|
59 |
- {% else %} |
|
60 |
- <p class="warning">Dieser Zeit-Slot ist bereits ausgebucht</p> |
|
61 |
- {% endif %} |
|
81 |
+ {% endif %} |
|
82 |
+ |
|
83 |
+ </div> |
|
62 | 84 |
</div> |
63 | 85 |
{% if modal %}</div>{% endif %} |
64 | 86 |
{% endblock %} |
... | ... |
@@ -4,28 +4,26 @@ |
4 | 4 |
{% if days is defined and days|length %} |
5 | 5 |
<div class="list"> |
6 | 6 |
{% for day,bookings in days %} |
7 |
- <h3 class="toggler-dis">{{ day|date('d.m.Y') }}</h3> |
|
7 |
+ <h3 class="toggler-dis u-flex u-items-center">{{ day|date('d.m.Y') }}</h3> |
|
8 | 8 |
<div class="accordion-dis"> |
9 | 9 |
<div class="bookings"> |
10 | 10 |
{% for booking in bookings %} |
11 |
- <div class="row"> |
|
12 |
- <div class="flex align-items-center"> |
|
13 |
- <div class="full half-500 third-900 time"> |
|
14 |
- <span class="title">Uhrzeit</span> |
|
15 |
- {{ booking.slot.time|date('H:i') }} |
|
16 |
- </div> |
|
17 |
- <div class="full half-500 fourth-900 behaelter"> |
|
18 |
- <span class="title">Gebuchte Behälterkapazität</span> |
|
19 |
- {{ booking.behaelter }} |
|
20 |
- </div> |
|
21 |
- <div class="full two-third-500 fourth-900 rebsorten"> |
|
22 |
- <span class="title">Anliefernde Sorten</span> |
|
23 |
- {{ booking.sorte|join(', ') }} |
|
24 |
- </div> |
|
25 |
- <div class="full third-500 sixth-900 align-right action"> |
|
26 |
- <a hx-get="/_ajax/vr_wa/v1/slot?do=delete&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="button error">Löschen</a> |
|
27 |
- <a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="button">Anzeigen</a> |
|
28 |
- </div> |
|
11 |
+ <div class="row u-items-center"> |
|
12 |
+ <div class="col-2 time icon-uhr-outline"> |
|
13 |
+ <span class="t-label">Uhrzeit</span> |
|
14 |
+ {{ booking.slot.time|date('H:i') }} |
|
15 |
+ </div> |
|
16 |
+ <div class="col-3 behaelter icon-behaelter-outline"> |
|
17 |
+ <span class="t-label">Gebuchte Behälterkapazität</span> |
|
18 |
+ {{ booking.behaelter }} |
|
19 |
+ </div> |
|
20 |
+ <div class="col-5 rebsorten icon-reben-outline"> |
|
21 |
+ <span class="t-label">Anliefernde Sorten</span> |
|
22 |
+ {{ booking.sorte|join(', ') }} |
|
23 |
+ </div> |
|
24 |
+ <div class="col u-text-right action"> |
|
25 |
+ <a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs m-0">Anzeigen</a> |
|
26 |
+ <a hx-get="/_ajax/vr_wa/v1/slot?do=delete&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs btn-danger m-0">Löschen</a> |
|
29 | 27 |
</div> |
30 | 28 |
</div> |
31 | 29 |
{% endfor %} |
... | ... |
@@ -2,8 +2,8 @@ |
2 | 2 |
|
3 | 3 |
{% block filter %} |
4 | 4 |
<form hx-get="{{ insert_tag('env::request') }}" hx-headers='{"VR-Ajax": "WaSlotsModule"}' hx-trigger="change, submit" hx-target="closest .content-wrapper" class="filter"> |
5 |
- <div class="flex"> |
|
6 |
- <div class="full two-fifth-500 kapazitaet"> |
|
5 |
+ <div class="row"> |
|
6 |
+ <div class="col-md-5 kapazitaet"> |
|
7 | 7 |
<select name="filter_kapazitaet"> |
8 | 8 |
<option value="">-</option> |
9 | 9 |
{% for option in filter.kapazitaet.options %} |
... | ... |
@@ -11,7 +11,7 @@ |
11 | 11 |
{% endfor %} |
12 | 12 |
</select> |
13 | 13 |
</div> |
14 |
- <div class="full two-fifth-500 sorte"> |
|
14 |
+ <div class="col-md-5 sorte"> |
|
15 | 15 |
<select name="filter_sorte"> |
16 | 16 |
<option value="">-</option> |
17 | 17 |
{% for key, option in filter.sorte.options %} |
... | ... |
@@ -19,7 +19,7 @@ |
19 | 19 |
{% endfor %} |
20 | 20 |
</select> |
21 | 21 |
</div> |
22 |
- <div class="full fifth-500 submit"><button>Filter übernehmen</button></div> |
|
22 |
+ <div class="col submit"><button>Filter übernehmen</button></div> |
|
23 | 23 |
</div> |
24 | 24 |
</form> |
25 | 25 |
{% endblock %} |
... | ... |
@@ -28,27 +28,25 @@ |
28 | 28 |
{% if days is defined and days|length %} |
29 | 29 |
<div class="list"> |
30 | 30 |
{% for day,slots in days %} |
31 |
- <h3 class="toggler-dis">{{ day|date('d.m.Y') }}<span class="counter">{{ slots|length }}</span></h3> |
|
31 |
+ <h3 class="toggler-dis u-flex u-items-center">{{ day|date('d.m.Y') }}</h3> |
|
32 | 32 |
<div class="accordion-dis"> |
33 | 33 |
<div class="slots"> |
34 | 34 |
{% for slot in slots %} |
35 |
- <div class="row{{ not slot.buchbar ? ' error' : '' }}{{ slot.gebucht ? ' booked' : '' }}"> |
|
36 |
- <div class="flex align-items-center"> |
|
37 |
- <div class="full half-500 third-900 time"> |
|
38 |
- <span class="title">Uhrzeit</span> |
|
39 |
- {{ slot.time|date('H:i') }} |
|
40 |
- </div> |
|
41 |
- <div class="full half-500 fourth-900 behaelter"> |
|
42 |
- <span class="title">Verfügbare Behälterkapazität</span> |
|
43 |
- {{ slot.behaelterAvailable }} |
|
44 |
- </div> |
|
45 |
- <div class="full two-third-500 fourth-900 rebsorten"> |
|
46 |
- <span class="title">Verarbeitete Sorten</span> |
|
47 |
- {{ slot.sorte|join(', ') }} |
|
48 |
- </div> |
|
49 |
- <div class="full third-500 sixth-900 align-right action"> |
|
50 |
- <a hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="button{{ not slot.buchbar ? ' pseudo' : '' }}">Anzeigen</a> |
|
51 |
- </div> |
|
35 |
+ <div class="row u-items-center{{ not slot.buchbar ? ' error' : '' }}{{ slot.gebucht ? ' booked' : '' }}"> |
|
36 |
+ <div class="col-2 time icon-uhr-outline"> |
|
37 |
+ <span class="t-label">Uhrzeit</span> |
|
38 |
+ {{ slot.time|date('H:i') }} |
|
39 |
+ </div> |
|
40 |
+ <div class="col-3 behaelter icon-behaelter-outline"> |
|
41 |
+ <span class="t-label">Verfügbare Behälterkapazität</span> |
|
42 |
+ {{ slot.behaelterAvailable }} |
|
43 |
+ </div> |
|
44 |
+ <div class="col-5 rebsorten icon-reben-outline"> |
|
45 |
+ <span class="t-label">Verarbeitete Sorten</span> |
|
46 |
+ {{ slot.sorte|join(', ') }} |
|
47 |
+ </div> |
|
48 |
+ <div class="col u-text-right action"> |
|
49 |
+ <a hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs m-0">Anzeigen & Buchen</a> |
|
52 | 50 |
</div> |
53 | 51 |
</div> |
54 | 52 |
{% endfor %} |
55 | 53 |
new file mode 100644 |
... | ... |
@@ -0,0 +1 @@ |
1 |
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 413 413" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="412.5" height="412.5" style="fill:none;"/><g id="Artboard11" serif:id="Artboard1"><g id="Uhr"><path d="M206.25,0c113.832,0 206.25,92.418 206.25,206.25c-0,113.832 -92.418,206.25 -206.25,206.25c-113.832,-0 -206.25,-92.418 -206.25,-206.25c0,-113.832 92.418,-206.25 206.25,-206.25Zm-0,15c-105.554,-0 -191.25,85.696 -191.25,191.25c0,105.554 85.696,191.25 191.25,191.25c105.554,-0 191.25,-85.696 191.25,-191.25c-0,-105.554 -85.696,-191.25 -191.25,-191.25Z"/><path d="M213.75,206.25c0,4.139 -3.361,7.5 -7.5,7.5c-4.139,0 -7.5,-3.361 -7.5,-7.5l-0,-161.25c0,-4.139 3.361,-7.5 7.5,-7.5c4.139,0 7.5,3.361 7.5,7.5l-0,161.25Z"/><path d="M210,212.745c-3.585,2.07 -8.176,0.84 -10.245,-2.745c-2.07,-3.585 -0.84,-8.176 2.745,-10.245l81.19,-46.875c3.585,-2.07 8.175,-0.84 10.245,2.745c2.07,3.585 0.84,8.176 -2.745,10.245l-81.19,46.875Z"/></g></g></svg> |
|
0 | 2 |
\ No newline at end of file |
... | ... |
@@ -219,7 +219,7 @@ class SlotAjaxController extends AbstractController |
219 | 219 |
|
220 | 220 |
$Reservation->save(); |
221 | 221 |
|
222 |
- return new Response('<p>Reservierung erfolgreich</p>',200,['HX-Trigger'=> 'updateWaList']); |
|
222 |
+ return new Response('<div class="toast toast--success mx-0"><p>Reservierung erfolgreich</p></div>',200,['HX-Trigger'=> 'updateWaList']); |
|
223 | 223 |
} |
224 | 224 |
|
225 | 225 |
protected function updateReservation() |
... | ... |
@@ -248,7 +248,7 @@ class SlotAjaxController extends AbstractController |
248 | 248 |
|
249 | 249 |
$Reservation->save(); |
250 | 250 |
|
251 |
- return new Response('<p>Reservierung erfolgreich geändert</p>',200,['HX-Trigger'=> 'updateWaBooking']); |
|
251 |
+ return new Response('<div class="toast toast--success mx-0"><p>Reservierung erfolgreich geändert</p></div>',200,['HX-Trigger'=> 'updateWaBooking']); |
|
252 | 252 |
} |
253 | 253 |
|
254 | 254 |
protected function deleteReservation() |