From aefa6627b48dd113618ebe36e4f06a56d5aa5943 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Apr 2022 15:22:34 +0200
Subject: [PATCH] =?UTF-8?q?Zmiana=20wygl=C4=85du=20widok=C3=B3w=20i=20roz?=
 =?UTF-8?q?=C5=82o=C5=BCenia=20element=C3=B3w=20na=20stronie=20(1.6.0a)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                  |  56 +++++++++++
 src/App.vue                                   |  18 +++-
 src/assets/icon-discord.png                   | Bin 0 -> 1656 bytes
 src/components/SceneryView/SceneryHistory.vue |  67 +++++++++-----
 src/components/SceneryView/SceneryInfo.vue    |  17 ++--
 .../SceneryInfo/SceneryInfoDispatcher.vue     |  37 +++++---
 .../SceneryInfo/SceneryInfoIcons.vue          |   2 +-
 .../SceneryInfo/SceneryInfoRoutes.vue         |  17 ++--
 .../SceneryInfo/SceneryInfoSpawnList.vue      |   3 +-
 .../SceneryInfo/SceneryInfoStats.vue          |   2 +-
 .../SceneryInfo/SceneryInfoUserList.vue       |   5 +-
 .../SceneryView/SceneryTimetable.vue          |  35 +++++--
 src/components/TrainsView/TrainSchedule.vue   |   2 +-
 src/scripts/interfaces/ScheduledTrain.ts      |   4 +-
 src/scripts/utils/storeUtils.ts               |  27 +++++-
 src/store/index.ts                            |  87 +++---------------
 src/store/types.ts                            |  62 +++++++++++++
 src/styles/responsive.scss                    |   2 +-
 src/views/SceneryView.vue                     |   2 +-
 src/views/StationsView.vue                    |  25 -----
 20 files changed, 297 insertions(+), 173 deletions(-)
 create mode 100644 src/assets/icon-discord.png
 create mode 100644 src/store/types.ts

diff --git a/src/App.scss b/src/App.scss
index 7764edc..4379496 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -132,6 +132,62 @@
     font-size: 1.25em;
     padding: 0.5em;
   }
+
+  &_badges {
+    position: absolute;
+    top: 0;
+    right: 0;
+    
+    .badge {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      font-weight: bold;
+      padding: 3px 10px;
+      margin: 0.5em 0;
+    
+      span {
+        margin-left: 0.5em;
+      }
+    }
+    
+    img {
+      width: 1.3em;
+    }
+    
+    
+    @media only screen and (max-width: 850px) {
+      // display: flex;
+      // top: 100%;
+      // right: 1em;
+      
+      left: 0;
+      right: auto;
+      bottom: 0;
+      top: auto;
+
+
+      .badge {
+          // margin: 0 0.25em;
+
+          span {
+            display: none;
+          }
+      }
+    }
+  }
+}
+
+.badge.paypal {
+  background-color: white;
+  color: black;
+}
+
+.badge.discord {
+  background-color: black;
+  color: white;
+  font-size: 0.9em;
 }
 
 // COUNTER
diff --git a/src/App.vue b/src/App.vue
index 1328e8d..ae81425 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,7 @@
             <div class="info_counter">
               <span class="region" @click="openFilterCard">
                 {{ currentRegion.value }}
-              </span>
+              </span> 
 
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
               <span class="text--primary">{{ dispatcherCount }}</span>
@@ -64,6 +64,20 @@
             /
             <router-link class="route" active-class="route-active" to="/journal">{{ $t('app.journal') }} </router-link>
           </span>
+
+          <span class="header_badges">
+            <a href="https://www.paypal.com/paypalme/spythere" target="_blank" class="badge paypal">
+              <img :src="icons.paypal" alt="icon paypal">
+              <span>PAYPAL</span>
+            </a>
+
+            <a href="https://discord.gg/x2mpNN3svk" target="_blank" class="badge discord">
+              <img :src="icons.discord" alt="icon discord">
+              <span>STACJOWNIK</span>
+            </a>
+            <!-- <img src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="">
+            <img src="https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white" alt=""> -->
+          </span>
         </div>
       </header>
 
