better fold mechanism

resources/components/fold.html

@@ -1,6 +1,8 @@
-<div class="collapse" :class="{'show': visible}">
+<div class="fold">
-    <lazy v-if="lazy" :activate="visible">
+    <div class="fold__inner" ref="inner">
-        <slot></slot>
+        <lazy v-if="lazy" :activate="visible">
-    </lazy>
+            <slot></slot>
-    <slot v-else></slot>
+        </lazy>
+        <slot v-else></slot>
+    </div>
 </div>

resources/styles/_common.scss

@@ -30,8 +30,13 @@
   }
 }
 
-.collapse {
+.fold {
-  padding-bottom: .5rem;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  transition: height 250ms ease;
+  will-change: height;
+  box-sizing: padding-box;
 }
 
 .flex {

resources/styles/_stop.scss

@@ -17,6 +17,7 @@
 
 .stop__details {
   flex-basis: 100%;
+  .fold__inner { padding-bottom: .75rem; }
 }
 
 .stop-group__name {

resources/ts/components/utils.ts

@@ -42,16 +42,33 @@ export class PopperComponent extends Vue {
 
 @Component({ template: collapse })
 export class FoldComponent extends Vue {
+    private observer: MutationObserver;
+
     @Prop(Boolean)
     public visible: boolean;
 
     @Prop(Boolean)
     public lazy: boolean;
 
+    mounted() {
+        this.resize();
+        this.observer = new MutationObserver(() => this.resize());
+
+        this.observer.observe(this.$refs['inner'] as Node, {
+            characterData: true,
+            subtree: true,
+            childList: true
+        });
+    }
+
+    destroyed() {
+        this.observer.disconnect();
+    }
+
     @Watch('visible')
-    private onVisibilityChange(value) {
+    private resize() {
-        const action = () => $(this.$el).collapse(value ? 'show' : 'hide');
+        const inner = this.$refs['inner'] as HTMLDivElement;
-        setTimeout(action);
+        this.$el.style.height = `${(this.visible && inner) ? inner.clientHeight : 0}px`;
     }
 }
 

resources/ts/model/departure.ts

@@ -10,5 +10,11 @@ export interface Departure {
     line:      Line;
     delay:     number;
 
-    vehicle?:  string;
+    vehicle?:  Vehicle;
+}
+
+export interface Vehicle {
+    id: string;
+
+    // todo: ???
 }

src/Model/Departure.php

@@ -22,7 +22,7 @@ class Departure implements Fillable
 
     /**
      * Vehicle identification
-     * @var string|null
+     * @var Vehicle|null
      */
     private $vehicle;
 
@@ -54,12 +54,12 @@ class Departure implements Fillable
         $this->line = $line;
     }
 
-    public function getVehicle(): ?string
+    public function getVehicle(): ?Vehicle
     {
         return $this->vehicle;
     }
 
-    public function setVehicle(?string $vehicle): void
+    public function setVehicle(?Vehicle $vehicle): void
     {
         $this->vehicle = $vehicle;
     }

src/Model/Vehicle.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Model;
+
+class Vehicle implements Referable, Fillable
+{
+    use ReferableTrait, FillTrait;
+
+    // todo: what attributes? AC, USB, GPS, seat count, length, manufacturer...?
+}

src/Provider/ZtmGdansk/ZtmGdanskDepartureRepository.php

@@ -4,8 +4,10 @@ namespace App\Provider\ZtmGdansk;
 
 use App\Model\Departure;
 use App\Model\Stop;
+use App\Model\Vehicle;
 use App\Provider\DepartureRepository;
 use App\Provider\LineRepository;
+use App\Service\Proxy\ReferenceFactory;
 use Carbon\Carbon;
 use Tightenco\Collect\Support\Collection;
 use Kadet\Functional\Transforms as t;
@@ -17,12 +19,16 @@ class ZtmGdanskDepartureRepository implements DepartureRepository
     /** @var LineRepository */
     private $lines;
 
+    /** @var ReferenceFactory */
+    private $reference;
+
     /**
      * @param LineRepository $lines
      */
-    public function __construct(LineRepository $lines)
+    public function __construct(LineRepository $lines, ReferenceFactory $reference)
     {
         $this->lines = $lines;
+        $this->reference = $reference;
     }
 
     public function getForStop(Stop $stop): Collection
@@ -42,7 +48,7 @@ class ZtmGdanskDepartureRepository implements DepartureRepository
                 'estimated' => $estimated,
                 'stop'      => $stop,
                 'display'   => trim($delay['headsign']),
-                'vehicle'   => $delay['vehicleCode'],
+                'vehicle'   => $this->reference->get(Vehicle::class, $delay['vehicleCode']),
                 'line'      => $lines->get($delay['routeId']),
             ]);
         })->values();

src/Provider/ZtmGdanskProvider.php

@@ -8,6 +8,7 @@ use App\Provider\Database\GenericLineRepository;
 use App\Provider\Database\GenericStopRepository;
 use App\Provider\Database\GenericTrackRepository;
 use App\Provider\ZtmGdansk\{ZtmGdanskDepartureRepository, ZtmGdanskMessageRepository};
+use App\Service\Proxy\ReferenceFactory;
 use Doctrine\ORM\EntityManagerInterface;
 
 class ZtmGdanskProvider implements Provider
@@ -33,7 +34,8 @@ class ZtmGdanskProvider implements Provider
         GenericLineRepository $lines,
         GenericStopRepository $stops,
         GenericTrackRepository $tracks,
-        ZtmGdanskMessageRepository $messages
+        ZtmGdanskMessageRepository $messages,
+        ReferenceFactory $referenceFactory
     ) {
         $provider = $em->getReference(ProviderEntity::class, $this->getIdentifier());
 
@@ -42,7 +44,7 @@ class ZtmGdanskProvider implements Provider
         $tracks = $tracks->withProvider($provider);
 
         $this->lines      = $lines;
-        $this->departures = new ZtmGdanskDepartureRepository($lines);
+        $this->departures = new ZtmGdanskDepartureRepository($lines, $referenceFactory);
         $this->stops      = $stops;
         $this->messages   = $messages;
         $this->tracks     = $tracks;