Dodano animację aktywnych RJ; poprawki

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.10.6",
+  "version": "1.10.8",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.12.1",
-    "dotenv": "^8.6.0",
+    "dotenv": "^16.0.3",
     "firebase": "^9.8.1",
     "howler": "^2.2.1",
     "pinia": "^2.0.14",
@@ -21,12 +21,12 @@
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.35",
+    "@types/node": "^18.8.3",
     "@vitejs/plugin-vue": "^3.0.0",
-    "axios": "^0.21.1",
+    "axios": "^1.1.2",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
-    "vue-tsc": "^0.38.4"
+    "vue-tsc": "^1.0.3"
   },
   "browserslist": [
     "> 1%",

src/components/JournalView/DriverStats.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
     <h1>
-      STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+      {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
     </h1>
 
     <div class="info-stats">

src/components/SceneryView/SceneryTimetable.vue

@@ -10,12 +10,6 @@
         <span class="text--grayed">
           {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
         </span>
-        <!-- 
-        <button class="btn--image" v-if="!timetableOnly">
-          <a :href="`${$route.path}?station=${$route.query.station}&timetableOnly=1`">
-            <img :src="getIcon('view')" alt="View image" />
-          </a>
-        </button> -->
       </h3>
 
       <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
@@ -35,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>
@@ -49,119 +41,116 @@
         {{ $t('scenery.no-timetables') }}
       </span>
 
-      <div
-        class="timetable-item"
-        v-for="(scheduledTrain, i) in computedScheduledTrains"
-        :key="i + 1"
-        tabindex="0"
-        @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
-        @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
-      >
-        <span class="timetable-general">
-          <span class="general-info">
-            <span class="info-number">
-              <strong>{{ scheduledTrain.category }}</strong>
-              {{ scheduledTrain.trainNo }}
+      <transition-group name="timetables-anim">
+        <div
+          class="timetable-item"
+          v-for="(scheduledTrain, i) in computedScheduledTrains"
+          :key="scheduledTrain.trainId"
+          tabindex="0"
+          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
+          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
+        >
+          <span class="timetable-general">
+            <span class="general-info">
+              <span class="info-number">
+                <strong>{{ scheduledTrain.category }}</strong>
+                {{ scheduledTrain.trainNo }}
 
-              <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
-                <img :src="getIcon('warning')" />
-                <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
-              </span>
-            </span>
-            &nbsp;|&nbsp;
-            <span style="color: white">
-              {{ scheduledTrain.driverName }}
-            </span>
-            &nbsp;|&nbsp;
-            <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">
-                {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
-                <span v-if="scheduledTrain.stopStatus == 'arriving'"> {{ scheduledTrain.prevStationName }}</span>
-                <span v-if="scheduledTrain.stopStatus.startsWith('departed')">{{
-                  scheduledTrain.nextStationName
-                }}</span>
-              </span>
-            </span>
-
-            <div class="info-route">
-              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
-            </div>
-          </span>
-        </span>
-
-        <span class="timetable-schedule">
-          <span class="schedule-arrival">
-            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
-              {{ $t('timetables.begins') }}
-            </span>
-
-            <span class="arrival-time" v-else>
-              <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
-                <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
-              </div>
-              <div v-else>
-                <div>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
-                  }}</s>
-                </div>
-
-                <span>
-                  {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                  ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
+                  <img :src="getIcon('warning')" />
+                  <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                 </span>
-              </div>
-            </span>
-          </span>
-
-          <span class="schedule-stop">
-            <span class="stop-time">
-              <span v-if="scheduledTrain.stopInfo.stopTime">
-                {{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
+              </span>
+              &nbsp;|&nbsp;
+              <span>
+                {{ scheduledTrain.driverName }}
               </span>
 
-              <span v-else>&nbsp;</span>
-            </span>
+              <div class="info-route">
+                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+              </div>
 
-            <span class="arrow"></span>
-
-            <span class="stop-line">
-              {{ scheduledTrain.arrivingLine }}
-              {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '&gt;' }}
-              {{ scheduledTrain.departureLine }}
+              <ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
             </span>
           </span>
 
-          <span class="schedule-departure">
-            <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
-              {{ $t('timetables.terminates') }}
-            </span>
+          <span class="timetable-schedule">
+            <span class="schedule-arrival">
+              <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+                {{ $t('timetables.begins') }}
+              </span>
 
-            <span class="departure-time" v-else>
-              <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
-                <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
-              </div>
-              <div v-else>
-                <div>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.departureTimestamp)
-                  }}</s>
+              <span class="arrival-time" v-else>
+                <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
                 </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+                    }}</s>
+                  </div>
 
-                <span>
-                  {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                  ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                  }}{{ scheduledTrain.stopInfo.departureDelay }})
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                  </span>
+                </div>
+              </span>
+            </span>
+
+            <span class="schedule-stop">
+              <span class="stop-time">
+                <span v-if="scheduledTrain.stopInfo.stopTime">
+                  {{ scheduledTrain.stopInfo.stopTime }}
+                  {{ scheduledTrain.stopInfo.stopType || 'pt' }}
                 </span>