@@ -151,6 +165,8 @@ export default defineComponent({
       en: require('@/assets/icon-en.jpg'),
       pl: require('@/assets/icon-pl.svg'),
       error: require('@/assets/icon-error.svg'),
+      paypal: require('@/assets/icon-paypal.svg'),
+      discord: require('@/assets/icon-discord.png'),
     },
   }),
 
diff --git a/src/assets/icon-discord.png b/src/assets/icon-discord.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ec3dca691e4a6634b578122ed3ef82b0d9f1a3e
GIT binary patch
literal 1656
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
C2mV0-

literal 0
HcmV?d00001

diff --git a/src/components/SceneryView/SceneryHistory.vue b/src/components/SceneryView/SceneryHistory.vue
index aad4f58..2d483e6 100644
--- a/src/components/SceneryView/SceneryHistory.vue
+++ b/src/components/SceneryView/SceneryHistory.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="scenery-history">
-    <h2>{{ $t('journal.title') }}</h2>
+    <div class="history-title">
+      <img :src="icons.history" alt="icon history" />
+      <h2>{{ $t('journal.title') }}</h2>
+    </div>
 
     <transition name="history-list-anim" mode="out-in">
       <ul :key="dispatcherTimeline.length">
@@ -19,25 +22,24 @@
             @keydown.space="toggleTimeline(i)"
             tabindex="0"
           >
