From 45f9d1e68bbb2bdf816174165ad97e70534ae0e4 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 8 Jul 2022 20:57:25 +0200
Subject: [PATCH 1/7] Fix: ikonka braku danych w widoku scenerii

---
 .../SceneryInfo/SceneryInfoIcons.vue          | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
index 1d307d0..a5f99d8 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
@@ -1,6 +1,7 @@
 <template>
-  <section class="info-icons" v-if="station.generalInfo">
+  <section class="info-icons">
     <span
+      v-if="station.generalInfo"
       class="scenery-icon icon-info"
       :class="station.generalInfo.controlType.replace('+', '-')"
       :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
@@ -9,54 +10,60 @@
     </span>
 
     <img
+      v-if="station.generalInfo?.SUP"
       class="icon-info"
-      v-if="station.generalInfo.SUP"
       :src="require(`@/assets/icon-SUP.svg`)"
       alt="SUP (RASP-UZK)"
       :title="$t('desc.SUP')"
     />
 
     <img
+      v-if="station.generalInfo?.signalType"
       class="icon-info"
-      v-if="station.generalInfo.signalType"
       :src="require(`@/assets/icon-${station.generalInfo.signalType}.svg`)"
       :alt="station.generalInfo.signalType"
       :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
     />
 
     <img
+      v-if="station.generalInfo?.availability == 'nonPublic'"
       class="icon-info"
-      v-if="station.generalInfo.availability == 'nonPublic'"
       :src="icons.lock"
       alt="Non-public scenery"
       :title="$t('desc.non-public')"
     />
 
     <img
+      v-if="station.generalInfo?.availability == 'unavailable'"
       class="icon-info"
-      v-if="station.generalInfo.availability == 'unavailable'"
       :src="icons.unavailable"
       alt="Unavailable scenery"
       :title="$t('desc.unavailable')"
     />
 
     <img
+      v-if="station.generalInfo?.availability == 'abandoned'"
       class="icon-info"
-      v-if="station.generalInfo.availability == 'abandoned'"
       :src="icons.abandoned"
       alt="Abandoned scenery"
       :title="$t('desc.abandoned')"
     />
 
     <img
+      v-if="station.generalInfo?.lines"
       class="icon-info"
-      v-if="station.generalInfo && station.generalInfo.lines != ''"
       :src="icons.real"
       alt="real scenery"
       :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
     />
 
-    <img v-if="!station.generalInfo" :src="icons.unknown" alt="icon-unknown" :title="$t('desc.unknown')" />
+    <img
+      v-if="!station.generalInfo"
+      class="icon-info"
+      :src="icons.unknown"
+      alt="icon-unknown"
+      :title="$t('desc.unknown')"
+    />
   </section>
 </template>
 

From c6938821c3ac2e95333c18451eddd0df86d59395 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 9 Jul 2022 00:12:34 +0200
Subject: [PATCH 2/7] =?UTF-8?q?Zmiana=20w=20u=C5=82o=C5=BCeniu=20element?=
 =?UTF-8?q?=C3=B3w=20w=20widoku=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SceneryView/SceneryHeader.vue  |   7 --
 src/components/SceneryView/SceneryInfo.vue    |  20 +++-
 .../SceneryView/SceneryTimetable.vue          |  25 +++--
 src/store/store.ts                            |   2 +-
 src/views/SceneryView.vue                     | 106 ++++++++++--------
 5 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/src/components/SceneryView/SceneryHeader.vue b/src/components/SceneryView/SceneryHeader.vue
