Aktualizacja widoku scenerii

2026-05-03 13:28:11 +00:00 · 2022-07-09 20:24:57 +02:00
parent c6938821c3
commit 29e9924339
13 changed files with 436 additions and 355 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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;
  }
 }

@@ -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>
@@ -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>
@@ -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 {
@@ -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",
@@ -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",
@@ -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 {
@@ -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;
  }