From 8abed602444f4d4612d7bee0106a778b57d917d9 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 6 Jul 2021 01:51:36 +0200
Subject: [PATCH] =?UTF-8?q?Aktualizacja=20schedule=20indicator=C3=B3w=20(w?=
 =?UTF-8?q?.i.p.)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainSchedule.vue | 85 +++++++++++++++------
 src/components/TrainsView/TrainTable.vue    |  1 -
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 76cc057..8b674bc 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -1,19 +1,11 @@
 <template>
-  <div
-    class="train-schedule"
-    @click="this.$emit('click')"
-  >
+  <div class="train-schedule" @click="toggleShowState">
     <div class="schedule-wrapper">
       <ul class="stop_list">
         <li
           v-for="(stop, i) in followingStops"
           :key="i"
-          :class="{
-            confirmed: stop.confirmed,
-            stopped: stop.stopped,
-            beginning: stop.beginsHere,
-            delayed: stop.departureDelay > 0,
-          }"
+          :class="addClasses(stop, i)"
         >
           <span class="stop_info">
             <div class="indicator"></div>
@@ -22,17 +14,11 @@
 
             <div class="stop-bar"></div>
 
-            <span
-              class="distance"
-              v-if="stop.stopDistance"
-            >
+            <span class="distance" v-if="stop.stopDistance">
               {{ Math.floor(stop.stopDistance) }}
             </span>
 
-            <span
-              class="stop-name"
-              v-html="stop.stopName"
-            ></span>
+            <span class="stop-name" v-html="stop.stopName"></span>
             <span class="stop-date">
               <span
                 class="date arrival"
@@ -46,8 +32,8 @@
                 {{
                   stylizeTime(
                     stop.confirmed
-                      ? stop.arrivalRealTimeString
-                      : stop.arrivalTimeString,
+                      ? stop.arrivalRealTimeString || ""
+                      : stop.arrivalTimeString || "",
                     stop.arrivalDelay,
                     stop.confirmed
                   )
@@ -74,8 +60,8 @@
                 {{
                   stylizeTime(
                     stop.confirmed
-                      ? stop.departureRealTimeString
-                      : stop.departureTimeString,
+                      ? stop.departureRealTimeString || ""
+                      : stop.departureTimeString || "",
                     stop.departureDelay,
                     stop.confirmed
                   )
@@ -88,7 +74,9 @@
             <div class="progress-bar"></div>
 
             <span v-if="i < followingStops.length - 1">
-              <span v-if="stop.departureLine == followingStops[i + 1].arrivalLine">
+              <span
+                v-if="stop.departureLine == followingStops[i + 1].arrivalLine"
+              >
                 {{ stop.departureLine }}
               </span>
 
@@ -105,10 +93,16 @@
 </template>
 
 <script lang="ts">
+import TrainStop from "@/scripts/interfaces/TrainStop";
 import { defineComponent } from "@vue/runtime-core";
 
 export default defineComponent({
-  props: ["followingStops", "currentStationName"],
+  props: {
+    followingStops: {
+      type: Array as () => TrainStop[],
+      required: true,
+    },
+  },
   emits: ["click"],
 
   methods: {
@@ -120,11 +114,38 @@ export default defineComponent({
           : "")
       );
     },
+
+    toggleShowState() {
+      this.$emit("click");
+    },
+
+    addClasses(stop: TrainStop, index: number) {
+      return {
+        confirmed: stop.confirmed,
+        stopped: stop.stopped,
+        beginning: stop.beginsHere,
+        delayed: stop.departureDelay > 0,
+        "minor-stop":
+          this.followingStops[index - 1]?.confirmed &&
+          stop.stopNameRAW.includes("po"),
+        "last-confirmed":
+          stop.confirmed && !this.followingStops[index + 1]?.confirmed,
+      };
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
+@keyframes blink {
+  from {
+    background-color: white;
+  }
+  to {
+    background-color: lime;
+  }
+}
+
 .train-schedule {
   max-height: 600px;
   margin-top: 2em;
@@ -158,6 +179,22 @@ ul.stop_list > li {
 
   padding: 0 0.5em;
 
+  &.minor-stop {
+    .stop_info > .progress-bar {
+      animation: 0.5s ease-in-out alternate infinite blink;
+    }
+
+    .stop_line > .progress-bar {
+      animation: 0.5s ease-in-out alternate infinite blink;
+    }
+  }
+
+  &.last-confirmed {
+    & > .stop_line > .progress-bar {
+      animation: 0.5s ease-in-out alternate infinite blink;
+    }
+  }
+
   &.confirmed {
     & > .stop_line > .progress-bar {
       background-color: lime;
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 05ba2d8..d0e05c1 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -168,7 +168,6 @@
         >
           <TrainSchedule
             :followingStops="train.timetableData.followingStops"
-            :currentStationName="train.currentStationName"
             @click="changeScheduleShowState(train.timetableData?.timetableId)"
           />
         </div>