Poprawki dostępności

src/assets/icon-history.svg

@@ -0,0 +1 @@
+<?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>

src/components/SceneryView/SceneryInfo.vue

@@ -139,7 +139,9 @@
             class="user"
             :class="train.stopStatus"
             :key="train.trainNo + i"
+            tabindex="0"
             @click="() => navigateToTrain(train.trainNo)"
+            @keydown="(e) => { if(e.keyCode == 13) navigateToTrain(train.trainNo) }"
           >
             <span class="user_train">{{ train.trainNo }}</span>
             <span class="user_name">{{ train.driverName }}</span>
@@ -264,7 +266,7 @@ h3 {
 
 .info {
   &-header {
-    padding: 1em;
+    padding: 2em 1em;
 
     & > .scenery-name {
       font-weight: bold;
@@ -273,6 +275,10 @@ h3 {
       font-size: 3.5em;
 
       text-transform: uppercase;
+
+      @include smallScreen() {
+        font-size: 2.75em; 
+      }
     }
 
     & > .scenery-hash {

src/components/SceneryView/SceneryTimetable.vue

@@ -1,32 +1,18 @@
 <template>
   <div class="scenery-timetable">
     <h3 class="timetable-header">
-      <span>{{ $t("scenery.timetables") }}</span>
+      <span>{{ $t('scenery.timetables') }}</span>
 
-      <a
-        :href="currentURL + '&timetable_only=1'"
-        v-if="!timetableOnly"
-        target="_blank"
-      >
-        <img
-          :src="viewIcon"
-          alt="icon-view"
-          :title="$t('timetables.timetable-only')"
-        />
+      <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="checkpoints" v-if="station && station.generalInfo?.checkpoints">
       <button
         v-for="cp in station.generalInfo.checkpoints"
         :key="cp.checkpointName"
-        class="checkpoint_item btn--text"
+        class="checkpoint_item btn btn--text"
         :class="{ current: selectedCheckpoint === cp.checkpointName }"
         @click="selectCheckpoint(cp)"
       >
@@ -35,14 +21,11 @@
     </div>
 
     <span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0">
-      {{ $t("app.loading") }}
+      {{ $t('app.loading') }}
     </span>
 
-    <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>
 
     <transition-group name="list-anim">
@@ -50,45 +33,32 @@
         class="timetable-item"
         v-for="(scheduledTrain, i) in computedScheduledTrains"
         :key="i + 1"
+        tabindex="0"
+        @click="navigateToTrain(scheduledTrain.trainNo)"
+        @keydown="
+          (e) => {
+            if (e.keyCode == 13) navigateToTrain(scheduledTrain.trainNo);
+          }
+        "
       >
         <span class="timetable-general">
           <span class="general-info">
-            <router-link
-              :to="{
-                name: 'TrainsView',
-                query: {
-                  train: scheduledTrain.trainNo.toString(),
-                },
-              }"
-            >
-              <span>
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
-              </span>
-            </router-link>
-            |
             <span>
-              <a
-                :href="
-                  'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
-                "
-                target="_blank"
-                >{{ scheduledTrain.driverName }}</a
-              >
+              <strong>{{ scheduledTrain.category }}</strong>
+              {{ scheduledTrain.trainNo }}
+            </span>
+            |
+            <span style="color: white">
+              {{ scheduledTrain.driverName }}
             </span>
 
             <div class="info-route">
-              <strong
-                >{{ scheduledTrain.beginsAt }} -
-                {{ scheduledTrain.terminatesAt }}</strong
-              >
+              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
             </div>
           </span>
 
           <span class="general-status">
-            <span :class="scheduledTrain.stopStatus"
-              >{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
-            </span>
+            <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
           </span>
         </span>
 
@@ -101,9 +71,7 @@
             >
             </span>
             <span class="arrival-time" v-else>
-              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-                scheduledTrain.stopInfo.arrivalDelay
-              }})
+              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
             </span>
           </span>
 
@@ -122,9 +90,7 @@
             >
             </span>
             <span class="departure-time" v-else>
-              {{ scheduledTrain.stopInfo.departureTimeString }} ({{
-                scheduledTrain.stopInfo.departureDelay
-              }})
+              {{ scheduledTrain.stopInfo.departureTimeString }} ({{ scheduledTrain.stopInfo.departureDelay }})
             </span>
           </span>
         </span>
@@ -134,14 +100,14 @@
 </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 { useRoute } from "vue-router";
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import { ComputedRef } from "vue";
+import Station from '@/scripts/interfaces/Station';
+import SelectBox from '../Global/SelectBox.vue';
+import { computed, defineComponent, ref } from '@vue/runtime-core';
+import { useRoute } from 'vue-router';
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { ComputedRef } from 'vue';
 
 export default defineComponent({
   components: { SelectBox },
@@ -156,7 +122,7 @@ export default defineComponent({
   },
 
   data: () => ({
-    viewIcon: require("@/assets/icon-view.svg"),
+    viewIcon: require('@/assets/icon-view.svg'),
     listOpen: false,
   }),
 
@@ -166,31 +132,28 @@ export default defineComponent({
 
     const store = useStore();
 
-    const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>
+    const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>;
 
-    const selectedCheckpoint = ref("");
+    const selectedCheckpoint = ref('');
 
     const computedScheduledTrains = computed(() => {
-      if (!props.station) return [];  
+      if (!props.station) return [];
 
       let scheduledTrains =
-        props.station.generalInfo?.checkpoints.find(
-          (cp) => cp.checkpointName === selectedCheckpoint.value
-        )?.scheduledTrains || props.station.onlineInfo?.scheduledTrains || [];
+        props.station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
+          ?.scheduledTrains ||
+        props.station.onlineInfo?.scheduledTrains ||
+        [];
 
       return (
         scheduledTrains?.sort((a, b) => {
           if (a.stopStatusID > b.stopStatusID) return 1;
           else if (a.stopStatusID < b.stopStatusID) return -1;
 
-          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp)
-            return 1;
-          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
-            return -1;
+          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
+          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
 
-          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
-            ? 1
-            : -1;
+          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
         }) || []
       );
     });
@@ -199,18 +162,18 @@ export default defineComponent({
       currentURL,
       selectedCheckpoint,
       computedScheduledTrains,
-      timetableDataStatus
+      timetableDataStatus,
     };
   },
 
   methods: {
     loadSelectedOption() {
       if (!this.station) return;
-      if(!this.station.generalInfo) return;
-      if(!this.station.generalInfo.checkpoints) return;
+      if (!this.station.generalInfo) return;
+      if (!this.station.generalInfo.checkpoints) return;
       if (this.station.generalInfo.checkpoints.length == 0) return;
 
-      if (this.selectedCheckpoint != "") return;
+      if (this.selectedCheckpoint != '') return;
 
       this.selectedCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
     },
@@ -218,6 +181,13 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
+
+    navigateToTrain(trainNo: number) {
+      this.$router.push({
+        name: 'TrainsView',
+        query: { train: trainNo.toString() },
+      });
+    },
   },
 
   mounted() {
@@ -231,8 +201,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
+@import '../../styles/responsive.scss';
+@import '../../styles/variables.scss';
 
 h3 {
   margin: 0.5em 0;
@@ -243,10 +213,17 @@ h3 {
   align-items: center;
 
   font-size: 1.5em;
+}
+
+.timetable-only {
+  margin-left: 0.5em;
 
   img {
     width: 1.1em;
-    margin-left: 0.5em;
+  }
+
+  &:focus {
+    outline: 1px solid white;
   }
 }
 
@@ -365,6 +342,8 @@ h3 {
 
     background: $bgLigtherCol;
 
+    cursor: pointer;
+
     @include smallScreen() {
       display: flex;
       flex-direction: column;
@@ -428,7 +407,7 @@ h3 {
 
     &:not(:last-child)::after {
       margin: 0 0.5em;
-      content: "•";
+      content: '•';
       color: white;
     }
   }
@@ -446,7 +425,7 @@ h3 {
   transform: rotate(-45deg);
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     width: 55px;
@@ -527,4 +506,4 @@ h3 {
 .departure-time.terminates {
   font-size: 0.75em;
 }
-</style>
+</style>

src/components/StationsView/StationTable.vue

@@ -38,6 +38,8 @@
             v-for="(station, i) in stations"
             :key="i + station.name"
             @click="() => setScenery(station.name)"
+            @keydown="(e) => { if(e.keyCode == 13) setScenery(station.name) }"
+            tabindex="0"
           >
             <td
               class="station_name"

src/components/TrainsView/TrainTable.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="train-table">
     <div class="traffic-warning" v-if="distanceLimitExceeded">
-      {{ $t("trains.distance-exceeded") }}
+      {{ $t('trains.distance-exceeded') }}
     </div>
 
     <div class="no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
-      {{ $t("trains.no-trains") }}
+      {{ $t('trains.no-trains') }}
     </div>
 
-    <div
-      class="no-trains"
-      v-if="computedTrains.length == 0 && !timetableLoaded"
-    >
-      {{ $t("trains.loading") }}
+    <div class="no-trains" v-if="computedTrains.length == 0 && !timetableLoaded">
+      {{ $t('trains.loading') }}
     </div>
 
     <ul class="train-list">
@@ -20,6 +17,12 @@
         class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
+        tabindex="0"
+        @keydown="
+          (e) => {
+            if (e.keyCode == 13) changeScheduleShowState(train.timetableData?.timetableId);
+          }
+        "
         :ref="
           (el) => {
             if (!train.timetableData) return;
@@ -27,17 +30,14 @@
           }
         "
       >
-        <div
-          class="wrapper"
-          @click="changeScheduleShowState(train.timetableData?.timetableId)"
-        >
+        <div class="wrapper" @click="changeScheduleShowState(train.timetableData?.timetableId)">
           <span class="info">
             <div class="info_timetable" v-if="!train.timetableData">
               <div class="timetable_general">
                 <span>
                   {{ train.trainNo }} |
                   <span style="color: gold">
-                    {{ $t("trains.no-timetable") }}
+                    {{ $t('trains.no-timetable') }}
                   </span>
                 </span>
               </div>
@@ -58,9 +58,7 @@
                   <span>
                     <strong>{{ train.timetableData.category }}</strong>
                     {{ train.trainNo }} |
-                    <span style="color: gold">
-                      {{ train.timetableData.routeDistance }} km
-                    </span>
+                    <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
                   </span>
                 </span>
 
@@ -68,33 +66,22 @@
                   <span class="activator">
                     SRJP
 
-                    <img
-                      :src="
-                        showedSchedule == train.timetableData.timetableId
-                          ? ascSVG
-                          : descSVG
-                      "
-                      alt="arrow-icon"
-                    />
+                    <img :src="showedSchedule == train.timetableData.timetableId ? ascSVG : descSVG" alt="arrow-icon" />
                   </span>
 
-                  <span class="content">
-                    {{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
-                  </span>
+                  <span class="content"> {{ $t('trains.detailed-timetable') }} {{ train.trainNo }} </span>
                 </span>
               </div>
 
               <div class="timetable_route">
-                {{ train.timetableData.route.replace("|", " - ") }}
+                {{ train.timetableData.route.replace('|', ' - ') }}
               </div>
 
               <div class="timetable_stops">
                 <span v-if="train.timetableData.followingStops.length > 2">
-                  {{ $t("trains.via-title") }}
+                  {{ $t('trains.via-title') }}
 
-                  <span
-                    v-html="displayStopList(train.timetableData.followingStops)"
-                  ></span>
+                  <span v-html="displayStopList(train.timetableData.followingStops)"></span>
                 </span>
               </div>
             </div>
@@ -103,10 +90,7 @@
           <span class="driver">
             <div class="driver-info">
               <span class="driver-name">
-                <a
-                  :href="'https://td2.info.pl/profile/?u=' + train.driverId"
-                  target="_blank"
-                >
+                <a :href="'https://td2.info.pl/profile/?u=' + train.driverId" target="_blank">
                   {{ train.driverName }}
                 </a>
               </span>
@@ -119,54 +103,37 @@
             <span class="driver-loco">
               <div class="driver-cars">
                 <span v-if="train.cars.length > 0">
-                  {{ $t("trains.cars") }}:
+                  {{ $t('trains.cars') }}:
                   <span class="count">{{ train.cars.length }}</span>
                 </span>
 
                 <span v-else>{{ displayLocoInfo(train.locoType) }}</span>
               </div>
 
-              <img
-                class="train-image"
-                :src="train.locoURL"
-                @error="onImageError"
-              />
+              <img class="train-image" :src="train.locoURL" @error="onImageError" />
             </span>
           </span>
 
           <span class="stats">
             <div class="stats-main">
               <span v-for="stat in stats.main" :key="stat.name">
-                <img
-                  :src="require(`@/assets/icon-${stat.name}.svg`)"
-                  :alt="stat.name"
-                />
-                {{
-                  `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}`
-                }}
+                <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
+                {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
               </span>
             </div>
 
             <div class="stats-position">
               <span v-for="stat in stats.position" :key="stat.name">
                 <div>
-                  <img
-                    :src="require(`@/assets/icon-${stat.name}.svg`)"
-                    :alt="stat.name"
-                  />
+                  <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
                 </div>
-                {{ (train[stat.prop] || "---") + (stat.unit || "") }}
+                {{ (train[stat.prop] || '---') + (stat.unit || '') }}
               </span>
             </div>
           </span>
         </div>
 
-        <transition
-          name="unfold"
-          @enter="enter"
-          @afterEnter="afterEnter"
-          @leave="leave"
-        >
+        <transition name="unfold" @enter="enter" @afterEnter="afterEnter" @leave="leave">
           <TrainSchedule
             v-if="showedSchedule === train.timetableData?.timetableId"
             :followingStops="train.timetableData?.followingStops"
@@ -179,20 +146,14 @@
 </template>
 
 <script lang="ts">
-import Train from "@/scripts/interfaces/Train";
-import TrainStop from "@/scripts/interfaces/TrainStop";
+import Train from '@/scripts/interfaces/Train';
+import TrainStop from '@/scripts/interfaces/TrainStop';
 
-import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  Ref,
-  ref,
-} from "@vue/runtime-core";
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
+import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { computed, ComputedRef, defineComponent, Ref, ref } from '@vue/runtime-core';
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
 
 export default defineComponent({
   components: {
@@ -213,45 +174,45 @@ export default defineComponent({
 
   data: () => ({
     showedSchedule: 0,
-    defaultLocoImage: require("@/assets/unknown.png"),
+    defaultLocoImage: require('@/assets/unknown.png'),
 
-    ascSVG: require("@/assets/icon-arrow-asc.svg"),
-    descSVG: require("@/assets/icon-arrow-desc.svg"),
+    ascSVG: require('@/assets/icon-arrow-asc.svg'),
+    descSVG: require('@/assets/icon-arrow-desc.svg'),
 
     stats: {
       main: [
         {
-          name: "mass",
-          unit: "t",
+          name: 'mass',
+          unit: 't',
           multiplier: 0.001,
         },
         {
-          name: "speed",
-          unit: "km/h",
+          name: 'speed',
+          unit: 'km/h',
         },
         {
-          name: "length",
-          unit: "m",
+          name: 'length',
+          unit: 'm',
         },
       ],
 
       position: [
         {
-          name: "scenery",
-          prop: "currentStationName",
+          name: 'scenery',
+          prop: 'currentStationName',
         },
         {
-          name: "route",
-          prop: "connectedTrack",
+          name: 'route',
+          prop: 'connectedTrack',
         },
         {
-          name: "signal",
-          prop: "signal",
+          name: 'signal',
+          prop: 'signal',
         },
         {
-          name: "distance",
-          prop: "distance",
-          unit: "m",
+          name: 'distance',
+          prop: 'distance',
+          unit: 'm',
         },
       ],
     },
@@ -261,14 +222,10 @@ export default defineComponent({
     const store = useStore();
     const elList: Ref<(HTMLElement | null)[]> = ref([]);
 
-    const timetableDataStatus: ComputedRef<DataStatus> = computed(
-      () => store.getters[GETTERS.timetableDataStatus]
-    );
+    const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
     const queryTimetable = computed(() => {
-      const q = props.computedTrains.find(
-        (train) => train.trainNo === Number(props.queryTrain)
-      )?.timetableData;
+      const q = props.computedTrains.find((train) => train.trainNo === Number(props.queryTrain))?.timetableData;
 
       return q;
     });
@@ -276,18 +233,12 @@ export default defineComponent({
     return {
       elList,
       queryTimetable,
-      timetableLoaded: computed(
-        () => timetableDataStatus.value === DataStatus.Loaded
-      ),
-      timetableError: computed(
-        () => timetableDataStatus.value === DataStatus.Error
-      ),
+      timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
+      timetableError: computed(() => timetableDataStatus.value === DataStatus.Error),
       distanceLimitExceeded: computed(
         () =>
-          props.computedTrains.findIndex(
-            ({ timetableData }) =>
-              timetableData && timetableData.routeDistance > 200
-          ) != -1
+          props.computedTrains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) !=
+          -1
       ),
     };
   },
@@ -296,7 +247,7 @@ export default defineComponent({
     enter(el: HTMLElement) {
       const maxHeight = getComputedStyle(el).height;
 
-      el.style.height = "0px";
+      el.style.height = '0px';
 
       getComputedStyle(el);
 
@@ -306,21 +257,20 @@ export default defineComponent({
     },
 
     afterEnter(el: HTMLElement) {
-      el.style.height = "auto";
+      el.style.height = 'auto';
     },
 
     leave(el: HTMLElement) {
       el.style.height = getComputedStyle(el).height;
 
       setTimeout(() => {
-        el.style.height = "0px";
+        el.style.height = '0px';
       }, 10);
     },
 
     focusOnTrain(trainNoStr: string) {
-      const timetableId = this.computedTrains.find(
-        (train) => train.trainNo == Number(trainNoStr)
-      )?.timetableData?.timetableId;
+      const timetableId = this.computedTrains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData
+        ?.timetableId;
 
       if (!timetableId) return;
 
@@ -330,15 +280,14 @@ export default defineComponent({
     changeScheduleShowState(timetableId: number | undefined) {
       if (!timetableId || timetableId < 0) return;
 
-      this.showedSchedule =
-        this.showedSchedule == timetableId ? 0 : timetableId;
+      this.showedSchedule = this.showedSchedule == timetableId ? 0 : timetableId;
 
       setTimeout(() => {
         const currentEl = this.elList[timetableId];
 
         currentEl?.scrollIntoView({
-          behavior: "smooth",
-          block: this.showedSchedule == 0 ? "nearest" : "center",
+          behavior: 'smooth',
+          block: this.showedSchedule == 0 ? 'nearest' : 'center',
         });
       }, 200);
     },
@@ -350,39 +299,31 @@ export default defineComponent({
     },
 
     displayStopList(stops: TrainStop[]): string | undefined {
-      if (!stops) return "";
+      if (!stops) return '';
 
       return stops
         .reduce((acc: string[], stop: TrainStop, i: number) => {
-          if (stop.stopType.includes("ph"))
-            acc.push(
-              `<strong style='color:${
-                stop.confirmed ? "springgreen" : "white"
-              }'>${stop.stopName}</strong>`
-            );
+          if (stop.stopType.includes('ph'))
+            acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
           else if (
             i > 0 &&
             i < stops.length - 1 &&
-            !stop.stopNameRAW.includes("po.") &&
-            !stop.stopNameRAW.includes("SBL")
+            !stop.stopNameRAW.includes('po.') &&
+            !stop.stopNameRAW.includes('SBL')
           )
-            acc.push(
-              `<span style='color:${
-                stop.confirmed ? "springgreen" : "lightgray"
-              }'>${stop.stopName}</span>`
-            );
+            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
           return acc;
         }, [])
-        .join(" > ");
+        .join(' > ');
     },
 
     displayLocoInfo(locoType: string) {
-      if (locoType.includes("EN")) return `${this.$t("trains.EZT")}`;
-      if (locoType.includes("SN")) return `${this.$t("trains.SZT")}`;
-      if (locoType.startsWith("E")) return `${this.$t("trains.loco-electric")}`;
-      if (locoType.startsWith("S")) return `${this.$t("trains.loco-diesel")}`;
+      if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`;
+      if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`;
+      if (locoType.startsWith('E')) return `${this.$t('trains.loco-electric')}`;
+      if (locoType.startsWith('S')) return `${this.$t('trains.loco-diesel')}`;
 
-      return "";
+      return '';
     },
   },
 
@@ -393,8 +334,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/user_badge.scss";
+@import '../../styles/responsive.scss';
+@import '../../styles/user_badge.scss';
 
 .unfold {
   &-leave-active,
@@ -605,4 +546,4 @@ img.train-image {
     text-align: center;
   }
 }
-</style>
+</style>

src/styles/global.scss

@@ -201,18 +201,23 @@ ul {
 }
 
 .btn {
+  background: none;
+  cursor: pointer;
+  font-size: 1em;
+
   &--text {
-    background: none;
     color: white;
-    font-size: 1em;
-
-    cursor: pointer;
-
     transition: color 0.3s;
 
-
     &:hover, &:focus {
       color: $accentCol;
     }
   }
+
+  &--image {
+    color: white;
+    transition: color 0.3s;
+
+
+  }
 }

src/views/SceneryHistoryView.vue

@@ -1,388 +0,0 @@
-<template>
-  <section class="history-view">
-    <h2>Historia rozkładów jazdy</h2>
-
-    <div class="history_search">
-      <search-box
-        v-model:searchedValue="searchedDriver"
-        titleToTranslate="history.search-driver"
-        @clearValue="clearDriver"
-        @keypress="keyPressed"
-      ></search-box>
-
-      <search-box
-        v-model:searchedValue="searchedTrain"
-        titleToTranslate="history.search-train"
-        @clearValue="clearTrain"
-        @keypress="keyPressed"
-      ></search-box>
-
-      <action-button class="search-button" @click="search">
-        Szukaj
-      </action-button>
-    </div>
-
-    <div class="history_list">
-      <div class="list_wrapper">
-        <transition name="warning" mode="out-in">
-          <div :key="historyDataStatus.status">
-            <div v-if="isDataLoading" class="history_warning">Ładowanie...</div>
-
-            <div
-              v-if="!isDataLoading && isDataError"
-              class="history_warning error"
-            >
-              Wystąpił błąd!
-            </div>
-
-            <div
-              class="history_warning"
-              v-if="!isDataLoading && !isDataError && historyList.length == 0"
-            >
-              Brak wyników!
-            </div>
-
-            <ul v-if="!isDataLoading && !isDataError">
-              <li
-                v-for="(item, i) in historyList"
-                :key="item.timetableId"
-                :style="`--delay: ${i * 50}ms`"
-              >
-                <div class="history_item-top">
-                  <span>
-                    <span
-                      @click="
-                        navigateToTrain(!item.terminated ? item.trainNo : null)
-                      "
-                      style="cursor: pointer"
-                    >
-                      <b class="text--primary">{{ item.trainCategoryCode }}</b>
-                      {{ item.trainNo }}
-                    </span>
-
-                    <div>
-                      <b>{{ item.route.replace("|", " - ") }}</b>
-                    </div>
-
-                    <div class="text--grayed">
-                      {{ item.sceneriesString.replaceAll("%", " - ") }}
-                    </div>
-                  </span>
-
-                  <span
-                    class="history_item-status"
-                    :class="{
-                      fulfilled: item.fulfilled,
-                      terminated: item.terminated && !item.fulfilled,
-                      active: !item.terminated,
-                    }"
-                  >
-                    {{
-                      !item.terminated
-                        ? "AKTYWNY"
-                        : item.fulfilled
-                        ? "WYPEŁNIONY"
-                        : "NIEWYPEŁNIONY"
-                    }}
-                  </span>
-                </div>
-
-                <div style="margin: 1em 0">
-                  <div>
-                    <b>Maszynista:</b>
-                    {{ item.driverName }}
-                  </div>
-                  <div>
-                    <b>Kilometraż:</b>
-                    {{ !item.fulfilled ? item.currentDistance + " /" : "" }}
-                    {{ item.routeDistance }} km
-                  </div>
-
-                  <div>
-                    <b>Stacje:</b>
-                    {{ item.confirmedStopsCount }} /
-                    {{ item.allStopsCount }}
-                  </div>
-
-                  <div>
-                    <b>Rozpoczęcie:</b>
-                    {{ localeDate(item.beginDate) }}
-                  </div>
-
-                  <div>
-                    <b>Zakończenie (planowe):</b>
-                    {{ localeDate(item.scheduledEndDate) }}
-                  </div>
-
-                  <div v-if="item.terminated">
-                    <b>Zakończenie (rzeczywiste):</b>
-                    {{ localeDate(item.endDate) }}
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </transition>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, Ref, ref } from "vue";
-import axios from "axios";
-
-import ActionButton from "@/components/Global/ActionButton.vue";
-import SearchBox from "@/components/Global/SearchBox.vue";
-import dateMixin from "@/mixins/dateMixin";
-import { DataStatus } from "@/scripts/enums/DataStatus";
-
-const PROD_MODE = true;
-
-const API_URL = PROD_MODE
-  ? "https://stacjownik-api-di22o.ondigitalocean.app/api/getTimetables"
-  : "http://localhost:3001/api/getTimetables";
-
-interface APIResponse {
-  errorMessage: string | null;
-  response: TimetableHistory[] | null;
-}
-
-interface TimetableHistory {
-  timetableId: number;
-  trainNo: number;
-  trainCategoryCode: string;
-  driverId: number;
-  driverName: string;
-  route: string;
-  twr: number;
-  skr: number;
-  sceneriesString: string;
-
-  routeDistance: number;
-  currentDistance: number;
-
-  confirmedStopsCount: number;
-  allStopsCount: number;
-
-  beginDate: string;
-  endDate: string;
-
-  scheduledBeginDate: string;
-  scheduledEndDate: string;
-
-  terminated: boolean;
-  fulfilled: boolean;
-}
-
-export default defineComponent({
-  components: { SearchBox, ActionButton },
-  mixins: [dateMixin],
-  setup() {
-    const historyList: Ref<TimetableHistory[]> = ref([]);
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> =
-      ref({ status: DataStatus.Loading, error: null });
-
-    const searchedDriver = ref("");
-    const searchedTrain = ref("");
-    const maxCount = ref(15);
-
-    const fetchHistoryData = async (
-      props: {
-        searchedDriver?: string;
-        searchedTrain?: string;
-        maxCount?: number;
-      } = {}
-    ) => {
-      historyDataStatus.value.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      if (!props.searchedDriver && !props.searchedTrain)
-        queries.push("count=15");
-      if (props.maxCount) queries.push(`count=${props.maxCount}`);
-      if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
-      if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
-
-      try {
-        const responseData: APIResponse | null = await (
-          await axios.get(`${API_URL}?${queries.join("&")}`)
-        ).data;
-
-        if (!responseData) {
-          historyDataStatus.value.status = DataStatus.Error;
-          historyDataStatus.value.error = "Brak danych!";
-          return;
-        }
-
-        if (responseData.errorMessage) {
-          historyDataStatus.value.status = DataStatus.Error;
-          historyDataStatus.value.error = responseData.errorMessage;
-
-          return;
-        }
-
-        if (!responseData.response) return;
-
-        // Response data exists
-        historyList.value = responseData.response;
-        historyDataStatus.value.status = DataStatus.Loaded;
-      } catch (error) {
-        historyDataStatus.value.status = DataStatus.Error;
-        historyDataStatus.value.error = "Ups! Coś poszło nie tak!";
-      }
-    };
-
-    // on created
-    fetchHistoryData();
-
-    return {
-      historyList,
-      searchedDriver,
-      searchedTrain,
-      maxCount,
-      fetchHistoryData,
-      historyDataStatus,
-      isDataLoading: computed(
-        () => historyDataStatus.value.status === DataStatus.Loading
-      ),
-      isDataError: computed(
-        () => historyDataStatus.value.status === DataStatus.Error
-      ),
-    };
-  },
-  methods: {
-    navigateToTrain(trainNo: number | null) {
-      if (!trainNo) return;
-
-      this.$router.push({
-        name: "TrainsView",
-        query: { train: trainNo.toString() },
-      });
-    },
-
-    clearDriver() {
-      this.searchedDriver = "";
-
-      this.search();
-    },
-
-    clearTrain() {
-      this.searchedTrain = "";
-
-      this.search();
-    },
-
-    async search() {
-      this.fetchHistoryData({
-        searchedDriver: this.searchedDriver,
-        searchedTrain: this.searchedTrain,
-      });
-    },
-
-    keyPressed({ keyCode }) {
-      if (keyCode == 13) this.search();
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import "../styles/responsive.scss";
-
-.warning {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
-  }
-}
-
-.history-view {
-  height: 100%;
-
-  padding: 2em;
-}
-
-h2 {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.history_list {
-  display: flex;
-  justify-content: center;
-}
-
-.history_item {
-  &-top {
-    display: flex;
-    justify-content: space-between;
-
-    padding: 0.2em 0;
-  }
-
-  &-status {
-    &.terminated {
-      color: salmon;
-    }
-
-    &.fulfilled {
-      color: lightgreen;
-    }
-
-    &.active {
-      color: lightblue;
-    }
-  }
-}
-
-.history_search {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.search-button {
-  margin-left: 0.5em;
-}
-
-.history_warning {
-  text-align: center;
-  font-size: 1.3em;
-
-  &.error {
-    background-color: var(--clr-error);
-  }
-}
-
-.list_wrapper {
-  width: 1000px;
-}
-
-li,
-.history_warning {
-  background: #202020;
-  padding: 1em;
-  margin: 1em 0;
-}
-
-@include smallScreen() {
-  .history_search {
-    flex-direction: column;
-  }
-
-  .search-button {
-    margin-left: 0;
-    margin-top: 0.5em;
-  }
-}
-</style>

src/views/SceneryView.vue

@@ -12,13 +12,16 @@
     </div>
 
     <div class="scenery-wrapper" v-if="stationInfo">
+      <!-- <button class="history-btn btn btn--image">
+          <img :src="icons.history" alt="History icon">
+      </button> -->
+      
       <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
 
       <SceneryTimetable
         :station="stationInfo"
         :timetableOnly="timetableOnly"
       />
-
       <!-- <SceneryHistory :name="stationInfo.name" /> -->
     </div>
   </div>
@@ -42,6 +45,12 @@ import { useRoute } from "vue-router";
 export default defineComponent({
   components: { SceneryInfo, SceneryTimetable, SceneryHistory, ActionButton },
 
+  data: () => ({
+    icons: {
+      history: require("@/assets/icon-history.svg")
+    }
+  }),
+
   setup() {
     const route = useRoute();
     const store = useStore();
@@ -110,6 +119,8 @@ $sceneryBgCol: #333;
   }
 
   &-wrapper {
+    position: relative;
+
     width: 75%;
     max-width: 950px;
 
@@ -126,4 +137,18 @@ $sceneryBgCol: #333;
     text-align: center;
   }
 }
+
+button.history-btn {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+
+  padding: 0.25em;
+
+  img {
+    width: 2em;
+  }
+
+
+}
 </style>