-              </div>
+
+                <span v-else>&nbsp;</span>
+              </span>
+
+              <span class="arrow"></span>
+
+              <span class="stop-line">
+                <span>
+                  {{ scheduledTrain.arrivingLine }}
+                </span>
+                <span></span>
+                <span>
+                  {{ scheduledTrain.departureLine }}
+                </span>
+              </span>
+            </span>
+
+            <span class="schedule-departure">
+              <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
+                {{ $t('timetables.terminates') }}
+              </span>
+
+              <span class="departure-time" v-else>
+                <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+                    }}</s>
+                  </div>
+
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                  </span>
+                </div>
+              </span>
             </span>
           </span>
-        </span>
-      </div>
+        </div>
+      </transition-group>
     </div>
-
-    <!-- </transition> -->
   </section>
 </template>
 
@@ -178,11 +167,13 @@ import Station from '../../scripts/interfaces/Station';
 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',
 
-  components: { SelectBox, Loading, TrainModal },
+  components: { SelectBox, Loading, TrainModal, ScheduledTrainStatus },
 
   mixins: [dateMixin, routerMixin, imageMixin, modalTrainMixin],
 
@@ -282,11 +273,21 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
 
-// .scenery-timetable {
-//   height: 85vh;
-//   max-height: 900px;
-//   min-height: 450px;
-// }
+.timetables-anim-move,
+.timetables-anim-enter-active,
+.timetables-anim-leave-active {
+  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%;
@@ -320,12 +321,14 @@ export default defineComponent({
 
   &-item {
     margin: 0.5em auto;
-    padding: 0 0.5em;
+    padding: 0.5em;
     max-width: 1100px;
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    gap: 0 0.5em;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2em 0.5em;
+
+    overflow: hidden;
 
     background: #353535;
 
@@ -340,9 +343,6 @@ export default defineComponent({
   }
 
   &-general {
-    padding: 0.5rem 0;
-    border-radius: 10px;
-
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -353,6 +353,10 @@ export default defineComponent({
   &-schedule {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
   }
 }
 
@@ -415,7 +419,6 @@ export default defineComponent({
   }
 
   .info-route {
-    margin-top: 0.5em;
     width: 100%;
   }
 
@@ -431,38 +434,6 @@ export default defineComponent({
   }
 }
 
-.general-status {
-  text-align: right;
-
-  span.arriving {
-    color: #ccc;
-  }
-
-  span.departed {
-    color: lime;
-    font-weight: bold;
-
-    &-away {
-      font-weight: bold;
-      color: #5ecc5e;
-    }
-  }
-
-  span.stopped {
-    color: #ffa600;
-    font-weight: bold;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: salmon;
-    font-weight: bold;
-  }
-}
-
 .schedule {
   &-arrival,
   &-stop,
@@ -472,23 +443,40 @@ export default defineComponent({
     align-items: center;
 
     margin: 0 0.3rem;
-    font-size: 1.1em;
+    font-size: 1.15em;
   }
 
   &-stop {
     position: relative;
     display: flex;
     flex-direction: column;
-    font-size: 0.85em;
+    font-size: 0.9em;
 
     padding: 0.3em 0;
 
     .stop-line {
-      margin-top: 0.25em;
+      display: flex;
+      position: absolute;
+
+      span {
+        width: 65px;
+        word-break: break-all;
+      }
+
+      span:first-child {
+        text-align: right;
+      }
+
+      span:last-child {
+        text-align: left;
+      }
     }
 
     .stop-time {
-      transform: translateY(-0.25em);
+      position: absolute;
+      transform: translateY(-15px);
+
+      color: $accentCol;
     }
   }
 }
@@ -513,21 +501,9 @@ export default defineComponent({
   }
 }
 
-@include smallScreen() {
-  .timetable {
-    &-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-general {
-      width: 100%;
-    }
-
-    &-schedule {
-      width: 100%;
-    }
+@include smallScreen {
+  .timetable-item {
+    grid-template-columns: 1fr;
   }
 }
 </style>

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="general-status">
+    <span :class="scheduledTrain.stopStatus">
+      <span v-if="scheduledTrain.stopStatus == 'arriving'">
+        <span v-if="scheduledTrain.prevDepartureLine">({{ scheduledTrain.prevDepartureLine }})</span>
+        {{ scheduledTrain.prevStationName }}
+        &gt;<span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName || '---' }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'departed'">
+        &gt;&gt; <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'departed-away'">
+        &gt;&gt;&gt;
+        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'online'">
+        &gt;
+        <span v-if="scheduledTrain.nextArrivalLine">
+          ({{ scheduledTrain.nextArrivalLine }}) {{ scheduledTrain.nextStationName }}
+        </span>
+        <span v-else-if="!scheduledTrain.nextStationName">{{ $t('timetables.end') }}</span>
+        <span v-else>{{ scheduledTrain.nextStationName }}</span>
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'stopped'">
+        &gt;
+        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'terminated'">X {{ $t('timetables.terminated') }}</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
+
+export default defineComponent({
+  props: {
+    scheduledTrain: {
+      type: Object as PropType<ScheduledTrain>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.general-status {
+  margin-top: 0.5em;
+
+  span.arriving {
+    color: #ccc;
+  }
+
+  span.departed {
+    color: lime;
+    font-weight: bold;
+
+    &-away {
+      font-weight: bold;
+      color: #5ecc5e;
+    }
+  }
+
+  span.stopped {
+    color: #ffa600;
+    font-weight: bold;
+  }
+
+  span.online {
+    color: gold;
+  }
+
+  span.terminated {
+    color: salmon;
+    font-weight: bold;
+  }
+}
+</style>

src/locales/en.json

@@ -253,6 +253,8 @@
 
     "load-data": "Load further data...",
 
+    "stats-title": "DRIVING STATISTICS OF",
+
     "stats-timetables": "TIMETABLES",
     "stats-longest-timetable": "LONGEST TIMETABLE",
     "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
@@ -299,12 +301,8 @@
   },
   "timetables": {
     "timetable-only": "Switch to timetable-only view",
-    "online": "At station",
-    "departed": "Dispatched to:",
-    "departed-away": "Departed to:",
-    "arriving": "Arriving from:",
-    "stopped": "Stopped",
-    "terminated": "Terminated",
+    "end": "Timetable terminates here",
+    "terminated": "Timetable terminated",
     "begins": "BEGINS HERE",
     "terminates": "TERMINATES\nHERE"
   },

src/locales/pl.json

@@ -257,6 +257,8 @@
 
     "load-data": "Pobierz dalszą historię...",
 
+    "stats-title": "STATYSTYKI MASZYNISTY",
+
     "stats-timetables": "ROZKŁADY JAZDY",
     "stats-longest-timetable": "NAJDŁUŻSZY RJ",
     "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
@@ -303,12 +305,8 @@
   },
   "timetables": {
     "timetable-only": "Wyodrębnij rozkłady jazdy",
-    "online": "Na stacji",
-    "departed": "Odprawiony do:",
-    "departed-away": "Odjechał do:",
-    "arriving": "W drodze z:",
-    "stopped": "Postój",
-    "terminated": "Skończył bieg",
+    "end": "Koniec rozkładu jazdy",
+    "terminated": "Rozkład jazdy zakończony",
     "begins": "ROZPOCZYNA\nBIEG",
     "terminates": "KOŃCZY BIEG"
   },

src/scripts/interfaces/ScheduledTrain.ts

@@ -20,6 +20,12 @@ export default interface ScheduledTrain {
     arrivingLine: string | null;
     departureLine: string | null;
 
+    prevDepartureLine: string | null;
+    nextArrivalLine: string | null;
+
+    signal: string;
+    connectedTrack: string;
+
     stopLabel: string;
     stopStatus: string;
     stopStatusID: number;

src/scripts/utils/storeUtils.ts

@@ -117,31 +117,37 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
   let prevStationName = '',
     nextStationName = '';
 
+  let prevDepartureLine: string | null = null,
+    nextArrivalLine: string | null = null;
 
   for (let i = trainStopIndex - 1; i >= 0; i--) {
     if (/strong|podg/g.test(followingStops[i].stopName)) {
-      prevStationName = followingStops[i].stopNameRAW;
+      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+
       break;
     }
   }
 
   for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
     if (/strong|podg/g.test(followingStops[i].stopName)) {
-      nextStationName = followingStops[i].stopNameRAW;
+      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+
       break;
     }
   }
 
-  let departureLine: string | null = trainStop.departureLine;
-  let arrivingLine: string | null = trainStop.arrivalLine;
+  let departureLine: string | null = null;
+  let arrivingLine: string | null = null;
 
   for (let i = trainStopIndex; i < followingStops.length; i++) {
     const currentStop = followingStops[i];
 
-    if (currentStop.departureLine == null) break;
+    if (currentStop.departureLine == null) continue;
 
     if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
       departureLine = currentStop.departureLine;
+      nextArrivalLine = followingStops[i + 1]?.arrivalLine || null;
+
       break;
     }
   }
@@ -149,10 +155,12 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
   for (let i = trainStopIndex; i >= 0; i--) {
     const currentStop = followingStops[i];
 
-    if (currentStop.arrivalLine == null) break;
+    if (currentStop.arrivalLine == null) continue;
 
     if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
       arrivingLine = currentStop.arrivalLine;
+      prevDepartureLine = followingStops[i - 1]?.departureLine || null;
+
       break;
     }
   }
@@ -160,7 +168,11 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
   return {
     trainNo: train.trainNo,
     trainId: train.trainId,
-    
+
+    signal: train.signal,
+    connectedTrack: train.connectedTrack,
+
+
     driverName: train.driverName,
     driverId: train.driverId,
     currentStationName: train.currentStationName,
@@ -179,5 +191,8 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     arrivingLine,
     departureLine,
+
+    nextArrivalLine,
+    prevDepartureLine,
   };
 }