From a4be4f6fb79367cc602834ab2216ae8b034a4ead Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 12 Nov 2024 15:54:21 +0100
Subject: [PATCH] feat: collapse pickup tables with more than 3 rows

---
 .../js/controllers/autocollapse_controller.js | 10 ++-
 .../Private/Templates/Travelinfo/Index.html   | 78 ++++++++++++-------
 2 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
index f7a0bbbb..5a0ca436 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
@@ -9,6 +9,10 @@ export default class extends Controller {
             type: Number,
             default: 0,
         },
+        height: {
+            type: Number,
+            default: 0,
+        },
         expanded: {
             type: Boolean,
             default: true,
@@ -16,10 +20,10 @@ export default class extends Controller {
     }
 
     connect() {
-        // Determine height of element controlling max height
-        this.maxHeight = this.sizerTarget.offsetHeight
-        // Determine rendered height of element holding content
+        // Determine height of element controlling max height if available
+        this.maxHeight = this.hasSizerTarget ? this.sizerTarget.offsetHeight : this.heightValue
 
+        // Determine rendered height of element holding content
         this.contentHeight = this.containerTarget.offsetHeight
 
         // Determine height of collapsed content element considering
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
index 9de8c6c5..dbc0754e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
@@ -73,35 +73,29 @@
                         </f:else>
                     </f:if>
                     <f:if condition="{date.pickups -> f:count()} > 0">
-                        <h3 class="text-white">
-                            Bus-Zustiege
-                        </h3>
-                        <table class="w-full mb-4 bg-zinc-200 text-zinc-800 text-xs md:text-base">
-                            <tr>
-                                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
-                                    Zustieg
-                                </th>
-                                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                                    Datum
-                                </th>
-                                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                                    Uhrzeit
-                                </th>
-                            </tr>
-                            <f:for each="{date.pickups}" as="pickup">
-                                <tr class="odd:bg-zinc-50 align-top">
-                                    <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
-                                        {pickup.city}<br><span class="text-xs">{pickup.street}</span>
-                                    </td>
-                                    <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
-                                        {pickup.date}
-                                    </td>
-                                    <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
-                                        {f:if(condition: pickup.time, then: '{pickup.time} Uhr', else: '???')}
-                                    </td>
-                                </tr>
-                            </f:for>
-                        </table>
+                        <f:if condition="{date.pickups -> f:count()} <= 3">
+                            <f:then>
+                                <f:render section="Pickups" arguments="{_all}"/>
+                            </f:then>
+                            <f:else>
+                                <div data-controller="autocollapse" data-autocollapse-height-value="400" data-autocollapse-offset-value="64" class="pb-4">
+                                    <div class="relative pb-12" data-autocollapse-target="container">
+                                        <h3 class="text-white">
+                                            Bus-Zustiege
+                                        </h3>
+                                        <f:render section="Pickups" arguments="{_all}"/>
+                                        <div class="absolute left-0 bottom-0 w-full h-12 bg-white flex items-center">
+                                            <button type="button"
+                                                    data-autocollapse-target="button"
+                                                    data-action="autocollapse#toggle"
+                                                    class="hidden text-ep-primary w-10 h-10 ml-2 group toggle-more">
+                                                <f:render section="Icon" arguments="{icon: 'toggle'}" />
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </f:else>
+                        </f:if>
                     </f:if>
                     <f:if condition="{travelinfo.selfArrangedText}">
                         <h3 class="text-white">
@@ -219,6 +213,32 @@
         </f:link.typolink>
     </f:section>
 
+    <f:section name="Pickups">
+        <h3 class="text-white">
+            Bus-Zustiege
+        </h3>
+        <table class="w-full bg-zinc-200 text-zinc-800 text-xs md:text-base">
+            <tr>
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                    Zustieg
+                </th>
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    Datum/Uhrzeit
+                </th>
+            </tr>
+            <f:for each="{date.pickups}" as="pickup">
+                <tr class="odd:bg-zinc-50 align-top">
+                    <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
+                        {pickup.city}<br><span class="text-xs">{pickup.street}</span>
+                    </td>
+                    <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
+                        {pickup.date}<br>{f:if(condition: pickup.time, then: '{pickup.time} Uhr', else: '???')}
+                    </td>
+                </tr>
+            </f:for>
+        </table>
+    </f:section>
+
     <f:section name="Icon">
         <f:switch expression="{icon}">
             <f:case value="travel">