-            {{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" />
+            {{ timeline.date }}
+            <!-- <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" /> -->
           </h3>
 
-          <transition name="unfold-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave">
-            <div class="dispatcher-list" v-if="timeline.showTimeline">
-              <div class="dispatcher-item" v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
-                <span>
-                  <span class="dispatcher-from text--primary">
-                    {{ timestampToString(dispatcher.dispatcherFrom, true) }}
-                  </span>
-                  >
-                  <span class="dispatcher-to text--primary">
-                    {{ timestampToString(dispatcher.dispatcherTo, true) }}</span
-                  >
-                </span>
-                <b>{{ dispatcher.dispatcherName }}</b>
-              </div>
-            </div>
-          </transition>
+          <!-- <transition name="unfold-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave"> -->
+          <!-- <div class="dispatcher-list" v-if="timeline.showTimeline"> -->
+          <div class="dispatcher-item" v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
+            <b>{{ dispatcher.dispatcherName }}</b>
+            <span>
+              <span class="dispatcher-from text--primary">
+                {{ timestampToString(dispatcher.dispatcherFrom, true) }}
+              </span>
+              &gt;
+              <span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span>
+            </span>
+          </div>
+          <!-- </div> -->
+          <!-- </transition> -->
         </li>
       </ul>
     </transition>
@@ -87,8 +89,7 @@ export default defineComponent({
     isLoaded: false,
 
     icons: {
-      ascArrow: require('@/assets/icon-arrow-asc.svg'),
-      descArrow: require('@/assets/icon-arrow-desc.svg'),
+      history: require('@/assets/icon-history.svg'),
     },
   }),
   props: {
@@ -100,7 +101,7 @@ export default defineComponent({
 
   async mounted() {
     try {
-      const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;      
+      const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;
 
       if (!apiResult || !apiResult.response) return;
       this.isLoaded = true;
@@ -118,7 +119,7 @@ export default defineComponent({
               showTimeline: false,
             };
 
-            timelineDay.dispatchers.push(dispatcher);
+            timelineDay.dispatchers.unshift(dispatcher);
 
             if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
 
@@ -202,6 +203,20 @@ export default defineComponent({
   padding-top: 1em;
 }
 
+.history-title {
+  display: flex;
+  justify-content: center;
+
+  margin-bottom: 0.5em;
+  font-size: 1.2em;
+
+  img {
+    margin-right: 0.5em;
+    width: 1.3em;
+  }
+}
+
+
 ul {
   height: 600px;
   overflow-y: scroll;
@@ -218,12 +233,15 @@ li {
     justify-content: center;
     align-items: center;
 
-    background: #444;
+    background: #2a2a2a;
     padding: 0.5em;
     margin: 0 auto 0.5em auto;
 
     max-width: 700px;
 
+    position: sticky;
+    top: 0;
+
     img {
       width: 1.3em;
       vertical-align: middle;
@@ -246,13 +264,12 @@ li {
     margin: 0.5em auto;
 
     background-color: #444;
-    border-radius: 0.5em;
 
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 
     width: 90%;
-    max-width: 400px;
+    max-width: 600px;
   }
 }
 </style>
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index c4b2b5e..c614d50 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -2,7 +2,7 @@
   <div class="scenery-info">
     <section v-if="!timetableOnly">
       <!-- info stats -->
-      <scenery-info-stats :station="station" />
+      <!-- <scenery-info-stats :station="station" /> -->
 
       <!-- info icons -->
       <scenery-info-icons :station="station" />
@@ -32,7 +32,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoStats from './SceneryInfo/SceneryInfoStats.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
-import SceneryInfoRoutes from "./SceneryInfo/SceneryInfoRoutes.vue";
+import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 
 import Station from '@/scripts/interfaces/Station';
 
@@ -43,7 +43,7 @@ export default defineComponent({
     SceneryInfoStats,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
-    SceneryInfoRoutes
+    SceneryInfoRoutes,
   },
   props: {
     station: {
@@ -51,11 +51,11 @@ export default defineComponent({
       default: {},
     },
 
-    timetableOnly: Boolean
+    timetableOnly: Boolean,
   },
 
   data: () => ({
-    onlineFrom: -1
+    onlineFrom: -1,
   }),
 });
 </script>
@@ -80,10 +80,9 @@ h3.section-header {
 }
 
 .info-lists {
-  display: flex;
-
-  align-items: center;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 550px));
+  justify-content: center;
 }
 
 .badge {
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
index a8aeaaf..90aca72 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
@@ -1,23 +1,25 @@
 <template>
   <section class="info-dispatcher">
     <div class="dispatcher" v-if="station.onlineInfo">
-      <span
-        class="dispatcher_level"
-        :style="calculateExpStyle(station.onlineInfo.dispatcherExp)"
-      >
+      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
 
       <span class="dispatcher_name">{{ station.onlineInfo.dispatcherName }}</span>
+
+      <span class="dispatcher_likes text--primary">
+        <img :src="icons.like" alt="icon-like" />
+        <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
+      </span>
     </div>
 
     <span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0">
-      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: "2-digit", minute: "2-digit" }) }}
+      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
     </span>
 
     <span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID">
       {{ $t(`status.${station.onlineInfo.statusID}`) }}
-      {{ station.onlineInfo.statusID == 'online' ?  timestampToString(station.onlineInfo.statusTimestamp) : '' }}
+      {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
     </span>
 
     <span class="status-badge free" v-else>
@@ -34,7 +36,7 @@ import Station from '@/scripts/interfaces/Station';
 import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin ],
+  mixins: [styleMixin, dateMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -43,15 +45,15 @@ export default defineComponent({
 
     onlineFrom: {
       type: Number,
-      default: -1
-    }
+      default: -1,
+    },
   },
 
-
   data: () => ({
     icons: {
       spawn: require('@/assets/icon-spawn.svg'),
-    }
+      like: require('@/assets/icon-like.svg'),
+    },
   }),
 });
 </script>
@@ -81,12 +83,21 @@ export default defineComponent({
     }
 
     &_name {
-      margin-right: 1em;
+      margin-right: 0.4em;
+    }
+
+    &_likes {
+      img {
+        height: 0.7em;
+        margin-right: 0.25em;
+      }
+
+      margin-right: 1.5em;
     }
   }
 
   .status-badge {
-    font-size: 1.2em;
+    font-size: 1.25em;
     margin: 0.5em 0.25em;
   }
 }
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
index e8453e7..ff8c30a 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 .info-icons {
   img {
     width: 3.5em;
-    margin: 0 0.5em;
+    margin: 1em 0.5em;
 
     border: 2px solid #4e4e4e;
     border-radius: 0.5em;
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
index afadd6d..71dde25 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
@@ -21,8 +21,8 @@
 
       <span class="track-specs">
         {{ route.tracks }}tor
-        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary"  />
-        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" >
+        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary" />
+        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" />
 
         <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
         <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
@@ -46,12 +46,12 @@ export default defineComponent({
   data() {
     return {
       icons: {
-        trackTWB: require("@/assets/icon-track-twb.svg"),
-        trackSBL: require("@/assets/icon-track-sbl.svg"),
-        trackCatenary: require("@/assets/icon-track-catenary.svg"),
-        trackNoCatenary: require("@/assets/icon-track-nocatenary.svg"),
-      }
-    }
+        trackTWB: require('@/assets/icon-track-twb.svg'),
+        trackSBL: require('@/assets/icon-track-sbl.svg'),
+        trackCatenary: require('@/assets/icon-track-catenary.svg'),
+        trackNoCatenary: require('@/assets/icon-track-nocatenary.svg'),
+      },
+    };
   },
 });
 </script>
@@ -90,5 +90,4 @@ export default defineComponent({
     vertical-align: text-bottom;
   }
 }
-
 </style>
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
index 988c8c8..ecd7ef8 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
@@ -1,8 +1,9 @@
 <template>
   <section class="info-spawn-list">
     <h3 class="spawn-header section-header">
-      {{ $t('scenery.spawns') }}
       <img :src="icons.spawn" alt="icon-spawn" />
+      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </h3>
 
     <span v-if="station.onlineInfo">
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
index 6b5eafd..0b5bec4 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
@@ -83,7 +83,7 @@ export default defineComponent({
   }
 
   span > img {
-    width: 1.2em;
+    width: 1.2em; 
     margin-right: 0.5em;
   }
 }
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index 7c460fa..4ee838e 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
@@ -1,8 +1,9 @@
 <template>
   <section class="info-user-list">
     <h3 class="user-header section-header">
-      {{ $t('scenery.users') }}
       <img :src="icons.user" alt="icon-user" />
+      &nbsp;{{ $t('scenery.users') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}/{{ station.onlineInfo?.maxUsers || '0' }}</span>
     </h3>
 
     <div
@@ -83,6 +84,8 @@ $terminated: red;
 $disconnected: slategray;
 
 .info-user-list {
+  padding: 0.5em;
+
   ul {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 178c11e..f4f2ae9 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -1,8 +1,17 @@
 <template>
   <div class="scenery-timetable">
     <h3 class="timetable-header">
+      <img :src="icons.timetable" alt="icon-timetable" />&nbsp;
       <span>{{ $t('scenery.timetables') }}</span>
 
+      <span class="timetable-count">
+        <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+        /
+        <span class="text--grayed">
+          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+        </span>
+      </span>
+
       <a :href="currentURL + '&timetable_only=1'" v-if="!timetableOnly" target="_blank" class="timetable-only">
         <img :src="viewIcon" alt="icon-view" :title="$t('timetables.timetable-only')" />
       </a>
@@ -60,7 +69,11 @@
             </span>
 
             <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
+              <span :class="scheduledTrain.stopStatus">
+                {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
+                <span v-if="scheduledTrain.stopStatus == 'arriving'">z: {{ scheduledTrain.prevStationName }}</span>
+                <span v-if="scheduledTrain.stopStatus.startsWith('departed')">do: {{ scheduledTrain.nextStationName }}</span>
+              </span>
             </span>
           </span>
 
@@ -90,7 +103,7 @@
             <span class="schedule-stop">
               <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
                 {{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType }}
+                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
               </span>
               <span class="stop-arrow arrow"></span>
             </span>
@@ -134,6 +147,7 @@ import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
+import TrainStop from '@/scripts/interfaces/TrainStop';
 
 export default defineComponent({
   components: { SelectBox },
@@ -143,6 +157,7 @@ export default defineComponent({
   props: {
     station: {
       type: Object as () => Station,
+      required: true,
     },
     timetableOnly: {
       type: Boolean,
@@ -154,6 +169,7 @@ export default defineComponent({
     listOpen: false,
     icons: {
       warning: require('@/assets/icon-warning.svg'),
+      timetable: require('@/assets/icon-timetable.svg'),
     },
   }),
 
@@ -282,10 +298,10 @@ h3 {
     a {
       display: flex;
     }
+  }
 
-    img {
-      cursor: pointer;
-    }
+  &-count {
+    margin-left: 0.5em;
   }
 
   &-item {
@@ -356,7 +372,7 @@ h3 {
 
   font-size: 1.2em;
 
-  > .checkpoint_item {
+  .checkpoint_item {
     &.current {
       font-weight: bold;
       color: $accentCol;
@@ -417,7 +433,8 @@ h3 {
 }
 
 .general-status {
-  margin-left: 0.5em;
+  margin-left: 1em;
+  text-align: right;
 
   span.arriving {
     color: #aaa;
@@ -464,8 +481,8 @@ h3 {
     flex-direction: column;
 
     .stop-time {
-      font-size: 0.7em;
-      margin: 5px 0;
+      font-size: 0.85em;
+      margin: 0.5em 0;
     }
   }
 }
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 9981fb7..bae47ba 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -1,4 +1,4 @@
-<template>
+p<template>
   <div class="train-schedule" @click="toggleShowState">
     <div class="schedule-wrapper">
       <ul class="stop_list">
diff --git a/src/scripts/interfaces/ScheduledTrain.ts b/src/scripts/interfaces/ScheduledTrain.ts
index 5c4cd08..079a42a 100644
--- a/src/scripts/interfaces/ScheduledTrain.ts
+++ b/src/scripts/interfaces/ScheduledTrain.ts
@@ -11,7 +11,9 @@ export default interface ScheduledTrain {
 
     terminatesAt: string;
     beginsAt: string;
-    nearestStop: string;
+
+    prevStationName: string;
+    nextStationName: string;
 
     stopLabel: string;
     stopStatus: string;
diff --git a/src/scripts/utils/storeUtils.ts b/src/scripts/utils/storeUtils.ts
index 661480f..7ecea3c 100644
--- a/src/scripts/utils/storeUtils.ts
+++ b/src/scripts/utils/storeUtils.ts
@@ -1,3 +1,4 @@
+import ScheduledTrain from "../interfaces/ScheduledTrain";
 import Train from "../interfaces/Train";
 import TrainStop from "../interfaces/TrainStop";
 
@@ -106,10 +107,29 @@ export const getTrainStopStatus = (stopInfo: TrainStop, currentStationName: stri
 };
 
 
-export function getScheduledTrain(train: Train, trainStop: TrainStop, stationName: string) {
+export function getScheduledTrain(train: Train, trainStopIndex: number, stationName: string): ScheduledTrain {
   const timetable = train.timetableData!;
+  const followingStops = timetable.followingStops;
+  const trainStop = followingStops[trainStopIndex];
+
   const trainStopStatus = getTrainStopStatus(trainStop, train.currentStationName, stationName);
 
+  let prevStationName = "", nextStationName = "";  
+
+  for (let i = trainStopIndex - 1; i >= 0; i--) {
+    if (followingStops[i].stopName.startsWith("<strong>")) {
+      prevStationName = followingStops[i].stopNameRAW;
+      break;
+    }
+  }
+
+  for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
+    if (followingStops[i].stopName.startsWith("<strong>")) {
+      nextStationName = followingStops[i].stopNameRAW;
+      break;
+    }
+  }
+
   return {
     trainNo: train.trainNo,
     driverName: train.driverName,
@@ -119,7 +139,10 @@ export function getScheduledTrain(train: Train, trainStop: TrainStop, stationNam
     category: timetable.category,
     beginsAt: timetable.followingStops[0].stopNameRAW,
     terminatesAt: timetable.followingStops[timetable.followingStops.length - 1].stopNameRAW,
-    nearestStop: "",
+    
+    nextStationName,
+    prevStationName,
+
     stopInfo: trainStop,
     stopLabel: trainStopStatus.stopLabel,
     stopStatus: trainStopStatus.stopStatus,
diff --git a/src/store/index.ts b/src/store/index.ts
index 1c9bbe0..3141aaf 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,13 +5,10 @@ import { createStore, useStore as baseUseStore, Store } from 'vuex'
 
 import axios from "axios";
 
-import Station from "@/scripts/interfaces/Station";
 import Train from "@/scripts/interfaces/Train";
 
 import { StoreData } from "@/scripts/interfaces/StoreData";
 
-import StationAPIData from '@/scripts/interfaces/api/StationAPIData';
-import TrainAPIData from '@/scripts/interfaces/api/TrainAPIData';
 
 import { ACTIONS, MUTATIONS } from "@/constants/storeConstants";
 import { DataStatus } from "@/scripts/enums/DataStatus";
@@ -20,68 +17,10 @@ import { getLocoURL, getScheduledTrain, getStatusID, getStatusTimestamp, parseSp
 import { URLs } from '@/scripts/utils/apiURLs';
 import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
 import StationRoutes from '@/scripts/interfaces/StationRoutes';
-import { connect, io, Socket } from 'socket.io-client';
-
-const connectToDevAPI = true;
-
-
-
-export interface State {
-  stationList: Station[],
-  trainList: Train[],
-
-  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string; }[],
-
-  sceneryData: any[][],
-
-  region: { id: string; value: string };
-  trainCount: number;
-  stationCount: number;
-
-  dataConnectionStatus: DataStatus;
-  webSocket?: Socket;
-
-  sceneryDataStatus: DataStatus;
-  timetableDataStatus: DataStatus;
-  dispatcherDataStatus: DataStatus;
-  trainsDataStatus: DataStatus;
-
-  listenerLaunched: boolean;
-}
-
-interface APIData {
-  stations?: StationAPIData[],
-  dispatchers?: string[][],
-  trains?: TrainAPIData[],
-
-  stationsSWDRStatus: string;
-  trainsSWDRStatus: string;
-  dispatchersSWDRStatus: string;
-}
-
-interface StationJSONData {
-  name: string;
-  url: string;
-  lines: string;
-  project: string;
-
-  reqLevel: number;
-
-  // supportersOnly: boolean;
-
-  signalType: string;
-  controlType: string;
-
-  SUP: boolean;
-
-  routes: string;
-  checkpoints: string | null;
-
-  default: boolean;
-  nonPublic: boolean;
-  unavailable: boolean;
-}
+import { io } from 'socket.io-client';
+import { APIData, State, StationJSONData } from './types';
 
+const connectToDevAPI = false;
 
 export const key: InjectionKey<Store<State>> = Symbol()
 
@@ -269,18 +208,22 @@ export const store = createStore<State>({
 
           if (stopInfoIndex == -1) return acc;
 
-          const trainStop = timetable.followingStops[stopInfoIndex];
-          const scheduledStopTrain = getScheduledTrain(train, trainStop, stationAPI.stationName);
+          const scheduledStopTrain = getScheduledTrain(train, stopInfoIndex, stationAPI.stationName);
 
           if (station && station.generalInfo?.checkpoints && station.generalInfo.checkpoints.length > 0) {
             for (const checkpoint of station.generalInfo.checkpoints) {
-              timetable.followingStops
-                .filter(trainStop => trainStop.stopNameRAW.toLowerCase() === checkpoint.checkpointName.toLowerCase())
-                .forEach(trainCheckpointStop => {
-                  const scheduledCheckpointTrain = getScheduledTrain(train, trainCheckpointStop, stationAPI.stationName);
+              const index = timetable.followingStops.findIndex(stop => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase());
+              
+              if (index == -1) continue;
+              
+              const scheduledCheckpointTrain = getScheduledTrain(train, index, stationAPI.stationName);
+              checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
 
-                  checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
-                });
+              // timetable.followingStops
+                // .filter(trainStop => trainStop.stopNameRAW.toLowerCase() === checkpoint.checkpointName.toLowerCase())
+                // .forEach((trainCheckpointStop, i) => {
+
+                // });
             }
           }
 
diff --git a/src/store/types.ts b/src/store/types.ts
new file mode 100644
index 0000000..5439ec1
--- /dev/null
+++ b/src/store/types.ts
@@ -0,0 +1,62 @@
+import { DataStatus } from "@/scripts/enums/DataStatus";
+import StationAPIData from "@/scripts/interfaces/api/StationAPIData";
+import TrainAPIData from "@/scripts/interfaces/api/TrainAPIData";
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+import { Socket } from "socket.io-client";
+
+export interface State {
+    stationList: Station[],
+    trainList: Train[],
+
+    lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string; }[],
+
+    sceneryData: any[][],
+
+    region: { id: string; value: string };
+    trainCount: number;
+    stationCount: number;
+
+    dataConnectionStatus: DataStatus;
+    webSocket?: Socket;
+
+    sceneryDataStatus: DataStatus;
+    timetableDataStatus: DataStatus;
+    dispatcherDataStatus: DataStatus;
+    trainsDataStatus: DataStatus;
+
+    listenerLaunched: boolean;
+}
+
+export interface APIData {
+    stations?: StationAPIData[],
+    dispatchers?: string[][],
+    trains?: TrainAPIData[],
+
+    stationsSWDRStatus: string;
+    trainsSWDRStatus: string;
+    dispatchersSWDRStatus: string;
+}
+
+export interface StationJSONData {
+    name: string;
+    url: string;
+    lines: string;
+    project: string;
+
+    reqLevel: number;
+
+    // supportersOnly: boolean;
+
+    signalType: string;
+    controlType: string;
+
+    SUP: boolean;
+
+    routes: string;
+    checkpoints: string | null;
+
+    default: boolean;
+    nonPublic: boolean;
+    unavailable: boolean;
+}
\ No newline at end of file
diff --git a/src/styles/responsive.scss b/src/styles/responsive.scss
index 12cd9c0..76fbc8f 100644
--- a/src/styles/responsive.scss
+++ b/src/styles/responsive.scss
@@ -6,7 +6,7 @@
 
 
 @mixin midScreen() {
-    @media only screen and (max-width: 950px) {
+    @media only screen and (max-width: 1150px) {
         @content;
     }
 }
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index e5f08d8..0721ba1 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -183,7 +183,7 @@ $sceneryBgCol: #333;
     position: relative;
 
     width: 75%;
-    max-width: 950px;
+    max-width: 1200px;
 
     @include midScreen {
       width: 95%;
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 97ce7ec..8a70144 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -11,16 +11,6 @@
             @resetFilters="resetFilters"
             ref="filterCardRef"
           />
-
-          <div class="paypal-link">
-            <a target="_blank" href="https://paypal.me/spythere">
-              <img
-                src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
-                alt="PayPal image"
-                style="width: 7em"
-              />
-            </a>
-          </div>
         </div>
 
         <StationTable
@@ -199,21 +189,6 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-.paypal-link {
-  flex-grow: 2;
-  text-align: right;
-
-  img {
-    vertical-align: middle;
-    border-radius: 0.5em;
-    transition: box-shadow 150ms;
-  }
-
-  a:hover img,
-  a:focus img {
-    box-shadow: 0 0 10px 4px #04477e;
-  }
-}
 
 @include smallScreen {
   .options-bar {