Dodano animację aktywnych RJ; poprawki

src/components/SceneryView/SceneryTimetable.vue

@@ -29,8 +29,6 @@
     </div>
 
     <div class="timetable-list">
-      <!-- <transition name="scenery-timetable-list-anim" mode="out-in"> -->
-      <!-- <div :key="store.dataStatuses.trains + selectedCheckpoint" class="scenery-timetable-list"> -->
       <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
         <Loading />
       </div>
@@ -43,10 +41,11 @@
         {{ $t('scenery.no-timetables') }}
       </span>
 
+      <transition-group name="timetables-anim">
         <div
           class="timetable-item"
           v-for="(scheduledTrain, i) in computedScheduledTrains"
-        :key="i + 1"
+          :key="scheduledTrain.trainId"
           tabindex="0"
           @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
           @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
@@ -94,7 +93,8 @@
 
                   <span>
                     {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                  ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
                   </span>
                 </div>
               </span>
@@ -116,7 +116,7 @@
                 <span>
                   {{ scheduledTrain.arrivingLine }}
                 </span>
-              <span ></span>
+                <span></span>
                 <span>
                   {{ scheduledTrain.departureLine }}
                 </span>
@@ -149,9 +149,8 @@
             </span>
           </span>
         </div>
+      </transition-group>
     </div>
-
-    <!-- </transition> -->
   </section>
 </template>
 
@@ -169,6 +168,7 @@ import { useStore } from '../../store/store';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
 
 export default defineComponent({
   name: 'SceneryTimetable',
@@ -273,11 +273,21 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
 
-// .scenery-timetable {
+.timetables-anim-move,
-//   height: 85vh;
+.timetables-anim-enter-active,
-//   max-height: 900px;
+.timetables-anim-leave-active {
-//   min-height: 450px;
+  transition: all 250ms ease;
-// }
+}
+
+.timetables-anim-enter-from,
+.timetables-anim-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.timetables-anim-leave-active {
+  position: absolute;
+}
 
 .scenery-timetable {
   height: 100%;

src/scripts/utils/storeUtils.ts

@@ -136,8 +136,8 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
     }
   }
 
-  let departureLine: string | null = trainStop.departureLine;
+  let departureLine: string | null = null;
-  let arrivingLine: string | null = trainStop.arrivalLine;
+  let arrivingLine: string | null = null;
 
   for (let i = trainStopIndex; i < followingStops.length; i++) {
     const currentStop = followingStops[i];