index cc34997..916c825 100644
--- a/src/components/SceneryView/SceneryHeader.vue
+++ b/src/components/SceneryView/SceneryHeader.vue
@@ -37,10 +37,6 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 
-.info-header {
-  padding-top: 2em;
-}
-
 .scenery-name {
   font-weight: bold;
   color: $accentCol;
@@ -48,7 +44,6 @@ export default defineComponent({
   position: relative;
 
   font-size: 3.5em;
-  margin-top: 0.25em;
 
   text-transform: uppercase;
 
@@ -63,11 +58,9 @@ export default defineComponent({
 
   position: absolute;
   top: 0;
-
 }
 
 .scenery-authors {
   color: #999;
 }
 </style>
-
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 8e712ec..2d4bcc1 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -20,6 +20,12 @@
         <!-- spawn list -->
         <scenery-info-spawn-list :station="station" />
       </div>
+
+      <div class="info-actions">
+        <button class="btn btn--option">Pokaż historię obecnego dyżurnego</button>
+        <button class="btn btn--option">Pokaż historię dyżurów tej scenerii</button>
+        <button class="btn btn--option">Pokaż temat forum scenerii</button>
+      </div>
     </section>
   </div>
 </template>
@@ -81,10 +87,22 @@ h3.section-header {
 
 .info-lists {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   justify-content: space-around;
 }
 
+.info-actions {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 1em;
+
+  .btn {
+    margin: 0.5em;
+    box-shadow: 0 0 10px 4px #242424;
+  }
+}
+
 .badge {
   font-weight: 600;
 
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 03a6ab5..dd81bb8 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -30,7 +30,7 @@
     </div>
 
     <transition name="scenery-timetable-list-anim" mode="out-in">
-      <div :key="store.dataStatuses.trains + selectedCheckpoint">
+      <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>
@@ -63,11 +63,11 @@
                   <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}`) }}
@@ -272,15 +272,13 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 
 h3.timetable-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 
   font-size: 1.5em;
+  margin: 1em 0;
 
   a {
     display: flex;
@@ -318,6 +316,13 @@ h3.timetable-header {
   }
 }
 
+.scenery-timetable-list {
+  max-height: 75vh;
+  overflow: auto;
+
+  padding: 0 0.5em;
+}
+
 .timetable {
   &-count {
     margin-left: 0.5em;
@@ -358,7 +363,6 @@ h3.timetable-header {
   &-schedule {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
-    font-size: 1.15em;
   }
 }
 
@@ -367,8 +371,8 @@ h3.timetable-header {
   justify-content: center;
 
   flex-wrap: wrap;
-
-  font-size: 1.2em;
+  font-size: 1.1em;
+  margin: 0.75em 0;
 
   .checkpoint_item {
     &.current {
@@ -412,6 +416,9 @@ h3.timetable-header {
 }
 
 .general-info {
+  display: flex;
+  flex-wrap: wrap;
+
   .info-number {
     color: $accentCol;
   }
diff --git a/src/store/store.ts b/src/store/store.ts
index 1b8c439..865e427 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -344,6 +344,7 @@ export const useStore = defineStore('store', {
 
       socket.on('UPDATE', (data: APIData) => {
         this.apiData = data;
+        this.dataStatuses.connection = DataStatus.Loaded;
         this.setOnlineData();
       });
 
@@ -353,7 +354,6 @@ export const useStore = defineStore('store', {
       });
 
       this.webSocket = socket;
-      this.dataStatuses.connection = DataStatus.Loaded;
     },
 
     async connectToAPI() {
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index d663637..1ad9aad 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -9,31 +9,37 @@
     </div>
 
     <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
-      <button
-        v-if="!timetableOnly"
-        class="back-btn btn btn--image"
-        :title="$t('scenery.return-btn')"
-        @click="navigateTo('/')"
-      >
-        <img :src="icons.back" alt="Back to scenery" />
-      </button>
+      <div class="scenery-left">
+        <div class="scenery-actions">
+          <button
+            v-if="!timetableOnly"
+            class="back-btn btn btn--image"
+            :title="$t('scenery.return-btn')"
+            @click="navigateTo('/')"
+          >
+            <img :src="icons.back" alt="Back to scenery" />
+          </button>
 
-      <button
-        v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
-        class="history-btn btn btn--image"
-        @click="
-          navigateTo('/journal/dispatchers', {
-            sceneryName: stationInfo?.name,
-          })
-        "
-      >
-        <img :src="viewMode == 'history' ? icons.user : icons.history" alt="icon" />
-      </button>
+          <!-- <button
+            v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
+            class="history-btn btn btn--image"
+            @click="
+              navigateTo('/journal/dispatchers', {
+                sceneryName: stationInfo?.name,
+              })
+            "
+          >
+            <img :src="viewMode == 'history' ? icons.user : icons.history" alt="icon" />
+          </button> -->
+        </div>
 
-      <SceneryHeader :station="stationInfo" />
+        <SceneryHeader :station="stationInfo" />
+        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+      </div>
 
-      <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
-      <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+      <div class="scenery-right">
+        <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+      </div>
     </div>
   </div>
 </template>
@@ -121,8 +127,6 @@ $sceneryBgCol: #333;
 
 .scenery {
   &-view {
-    min-height: 550px;
-
     display: flex;
     justify-content: center;
   }
@@ -142,42 +146,52 @@ $sceneryBgCol: #333;
       margin: 1em auto;
     }
   }
+}
 
-  &-wrapper {
-    position: relative;
+.scenery-wrapper {
+  display: grid;
+  grid-template-columns: 4fr 5fr;
+  gap: 0 1em;
 
-    width: 100%;
-    max-width: 1100px;
+  position: relative;
 
-    @include midScreen {
-      width: 100%;
-    }
+  width: 100%;
+  max-width: 1500px;
 
-    background: #292929;
-    padding: 1em;
-    margin: 1rem 0;
+  background: #292929;
+  padding: 1.5em;
+  margin: 1rem 0;
 
-    border-radius: 1.5em;
+  border-radius: 1.5em;
 
-    text-align: center;
-  }
+  text-align: center;
+}
+
+.scenery-left {
+  height: 80vh;
+  max-height: 1000px;
+}
+
+.scenery-actions {
+  display: flex;
+  justify-content: space-between;
 }
 
 button.btn {
-  position: absolute;
-  padding: 0.25em;
-
-  top: 0.5em;
   img {
     width: 2em;
   }
 }
 
-button.history-btn {
-  right: 0.5em;
-}
+@include midScreen {
+  .scenery-wrapper {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
 
-button.back-btn {
-  left: 0.5em;
+  .scenery-left { 
+    height: auto;
+    margin-bottom: 2em;
+  }
 }
 </style>

From 29e9924339041d0088701655e86a27a57ed509b0 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 9 Jul 2022 20:24:57 +0200
Subject: [PATCH 3/7] Aktualizacja widoku scenerii

---
 src/assets/icon-track-catenary.svg            |   3 -
 src/assets/icon-track-nocatenary.svg          |   4 -
 src/assets/icon-track-sbl.svg                 |   5 -
 src/assets/icon-track-twb.svg                 |   3 -
 src/components/SceneryView/SceneryHeader.vue  |  18 +-
 src/components/SceneryView/SceneryInfo.vue    |  80 +++--
 .../SceneryInfo/SceneryInfoIcons.vue          |  22 +-
 .../SceneryInfo/SceneryInfoRoutes.vue         | 109 +++---
 .../SceneryView/SceneryTimetable.vue          | 336 ++++++++----------
 src/locales/en.json                           |  17 +-
 src/locales/pl.json                           |  25 +-
 src/styles/global.scss                        |  33 +-
 src/views/SceneryView.vue                     | 136 ++++---
 13 files changed, 436 insertions(+), 355 deletions(-)
 delete mode 100644 src/assets/icon-track-catenary.svg
 delete mode 100644 src/assets/icon-track-nocatenary.svg
 delete mode 100644 src/assets/icon-track-sbl.svg
 delete mode 100644 src/assets/icon-track-twb.svg

diff --git a/src/assets/icon-track-catenary.svg b/src/assets/icon-track-catenary.svg
deleted file mode 100644
index 269d00b..0000000
--- a/src/assets/icon-track-catenary.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M77.9831 61.3284L97.9732 7L44 74.9104H69.9871L51.996 137L99.9722 61.3284H77.9831Z" fill="#FFF500"/>
-</svg>
diff --git a/src/assets/icon-track-nocatenary.svg b/src/assets/icon-track-nocatenary.svg
deleted file mode 100644
index 86ee926..0000000
--- a/src/assets/icon-track-nocatenary.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M77.9831 61.3284L97.9732 7L44 74.9104H69.9871L51.996 137L99.9722 61.3284H77.9831Z" fill="#FFF500"/>
-<path d="M46 19L98.4444 123.889" stroke="#FF0000" stroke-width="6.33884" stroke-linecap="round"/>
-</svg>
diff --git a/src/assets/icon-track-sbl.svg b/src/assets/icon-track-sbl.svg
deleted file mode 100644
index 0623109..0000000
--- a/src/assets/icon-track-sbl.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 50.006 87.4256)" stroke="white" stroke-width="13.3959"/>
-<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 14.9599 29.6039)" stroke="white" stroke-width="13.3959"/>
-<path d="M65.1132 58.145L79.8523 84.3103" stroke="white" stroke-width="10.0469" stroke-linecap="round" stroke-linejoin="bevel"/>
-</svg>
diff --git a/src/assets/icon-track-twb.svg b/src/assets/icon-track-twb.svg
deleted file mode 100644
index 2f7e7e9..0000000
--- a/src/assets/icon-track-twb.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.19995 72L44.3741 93.9988L44.8386 50.8056L7.19995 72ZM139.192 73.4193L102.018 51.4204L101.554 94.6137L139.192 73.4193ZM40.8255 76.1026L105.486 76.7979L105.567 69.3166L40.9059 68.6214L40.8255 76.1026Z" fill="white"/>
-</svg>
diff --git a/src/components/SceneryView/SceneryHeader.vue b/src/components/SceneryView/SceneryHeader.vue
index 916c825..be5eb8c 100644
--- a/src/components/SceneryView/SceneryHeader.vue
+++ b/src/components/SceneryView/SceneryHeader.vue
@@ -3,18 +3,12 @@
     <div class="scenery-name">
       <a v-if="station.generalInfo?.url" :href="station.generalInfo.url" target="_blank" rel="noopener noreferrer">
         {{ station.name }}
-        <sup v-if="station.generalInfo?.project" style="color: salmon; font-size: 0.5em; vertical-align: text-top">
-          {{ station.generalInfo.project }}
-        </sup>
       </a>
 
       <span v-else>{{ station.name }}</span>
     </div>
 
-    <div class="scenery-authors" v-if="station.generalInfo?.authors">
-      Autorzy: {{ station.generalInfo?.authors?.join(', ') }}
-    </div>
-    <!-- <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div> -->
+    <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
   </section>
 </template>
 
@@ -44,6 +38,7 @@ export default defineComponent({
   position: relative;
 
   font-size: 3.5em;
+  padding: 0 0.5em;
 
   text-transform: uppercase;
 
@@ -54,13 +49,6 @@ export default defineComponent({
 
 .scenery-hash {
   color: #aaa;
-  font-size: 0.3em;
-
-  position: absolute;
-  top: 0;
-}
-
-.scenery-authors {
-  color: #999;
+  font-size: 1.2em;
 }
 </style>
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 2d4bcc1..9ec0163 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -1,15 +1,48 @@
 <template>
   <div class="scenery-info">
     <section v-if="!timetableOnly">
+      <div class="info-general" v-if="station.generalInfo">
+        <scenery-info-icons :station="station" />
+
+        <div class="general-list">
+          <span>
+            <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
+
+            <span v-if="station.generalInfo.reqLevel > 0">
+              - minimum {{ station.generalInfo.reqLevel }} poziom dyżurnego
+            </span>
+            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span>
+          </span>
+
+          <span>
+            &bull; <b>{{ $t('controls.title') }}:</b> {{ $t(`controls.${station.generalInfo.controlType}`) }}
+          </span>
+
+          <span>
+            &bull; <b>{{ $t('signals.title') }}:</b> {{ $t(`signals.${station.generalInfo.signalType}`) }}
+          </span>
+
+          <span v-if="station.generalInfo.lines">
+            &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+          </span>
+          <span v-if="station.generalInfo.project">
+            &bull; <b>{{ $t('scenery.project-title') }}: </b>
+            <b style="color: salmon">{{ station.generalInfo.project }}</b>
+          </span>
+        </div>
+
+        <scenery-info-routes :station="station" />
+
+        <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
+          <b> {{ $tc('scenery.authors-title', station.generalInfo.authors.length) }}: </b>
+          {{ station.generalInfo.authors.join(', ') }}
+        </div>
+      </div>
+
+      <div style="margin: 2em 0; height: 2px; background-color: white" />
+
       <!-- info stats -->
       <!-- <scenery-info-stats :station="station" /> -->
-
-      <!-- info icons -->
-      <scenery-info-icons :station="station" />
-
-      <!-- info routes -->
-      <scenery-info-routes :station="station" />
-
       <!-- info dispatcher -->
       <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />
 
@@ -21,11 +54,9 @@
         <scenery-info-spawn-list :station="station" />
       </div>
 
-      <div class="info-actions">
-        <button class="btn btn--option">Pokaż historię obecnego dyżurnego</button>
-        <button class="btn btn--option">Pokaż historię dyżurów tej scenerii</button>
-        <button class="btn btn--option">Pokaż temat forum scenerii</button>
-      </div>
+      <!-- info icons -->
+
+      <!-- info routes -->
     </section>
   </div>
 </template>
@@ -86,20 +117,25 @@ h3.section-header {
 }
 
 .info-lists {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  justify-content: space-around;
-}
-
-.info-actions {
   display: flex;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: space-around;
 
   margin-top: 1em;
+}
 
-  .btn {
-    margin: 0.5em;
-    box-shadow: 0 0 10px 4px #242424;
+.info-general {
+  margin-top: 1em;
+  font-size: 1.1em;
+}
+
+.general-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  span {
+    margin: 0 0.15em;
   }
 }
 
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
index a5f99d8..71411e3 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
@@ -1,5 +1,13 @@
 <template>
   <section class="info-icons">
+    <span
+      v-if="station.generalInfo && station.generalInfo.reqLevel >= 0"
+      class="scenery-icon icon-info level"
+      :style="calculateExpStyle(station.generalInfo.reqLevel)"
+    >
+      {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+    </span>
+
     <span
       v-if="station.generalInfo"
       class="scenery-icon icon-info"
@@ -72,9 +80,10 @@ import { defineComponent } from 'vue';
 import stationInfoMixin from '@/mixins/stationInfoMixin';
 
 import Station from '@/scripts/interfaces/Station';
+import styleMixin from '@/mixins/styleMixin';
 
 export default defineComponent({
-  mixins: [stationInfoMixin],
+  mixins: [stationInfoMixin, styleMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -101,6 +110,9 @@ export default defineComponent({
 .info-icons {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+
+  margin: 1em;
 }
 .icon-info {
   display: flex;
@@ -108,11 +120,13 @@ export default defineComponent({
   align-items: center;
 
   width: 3em;
-  font-size: 1.2em;
-
-  margin: 1em 0.5em;
+  margin: 0.25em;
 
   border: 2px solid #4e4e4e;
   border-radius: 0.5em;
+
+  &.level {
+    border-radius: 50%;
+  }
 }
 </style>
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
index 71dde25..14660b2 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
@@ -1,24 +1,49 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div
+    <div class="routes one-way" v-if="station.generalInfo.routes.oneWay.length > 0">
+      <b>{{ $t('scenery.one-way-routes') }}</b>
+
+      <ul class="routes-list">
+        <li
+          v-for="route in station.generalInfo.routes.oneWay"
+          :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
+        >
+          {{ route.name }}
+          <b v-if="route.SBL">SBL</b>
+        </li>
+      </ul>
+    </div>
+
+    <div class="routes two-way" v-if="station.generalInfo.routes.twoWay.length > 0">
+      <b>{{ $t('scenery.two-way-routes') }}</b>
+
+      <ul class="routes-list">
+        <li
+          v-for="route in station.generalInfo.routes.twoWay"
+          :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
+        >
+          {{ route.name }} <b v-if="route.SBL">SBL</b>
+        </li>
+      </ul>
+    </div>
+
+    <!-- <div
       class="route-info"
       :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
       v-for="route in [...station.generalInfo.routes.oneWay, ...station.generalInfo.routes.twoWay].filter(
         (route) => route.name != '-'
       )"
       :key="route.name"
-      :title="
-        `Szlak ${route.name}: ${route.isInternal ? 'wewnętrzny' : 'zewnętrzny'}, ${
-          route.tracks == 2 ? 'dwutorowy' : 'jednotorowy'
-        }, ${route.catenary ? 'zelektryfikowany' : 'niezelektryfikowany'} z ${route.SBL ? 'SBL' : 'PBL'} ${
-          route.TWB ? 'i blokadą dwukierunkową' : ''
-        }`
-      "
-    >
-      <span class="track-name">
+      :title="`Szlak ${route.name}: ${route.isInternal ? 'wewnętrzny' : 'zewnętrzny'}, ${
+        route.tracks == 2 ? 'dwutorowy' : 'jednotorowy'
+      }, ${route.catenary ? 'zelektryfikowany' : 'niezelektryfikowany'} z ${route.SBL ? 'SBL' : 'PBL'} ${
+        route.TWB ? 'i blokadą dwukierunkową' : ''
+      }`"
+    > -->
+    <!-- <span class="track-name">
         <b>{{ route.name }}</b>
-      </span>
-
+      </span> -->
+    <!--
       <span class="track-specs">
         {{ route.tracks }}tor
         <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary" />
@@ -26,8 +51,8 @@
 
         <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
         <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
-      </span>
-    </div>
+      </span> -->
+    <!-- </div> -->
   </section>
 </template>
 
@@ -42,52 +67,48 @@ export default defineComponent({
       default: {},
     },
   },
-
-  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'),
-      },
-    };
-  },
 });
 </script>
 
 <style lang="scss" scoped>
 .info-routes {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
+  flex-wrap: wrap;
 
-  padding: 1em 3em;
+  margin: 1em 0;
 }
 
-.route-info {
-  margin: 0.45em 0.25em;
-  font-size: 1.05em;
-  cursor: help;
+.routes {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 
-  span {
-    height: 100%;
-    background-color: #009dce;
+  padding: 0.25em;
+}
+
+ul.routes-list {
+  margin: 0.45em 0.25em;
+  display: flex;
+
+  li {
+    background-color: #007599;
 
     padding: 0.2em 0.25em;
-  }
+    margin-left: 0.25em;
 
-  &.no-catenary > span {
-    background-color: #686868;
-  }
+    &.no-catenary {
+      background-color: #686868;
+    }
 
-  &.internal > .track-name {
-    text-decoration: underline;
-  }
+    &.internal {
+      text-decoration: underline;
+    }
 
-  img {
-    height: 1.2em;
-    vertical-align: text-bottom;
+    b {
+      color: var(--clr-primary);
+    }
   }
 }
 </style>
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index dd81bb8..e715d9b 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -1,23 +1,6 @@
 <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>
-    </h3>
-
-    <div class="checkpoints" v-if="station && station.generalInfo?.checkpoints">
+    <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
       <button
         v-for="cp in station.generalInfo.checkpoints"
         :key="cp.checkpointName"
@@ -29,134 +12,135 @@
       </button>
     </div>
 
-    <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>
+    <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>
 
-        <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
-          {{ $t('scenery.no-timetables') }}
+      <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
+        {{ $t('scenery.no-timetables') }}
+      </span>
+
+      <div
+        class="timetable-item"
+        v-for="(scheduledTrain, i) in computedScheduledTrains"
+        :key="i + 1"
+        tabindex="0"
+        @click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
+        @keydown.enter="
+          navigateTo('/trains', {
+            trainNo: scheduledTrain.trainNo,
+            driverName: scheduledTrain.driverName,
+          })
+        "
+      >
+        <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="icons.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>
 
-        <div
-          class="timetable-item"
-          v-for="(scheduledTrain, i) in computedScheduledTrains"
-          :key="i + 1"
-          tabindex="0"
-          @click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
-          @keydown.enter="
-            navigateTo('/trains', {
-              trainNo: scheduledTrain.trainNo,
-              driverName: scheduledTrain.driverName,
-            })
-          "
-        >
-          <span class="timetable-general">
-            <span class="general-info">
-              <span class="info-number">
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
+        <span class="timetable-schedule">
+          <span class="schedule-arrival">
+            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+              {{ $t('timetables.begins') }}
+            </span>
 
-                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
-                  <img :src="icons.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>
+            <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>
 
-              <div class="info-route">
-                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+                <span>
+                  {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
+                  ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                </span>
               </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 class="schedule-stop">
+            <span class="stop-time">
+              <span v-if="scheduledTrain.stopInfo.stopTime">
+                {{ scheduledTrain.stopInfo.stopTime }}
+                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
               </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>
-                </div>
-              </span>
+              <span v-else>&nbsp;</span>
             </span>
 
-            <span class="schedule-stop">
-              <span class="stop-time">
-                <span v-if="scheduledTrain.stopInfo.stopTime">
-                  {{ scheduledTrain.stopInfo.stopTime }}
-                  {{ scheduledTrain.stopInfo.stopType || 'pt' }}
-                </span>
+            <span class="arrow"></span>
 
-                <span v-else>&nbsp;</span>
-              </span>
-
-              <span class="arrow"></span>
-
-              <span class="stop-line">
-                {{ scheduledTrain.arrivingLine }}
-                {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '&gt;' }}
-                {{ scheduledTrain.departureLine }}
-              </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 class="stop-line">
+              {{ scheduledTrain.arrivingLine }}
+              {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '&gt;' }}
+              {{ scheduledTrain.departureLine }}
             </span>
           </span>
-        </div>
+
+          <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>
       </div>
-    </transition>
+    </div>
+
+    <!-- </transition> -->
   </div>
 </template>
 
@@ -271,58 +255,27 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
 
-h3.timetable-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-
-  font-size: 1.5em;
-  margin: 1em 0;
-
-  a {
-    display: flex;
-  }
-
-  img {
-    width: 1.2em;
-  }
-}
-
-.timetable-only {
-  margin-left: 0.5em;
-
-  img {
-    width: 1.1em;
-  }
-
-  &:focus {
-    outline: 1px solid white;
-  }
-}
-
-.scenery-timetable-list-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
-  }
-}
-
-.scenery-timetable-list {
-  max-height: 75vh;
-  overflow: auto;
+// .scenery-timetable {
+//   height: 85vh;
+//   max-height: 900px;
+//   min-height: 450px;
+// }
 
+.scenery-timetable {
+  height: 100%;
+  overflow-y: scroll;
   padding: 0 0.5em;
 }
 
+.timetable-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.3em;
+  margin-top: 1em;
+}
+
 .timetable {
   &-count {
     margin-left: 0.5em;
@@ -366,13 +319,19 @@ h3.timetable-header {
   }
 }
 
-.checkpoints {
+.timetable-checkpoints {
   display: flex;
   justify-content: center;
 
   flex-wrap: wrap;
   font-size: 1.1em;
-  margin: 0.75em 0;
+  padding: 0.75em 0;
+
+  position: sticky;
+  top: 0;
+  z-index: 555;
+
+  background-color: #181818;
 
   .checkpoint_item {
     &.current {
@@ -425,11 +384,14 @@ h3.timetable-header {
 
   .info-route {
     margin-top: 0.5em;
+    width: 100%;
   }
 
   .g-tooltip > .content {
     z-index: 100;
     color: white;
+
+    left: 110%;
   }
 
   img {
@@ -478,6 +440,7 @@ h3.timetable-header {
     align-items: center;
 
     margin: 0 0.3rem;
+    font-size: 1.1em;
   }
 
   &-stop {
@@ -503,6 +466,21 @@ h3.timetable-header {
   font-size: 0.85em;
 }
 
+.scenery-timetable-list-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
 @include smallScreen() {
   .timetable {
     &-item {
diff --git a/src/locales/en.json b/src/locales/en.json
index c4e9bde..208bbba 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -34,12 +34,14 @@
     "real": "Scenery with real lines: "
   },
   "signals": {
+    "title": "Signal type",
     "współczesna": "modern",
     "mieszana": "mixed",
     "kształtowa": "mechanical",
     "historyczna": "historyczna"
   },
   "controls": {
+    "title": "Control type",
     "SPK": "SPK",
     "SCS": "SCS",
     "SCS-SPK": "SCS/SPK",
@@ -241,7 +243,20 @@
     "no-scenery": "Oops! This scenery doesn't exist!",
     "return-btn": "Return to main site",
     "history-btn": "View the dispatcher history",
-    "info-btn": "Return to the scenery view"
+    "info-btn": "Return to the scenery view",
+    "authors-title": "Scenery author | Scenery authors",
+    "lines-title": "Real lines",
+    "project-title": "Project name",
+    "one-way-routes": "One way routes",
+    "two-way-routes": "Two way routes"
+  },
+  "availability": {
+    "title": "Availability",
+    "default": "in-game",
+    "nonDefault": "downloadable",
+    "unavailable": "unavailable",
+    "nonPublic": "private",
+    "abandoned": "abandoned"
   },
   "timetables": {
     "timetable-only": "Switch to timetable-only view",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index f1e32cc..482a967 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -35,22 +35,24 @@
     "abandoned": "Sceneria wycofana z rozgrywki"
   },
   "signals": {
+    "title": "Sygnalizacja",
     "współczesna": "współczesna",
     "mieszana": "mieszana",
     "kształtowa": "kształtowa",
     "historyczna": "historyczna"
   },
   "controls": {
+    "title": "Sterowanie",
     "SPK": "SPK",
     "SCS": "SCS",
     "SCS-SPK": "SCS/SPK",
     "SPE": "SPE",
     "ręczne": "ręczne",
-    "ręczne+SPK": "ręczne + SPK",
-    "ręczne+SCS": "ręczne + SCS",
+    "ręczne+SPK": "ręczne z SPK",
+    "ręczne+SCS": "ręczne z SCS",
     "mechaniczne": "mechaniczne",
-    "mechaniczne+SPK": "mechaniczne + SPK",
-    "mechaniczne+SCS": "mechaniczne + SCS"
+    "mechaniczne+SPK": "mechaniczne z SPK",
+    "mechaniczne+SCS": "mechaniczne z SCS"
   },
   "status": {
     "online": "DO ",
@@ -242,7 +244,20 @@
     "no-scenery": "Ups! Ta sceneria nie istnieje!",
     "return-btn": "Wróć na stronę główną",
     "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
-    "info-btn": "Wróc do widoku scenerii"
+    "info-btn": "Wróc do widoku scenerii",
+    "authors-title": "Autor scenerii | Autorzy scenerii",
+    "lines-title": "Rzeczywiste linie",
+    "project-title": "Projekt",
+    "one-way-routes": "Szlaki jednotorowe",
+    "two-way-routes": "Szlaki dwutorowe"
+  },
+  "availability": {
+    "title": "Dostępność",
+    "default": "w paczce",
+    "nonDefault": "poza paczką",
+    "unavailable": "niedostępna",
+    "nonPublic": "niepubliczna",
+    "abandoned": "wycofana"
   },
   "timetables": {
     "timetable-only": "Wyodrębnij rozkłady jazdy",
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98a3edf..5186acd 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -25,7 +25,6 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   overflow-y: scroll;
-
 }
 
 *:focus-visible {
@@ -59,19 +58,16 @@ body {
 
   .content {
     position: absolute;
-    left: 50%;
-    top: 0;
+    left: 0;
 
     z-index: 100;
 
-    transform: translate(-50%, -120%);
-
     visibility: hidden;
     opacity: 0;
 
     min-width: 250px;
 
-    background-color: gray;
+    background-color: #202020;
     text-align: center;
 
     border-radius: 0.5em;
@@ -79,25 +75,14 @@ body {
     transition: opacity 0.3s;
     padding: 0.25em;
 
-    &::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: gray transparent transparent transparent;
-    }
+    // @include smallScreen() {
+    //   right: 0;
+    //   left: 0;
 
-    @include smallScreen() {
-      right: 0;
-      left: 0;
-
-      &::after {
-        left: 75%;
-      }
-    }
+    //   &::after {
+    //     left: 75%;
+    //   }
+    // }
   }
 
   &:hover > .content {
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 1ad9aad..9ce0e66 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -11,26 +11,9 @@
     <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
       <div class="scenery-left">
         <div class="scenery-actions">
-          <button
-            v-if="!timetableOnly"
-            class="back-btn btn btn--image"
-            :title="$t('scenery.return-btn')"
-            @click="navigateTo('/')"
-          >
+          <button v-if="!timetableOnly" class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
             <img :src="icons.back" alt="Back to scenery" />
           </button>
-
-          <!-- <button
-            v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
-            class="history-btn btn btn--image"
-            @click="
-              navigateTo('/journal/dispatchers', {
-                sceneryName: stationInfo?.name,
-              })
-            "
-          >
-            <img :src="viewMode == 'history' ? icons.user : icons.history" alt="icon" />
-          </button> -->
         </div>
 
         <SceneryHeader :station="stationInfo" />
@@ -38,7 +21,17 @@
       </div>
 
       <div class="scenery-right">
-        <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+        <div class="info-actions">
+          <button class="btn btn--option checked">Aktywne rozkłady jazdy</button>
+          <button class="btn btn--option">Historia rozkładów scenerii</button>
+          <button class="btn btn--option">Historia dyżurów scenerii</button>
+        </div>
+
+        <SceneryTimetable
+          :station="stationInfo"
+          :timetableOnly="timetableOnly"
+          :selectedCheckpoint="selectedCheckpoint"
+        />
       </div>
     </div>
   </div>
@@ -51,7 +44,7 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
-import { computed, defineComponent } from '@vue/runtime-core';
+import { computed, defineComponent, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 
 import { useStore } from '@/store/store';
@@ -69,12 +62,16 @@ export default defineComponent({
       back: require('@/assets/icon-back.svg'),
     },
 
+    selectedCheckpoint: '',
+
     viewMode: 'info',
 
     onlineFrom: -1,
   }),
 
-  activated() {},
+  activated() {
+    this.loadSelectedCheckpoint();
+  },
 
   setup() {
     const route = useRoute();
@@ -100,6 +97,17 @@ export default defineComponent({
     setCardViewMode(mode: string) {
       this.viewMode = mode;
     },
+
+    loadSelectedCheckpoint() {
+      if (!this.stationInfo?.generalInfo?.checkpoints) return;
+      if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
+
+      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
+    },
+
+    selectCheckpoint(cp: { checkpointName: string }) {
+      this.selectedCheckpoint = cp.checkpointName;
+    },
   },
 });
 </script>
@@ -108,20 +116,9 @@ export default defineComponent({
 @import '../styles/responsive.scss';
 @import '../styles/variables.scss';
 
-$sceneryBgCol: #333;
-
-.scenery-view-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
+button.back-btn {
+  img {
+    width: 2em;
   }
 }
 
@@ -129,6 +126,8 @@ $sceneryBgCol: #333;
   &-view {
     display: flex;
     justify-content: center;
+
+    min-height: 100vh;
   }
 
   &-offline {
@@ -156,30 +155,75 @@ $sceneryBgCol: #333;
   position: relative;
 
   width: 100%;
-  max-width: 1500px;
+  max-width: 1700px;
 
-  background: #292929;
-  padding: 1.5em;
+  padding: 1em;
   margin: 1rem 0;
 
-  border-radius: 1.5em;
-
   text-align: center;
 }
 
 .scenery-left {
-  height: 80vh;
+  position: relative;
+  background-color: #181818;
+  padding: 1em 0.5em;
+
+  height: 95vh;
+  min-height: 550px;
   max-height: 1000px;
+
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.scenery-right {
+  background: #181818;
+  padding: 2em 0.5em;
+
+  height: 95vh;
+  min-height: 550px;
+  max-height: 1000px;
+
+  display: grid;
+  grid-template-rows: 50px 1fr;
+  gap: 1em;
 }
 
 .scenery-actions {
   display: flex;
-  justify-content: space-between;
 }
 
-button.btn {
-  img {
-    width: 2em;
+.info-actions {
+  display: flex;
+  justify-content: center;
+
+  .btn {
+    margin: 0.5em;
+    box-shadow: 0 0 10px 4px #242424;
+  }
+}
+
+.timetable-checkpoints {
+  display: flex;
+  justify-content: center;
+
+  flex-wrap: wrap;
+  font-size: 1.1em;
+  margin: 0.75em 0;
+
+  .checkpoint_item {
+    &.current {
+      font-weight: bold;
+      color: $accentCol;
+    }
+
+    &:not(:last-child)::after {
+      margin: 0 0.5em;
+      content: '•';
+      color: white;
+    }
   }
 }
 
@@ -189,7 +233,7 @@ button.btn {
     gap: 0;
   }
 
-  .scenery-left { 
+  .scenery-left {
     height: auto;
     margin-bottom: 2em;
   }

From b246f2d2d7c6b2f963756383583de1e01a9e25db Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 10 Jul 2022 17:02:08 +0200
Subject: [PATCH 4/7] =?UTF-8?q?Dodano=20zak=C5=82adk=C4=99=20z=20histori?=
 =?UTF-8?q?=C4=85=20RJ=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon-history.svg                   |  1 -
 src/components/Global/SelectBox.vue           |  2 +-
 .../SceneryInfo/SceneryInfoUserList.vue       |  1 +
 .../SceneryView/SceneryTimetable.vue          | 75 +++++++++------
 .../SceneryView/SceneryTimetablesHistory.vue  | 95 +++++++++++++++++++
 .../interfaces/api/TimetablesAPIData.ts       |  7 +-
 src/views/SceneryView.vue                     | 84 ++++++++++++----
 7 files changed, 218 insertions(+), 47 deletions(-)
 delete mode 100644 src/assets/icon-history.svg
 create mode 100644 src/components/SceneryView/SceneryTimetablesHistory.vue

diff --git a/src/assets/icon-history.svg b/src/assets/icon-history.svg
deleted file mode 100644
index 634fb64..0000000
--- a/src/assets/icon-history.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg height="21px" version="1.1" viewBox="0 0 20 21" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#ffffff" id="Core" opacity="0.9" transform="translate(-464.000000, -254.000000)"><g id="history" transform="translate(464.000000, 254.500000)"><path d="M10.5,0 C7,0 3.9,1.9 2.3,4.8 L0,2.5 L0,9 L6.5,9 L3.7,6.2 C5,3.7 7.5,2 10.5,2 C14.6,2 18,5.4 18,9.5 C18,13.6 14.6,17 10.5,17 C7.2,17 4.5,14.9 3.4,12 L1.3,12 C2.4,16 6.1,19 10.5,19 C15.8,19 20,14.7 20,9.5 C20,4.3 15.7,0 10.5,0 L10.5,0 Z M9,5 L9,10.1 L13.7,12.9 L14.5,11.6 L10.5,9.2 L10.5,5 L9,5 L9,5 Z" id="Shape"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index 3c44b0e..22e4274 100644
--- a/src/components/Global/SelectBox.vue
+++ b/src/components/Global/SelectBox.vue
@@ -190,7 +190,7 @@ ul.options {
 
   height: auto;
 
-  z-index: 10;
+  z-index: 100;
 
   width: 100%;
 }
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index f724377..0e7336b 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
@@ -79,6 +79,7 @@ $terminated: salmon;
 $disconnected: slategray;
 
 .info-user-list {
+  width: 100%;
 
   ul {
     display: flex;
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index e715d9b..5ab33e9 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -1,15 +1,28 @@
 <template>
-  <div class="scenery-timetable">
-    <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
-      <button
-        v-for="cp in station.generalInfo.checkpoints"
-        :key="cp.checkpointName"
-        class="checkpoint_item btn btn--text"
-        :class="{ current: selectedCheckpoint === cp.checkpointName }"
-        @click="selectCheckpoint(cp)"
-      >
-        {{ cp.checkpointName }}
-      </button>
+  <section class="scenery-timetable">
+    <div class="timetable-header">
+      <h3>
+        <img :src="icons.timetable" alt="icon-timetable" />&nbsp;
+        <span>{{ $t('scenery.timetables') }}</span>
+        &nbsp;
+        <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+        <span>&nbsp;/&nbsp;</span>
+        <span class="text--grayed">
+          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+        </span>
+      </h3>
+
+      <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
+        <button
+          v-for="cp in station.generalInfo.checkpoints"
+          :key="cp.checkpointName"
+          class="checkpoint_item btn btn--text"
+          :class="{ current: selectedCheckpoint === cp.checkpointName }"
+          @click="selectCheckpoint(cp)"
+        >
+          {{ cp.checkpointName }}
+        </button>
+      </div>
     </div>
 
     <div class="timetable-list">
@@ -141,13 +154,13 @@
     </div>
 
     <!-- </transition> -->
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
 import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
-import { computed, defineComponent, ref } from '@vue/runtime-core';
+import { computed, defineComponent, PropType, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
@@ -155,18 +168,17 @@ import { useStore } from '@/store/store';
 import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
+  name: 'SceneryTimetable',
+
   components: { SelectBox, Loading },
 
   mixins: [dateMixin, routerMixin],
 
   props: {
     station: {
-      type: Object as () => Station,
+      type: Object as PropType<Station>,
       required: true,
     },
-    timetableOnly: {
-      type: Boolean,
-    },
   },
 
   data: () => ({
@@ -271,9 +283,19 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 
-  font-size: 1.3em;
-  margin-top: 1em;
+  position: sticky;
+  top: 0;
+  z-index: 99;
+
+  background-color: #181818;
+
+  h3 {
+    display: flex;
+    align-items: center;
+    font-size: 1.4em;
+  }
 }
 
 .timetable {
@@ -282,7 +304,7 @@ export default defineComponent({
   }
 
   &-item {
-    margin: 1em auto;
+    margin: 0.5em auto;
     padding: 0 0.5em;
     max-width: 1100px;
 
@@ -290,7 +312,7 @@ export default defineComponent({
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     gap: 0 0.5em;
 
-    background: $bgCol;
+    background: #353535;
 
     cursor: pointer;
     z-index: 10;
@@ -319,6 +341,10 @@ export default defineComponent({
   }
 }
 
+.timetable-list {
+  position: relative;
+}
+
 .timetable-checkpoints {
   display: flex;
   justify-content: center;
@@ -326,13 +352,6 @@ export default defineComponent({
   flex-wrap: wrap;
   font-size: 1.1em;
   padding: 0.75em 0;
-
-  position: sticky;
-  top: 0;
-  z-index: 555;
-
-  background-color: #181818;
-
   .checkpoint_item {
     &.current {
       font-weight: bold;
diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue
new file mode 100644
index 0000000..4713d6c
--- /dev/null
+++ b/src/components/SceneryView/SceneryTimetablesHistory.vue
@@ -0,0 +1,95 @@
+<template>
+  <section class="scenery-timetables-history">
+    <Loading v-if="dataStatus != 2" />
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
+          <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
+          {{ historyItem.driverName }}
+
+          <div>Odjazd: {{ localeDate(historyItem.beginDate, $i18n.locale) }}</div>
+        </div>
+
+        <div style="text-align: right">
+          {{ historyItem.route.replace('|', ' -> ') }} | {{ historyItem.routeDistance }} km
+          <div v-if="historyItem.authorName">
+            Autor:
+            <b>{{ historyItem.authorName }}</b>
+          </div>
+        </div>
+        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import dateMixin from '@/mixins/dateMixin';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { SceneryTimetableHistory, TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
+import Station from '@/scripts/interfaces/Station';
+import { URLs } from '@/scripts/utils/apiURLs';
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryTimetablesHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sceneryHistoryList: [] as TimetableHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 15) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
+
+        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+.scenery-timetables-history {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  text-align: left;
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+</style>
diff --git a/src/scripts/interfaces/api/TimetablesAPIData.ts b/src/scripts/interfaces/api/TimetablesAPIData.ts
index 18aecb2..48710a4 100644
--- a/src/scripts/interfaces/api/TimetablesAPIData.ts
+++ b/src/scripts/interfaces/api/TimetablesAPIData.ts
@@ -1,4 +1,3 @@
-
 export interface TimetableHistory {
   timetableId: number;
   trainNo: number;
@@ -28,3 +27,9 @@ export interface TimetableHistory {
   authorName?: string;
   authorId?: number;
 }
+
+export interface SceneryTimetableHistory {
+  sceneryTimetables: TimetableHistory[];
+  totalCount: number;
+  sceneryName: string;
+}
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 9ce0e66..50ac872 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -22,16 +22,26 @@
 
       <div class="scenery-right">
         <div class="info-actions">
-          <button class="btn btn--option checked">Aktywne rozkłady jazdy</button>
-          <button class="btn btn--option">Historia rozkładów scenerii</button>
-          <button class="btn btn--option">Historia dyżurów scenerii</button>
+          <button
+            v-for="viewMode in viewModes"
+            class="btn btn--option"
+            @click="setViewMode(viewMode.component)"
+            :data-checked="currentViewCompontent == viewMode.component"
+          >
+            {{ viewMode.value }}
+          </button>
         </div>
 
-        <SceneryTimetable
-          :station="stationInfo"
-          :timetableOnly="timetableOnly"
-          :selectedCheckpoint="selectedCheckpoint"
-        />
+        <keep-alive>
+          <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
+        </keep-alive>
+          <!-- Timetables active -->
+          <!-- <SceneryTimetable />
+
+          <SceneryTimetablesHistory
+            v-if="currentViewMode == sceneryViewMode.TIMETABLES_HISTORY"
+            :stationName="stationInfo.name"
+          /> -->
       </div>
     </div>
   </div>
@@ -49,22 +59,48 @@ import { useRoute } from 'vue-router';
 
 import { useStore } from '@/store/store';
 import routerMixin from '@/mixins/routerMixin';
+import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
+
+enum SceneryViewMode {
+  'TIMETABLES_ACTIVE',
+  'TIMETABLES_HISTORY',
+  'SCENERY_HISTORY',
+}
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader },
+  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader, SceneryTimetablesHistory },
 
   mixins: [routerMixin],
 
   data: () => ({
     icons: {
-      history: require('@/assets/icon-history.svg'),
       user: require('@/assets/icon-user.svg'),
       back: require('@/assets/icon-back.svg'),
     },
 
+    viewModes: [
+      {
+        name: SceneryViewMode.TIMETABLES_ACTIVE,
+        value: 'Aktywne rozkłady jazdy',
+        component: 'SceneryTimetable',
+      },
+      {
+        name: SceneryViewMode.TIMETABLES_HISTORY,
+        value: 'Historia rozkładów scenerii',
+        component: 'SceneryTimetablesHistory',
+      },
+      {
+        name: SceneryViewMode.SCENERY_HISTORY,
+        value: 'Historia dyżurów scenerii',
+        component: 'SceneryDispatchersHistory',
+      },
+    ],
+
+    sceneryViewMode: SceneryViewMode,
+
     selectedCheckpoint: '',
 
-    viewMode: 'info',
+    currentViewCompontent: 'SceneryTimetable',
 
     onlineFrom: -1,
   }),
@@ -94,8 +130,8 @@ export default defineComponent({
   },
 
   methods: {
-    setCardViewMode(mode: string) {
-      this.viewMode = mode;
+    setViewMode(componentName: string) {
+      this.currentViewCompontent = componentName;
     },
 
     loadSelectedCheckpoint() {
@@ -157,7 +193,6 @@ button.back-btn {
   width: 100%;
   max-width: 1700px;
 
-  padding: 1em;
   margin: 1rem 0;
 
   text-align: center;
@@ -187,7 +222,7 @@ button.back-btn {
   max-height: 1000px;
 
   display: grid;
-  grid-template-rows: 50px 1fr;
+  grid-template-rows: auto 1fr;
   gap: 1em;
 }
 
@@ -198,10 +233,17 @@ button.back-btn {
 .info-actions {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   .btn {
     margin: 0.5em;
+    padding: 0.5em;
     box-shadow: 0 0 10px 4px #242424;
+
+    &[data-checked='true'] {
+      color: var(--clr-primary);
+      font-weight: bold;
+    }
   }
 }
 
@@ -234,8 +276,18 @@ button.back-btn {
   }
 
   .scenery-left {
+    border-radius: 1em;
+    margin-bottom: 1em;
     height: auto;
-    margin-bottom: 2em;
+  }
+
+  .scenery-right {
+    border-radius: 1em;
+    height: auto;
+  }
+
+  .info-actions {
+    flex-wrap: wrap;
   }
 }
 </style>

From faed36c41c952bc00969d43f8029f95205680907 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 10 Jul 2022 17:14:30 +0200
Subject: [PATCH 5/7] =?UTF-8?q?Aktualizacja=20filtrowania=20postoj=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/utils/storeUtils.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/scripts/utils/storeUtils.ts b/src/scripts/utils/storeUtils.ts
index e65ff3b..faa67c8 100644
--- a/src/scripts/utils/storeUtils.ts
+++ b/src/scripts/utils/storeUtils.ts
@@ -117,15 +117,16 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
   let prevStationName = '',
     nextStationName = '';
 
+
   for (let i = trainStopIndex - 1; i >= 0; i--) {
-    if (followingStops[i].stopName.startsWith('<strong>')) {
+    if (/strong|podg/g.test(followingStops[i].stopName)) {
       prevStationName = followingStops[i].stopNameRAW;
       break;
     }
   }
 
   for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
-    if (followingStops[i].stopName.startsWith('<strong>')) {
+    if (/strong|podg/g.test(followingStops[i].stopName)) {
       nextStationName = followingStops[i].stopNameRAW;
       break;
     }
@@ -139,7 +140,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.departureLine == null) break;
 
-    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
+    if (!/_|it|sbl/gi.test(currentStop.departureLine)) {
       departureLine = currentStop.departureLine;
       break;
     }
@@ -150,7 +151,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.arrivalLine == null) break;
 
-    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
+    if (!/_|it|sbl/gi.test(currentStop.arrivalLine)) {
       arrivingLine = currentStop.arrivalLine;
       break;
     }

From 740ce9c815837917297cff58d52cae749507dbd5 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 10 Jul 2022 22:42:07 +0200
Subject: [PATCH 6/7] =?UTF-8?q?T=C5=82umaczenia=20i=20poprawki=20designu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        |  26 +---
 .../SceneryView/SceneryDispatchersHistory.vue | 112 ++++++++++++++++++
 src/components/SceneryView/SceneryInfo.vue    |   8 +-
 .../SceneryView/SceneryTimetable.vue          |   3 +-
 .../SceneryView/SceneryTimetablesHistory.vue  |  51 +++++---
 src/locales/en.json                           |  14 ++-
 src/locales/pl.json                           |  12 +-
 src/mixins/dateMixin.ts                       |  54 +++++----
 .../interfaces/api/DispatchersAPIData.ts      |  12 ++
 src/scripts/utils/storeUtils.ts               |   4 +-
 src/styles/SceneryView/styles.scss            |  11 ++
 src/views/SceneryView.vue                     |  36 +++---
 12 files changed, 257 insertions(+), 86 deletions(-)
 create mode 100644 src/components/SceneryView/SceneryDispatchersHistory.vue
 create mode 100644 src/scripts/interfaces/api/DispatchersAPIData.ts
 create mode 100644 src/styles/SceneryView/styles.scss

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index 55e34f0..4f55326 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -46,9 +46,9 @@
                         <span class="region-badge" :class="doc.region">PL1</span>
                       </span>
                       <span>
-                        <span :data-status="doc.isOnline"
-                          >{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;</span
-                        >
+                        <span :data-status="doc.isOnline">
+                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
+                        </span>
                         <span>
                           {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
                         </span>
@@ -196,7 +196,7 @@ export default defineComponent({
     computedHistoryList() {
       return this.historyList.filter(
         (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      ); //.sort((a, b) => (b.isOnline ? 1 : 0) - (a.isOnline ? 1 : 0));
+      );
     },
   },
 
@@ -231,16 +231,6 @@ export default defineComponent({
       this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
     },
 
-    calculateDuration(timestampMs: number) {
-      const minsTotal = Math.round(timestampMs / 60000);
-      const hoursTotal = Math.floor(minsTotal / 60);
-      const minsInHour = minsTotal % 60;
-
-      return minsTotal > 60
-        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('journal.minutes', { minutes: minsTotal });
-    },
-
     isAnotherDay(prevIndex: number, currIndex: number) {
       if (currIndex == 0) return true;
 
@@ -333,13 +323,6 @@ export default defineComponent({
           return;
         }
 
-        // if (responseData.errorMessage) {
-        //   this.historyDataStatus.status = DataStatus.Error;
-        //   this.historyDataStatus.error = responseData.errorMessage;
-
-        //   return;
-        // }
-
         if (!responseData) return;
 
         // Response data exists
@@ -439,3 +422,4 @@ export default defineComponent({
   }
 }
 </style>
+
diff --git a/src/components/SceneryView/SceneryDispatchersHistory.vue b/src/components/SceneryView/SceneryDispatchersHistory.vue
new file mode 100644
index 0000000..eb6b21f
--- /dev/null
+++ b/src/components/SceneryView/SceneryDispatchersHistory.vue
@@ -0,0 +1,112 @@
+<template>
+  <section class="scenery-dispatchers-history  scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
+        <div>
+          <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
+          <b class="text--primary">{{ historyItem.dispatcherName }}</b>
+        </div>
+
+        <div v-if="historyItem.timestampTo">
+          <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+          {{ timestampToString(historyItem.timestampFrom) }}
+          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+
+        <div class="dispatcher-online" v-else>
+          {{ $t('journal.online-since') }}
+          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+          ({{ calculateDuration(historyItem.currentDuration) }})
+          <span></span>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import dateMixin from '@/mixins/dateMixin';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { DispatcherHistory } from '@/scripts/interfaces/api/DispatchersAPIData';
+import Station from '@/scripts/interfaces/Station';
+import { URLs } from '@/scripts/utils/apiURLs';
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryDispatchersHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dispatcherHistoryList: [] as DispatcherHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 30) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
+
+        this.dispatcherHistoryList = historyAPIData;
+        this.dataStatus = DataStatus.Loaded;
+
+        console.log(this.dispatcherHistoryList);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  text-align: left;
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+@include smallScreen {
+  .list-item {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+</style>
+
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 9ec0163..4465cc4 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -8,10 +8,14 @@
           <span>
             <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
 
-            <span v-if="station.generalInfo.reqLevel > 0">
+            <span v-if="station.generalInfo.reqLevel > -1">
+              - {{ $tc('scenery.req-level', station.generalInfo.reqLevel, { lvl: station.generalInfo.reqLevel }) }}
+            </span>
+
+            <!-- <span v-if="station.generalInfo.reqLevel > 0">
               - minimum {{ station.generalInfo.reqLevel }} poziom dyżurnego
             </span>
-            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span>
+            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span> -->
           </span>
 
           <span>
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 5ab33e9..e9cae5d 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -507,7 +507,7 @@ export default defineComponent({
       flex-direction: column;
       align-items: center;
 
-      font-size: 1.2em;
+      font-size: 1.05em;
     }
 
     &-general {
@@ -516,7 +516,6 @@ export default defineComponent({
 
     &-schedule {
       width: 100%;
-      margin: 0.5em 0;
     }
   }
 }
diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue
index 4713d6c..0ffebe7 100644
--- a/src/components/SceneryView/SceneryTimetablesHistory.vue
+++ b/src/components/SceneryView/SceneryTimetablesHistory.vue
@@ -1,23 +1,28 @@
 <template>
-  <section class="scenery-timetables-history">
+  <section class="scenery-timetables-history scenery-section">
     <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
     <ul class="history-list" v-else>
       <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+        </div>
         <div>
           <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
           <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
-          {{ historyItem.driverName }}
-
-          <div>Odjazd: {{ localeDate(historyItem.beginDate, $i18n.locale) }}</div>
+          <div>{{ historyItem.driverName }}</div>
         </div>
 
-        <div style="text-align: right">
-          {{ historyItem.route.replace('|', ' -> ') }} | {{ historyItem.routeDistance }} km
-          <div v-if="historyItem.authorName">
-            Autor:
-            <b>{{ historyItem.authorName }}</b>
-          </div>
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
+        <div>
+          {{ $t('scenery.timetable-author-title') }}:
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
+          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
         </div>
+
         <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
       </li>
     </ul>
@@ -70,10 +75,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.scenery-timetables-history {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
 }
 
 .history-list {
@@ -81,15 +89,22 @@ export default defineComponent({
 }
 
 .list-item {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
+  gap: 1em;
+  align-items: center;
 
-  text-align: left;
   background-color: #353535;
   padding: 0.5em;
   margin: 0.5em 0;
 
   line-height: 1.5em;
 }
+
+@include smallScreen {
+  .list-item {
+    grid-template-columns: 1fr 1fr;
+    font-size: 1.05em;
+  }
+}
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 208bbba..833881f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,7 +38,7 @@
     "współczesna": "modern",
     "mieszana": "mixed",
     "kształtowa": "mechanical",
-    "historyczna": "historyczna"
+    "historyczna": "historical"
   },
   "controls": {
     "title": "Control type",
@@ -248,7 +248,17 @@
     "lines-title": "Real lines",
     "project-title": "Project name",
     "one-way-routes": "One way routes",
-    "two-way-routes": "Two way routes"
+    "two-way-routes": "Two way routes",
+
+    "option-active-timetables": "Active timetables",
+    "option-timetables-history": "Scenery timetables history",
+    "option-dispatchers-history": "Scenery dispatchers history",
+
+    "timetable-author-title": "Issued by",
+    "timetable-author-unknown": "Author unknown",
+
+    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
+    "history-list-empty": "No recorded scenery history!"
   },
   "availability": {
     "title": "Availability",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 482a967..557bc28 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -249,7 +249,17 @@
     "lines-title": "Rzeczywiste linie",
     "project-title": "Projekt",
     "one-way-routes": "Szlaki jednotorowe",
-    "two-way-routes": "Szlaki dwutorowe"
+    "two-way-routes": "Szlaki dwutorowe",
+
+    "option-active-timetables": "Aktywne rozkłady jazdy",
+    "option-timetables-history": "Historia rozkładów scenerii",
+    "option-dispatchers-history": "Historia dyżurów scenerii",
+
+    "timetable-author-title": "Wydany przez",
+    "timetable-author-unknown": "Autor nieznany",
+
+    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
+    "history-list-empty": "Brak historii dla tej scenerii!"
   },
   "availability": {
     "title": "Dostępność",
diff --git a/src/mixins/dateMixin.ts b/src/mixins/dateMixin.ts
index 8dfc7ac..9d96b69 100644
--- a/src/mixins/dateMixin.ts
+++ b/src/mixins/dateMixin.ts
@@ -4,37 +4,47 @@ export default defineComponent({
   methods: {
     localeDate(dateString: string, locale: string) {
       return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        weekday: "long",
-        day: "numeric",
-        month: "2-digit",
-        year: "numeric",
-        hour: "2-digit",
-        minute: "2-digit"
-      })
+        weekday: 'long',
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
     },
 
     localeDay(dateString: string, locale: string) {
       return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        day: "numeric",
-        month: "2-digit",
-        year: "numeric"
-      })
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+      });
     },
 
     localeTime(dateString: string, locale: string) {
       return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        hour: "2-digit",
-        minute: "2-digit"
-      })
+        hour: '2-digit',
+        minute: '2-digit',
+      });
     },
 
     timestampToString(timestamp: number | null) {
       return timestamp
-        ? new Date(timestamp).toLocaleTimeString("pl-PL", {
-          hour: "2-digit",
-          minute: "2-digit"
-        })
-        : "";
-    }
-  }
-})
+        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        : '';
+    },
+
+    calculateDuration(timestampMs: number) {
+      const minsTotal = Math.round(timestampMs / 60000);
+      const hoursTotal = Math.floor(minsTotal / 60);
+      const minsInHour = minsTotal % 60;
+
+      return minsTotal > 60
+        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
+        : this.$t('journal.minutes', { minutes: minsTotal });
+    },
+  },
+});
diff --git a/src/scripts/interfaces/api/DispatchersAPIData.ts b/src/scripts/interfaces/api/DispatchersAPIData.ts
new file mode 100644
index 0000000..dba7ece
--- /dev/null
+++ b/src/scripts/interfaces/api/DispatchersAPIData.ts
@@ -0,0 +1,12 @@
+export interface DispatcherHistory {
+  currentDuration: number;
+  dispatcherId: number;
+  dispatcherName: string;
+  isOnline: boolean;
+  lastOnlineTimestamp: number;
+  region: string;
+  stationHash: string;
+  stationName: string;
+  timestampFrom: number;
+  timestampTo?: number;
+}
\ No newline at end of file
diff --git a/src/scripts/utils/storeUtils.ts b/src/scripts/utils/storeUtils.ts
index faa67c8..832600b 100644
--- a/src/scripts/utils/storeUtils.ts
+++ b/src/scripts/utils/storeUtils.ts
@@ -140,7 +140,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.departureLine == null) break;
 
-    if (!/_|it|sbl/gi.test(currentStop.departureLine)) {
+    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
       departureLine = currentStop.departureLine;
       break;
     }
@@ -151,7 +151,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.arrivalLine == null) break;
 
-    if (!/_|it|sbl/gi.test(currentStop.arrivalLine)) {
+    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
       arrivingLine = currentStop.arrivalLine;
       break;
     }
diff --git a/src/styles/SceneryView/styles.scss b/src/styles/SceneryView/styles.scss
new file mode 100644
index 0000000..379a32e
--- /dev/null
+++ b/src/styles/SceneryView/styles.scss
@@ -0,0 +1,11 @@
+.scenery-section {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+}
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 50ac872..b92922c 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -28,20 +28,13 @@
             @click="setViewMode(viewMode.component)"
             :data-checked="currentViewCompontent == viewMode.component"
           >
-            {{ viewMode.value }}
+            {{ $t(viewMode.id) }}
           </button>
         </div>
 
         <keep-alive>
           <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
         </keep-alive>
-          <!-- Timetables active -->
-          <!-- <SceneryTimetable />
-
-          <SceneryTimetablesHistory
-            v-if="currentViewMode == sceneryViewMode.TIMETABLES_HISTORY"
-            :stationName="stationInfo.name"
-          /> -->
       </div>
     </div>
   </div>
@@ -50,6 +43,8 @@
 <script lang="ts">
 import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
 import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
+import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
+import SceneryDispatchersHistory from '@/components/SceneryView/SceneryDispatchersHistory.vue';
 import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
@@ -59,7 +54,6 @@ import { useRoute } from 'vue-router';
 
 import { useStore } from '@/store/store';
 import routerMixin from '@/mixins/routerMixin';
-import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
 
 enum SceneryViewMode {
   'TIMETABLES_ACTIVE',
@@ -68,7 +62,14 @@ enum SceneryViewMode {
 }
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader, SceneryTimetablesHistory },
+  components: {
+    SceneryInfo,
+    SceneryTimetable,
+    ActionButton,
+    SceneryHeader,
+    SceneryTimetablesHistory,
+    SceneryDispatchersHistory,
+  },
 
   mixins: [routerMixin],
 
@@ -80,18 +81,15 @@ export default defineComponent({
 
     viewModes: [
       {
-        name: SceneryViewMode.TIMETABLES_ACTIVE,
-        value: 'Aktywne rozkłady jazdy',
+        id: 'scenery.option-active-timetables',
         component: 'SceneryTimetable',
       },
       {
-        name: SceneryViewMode.TIMETABLES_HISTORY,
-        value: 'Historia rozkładów scenerii',
+        id: 'scenery.option-timetables-history',
         component: 'SceneryTimetablesHistory',
       },
       {
-        name: SceneryViewMode.SCENERY_HISTORY,
-        value: 'Historia dyżurów scenerii',
+        id: 'scenery.option-dispatchers-history',
         component: 'SceneryDispatchersHistory',
       },
     ],
@@ -290,4 +288,10 @@ button.back-btn {
     flex-wrap: wrap;
   }
 }
+
+@include smallScreen {
+  .scenery-left, .scenery-right {
+    max-height: 100vh;
+  }
+}
 </style>

From b14ba94abee70cc90e2abd2506e3203308224589 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 10 Jul 2022 22:44:32 +0200
Subject: [PATCH 7/7] Bump wersji do 1.9.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a4243a3..065c87d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",