Browse code

Update

Benjamin Roth authored on10/08/2023 16:00:36
Showing6 changed files
... ...
@@ -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 &amp; 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()