Add current stop highlight

resources/components/trip.html

@@ -1,5 +1,5 @@
 <div class="trip">
-    <ol class="trip__stops" v-dragscroll.x>
+    <ol class="trip__stops" v-dragscroll.x ref="stops">
         <li v-for="stop in stops" class="trip__stop" :class="[ stop.current && 'trip__stop--current', stop.visited && 'trip__stop--visited' ]">
             <div class="trip__marker"/>
             <div class="trip__description">

resources/styles/_trip.scss

@@ -76,6 +76,10 @@ $trip-visited: rgba($dark, .3);
   }
 }
 
+.trip__stop--current .trip__marker {
+  box-shadow: 0 0 .5rem $dark;
+}
+
 @each $type, $color in $line-types {
   .trip--#{$type} {
     .trip__marker {
@@ -85,6 +89,10 @@ $trip-visited: rgba($dark, .3);
         background: $color;
       }
     }
+
+    .trip__stop--current .trip__marker {
+      box-shadow: 0 0 .5rem $color;
+    }
   }
 }
 
@@ -101,7 +109,7 @@ $trip-visited: rgba($dark, .3);
   }
 }
 
-.trip__stop--current .trip__marker {
+.trip__stop--visited + .trip__stop:not(.trip__stop--visited) .trip__marker {
   &::before {
     background: $trip-visited;
   }

resources/ts/components/trip.ts

@@ -3,6 +3,7 @@ import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
 import { ScheduledStop } from "../model/trip";
 import { Stop } from "../model";
+import * as moment from 'moment';
 
 type ScheduledStopInfo = ScheduledStop & { visited: boolean, current: boolean };
 
@@ -12,14 +13,21 @@ export class TripComponent extends Vue {
     @Prop(Object) public current: Stop;
 
     get stops(): ScheduledStopInfo[] {
-        let visited = true;
-
         return this.schedule.map(stop => ({
             ...stop,
-            current: stop.stop.id == this.current.id ? !(visited = false) : false,
-            visited: visited,
+            current: stop.stop.id == this.current.id,
+            visited: moment().isAfter(stop.departure),
         }));
     }
+
+    mounted() {
+        const list    = this.$refs['stops'] as HTMLUListElement;
+        const current = list.querySelector('.trip__stop--current') as HTMLLIElement;
+
+        if (!current) return;
+
+        list.scrollLeft = current.offsetLeft - (list.clientWidth + current.clientWidth) / 2;
+    }
 }
 
 Vue.component('Trip', TripComponent);

resources/ts/store/messages.ts

@@ -45,10 +45,10 @@ export const messages: Module<MessagesState, RootState> = {
             }
 
             const messages = await response.json() as Jsonified<Message>[];
-            commit('update', messages.map(m => ({
-                ...m,
-                validFrom: moment(m.validFrom),
-                validTo:   moment(m.validTo),
+            commit('update', messages.map(message => ({
+                ...message,
+                validFrom: moment(message.validFrom),
+                validTo:   moment(message.validTo),
             })));
         }
     }

src/Provider/ZtmGdansk/ZtmGdanskDataUpdateSubscriber.php

@@ -157,7 +157,9 @@ class ZtmGdanskDataUpdateSubscriber implements EventSubscriberInterface
         $this->logger->debug(sprintf("Saving %d stops tracks from ZTM Gdańsk.", count($stops)));
         return collect($stops)
             ->filter(function ($stop) {
-                return $stop['nonpassenger'] !== null && $stop['nonpassenger'] !== 1;
+                return $stop['nonpassenger'] !== 1
+                    && $stop['virtual'] !== 1
+                    && $stop['depot'] !== 1;
             })
             ->map(function ($stop) use ($provider) {
                 return StopEntity::createFromArray([

templates/app.html.twig

@@ -126,7 +126,7 @@
                             <fa :icon="['fal', 'star']" fixed-width class="mr-1"></fa>
                             Zapisane
                         </h2>
-                        <button class="btn btn-action" @click="visibility.picker = 'sech'">
+                        <button class="btn btn-action" @click="visibility.picker = 'search'">
                             <fa :icon="['fal', 'search']" fixed-witdth></fa>
                         </button>
                     </template>