diff --git a/package.json b/package.json
index 924dcf7..112d8bb 100644
--- a/package.json
+++ b/package.json
@@ -1,40 +1,40 @@
-{
-  "name": "stacjownik",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "deploy": "npm run build && firebase deploy --only hosting"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "dotenv": "^8.2.0",
-    "firestore": "^1.1.6",
-    "howler": "^2.2.1",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.5",
-    "vue-property-decorator": "^8.4.2",
-    "vue-router": "^3.4.3",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-router": "~4.4.0",
-    "@vue/cli-plugin-typescript": "~4.4.0",
-    "@vue/cli-plugin-vuex": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "axios": "^0.19.2",
-    "sass": "^1.26.10",
-    "sass-loader": "^8.0.2",
-    "typescript": "^3.9.7",
-    "vue-template-compiler": "^2.6.11",
-    "vuex-class": "^0.3.2",
-    "vuex-module-decorators": "^0.17.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "stacjownik",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "deploy": "npm run build && firebase deploy --only hosting"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "dotenv": "^8.2.0",
+    "firestore": "^1.1.6",
+    "howler": "^2.2.1",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.5",
+    "vue-property-decorator": "^8.4.2",
+    "vue-router": "^3.4.3",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-router": "~4.4.0",
+    "@vue/cli-plugin-typescript": "~4.4.0",
+    "@vue/cli-plugin-vuex": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "axios": "^0.19.2",
+    "sass": "^1.26.10",
+    "sass-loader": "^8.0.2",
+    "typescript": "^3.9.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuex-class": "^0.3.2",
+    "vuex-module-decorators": "^0.17.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/src/assets/icon-select.svg b/src/assets/icon-select.svg
index 78de7f6..10f29cd 100644
--- a/src/assets/icon-select.svg
+++ b/src/assets/icon-select.svg
@@ -1,4 +1,4 @@
-<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 14L13 2L25 14" stroke="white" stroke-width="2"/>
-<path d="M1 20L13 32L25 20" stroke="white" stroke-width="2"/>
-</svg>
+<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 14L13 2L25 14" stroke="white" stroke-width="2"/>
+<path d="M1 20L13 32L25 20" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/components/Global/DonationModal.vue b/src/components/Global/DonationModal.vue
index 024ce62..b7575ac 100644
--- a/src/components/Global/DonationModal.vue
+++ b/src/components/Global/DonationModal.vue
@@ -1,166 +1,166 @@
-<template>
-  <div class="modal" v-if="!modalHidden">
-    <div class="modal_content">
-      <span class="modal_title">Grosza daj Stacjownikowi...</span>
-      <div class="modal_body">
-        <div class="modal_body-header">
-          Stacjownik to projekt całkowicie darmowy dla wszystkich.
-          Jednak jeśli chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych funkcjonalności, które wykraczają poza darmowe możliwości
-          hostingu, na którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet rubla!
-        </div>
-
-        <div class="modal_payments">
-          <div>Płatności dokonasz korzystając z poniższych metod:</div>
-          <div class="payment">
-            <div>
-              <a target="_blank" href="https://paypal.me/spythere">
-                <img :src="paypalIcon" alt="icon-paypal" />
-                <span>PAYPAL</span>
-              </a>
-            </div>
-          </div>
-
-          <div class="payment">
-            <div>
-              <div class="payment_open" v-if="showNumber">94 1140 2004 0000 3502 7784 9203</div>
-              <div class="payment_closed" v-else @click="showNumber = true">
-                <b>PRZELEW NA KONTO</b>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>Wielkie dzięki i do zobaczenia na szlaku!</div>
-
-        <div class="modal_buttons">
-          <button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-import StorageManager from "@/scripts/storageManager";
-
-@Component
-export default class Modal extends Vue {
-  @Prop() modalHidden!: boolean;
-
-  showNumber = false;
-  STORAGE_ID = "modal_donation";
-
-  paypalIcon: string = require("@/assets/icon-paypal.svg");
-
-  toggleModal(type: string) {
-    this.$emit("toggleModal");
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive";
-
-.modal {
-  z-index: 100;
-
-  font-size: calc(1rem + 0.8vw);
-  padding: 0.3rem;
-
-  border-radius: 1em;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  width: 65%;
-  max-width: 950px;
-
-  transform: translate(-50%, -50%);
-
-  background: rgba(black, 0.85);
-  color: white;
-
-  @include bigScreen() {
-    font-size: 2rem;
-  }
-
-  @include smallScreen() {
-    font-size: 1.2rem;
-    width: 95%;
-  }
-
-  &_content {
-    margin: 0 auto;
-    text-align: center;
-
-    padding: 0.5em;
-  }
-
-  &_title {
-    color: gold;
-    font-weight: bold;
-  }
-
-  &_body {
-    font-size: 0.75em;
-
-    &-header {
-      text-align: justify;
-    }
-
-    > div {
-      margin-top: 0.5em;
-    }
-  }
-
-  &_payments {
-    > span {
-      margin-right: 0.5em;
-    }
-
-    .payment {
-      display: flex;
-      justify-content: center;
-
-      margin-top: 0.3em;
-
-      &_closed {
-        cursor: pointer;
-
-        &:hover {
-          color: gold;
-        }
-      }
-
-      a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        border-radius: 0.2em;
-        padding: 0.15em 0.3em;
-
-        font-size: 1.1em;
-        font-weight: bold;
-      }
-
-      img {
-        width: 1.2em;
-        margin-right: 0.2em;
-      }
-    }
-  }
-
-  &_buttons {
-    display: flex;
-    justify-content: center;
-
-    > button {
-      margin: 0 0.5em;
-    }
-  }
-}
+<template>
+  <div class="modal" v-if="!modalHidden">
+    <div class="modal_content">
+      <span class="modal_title">Grosza daj Stacjownikowi...</span>
+      <div class="modal_body">
+        <div class="modal_body-header">
+          Stacjownik to projekt całkowicie darmowy dla wszystkich.
+          Jednak jeśli chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych funkcjonalności, które wykraczają poza darmowe możliwości
+          hostingu, na którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet rubla!
+        </div>
+
+        <div class="modal_payments">
+          <div>Płatności dokonasz korzystając z poniższych metod:</div>
+          <div class="payment">
+            <div>
+              <a target="_blank" href="https://paypal.me/spythere">
+                <img :src="paypalIcon" alt="icon-paypal" />
+                <span>PAYPAL</span>
+              </a>
+            </div>
+          </div>
+
+          <div class="payment">
+            <div>
+              <div class="payment_open" v-if="showNumber">94 1140 2004 0000 3502 7784 9203</div>
+              <div class="payment_closed" v-else @click="showNumber = true">
+                <b>PRZELEW NA KONTO</b>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>Wielkie dzięki i do zobaczenia na szlaku!</div>
+
+        <div class="modal_buttons">
+          <button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import StorageManager from "@/scripts/storageManager";
+
+@Component
+export default class Modal extends Vue {
+  @Prop() modalHidden!: boolean;
+
+  showNumber = false;
+  STORAGE_ID = "modal_donation";
+
+  paypalIcon: string = require("@/assets/icon-paypal.svg");
+
+  toggleModal(type: string) {
+    this.$emit("toggleModal");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+
+.modal {
+  z-index: 100;
+
+  font-size: calc(1rem + 0.8vw);
+  padding: 0.3rem;
+
+  border-radius: 1em;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  width: 65%;
+  max-width: 950px;
+
+  transform: translate(-50%, -50%);
+
+  background: rgba(black, 0.85);
+  color: white;
+
+  @include bigScreen() {
+    font-size: 2rem;
+  }
+
+  @include smallScreen() {
+    font-size: 1.2rem;
+    width: 95%;
+  }
+
+  &_content {
+    margin: 0 auto;
+    text-align: center;
+
+    padding: 0.5em;
+  }
+
+  &_title {
+    color: gold;
+    font-weight: bold;
+  }
+
+  &_body {
+    font-size: 0.75em;
+
+    &-header {
+      text-align: justify;
+    }
+
+    > div {
+      margin-top: 0.5em;
+    }
+  }
+
+  &_payments {
+    > span {
+      margin-right: 0.5em;
+    }
+
+    .payment {
+      display: flex;
+      justify-content: center;
+
+      margin-top: 0.3em;
+
+      &_closed {
+        cursor: pointer;
+
+        &:hover {
+          color: gold;
+        }
+      }
+
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 0.2em;
+        padding: 0.15em 0.3em;
+
+        font-size: 1.1em;
+        font-weight: bold;
+      }
+
+      img {
+        width: 1.2em;
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  &_buttons {
+    display: flex;
+    justify-content: center;
+
+    > button {
+      margin: 0 0.5em;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index f3655d8..e434125 100644
--- a/src/components/Global/SelectBox.vue
+++ b/src/components/Global/SelectBox.vue
@@ -1,109 +1,109 @@
-<template>
-  <div class="select-box">
-    <div class="title">Sortuj według</div>
-
-    <div class="option-selected" @click="toggleOptionList">
-      <span>{{ selectedOption }}</span>
-      <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
-    </div>
-
-    <div class="option-container">
-      <ul class="option-list" :class="{ open: listOpen }">
-        <li
-          class="option-item"
-          v-for="(option, i) in sortOptionList"
-          :key="i"
-          @click="() => chooseOption(option)"
-        >
-          <input type="option-radio" name="sort" :id="option.id" />
-          <label :for="option.id">{{ option.content }}</label>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class SelectBox extends Vue {
-  @Prop() title!: string;
-  @Prop() optionList!: string[];
-
-  selectedOption: string = "";
-}
-</script>
-
-<style lang="scss" scoped>
-.option {
-  &-container {
-    position: relative;
-
-    input {
-      display: none;
-    }
-
-    label {
-      padding: 0.5rem 1rem;
-      width: 100%;
-      cursor: pointer;
-    }
-  }
-
-  &-item {
-    display: flex;
-
-    &:hover {
-      background-color: rgba(#868686, 0.85);
-    }
-
-    transition: background 150ms ease-in;
-  }
-
-  &-selected,
-  &-list {
-    background: #333;
-    border-radius: 0.5em;
-  }
-
-  &-selected {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    padding: 0.5rem 1rem;
-    min-width: 150px;
-    cursor: pointer;
-
-    span {
-      margin-right: 2rem;
-    }
-
-    img {
-      max-width: 0.75em;
-    }
-  }
-
-  &-list {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    z-index: 10;
-
-    width: 100%;
-    background-color: rgba(#222, 0.95);
-    overflow: hidden;
-
-    max-height: 0;
-
-    &.open {
-      max-height: 250px;
-      opacity: 1;
-    }
-
-    transition: all 150ms ease-in;
-  }
-}
+<template>
+  <div class="select-box">
+    <div class="title">Sortuj według</div>
+
+    <div class="option-selected" @click="toggleOptionList">
+      <span>{{ selectedOption }}</span>
+      <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
+    </div>
+
+    <div class="option-container">
+      <ul class="option-list" :class="{ open: listOpen }">
+        <li
+          class="option-item"
+          v-for="(option, i) in sortOptionList"
+          :key="i"
+          @click="() => chooseOption(option)"
+        >
+          <input type="option-radio" name="sort" :id="option.id" />
+          <label :for="option.id">{{ option.content }}</label>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class SelectBox extends Vue {
+  @Prop() title!: string;
+  @Prop() optionList!: string[];
+
+  selectedOption: string = "";
+}
+</script>
+
+<style lang="scss" scoped>
+.option {
+  &-container {
+    position: relative;
+
+    input {
+      display: none;
+    }
+
+    label {
+      padding: 0.5rem 1rem;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  &-item {
+    display: flex;
+
+    &:hover {
+      background-color: rgba(#868686, 0.85);
+    }
+
+    transition: background 150ms ease-in;
+  }
+
+  &-selected,
+  &-list {
+    background: #333;
+    border-radius: 0.5em;
+  }
+
+  &-selected {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5rem 1rem;
+    min-width: 150px;
+    cursor: pointer;
+
+    span {
+      margin-right: 2rem;
+    }
+
+    img {
+      max-width: 0.75em;
+    }
+  }
+
+  &-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    z-index: 10;
+
+    width: 100%;
+    background-color: rgba(#222, 0.95);
+    overflow: hidden;
+
+    max-height: 0;
+
+    &.open {
+      max-height: 250px;
+      opacity: 1;
+    }
+
+    transition: all 150ms ease-in;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 5be5107..7a92a6b 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -1,404 +1,404 @@
-<template>
-  <div class="scenery-info">
-    <div class="info-header">
-      <div class="scenery-name">
-        <a
-          v-if="stationInfo.stationURL"
-          :href="stationInfo.stationURL"
-          target="_blank"
-          rel="noopener noreferrer"
-        >{{ stationInfo.stationName }}</a>
-
-        <span v-else>{{ stationInfo.stationName }}</span>
-      </div>
-      <div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
-    </div>
-
-    <section v-if="!timetableOnly">
-      <div class="info-stats">
-        <span class="likes">
-          <img :src="likeIcon" alt="icon-like" />
-          <span>{{ stationInfo.dispatcherRate }}</span>
-        </span>
-        <span class="users">
-          <img :src="userIcon" alt="icon-user" />
-          <span>{{ stationInfo.currentUsers }}</span>
-          /
-          <span>{{ stationInfo.maxUsers }}</span>
-        </span>
-        <span class="spawns">
-          <img :src="spawnIcon" alt="icon-spawn" />
-          <span>{{ stationInfo.spawns.length }}</span>
-        </span>
-        <span class="schedules">
-          <img :src="timetableIcon" alt="icon-timetable" />
-          <span v-if="stationInfo.scheduledTrains">
-            <span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
-            /
-            <span
-              style="color: #bbb"
-            >{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
-          </span>
-        </span>
-      </div>
-
-      <div class="info-brief">
-        <img
-          v-if="stationInfo.controlType"
-          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
-          :alt="stationInfo.controlType"
-          :title="'Sterowanie ' + stationInfo.controlType"
-        />
-
-        <img
-          v-if="stationInfo.signalType"
-          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
-          :alt="stationInfo.signalType"
-          :title="'Sygnalizacja ' + stationInfo.signalType"
-        />
-
-        <img
-          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-          :src="require(`@/assets/icon-SBL.svg`)"
-          alt="SBL"
-          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-        />
-
-        <img
-          v-if="stationInfo.default"
-          :src="require(`@/assets/icon-td2.svg`)"
-          alt="default-pack"
-          title="Sceneria domyślnie dostępna w grze"
-        />
-
-        <img
-          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-          :src="require(`@/assets/icon-lock.svg`)"
-          alt="non-public"
-          title="Sceneria niepubliczna"
-        />
-
-        <img
-          v-if="stationInfo.unavailable"
-          :src="require(`@/assets/icon-unavailable.svg`)"
-          alt="icon-unavailable"
-          title="Sceneria niedostępna"
-        />
-      </div>
-
-      <div class="info-dispatcher">
-        <div>
-          <span
-            class="level"
-            :style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
-          >{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
-
-          <span class="name">{{ stationInfo.dispatcherName }}</span>
-        </div>
-
-        <span
-          class="status"
-          :class="statusClasses(stationInfo.occupiedTo)"
-        >{{ stationInfo.occupiedTo }}</span>
-      </div>
-
-      <div class="info-lists">
-        <div class="user-list">
-          <h3 class="user-header">
-            GRACZE ONLINE
-            <img :src="userIcon" alt="icon-user" />
-          </h3>
-
-          <div
-            v-for="(train, i) in computedStationTrains"
-            class="user"
-            :class="train.stopStatus"
-            :key="train.trainNo + i"
-            @click="() => navigateToTrain(train.trainNo)"
-          >
-            <span class="user_train">{{ train.trainNo }}</span>
-            <span class="user_name">{{ train.driverName }}</span>
-          </div>
-
-          <div
-            class="user offline"
-            v-if="!computedStationTrains || computedStationTrains.length == 0"
-          >BRAK AKTYWNYCH GRACZY</div>
-        </div>
-
-        <div class="spawn-list">
-          <h3 class="spawn-header">
-            OTWARTE SPAWNY
-            <img :src="spawnIcon" alt="icon-spawn" />
-          </h3>
-
-          <span
-            class="spawn"
-            v-for="(spawn, i) in stationInfo.spawns"
-            :key="spawn.spawnName + stationInfo.dispatcherName + i"
-          >
-            <span class="spawn_name">{{ spawn.spawnName }}</span>
-            <span class="spawn_length">{{ spawn.spawnLength }}m</span>
-          </span>
-
-          <span
-            class="spawn none"
-            v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
-          >BRAK OTWARTYCH SPAWNÓW</span>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import styleMixin from "@/mixins/styleMixin";
-
-@Component
-export default class SceneryInfo extends styleMixin {
-  @Prop() readonly stationInfo!: Station;
-  @Prop() readonly timetableOnly!: boolean;
-
-  likeIcon: string = require("@/assets/icon-like.svg");
-  spawnIcon: string = require("@/assets/icon-spawn.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  userIcon: string = require("@/assets/icon-user.svg");
-
-  get computedStationTrains() {
-    if (!this.stationInfo) return null;
-
-    return this.stationInfo.stationTrains.map((stationTrain) => {
-      const scheduledData = this.stationInfo?.scheduledTrains.find(
-        (scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
-      );
-
-      return {
-        ...stationTrain,
-        stopStatus: scheduledData?.stopStatus || "no-timetable",
-      };
-    });
-  }
-
-  navigateToTrain(trainNo: number) {
-    this.$router.push({
-      name: "TrainsView",
-      params: { passedSearchedTrain: trainNo.toString() },
-    });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/user_badge.scss";
-@import "../../styles/variables.scss";
-
-h3 {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
-}
-
-.info {
-  &-header {
-    padding: 1rem;
-
-    & > .scenery-name {
-      font-size: 3em;
-      font-weight: bold;
-      color: $accentCol;
-
-      text-transform: uppercase;
-    }
-
-    & > .scenery-hash {
-      font-size: 1em;
-      line-height: 0.8em;
-      color: #aaa;
-    }
-  }
-
-  &-stats {
-    font-size: 1.3em;
-    padding: 1rem 0;
-
-    display: flex;
-    justify-content: center;
-
-    & > span {
-      display: flex;
-      align-items: center;
-
-      margin: 0 0.6em;
-    }
-
-    .likes,
-    .spawns {
-      color: $accentCol;
-    }
-
-    span > img {
-      width: 1.2em;
-      margin-right: 0.5em;
-    }
-  }
-
-  &-brief {
-    padding: 1rem 0;
-
-    img {
-      width: 2.5em;
-      margin: 0 0.5rem;
-    }
-  }
-
-  &-dispatcher {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .level {
-      display: inline-block;
-      margin-right: 0.3em;
-      background: firebrick;
-
-      border-radius: 0.1em;
-
-      width: 1.5em;
-      height: 1.5em;
-      line-height: 1.5em;
-      font-size: 2em;
-      font-weight: bold;
-    }
-
-    .name {
-      font-size: 1.6em;
-      margin-right: 1em;
-    }
-
-    .status {
-      font-size: 1em;
-      border-radius: 1em;
-    }
-  }
-
-  &-lists {
-    display: flex;
-
-    align-items: center;
-    flex-direction: column;
-
-    & > .user-list {
-      ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-    }
-  }
-}
-
-.user,
-.spawn {
-  font-weight: 600;
-  font-size: 0.9em;
-
-  display: inline-block;
-  padding: 0;
-
-  background: #585858;
-
-  margin: 0.25em;
-
-  span {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  @include smallScreen() {
-    font-size: 1em;
-  }
-}
-
-.user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
-  &.no-timetable {
-    pointer-events: none;
-
-    & > .user_train {
-      background-color: $no-timetable;
-    }
-  }
-
-  &.departed > &_train {
-    background-color: $departed;
-  }
-
-  &.stopped > &_train {
-    background-color: $stopped;
-  }
-
-  &.online > &_train {
-    background-color: $online;
-  }
-
-  &.terminated > &_train {
-    background-color: $terminated;
-  }
-
-  &.disconnected > &_train {
-    background-color: $disconnected;
-  }
-
-  &.offline {
-    background: firebrick;
-    pointer-events: none;
-  }
-}
-
-.spawn {
-  &_length {
-    background: $accentCol;
-    color: black;
-  }
-}
-
-.spawn.none,
-.user.offline {
-  font-weight: 600;
-
-  padding: 0.2em 0.4em;
-  background: firebrick;
-
-  text-align: center;
-
-  @include smallScreen() {
-    font-size: 1em;
-  }
-}
+<template>
+  <div class="scenery-info">
+    <div class="info-header">
+      <div class="scenery-name">
+        <a
+          v-if="stationInfo.stationURL"
+          :href="stationInfo.stationURL"
+          target="_blank"
+          rel="noopener noreferrer"
+        >{{ stationInfo.stationName }}</a>
+
+        <span v-else>{{ stationInfo.stationName }}</span>
+      </div>
+      <div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
+    </div>
+
+    <section v-if="!timetableOnly">
+      <div class="info-stats">
+        <span class="likes">
+          <img :src="likeIcon" alt="icon-like" />
+          <span>{{ stationInfo.dispatcherRate }}</span>
+        </span>
+        <span class="users">
+          <img :src="userIcon" alt="icon-user" />
+          <span>{{ stationInfo.currentUsers }}</span>
+          /
+          <span>{{ stationInfo.maxUsers }}</span>
+        </span>
+        <span class="spawns">
+          <img :src="spawnIcon" alt="icon-spawn" />
+          <span>{{ stationInfo.spawns.length }}</span>
+        </span>
+        <span class="schedules">
+          <img :src="timetableIcon" alt="icon-timetable" />
+          <span v-if="stationInfo.scheduledTrains">
+            <span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
+            /
+            <span
+              style="color: #bbb"
+            >{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+          </span>
+        </span>
+      </div>
+
+      <div class="info-brief">
+        <img
+          v-if="stationInfo.controlType"
+          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
+          :alt="stationInfo.controlType"
+          :title="'Sterowanie ' + stationInfo.controlType"
+        />
+
+        <img
+          v-if="stationInfo.signalType"
+          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
+          :alt="stationInfo.signalType"
+          :title="'Sygnalizacja ' + stationInfo.signalType"
+        />
+
+        <img
+          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
+          :src="require(`@/assets/icon-SBL.svg`)"
+          alt="SBL"
+          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+        />
+
+        <img
+          v-if="stationInfo.default"
+          :src="require(`@/assets/icon-td2.svg`)"
+          alt="default-pack"
+          title="Sceneria domyślnie dostępna w grze"
+        />
+
+        <img
+          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
+          :src="require(`@/assets/icon-lock.svg`)"
+          alt="non-public"
+          title="Sceneria niepubliczna"
+        />
+
+        <img
+          v-if="stationInfo.unavailable"
+          :src="require(`@/assets/icon-unavailable.svg`)"
+          alt="icon-unavailable"
+          title="Sceneria niedostępna"
+        />
+      </div>
+
+      <div class="info-dispatcher">
+        <div>
+          <span
+            class="level"
+            :style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
+          >{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
+
+          <span class="name">{{ stationInfo.dispatcherName }}</span>
+        </div>
+
+        <span
+          class="status"
+          :class="statusClasses(stationInfo.occupiedTo)"
+        >{{ stationInfo.occupiedTo }}</span>
+      </div>
+
+      <div class="info-lists">
+        <div class="user-list">
+          <h3 class="user-header">
+            GRACZE ONLINE
+            <img :src="userIcon" alt="icon-user" />
+          </h3>
+
+          <div
+            v-for="(train, i) in computedStationTrains"
+            class="user"
+            :class="train.stopStatus"
+            :key="train.trainNo + i"
+            @click="() => navigateToTrain(train.trainNo)"
+          >
+            <span class="user_train">{{ train.trainNo }}</span>
+            <span class="user_name">{{ train.driverName }}</span>
+          </div>
+
+          <div
+            class="user offline"
+            v-if="!computedStationTrains || computedStationTrains.length == 0"
+          >BRAK AKTYWNYCH GRACZY</div>
+        </div>
+
+        <div class="spawn-list">
+          <h3 class="spawn-header">
+            OTWARTE SPAWNY
+            <img :src="spawnIcon" alt="icon-spawn" />
+          </h3>
+
+          <span
+            class="spawn"
+            v-for="(spawn, i) in stationInfo.spawns"
+            :key="spawn.spawnName + stationInfo.dispatcherName + i"
+          >
+            <span class="spawn_name">{{ spawn.spawnName }}</span>
+            <span class="spawn_length">{{ spawn.spawnLength }}m</span>
+          </span>
+
+          <span
+            class="spawn none"
+            v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
+          >BRAK OTWARTYCH SPAWNÓW</span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import styleMixin from "@/mixins/styleMixin";
+
+@Component
+export default class SceneryInfo extends styleMixin {
+  @Prop() readonly stationInfo!: Station;
+  @Prop() readonly timetableOnly!: boolean;
+
+  likeIcon: string = require("@/assets/icon-like.svg");
+  spawnIcon: string = require("@/assets/icon-spawn.svg");
+  timetableIcon: string = require("@/assets/icon-timetable.svg");
+  userIcon: string = require("@/assets/icon-user.svg");
+
+  get computedStationTrains() {
+    if (!this.stationInfo) return null;
+
+    return this.stationInfo.stationTrains.map((stationTrain) => {
+      const scheduledData = this.stationInfo?.scheduledTrains.find(
+        (scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
+      );
+
+      return {
+        ...stationTrain,
+        stopStatus: scheduledData?.stopStatus || "no-timetable",
+      };
+    });
+  }
+
+  navigateToTrain(trainNo: number) {
+    this.$router.push({
+      name: "TrainsView",
+      params: { passedSearchedTrain: trainNo.toString() },
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+@import "../../styles/user_badge.scss";
+@import "../../styles/variables.scss";
+
+h3 {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+
+  img {
+    width: 1.1em;
+    margin-left: 0.5em;
+  }
+}
+
+.info {
+  &-header {
+    padding: 1rem;
+
+    & > .scenery-name {
+      font-size: 3em;
+      font-weight: bold;
+      color: $accentCol;
+
+      text-transform: uppercase;
+    }
+
+    & > .scenery-hash {
+      font-size: 1em;
+      line-height: 0.8em;
+      color: #aaa;
+    }
+  }
+
+  &-stats {
+    font-size: 1.3em;
+    padding: 1rem 0;
+
+    display: flex;
+    justify-content: center;
+
+    & > span {
+      display: flex;
+      align-items: center;
+
+      margin: 0 0.6em;
+    }
+
+    .likes,
+    .spawns {
+      color: $accentCol;
+    }
+
+    span > img {
+      width: 1.2em;
+      margin-right: 0.5em;
+    }
+  }
+
+  &-brief {
+    padding: 1rem 0;
+
+    img {
+      width: 2.5em;
+      margin: 0 0.5rem;
+    }
+  }
+
+  &-dispatcher {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .level {
+      display: inline-block;
+      margin-right: 0.3em;
+      background: firebrick;
+
+      border-radius: 0.1em;
+
+      width: 1.5em;
+      height: 1.5em;
+      line-height: 1.5em;
+      font-size: 2em;
+      font-weight: bold;
+    }
+
+    .name {
+      font-size: 1.6em;
+      margin-right: 1em;
+    }
+
+    .status {
+      font-size: 1em;
+      border-radius: 1em;
+    }
+  }
+
+  &-lists {
+    display: flex;
+
+    align-items: center;
+    flex-direction: column;
+
+    & > .user-list {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.user,
+.spawn {
+  font-weight: 600;
+  font-size: 0.9em;
+
+  display: inline-block;
+  padding: 0;
+
+  background: #585858;
+
+  margin: 0.25em;
+
+  span {
+    display: inline-block;
+    padding: 0.2em 0.4em;
+  }
+
+  @include smallScreen() {
+    font-size: 1em;
+  }
+}
+
+.user {
+  cursor: pointer;
+
+  &_train {
+    color: black;
+    background-color: $no-timetable;
+
+    transition: background-color 200ms;
+    -ms-transition: background-color 200ms;
+    -webkit-transition: background-color 200ms;
+  }
+
+  &.no-timetable {
+    pointer-events: none;
+
+    & > .user_train {
+      background-color: $no-timetable;
+    }
+  }
+
+  &.departed > &_train {
+    background-color: $departed;
+  }
+
+  &.stopped > &_train {
+    background-color: $stopped;
+  }
+
+  &.online > &_train {
+    background-color: $online;
+  }
+
+  &.terminated > &_train {
+    background-color: $terminated;
+  }
+
+  &.disconnected > &_train {
+    background-color: $disconnected;
+  }
+
+  &.offline {
+    background: firebrick;
+    pointer-events: none;
+  }
+}
+
+.spawn {
+  &_length {
+    background: $accentCol;
+    color: black;
+  }
+}
+
+.spawn.none,
+.user.offline {
+  font-weight: 600;
+
+  padding: 0.2em 0.4em;
+  background: firebrick;
+
+  text-align: center;
+
+  @include smallScreen() {
+    font-size: 1em;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index f25a4de..4bdac11 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -1,467 +1,467 @@
-<template>
-  <div class="scenery-timetable">
-    <h3 class="timetable-header">
-      <span>AKTYWNE ROZKŁADY JAZDY</span>
-
-      <a v-if="!timetableOnly" :href="currentURL + '&timetable_only=1'" target="_blank">
-        <img :src="viewIcon" alt="icon-view" title="Wyodrębnij rozkłady jazdy" />
-      </a>
-    </h3>
-
-    <div class="select-box" v-if="stationInfo.checkpoints">
-      <div class="option-container">
-        <div class="option-selected" @click="toggleOptionList">
-          <span>{{ selectedOption }}</span>
-          <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
-        </div>
-
-        <ul class="option-list" :class="{ open: listOpen }">
-          <li
-            class="option-item"
-            v-for="(cp, i) in stationInfo.checkpoints"
-            :key="i"
-            @click="() => chooseOption(cp.checkpointName)"
-          >
-            <input type="option-radio" name="sort" />
-            <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
-
-    <span
-      class="timetable-item empty"
-      v-else-if="computedScheduledTrains.length == 0"
-    >Brak aktywnych rozkładów!</span>
-
-    <transition-group name="list-anim">
-      <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
-        <span class="timetable-general">
-          <span class="general-info">
-            <router-link
-              :to="{
-                  name: 'TrainsView',
-                  params: {
-                    passedSearchedTrain: 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>
-            </span>
-
-            <div class="info-route">
-              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
-            </div>
-          </span>
-
-          <span class="general-status">
-            <span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
-          </span>
-        </span>
-
-        <span class="timetable-schedule">
-          <span class="schedule-arrival">
-            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
-              ROZPOCZYNA
-              <div>BIEG</div>
-            </span>
-            <span class="arrival-time" v-else>
-              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-              scheduledTrain.stopInfo.arrivalDelay
-              }})
-            </span>
-          </span>
-
-          <span class="schedule-stop">
-            <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
-              {{ scheduledTrain.stopInfo.stopTime }}
-              {{ scheduledTrain.stopInfo.stopType }}
-            </span>
-            <span class="stop-arrow arrow"></span>
-          </span>
-          <span class="schedule-departure">
-            <span
-              class="departure-time terminates"
-              v-if="scheduledTrain.stopInfo.terminatesHere"
-            >KOŃCZY BIEG</span>
-            <span class="departure-time" v-else>
-              {{ scheduledTrain.stopInfo.departureTimeString }} ({{
-              scheduledTrain.stopInfo.departureDelay
-              }})
-            </span>
-          </span>
-        </span>
-      </div>
-    </transition-group>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-import Station from "@/scripts/interfaces/Station";
-import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
-
-@Component
-export default class SceneryTimetable extends Vue {
-  @Prop() readonly stationInfo!: Station;
-  @Prop() readonly timetableOnly!: boolean;
-  @Prop() readonly dataStatus!: number;
-
-  viewIcon: string = require("@/assets/icon-view.svg");
-
-  listOpen: boolean = false;
-  selectedOption: string = "";
-
-  mounted() {
-    if (!this.stationInfo.checkpoints) return;
-
-    if (this.selectedOption == "")
-      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
-  }
-
-  activated() {
-    if (!this.stationInfo) return;
-    if (!this.stationInfo.checkpoints) return;
-
-    if (this.selectedOption == "")
-      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
-  }
-
-  toggleOptionList() {
-    this.listOpen = !this.listOpen;
-  }
-
-  closeOptionList() {
-    this.listOpen = false;
-  }
-
-  chooseOption(name: string) {
-    this.selectedOption = name;
-    this.closeOptionList();
-  }
-
-  get currentURL() {
-    return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
-  }
-
-  get computedScheduledTrains() {
-    if (!this.stationInfo) return [];
-
-    let scheduledTrains: ScheduledTrain[] | undefined;
-
-    if (this.stationInfo.checkpoints)
-      scheduledTrains = this.stationInfo.checkpoints.find(
-        (cp) => cp.checkpointName === this.selectedOption
-      )?.scheduledTrains;
-    else scheduledTrains = this.stationInfo.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;
-
-        return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
-          ? 1
-          : -1;
-      }) || []
-    );
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
-
-h3 {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
-}
-
-.list-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 250ms ease-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  &-move {
-    transition: transform 100ms;
-  }
-}
-
-.select-box {
-  display: flex;
-  justify-content: center;
-}
-
-.option {
-  &-container {
-    position: relative;
-
-    input {
-      display: none;
-    }
-
-    label {
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-    }
-  }
-
-  &-item {
-    display: flex;
-    justify-content: center;
-
-    &:hover {
-      background-color: rgba(#868686, 0.85);
-    }
-
-    transition: background 150ms ease-in;
-  }
-
-  &-selected,
-  &-list {
-    background: #444;
-    border-radius: 0.5em;
-  }
-
-  &-selected {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    padding: 0.5rem 1rem;
-    min-width: 10em;
-    cursor: pointer;
-
-    span {
-      margin-right: 2rem;
-    }
-
-    img {
-      max-width: 0.75em;
-    }
-  }
-
-  &-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-
-    width: 100%;
-
-    z-index: 10;
-
-    background-color: rgba(#222, 0.95);
-    overflow: hidden;
-
-    max-height: 0;
-
-    &.open {
-      max-height: 250px;
-      opacity: 1;
-    }
-
-    transition: all 150ms ease-in;
-  }
-}
-
-.timetable {
-  &-header {
-    a {
-      display: flex;
-    }
-
-    img {
-      cursor: pointer;
-    }
-  }
-
-  &-item {
-    margin: 1em auto;
-    font-size: 0.8em;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-
-    padding: 0 0.5rem;
-
-    background: #555;
-
-    @include smallScreen() {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &.loading,
-    &.empty {
-      padding: 1rem;
-      font-size: 1em;
-    }
-
-    &.empty {
-      color: $accentCol;
-    }
-  }
-
-  &-general {
-    padding: 0.5rem 0.3rem;
-    border-radius: 10px;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    text-align: left;
-
-    overflow: hidden;
-
-    @include smallScreen() {
-      width: 95%;
-      font-size: 1.3em;
-    }
-  }
-
-  &-schedule {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-    font-size: 1.2em;
-
-    @include smallScreen() {
-      width: 100%;
-      margin: 0.7em 0;
-      font-size: 1.8em;
-    }
-  }
-}
-
-.arrow {
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: inline-block;
-  padding: 2px;
-  margin-left: 50px;
-
-  position: relative;
-
-  transform: rotate(-45deg);
-
-  &::before {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 55px;
-    height: 3px;
-    top: 4px;
-    left: 4px;
-
-    transform: translate(-100%, -1px) rotate(45deg);
-    transform-origin: right bottom;
-
-    background: white;
-  }
-}
-
-.general-info {
-  span {
-    color: $accentCol;
-  }
-
-  .info-route {
-    margin-top: 0.5em;
-  }
-}
-
-.general-status {
-  span.arriving {
-    color: #aaa;
-  }
-
-  span.departed {
-    color: lime;
-    font-weight: bold;
-
-    &-away {
-      font-weight: bold;
-      color: rgb(0, 155, 0);
-    }
-  }
-
-  span.stopped {
-    color: #ffa600;
-    font-weight: bold;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: #e00000;
-    font-weight: bold;
-  }
-}
-
-.schedule {
-  &-arrival,
-  &-stop,
-  &-departure {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: 0 0.3rem;
-  }
-
-  &-stop {
-    display: flex;
-    flex-direction: column;
-
-    .stop-time {
-      font-size: 0.7em;
-      margin: 5px 0;
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.75em;
-}
+<template>
+  <div class="scenery-timetable">
+    <h3 class="timetable-header">
+      <span>AKTYWNE ROZKŁADY JAZDY</span>
+
+      <a v-if="!timetableOnly" :href="currentURL + '&timetable_only=1'" target="_blank">
+        <img :src="viewIcon" alt="icon-view" title="Wyodrębnij rozkłady jazdy" />
+      </a>
+    </h3>
+
+    <div class="select-box" v-if="stationInfo.checkpoints">
+      <div class="option-container">
+        <div class="option-selected" @click="toggleOptionList">
+          <span>{{ selectedOption }}</span>
+          <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
+        </div>
+
+        <ul class="option-list" :class="{ open: listOpen }">
+          <li
+            class="option-item"
+            v-for="(cp, i) in stationInfo.checkpoints"
+            :key="i"
+            @click="() => chooseOption(cp.checkpointName)"
+          >
+            <input type="option-radio" name="sort" />
+            <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
+
+    <span
+      class="timetable-item empty"
+      v-else-if="computedScheduledTrains.length == 0"
+    >Brak aktywnych rozkładów!</span>
+
+    <transition-group name="list-anim">
+      <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
+        <span class="timetable-general">
+          <span class="general-info">
+            <router-link
+              :to="{
+                  name: 'TrainsView',
+                  params: {
+                    passedSearchedTrain: 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>
+            </span>
+
+            <div class="info-route">
+              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+            </div>
+          </span>
+
+          <span class="general-status">
+            <span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
+          </span>
+        </span>
+
+        <span class="timetable-schedule">
+          <span class="schedule-arrival">
+            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+              ROZPOCZYNA
+              <div>BIEG</div>
+            </span>
+            <span class="arrival-time" v-else>
+              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
+              scheduledTrain.stopInfo.arrivalDelay
+              }})
+            </span>
+          </span>
+
+          <span class="schedule-stop">
+            <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
+              {{ scheduledTrain.stopInfo.stopTime }}
+              {{ scheduledTrain.stopInfo.stopType }}
+            </span>
+            <span class="stop-arrow arrow"></span>
+          </span>
+          <span class="schedule-departure">
+            <span
+              class="departure-time terminates"
+              v-if="scheduledTrain.stopInfo.terminatesHere"
+            >KOŃCZY BIEG</span>
+            <span class="departure-time" v-else>
+              {{ scheduledTrain.stopInfo.departureTimeString }} ({{
+              scheduledTrain.stopInfo.departureDelay
+              }})
+            </span>
+          </span>
+        </span>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import Station from "@/scripts/interfaces/Station";
+import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
+
+@Component
+export default class SceneryTimetable extends Vue {
+  @Prop() readonly stationInfo!: Station;
+  @Prop() readonly timetableOnly!: boolean;
+  @Prop() readonly dataStatus!: number;
+
+  viewIcon: string = require("@/assets/icon-view.svg");
+
+  listOpen: boolean = false;
+  selectedOption: string = "";
+
+  mounted() {
+    if (!this.stationInfo.checkpoints) return;
+
+    if (this.selectedOption == "")
+      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
+  }
+
+  activated() {
+    if (!this.stationInfo) return;
+    if (!this.stationInfo.checkpoints) return;
+
+    if (this.selectedOption == "")
+      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
+  }
+
+  toggleOptionList() {
+    this.listOpen = !this.listOpen;
+  }
+
+  closeOptionList() {
+    this.listOpen = false;
+  }
+
+  chooseOption(name: string) {
+    this.selectedOption = name;
+    this.closeOptionList();
+  }
+
+  get currentURL() {
+    return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
+  }
+
+  get computedScheduledTrains() {
+    if (!this.stationInfo) return [];
+
+    let scheduledTrains: ScheduledTrain[] | undefined;
+
+    if (this.stationInfo.checkpoints)
+      scheduledTrains = this.stationInfo.checkpoints.find(
+        (cp) => cp.checkpointName === this.selectedOption
+      )?.scheduledTrains;
+    else scheduledTrains = this.stationInfo.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;
+
+        return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
+          ? 1
+          : -1;
+      }) || []
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+@import "../../styles/variables.scss";
+
+h3 {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+
+  img {
+    width: 1.1em;
+    margin-left: 0.5em;
+  }
+}
+
+.list-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  &-move {
+    transition: transform 100ms;
+  }
+}
+
+.select-box {
+  display: flex;
+  justify-content: center;
+}
+
+.option {
+  &-container {
+    position: relative;
+
+    input {
+      display: none;
+    }
+
+    label {
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+    }
+  }
+
+  &-item {
+    display: flex;
+    justify-content: center;
+
+    &:hover {
+      background-color: rgba(#868686, 0.85);
+    }
+
+    transition: background 150ms ease-in;
+  }
+
+  &-selected,
+  &-list {
+    background: #444;
+    border-radius: 0.5em;
+  }
+
+  &-selected {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5rem 1rem;
+    min-width: 10em;
+    cursor: pointer;
+
+    span {
+      margin-right: 2rem;
+    }
+
+    img {
+      max-width: 0.75em;
+    }
+  }
+
+  &-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    width: 100%;
+
+    z-index: 10;
+
+    background-color: rgba(#222, 0.95);
+    overflow: hidden;
+
+    max-height: 0;
+
+    &.open {
+      max-height: 250px;
+      opacity: 1;
+    }
+
+    transition: all 150ms ease-in;
+  }
+}
+
+.timetable {
+  &-header {
+    a {
+      display: flex;
+    }
+
+    img {
+      cursor: pointer;
+    }
+  }
+
+  &-item {
+    margin: 1em auto;
+    font-size: 0.8em;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+    padding: 0 0.5rem;
+
+    background: #555;
+
+    @include smallScreen() {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &.loading,
+    &.empty {
+      padding: 1rem;
+      font-size: 1em;
+    }
+
+    &.empty {
+      color: $accentCol;
+    }
+  }
+
+  &-general {
+    padding: 0.5rem 0.3rem;
+    border-radius: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    text-align: left;
+
+    overflow: hidden;
+
+    @include smallScreen() {
+      width: 95%;
+      font-size: 1.3em;
+    }
+  }
+
+  &-schedule {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+    font-size: 1.2em;
+
+    @include smallScreen() {
+      width: 100%;
+      margin: 0.7em 0;
+      font-size: 1.8em;
+    }
+  }
+}
+
+.arrow {
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 2px;
+  margin-left: 50px;
+
+  position: relative;
+
+  transform: rotate(-45deg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 55px;
+    height: 3px;
+    top: 4px;
+    left: 4px;
+
+    transform: translate(-100%, -1px) rotate(45deg);
+    transform-origin: right bottom;
+
+    background: white;
+  }
+}
+
+.general-info {
+  span {
+    color: $accentCol;
+  }
+
+  .info-route {
+    margin-top: 0.5em;
+  }
+}
+
+.general-status {
+  span.arriving {
+    color: #aaa;
+  }
+
+  span.departed {
+    color: lime;
+    font-weight: bold;
+
+    &-away {
+      font-weight: bold;
+      color: rgb(0, 155, 0);
+    }
+  }
+
+  span.stopped {
+    color: #ffa600;
+    font-weight: bold;
+  }
+
+  span.online {
+    color: gold;
+  }
+
+  span.terminated {
+    color: #e00000;
+    font-weight: bold;
+  }
+}
+
+.schedule {
+  &-arrival,
+  &-stop,
+  &-departure {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0 0.3rem;
+  }
+
+  &-stop {
+    display: flex;
+    flex-direction: column;
+
+    .stop-time {
+      font-size: 0.7em;
+      margin: 5px 0;
+    }
+  }
+}
+
+.arrival-time.begins,
+.departure-time.terminates {
+  font-size: 0.75em;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue
index 95f1523..df4c505 100644
--- a/src/components/StationsView/FilterCard.vue
+++ b/src/components/StationsView/FilterCard.vue
@@ -1,422 +1,422 @@
-<template>
-  <section class="filter-card">
-    <div class="card-exit" @click="exit">
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
-    </div>
-
-    <div class="card-title flex">FILTRUJ STACJE</div>
-
-    <div class="card-options">
-      <div class="option" v-for="(option, i) in inputs.options" :key="i">
-        <label class="option-label">
-          <input
-            class="option-input"
-            type="checkbox"
-            :name="option.name"
-            :defaultValue="option.defaultValue"
-            :id="option.id"
-            v-model="option.value"
-            @change="handleChange"
-          />
-          <span
-            class="option-content"
-            :class="option.section + (option.value ? ' checked' : '')"
-          >{{ option.content }}</span>
-        </label>
-      </div>
-    </div>
-
-    <div class="card-sliders">
-      <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
-        <input
-          class="slider-input"
-          type="range"
-          :name="slider.name"
-          :id="slider.id"
-          :min="slider.minRange"
-          :max="slider.maxRange"
-          v-model="slider.value"
-          @change="handleInput"
-        />
-
-        <span class="slider-value">{{ slider.value }}</span>
-
-        <div class="slider-content">{{ slider.content }}</div>
-      </div>
-    </div>
-
-    <div class="card-save">
-      <div class="option save">
-        <label class="option-label">
-          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
-        </label>
-      </div>
-    </div>
-
-    <div class="card-actions flex">
-      <button class="button" @click="resetFilters">RESET FILTRÓW</button>
-      <button class="button" @click="exit">ZAMKNIJ FILTRY</button>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
-
-import inputData from "@/data/options.json";
-
-import StorageManager from "@/scripts/storageManager";
-
-@Component
-export default class FilterCard extends Vue {
-  inputs = { ...inputData };
-  saveOptions: boolean = false;
-  STORAGE_KEY: string = "options_saved";
-
-  @Prop() exit!: () => void;
-
-  mounted() {
-    this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
-  }
-
-  handleChange(e: Event): void {
-    const target = <HTMLInputElement>e.target;
-
-    this.$emit("changeFilterValue", {
-      name: target.name,
-      value: !target.checked,
-    });
-
-    if (this.saveOptions)
-      StorageManager.setBooleanValue(target.name, target.checked);
-  }
-
-  handleInput(e: Event): void {
-    const target = <HTMLInputElement>e.target;
-    this.$emit("changeFilterValue", {
-      name: target.name,
-      value: target.value,
-    });
-
-    if (this.saveOptions)
-      StorageManager.setStringValue(target.name, target.value);
-  }
-
-  saveFilters(): void {
-    if (!this.saveOptions) {
-      StorageManager.unregisterStorage(this.STORAGE_KEY);
-
-      console.log(this.saveOptions);
-
-      return;
-    }
-
-    StorageManager.registerStorage(this.STORAGE_KEY);
-
-    this.inputs.options.forEach((option) =>
-      StorageManager.setBooleanValue(option.name, option.value)
-    );
-
-    this.inputs.sliders.forEach((slider) =>
-      StorageManager.setNumericValue(slider.name, slider.value)
-    );
-  }
-
-  resetFilters(): void {
-    this.inputs.options.forEach((option) => {
-      option.value = option.defaultValue;
-      StorageManager.setBooleanValue(option.name, option.value);
-    });
-
-    this.inputs.sliders.forEach((slider) => {
-      slider.value = slider.defaultValue;
-      StorageManager.setNumericValue(slider.name, slider.value);
-    });
-
-    this.$emit("resetFilters");
-  }
-
-  closeCard(): void {
-    this.exit();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive";
-@import "../../styles/variables";
-
-.filter-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  z-index: 3;
-
-  overflow: auto;
-  max-height: 95vh;
-
-  padding: 0.5em;
-  max-width: 600px;
-  width: 65%;
-
-  background: #262a2e;
-
-  font-size: calc(0.75rem + 0.45vw);
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  @include smallScreen() {
-    width: 100%;
-    font-size: calc(0.7em + 1.1vw);
-  }
-
-  @include bigScreen {
-    font-size: 1.1rem;
-  }
-}
-
-.card {
-  &-title {
-    font-size: 2em;
-    font-weight: 700;
-    color: $accentCol;
-
-    margin: 0.5em 0;
-    margin-top: 1em;
-  }
-
-  &-options {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
-    padding: 0 1.5em;
-  }
-
-  &-sliders {
-    margin-top: 1em;
-  }
-
-  &-actions {
-    margin-top: 0.7em;
-
-    button {
-      margin: 0 0.3em;
-    }
-  }
-
-  &-save {
-    display: flex;
-    justify-content: center;
-
-    .option {
-      width: 30%;
-      font-size: 0.9em;
-    }
-  }
-
-  &-exit {
-    img {
-      width: 2em;
-    }
-  }
-}
-
-.option {
-  margin: 0.3em;
-
-  &-input {
-    display: none;
-  }
-
-  &-content {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    width: 100%;
-    text-align: center;
-
-    cursor: pointer;
-
-    padding: 0.6em 0.5em;
-    border-radius: 0.4em;
-
-    font-size: 0.65em;
-
-    background-color: #333;
-
-    display: inline-block;
-    position: relative;
-
-    transition: all 0.2s;
-
-    &.save {
-      font-size: 0.8em;
-    }
-
-    &:not(.checked) {
-      background-color: #585858;
-
-      &::before {
-        box-shadow: none;
-      }
-    }
-
-    &.checked {
-      &.access {
-        background-color: #e03b07;
-
-        &::before {
-          box-shadow: 0 0 6px 1px #e03b07;
-        }
-      }
-
-      &.control {
-        background-color: #0085ff;
-
-        &::before {
-          box-shadow: 0 0 6px 1px #0085ff;
-        }
-      }
-
-      &.signals {
-        background-color: #b000bf;
-
-        &::before {
-          box-shadow: 0 0 6px 1px #b000bf;
-        }
-      }
-
-      &.status {
-        background-color: #05b702;
-
-        &::before {
-          box-shadow: 0 0 6px 1px #05b702;
-        }
-      }
-
-      &.save {
-        background-color: #05b702;
-
-        &::before {
-          box-shadow: 0 0 6px 1px #05b702;
-        }
-      }
-
-      &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        border-radius: inherit;
-      }
-    }
-  }
-}
-
-.slider {
-  display: flex;
-
-  padding: 0.5em;
-
-  &-value {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    color: $accentCol;
-    margin-right: 0.3em;
-    padding: 0.1em 0.2em;
-
-    font-size: 1.1em;
-    font-weight: 500;
-
-    border-radius: 0.2em;
-  }
-
-  &-content {
-    display: flex;
-    align-items: center;
-
-    font-size: 0.75em;
-  }
-
-  &-input {
-    -webkit-appearance: none;
-    appearance: none;
-    background: none;
-    border: none;
-    outline: none;
-
-    min-width: 25%;
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-
-      height: 20px;
-      width: 20px;
-      margin-top: -7px;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 4px solid $accentCol;
-
-      @include smallScreen() {
-        width: 15px;
-        height: 15px;
-        margin-top: -5px;
-        border: 3px solid $accentCol;
-      }
-    }
-
-    &::-moz-range-thumb {
-      height: 15px;
-      width: 15px;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 4px solid $accentCol;
-
-      cursor: pointer;
-
-      @include smallScreen() {
-        width: 15px;
-        height: 15px;
-        border: 3px solid $accentCol;
-      }
-    }
-
-    &::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-moz-range-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-ms-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-  }
-}
+<template>
+  <section class="filter-card">
+    <div class="card-exit" @click="exit">
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+    </div>
+
+    <div class="card-title flex">FILTRUJ STACJE</div>
+
+    <div class="card-options">
+      <div class="option" v-for="(option, i) in inputs.options" :key="i">
+        <label class="option-label">
+          <input
+            class="option-input"
+            type="checkbox"
+            :name="option.name"
+            :defaultValue="option.defaultValue"
+            :id="option.id"
+            v-model="option.value"
+            @change="handleChange"
+          />
+          <span
+            class="option-content"
+            :class="option.section + (option.value ? ' checked' : '')"
+          >{{ option.content }}</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="card-sliders">
+      <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+        <input
+          class="slider-input"
+          type="range"
+          :name="slider.name"
+          :id="slider.id"
+          :min="slider.minRange"
+          :max="slider.maxRange"
+          v-model="slider.value"
+          @change="handleInput"
+        />
+
+        <span class="slider-value">{{ slider.value }}</span>
+
+        <div class="slider-content">{{ slider.content }}</div>
+      </div>
+    </div>
+
+    <div class="card-save">
+      <div class="option save">
+        <label class="option-label">
+          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
+          <span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="card-actions flex">
+      <button class="button" @click="resetFilters">RESET FILTRÓW</button>
+      <button class="button" @click="exit">ZAMKNIJ FILTRY</button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+import inputData from "@/data/options.json";
+
+import StorageManager from "@/scripts/storageManager";
+
+@Component
+export default class FilterCard extends Vue {
+  inputs = { ...inputData };
+  saveOptions: boolean = false;
+  STORAGE_KEY: string = "options_saved";
+
+  @Prop() exit!: () => void;
+
+  mounted() {
+    this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
+  }
+
+  handleChange(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+
+    this.$emit("changeFilterValue", {
+      name: target.name,
+      value: !target.checked,
+    });
+
+    if (this.saveOptions)
+      StorageManager.setBooleanValue(target.name, target.checked);
+  }
+
+  handleInput(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+    this.$emit("changeFilterValue", {
+      name: target.name,
+      value: target.value,
+    });
+
+    if (this.saveOptions)
+      StorageManager.setStringValue(target.name, target.value);
+  }
+
+  saveFilters(): void {
+    if (!this.saveOptions) {
+      StorageManager.unregisterStorage(this.STORAGE_KEY);
+
+      console.log(this.saveOptions);
+
+      return;
+    }
+
+    StorageManager.registerStorage(this.STORAGE_KEY);
+
+    this.inputs.options.forEach((option) =>
+      StorageManager.setBooleanValue(option.name, option.value)
+    );
+
+    this.inputs.sliders.forEach((slider) =>
+      StorageManager.setNumericValue(slider.name, slider.value)
+    );
+  }
+
+  resetFilters(): void {
+    this.inputs.options.forEach((option) => {
+      option.value = option.defaultValue;
+      StorageManager.setBooleanValue(option.name, option.value);
+    });
+
+    this.inputs.sliders.forEach((slider) => {
+      slider.value = slider.defaultValue;
+      StorageManager.setNumericValue(slider.name, slider.value);
+    });
+
+    this.$emit("resetFilters");
+  }
+
+  closeCard(): void {
+    this.exit();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+@import "../../styles/variables";
+
+.filter-card {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  z-index: 3;
+
+  overflow: auto;
+  max-height: 95vh;
+
+  padding: 0.5em;
+  max-width: 600px;
+  width: 65%;
+
+  background: #262a2e;
+
+  font-size: calc(0.75rem + 0.45vw);
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  @include smallScreen() {
+    width: 100%;
+    font-size: calc(0.7em + 1.1vw);
+  }
+
+  @include bigScreen {
+    font-size: 1.1rem;
+  }
+}
+
+.card {
+  &-title {
+    font-size: 2em;
+    font-weight: 700;
+    color: $accentCol;
+
+    margin: 0.5em 0;
+    margin-top: 1em;
+  }
+
+  &-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
+    padding: 0 1.5em;
+  }
+
+  &-sliders {
+    margin-top: 1em;
+  }
+
+  &-actions {
+    margin-top: 0.7em;
+
+    button {
+      margin: 0 0.3em;
+    }
+  }
+
+  &-save {
+    display: flex;
+    justify-content: center;
+
+    .option {
+      width: 30%;
+      font-size: 0.9em;
+    }
+  }
+
+  &-exit {
+    img {
+      width: 2em;
+    }
+  }
+}
+
+.option {
+  margin: 0.3em;
+
+  &-input {
+    display: none;
+  }
+
+  &-content {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    width: 100%;
+    text-align: center;
+
+    cursor: pointer;
+
+    padding: 0.6em 0.5em;
+    border-radius: 0.4em;
+
+    font-size: 0.65em;
+
+    background-color: #333;
+
+    display: inline-block;
+    position: relative;
+
+    transition: all 0.2s;
+
+    &.save {
+      font-size: 0.8em;
+    }
+
+    &:not(.checked) {
+      background-color: #585858;
+
+      &::before {
+        box-shadow: none;
+      }
+    }
+
+    &.checked {
+      &.access {
+        background-color: #e03b07;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #e03b07;
+        }
+      }
+
+      &.control {
+        background-color: #0085ff;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #0085ff;
+        }
+      }
+
+      &.signals {
+        background-color: #b000bf;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #b000bf;
+        }
+      }
+
+      &.status {
+        background-color: #05b702;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #05b702;
+        }
+      }
+
+      &.save {
+        background-color: #05b702;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #05b702;
+        }
+      }
+
+      &::before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        border-radius: inherit;
+      }
+    }
+  }
+}
+
+.slider {
+  display: flex;
+
+  padding: 0.5em;
+
+  &-value {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: $accentCol;
+    margin-right: 0.3em;
+    padding: 0.1em 0.2em;
+
+    font-size: 1.1em;
+    font-weight: 500;
+
+    border-radius: 0.2em;
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+
+    font-size: 0.75em;
+  }
+
+  &-input {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    outline: none;
+
+    min-width: 25%;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+
+      height: 20px;
+      width: 20px;
+      margin-top: -7px;
+
+      border-radius: 50%;
+
+      background: white;
+      border: 4px solid $accentCol;
+
+      @include smallScreen() {
+        width: 15px;
+        height: 15px;
+        margin-top: -5px;
+        border: 3px solid $accentCol;
+      }
+    }
+
+    &::-moz-range-thumb {
+      height: 15px;
+      width: 15px;
+
+      border-radius: 50%;
+
+      background: white;
+      border: 4px solid $accentCol;
+
+      cursor: pointer;
+
+      @include smallScreen() {
+        width: 15px;
+        height: 15px;
+        border: 3px solid $accentCol;
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+
+    &::-ms-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationsView/Options.vue b/src/components/StationsView/Options.vue
index e46be8e..7df6583 100644
--- a/src/components/StationsView/Options.vue
+++ b/src/components/StationsView/Options.vue
@@ -1,141 +1,141 @@
-<template>
-  <div class="options">
-    <div class="options-actions">
-      <button
-        class="action-btn"
-        :class="{'open': filterCardOpen}"
-        @click="() => toggleCardsState('filter')"
-      >
-        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
-        <p>FILTRY</p>
-      </button>
-
-      <button
-        class="action-btn"
-        :class="{'open': legendCardOpen}"
-        @click="() => toggleCardsState('legend')"
-      >
-        <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
-        <p>LEGENDA</p>
-      </button>
-    </div>
-
-    <div class="options-content">
-      <transition name="card-anim"></transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-
-@Component({})
-export default class Options extends Vue {
-  filterCardOpen: boolean = false;
-  legendCardOpen: boolean = false;
-
-  toggleCardsState(name: string): void {
-    if (name == "filter") {
-      this.legendCardOpen = false;
-      this.filterCardOpen = !this.filterCardOpen;
-    }
-
-    if (name == "legend") {
-      this.filterCardOpen = false;
-      this.legendCardOpen = !this.legendCardOpen;
-    }
-  }
-
-  toggleCardState(): void {
-    this.filterCardOpen = !this.filterCardOpen;
-  }
-
-  toggleLegendCardState(): void {
-    this.legendCardOpen = !this.legendCardOpen;
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.options {
-  display: flex;
-  z-index: 5;
-}
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translate(-45%, -50%);
-    opacity: 0;
-  }
-}
-
-.options {
-  font-size: calc(0.6rem + 0.9vw);
-
-  &-actions {
-    display: flex;
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 0.75em;
-
-  padding: 0.3em;
-
-  outline: none;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  img {
-    width: 1.3em;
-    margin-right: 0.2em;
-  }
-
-  p {
-    max-width: 0;
-    font-size: 1em;
-    overflow: hidden;
-
-    transition: max-width 0.35s ease-in-out;
-  }
-
-  &:hover > p,
-  &.open > p {
-    max-width: 500px;
-    color: $accentCol;
-  }
-
-  &:hover {
-    background: rgba(#e0e0e0, 0.4);
-  }
-}
-
-@include smallScreen {
-  .options {
-    display: flex;
-    justify-content: center;
-  }
-
-  .action-btn {
-    font-size: 0.8rem;
-  }
-}
+<template>
+  <div class="options">
+    <div class="options-actions">
+      <button
+        class="action-btn"
+        :class="{'open': filterCardOpen}"
+        @click="() => toggleCardsState('filter')"
+      >
+        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
+        <p>FILTRY</p>
+      </button>
+
+      <button
+        class="action-btn"
+        :class="{'open': legendCardOpen}"
+        @click="() => toggleCardsState('legend')"
+      >
+        <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
+        <p>LEGENDA</p>
+      </button>
+    </div>
+
+    <div class="options-content">
+      <transition name="card-anim"></transition>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component({})
+export default class Options extends Vue {
+  filterCardOpen: boolean = false;
+  legendCardOpen: boolean = false;
+
+  toggleCardsState(name: string): void {
+    if (name == "filter") {
+      this.legendCardOpen = false;
+      this.filterCardOpen = !this.filterCardOpen;
+    }
+
+    if (name == "legend") {
+      this.filterCardOpen = false;
+      this.legendCardOpen = !this.legendCardOpen;
+    }
+  }
+
+  toggleCardState(): void {
+    this.filterCardOpen = !this.filterCardOpen;
+  }
+
+  toggleLegendCardState(): void {
+    this.legendCardOpen = !this.legendCardOpen;
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.options {
+  display: flex;
+  z-index: 5;
+}
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.options {
+  font-size: calc(0.6rem + 0.9vw);
+
+  &-actions {
+    display: flex;
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.75em;
+
+  padding: 0.3em;
+
+  outline: none;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  img {
+    width: 1.3em;
+    margin-right: 0.2em;
+  }
+
+  p {
+    max-width: 0;
+    font-size: 1em;
+    overflow: hidden;
+
+    transition: max-width 0.35s ease-in-out;
+  }
+
+  &:hover > p,
+  &.open > p {
+    max-width: 500px;
+    color: $accentCol;
+  }
+
+  &:hover {
+    background: rgba(#e0e0e0, 0.4);
+  }
+}
+
+@include smallScreen {
+  .options {
+    display: flex;
+    justify-content: center;
+  }
+
+  .action-btn {
+    font-size: 0.8rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationsView/StationCard.vue b/src/components/StationsView/StationCard.vue
index d293b29..c05ef1c 100644
--- a/src/components/StationsView/StationCard.vue
+++ b/src/components/StationsView/StationCard.vue
@@ -1,426 +1,426 @@
-<template>
-  <section class="card station-card">
-    <div class="card-exit">
-      <img
-        class="schedule-icon"
-        :src="require('@/assets/icon-clock.svg')"
-        alt="schedule-icon"
-        @click="() => (cardMode = cardMode == 0 ? 1 : 0)"
-      />
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
-    </div>
-
-    <div class="card-content" :class="{ offline: !stationInfo.online }">
-      <div class="main">
-        <div class="main-content">
-          <span class="main-level flex" v-if="stationInfo.reqLevel > -1">
-            {{
-            2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
-            }}
-          </span>
-          <span class="main-general">
-            <div class="main-name">
-              <a
-                v-if="stationInfo.stationURL"
-                :href="stationInfo.stationURL"
-                target="_blank"
-                rel="noopener noreferrer"
-              >{{ stationInfo.stationName }}</a>
-
-              <span v-else>{{ stationInfo.stationName }}</span>
-            </div>
-            <div class="main-hash">{{ stationInfo.stationHash }}</div>
-          </span>
-        </div>
-      </div>
-
-      <div class="icons">
-        <img
-          v-if="stationInfo.controlType"
-          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
-          :alt="stationInfo.controlType"
-          :title="'Sterowanie ' + stationInfo.controlType"
-        />
-
-        <img
-          v-if="stationInfo.signalType"
-          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
-          :alt="stationInfo.signalType"
-          :title="'Sygnalizacja ' + stationInfo.signalType"
-        />
-
-        <img
-          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-          :src="require(`@/assets/icon-SBL.svg`)"
-          alt="SBL"
-          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-        />
-
-        <img
-          v-if="stationInfo.default"
-          :src="require(`@/assets/icon-td2.svg`)"
-          alt="default-pack"
-          title="Sceneria domyślnie dostępna w grze"
-        />
-
-        <img
-          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-          :src="require(`@/assets/icon-lock.svg`)"
-          alt="non-public"
-          title="Sceneria niepubliczna"
-        />
-
-        <img
-          v-if="stationInfo.unavailable"
-          :src="require(`@/assets/icon-unavailable.svg`)"
-          alt="icon-unavailable"
-          title="Sceneria niedostępna"
-        />
-      </div>
-
-      <div class="dispatcher">
-        <div
-          class="dispatcher-level flex"
-          :style="
-            calculateExpStyle(
-              stationInfo.dispatcherExp,
-              stationInfo.dispatcherIsSupporter
-            )
-          "
-        >{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
-        <div class="dispatcher-info">
-          <div class="dispatcher-name">
-            <a
-              :href="
-                'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
-              "
-              target="_blank"
-              rel="noopener noreferrer"
-            >{{ stationInfo.dispatcherName || "---" }}</a>
-          </div>
-
-          <div class="dispatcher-rate">
-            <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
-            <span>{{ stationInfo.dispatcherRate }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="hours">
-        <div class="hours-title title">STATUS</div>
-        <span class="status" :class="statusClasses(stationInfo.occupiedTo)">
-          {{
-          stationInfo.occupiedTo
-          }}
-        </span>
-      </div>
-
-      <div class="spawns flex flex-column">
-        <h3 class="spawns-title title">OTWARTE SPAWNY</h3>
-        <div class="spawns-content">
-          <span
-            class="spawn"
-            v-for="(spawn, i) in stationInfo.spawnString"
-            :key="spawn + stationInfo.dispatcherName + i"
-          >{{ spawn }}</span>
-
-          <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
-        </div>
-      </div>
-
-      <div class="users flex flex-column">
-        <h3 class="users-title title">GRACZE NA STACJI</h3>
-        <div class="users-content">
-          <div
-            class="user-badge"
-            :class="train.stopStatus"
-            v-for="train in computedStationTrains"
-            :key="train.trainNo + train.driverName"
-          >
-            <router-link
-              :to="{
-                name: 'TrainsView',
-                params: { passedSearchedTrain: train.trainNo.toString() },
-              }"
-            >
-              <span>{{ train.trainNo }}</span>
-              |
-              <span>{{ train.driverName }}</span>
-            </router-link>
-          </div>
-
-          <span
-            class="user borderless"
-            v-if="
-              !stationInfo.stationTrains ||
-              stationInfo.stationTrains.length == 0
-            "
-          >BRAK</span>
-        </div>
-      </div>
-    </div>
-
-    <StationTimetable
-      :class="{ show: cardMode == 1 }"
-      :scheduledTrains="this.stationInfo.scheduledTrains"
-      :stationName="stationInfo.stationName"
-    />
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import { Getter } from "vuex-class";
-
-import styleMixin from "@/mixins/styleMixin";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import StationTimetable from "@/components/StationsView/StationTimetable.vue";
-
-@Component({
-  components: {
-    StationTimetable
-  }
-})
-export default class StationCard extends styleMixin {
-  @Prop() stationInfo!: Station;
-  @Prop() exit!: void;
-
-  cardMode: number = 0;
-
-  get computedDispatcherExp(): string {
-    return this.stationInfo.dispatcherExp < 2
-      ? "L"
-      : `${this.stationInfo.dispatcherExp}`;
-  }
-
-  get computedStationTrains() {
-    return this.stationInfo.stationTrains.map(stationTrain => {
-      const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
-
-      return {
-        ...stationTrain,
-        stopStatus: scheduledData?.stopStatus || "no-timetable"
-      }
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-@import "../../styles/user_badge.scss";
-
-.title {
-  color: $accentCol;
-  font-weight: 600;
-  margin: 0.5em 0;
-}
-
-.card {
-  padding: 2em;
-  text-align: center;
-
-  font-size: calc(0.5rem + 0.4vw);
-  max-width: 800px;
-
-  @include bigScreen {
-    font-size: 1rem;
-  }
-
-  @include smallScreen {
-    font-size: 0.8em;
-    width: 100%;
-  }
-
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-
-  &-exit {
-    z-index: 3;
-    display: flex;
-    align-items: center;
-
-    img {
-      font-size: 1.6em;
-      margin: 0.1em 0.1em;
-    }
-
-    .schedule-icon {
-      font-size: 1.4em;
-    }
-  }
-
-  &-content {
-    position: relative;
-    margin-top: 1rem;
-
-    display: grid;
-    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    min-width: 200px;
-    max-height: 600px;
-
-    transform: translateY(0%);
-
-    gap: 1.5em;
-
-    &.offline {
-      .users,
-      .spawns,
-      .dispatcher {
-        filter: grayscale(1);
-        opacity: 0.5;
-      }
-    }
-
-    @include smallScreen() {
-      grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
-    }
-  }
-}
-
-.main {
-  grid-area: main;
-  text-align: center;
-
-  &-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include smallScreen() {
-      flex-direction: column;
-    }
-  }
-
-  &-level {
-    background: $accentCol;
-    color: black;
-
-    font-size: 3em;
-    font-weight: 600;
-
-    border-radius: 50%;
-    width: 1.7em;
-    height: 1.7em;
-    margin: 0.3em 0.5em;
-  }
-
-  &-hash {
-    color: #9d9d9d;
-  }
-
-  &-name {
-    color: $accentCol;
-    font-weight: 600;
-    font-size: 2.3em;
-    text-transform: uppercase;
-  }
-}
-
-.icons {
-  grid-area: icons;
-
-  display: flex;
-  justify-content: center;
-
-  img {
-    max-width: 3em;
-    margin: 0 0.4em;
-  }
-}
-
-.dispatcher {
-  grid-area: dispatcher;
-
-  display: flex;
-  justify-content: center;
-
-  &-level {
-    font-size: 2.5em;
-    font-weight: bold;
-    margin-right: 0.3em;
-
-    max-width: 2em;
-
-    background: forestgreen;
-  }
-
-  &-info {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-
-    padding: 0.5em;
-  }
-
-  &-name {
-    font-size: 1.35em;
-    font-weight: bold;
-    padding-bottom: 0.5em;
-  }
-
-  &-rate {
-    display: flex;
-    font-size: 1.3em;
-
-    span {
-      margin: 0 0.3em;
-      color: $accentCol;
-    }
-
-    img {
-      width: 1.2em;
-    }
-  }
-}
-
-.hours {
-  grid-area: hours;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-direction: column;
-
-  .status {
-    font-size: 1.1em;
-  }
-}
-
-.users {
-  grid-area: users;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.spawns {
-  grid-area: spawns;
-
-  overflow: hidden;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    & > .spawn {
-      padding: 0.3em 0.4em;
-      margin: 0.3em;
-      background: #585858;
-
-      text-align: center;
-    }
-  }
-}
+<template>
+  <section class="card station-card">
+    <div class="card-exit">
+      <img
+        class="schedule-icon"
+        :src="require('@/assets/icon-clock.svg')"
+        alt="schedule-icon"
+        @click="() => (cardMode = cardMode == 0 ? 1 : 0)"
+      />
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
+    </div>
+
+    <div class="card-content" :class="{ offline: !stationInfo.online }">
+      <div class="main">
+        <div class="main-content">
+          <span class="main-level flex" v-if="stationInfo.reqLevel > -1">
+            {{
+            2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
+            }}
+          </span>
+          <span class="main-general">
+            <div class="main-name">
+              <a
+                v-if="stationInfo.stationURL"
+                :href="stationInfo.stationURL"
+                target="_blank"
+                rel="noopener noreferrer"
+              >{{ stationInfo.stationName }}</a>
+
+              <span v-else>{{ stationInfo.stationName }}</span>
+            </div>
+            <div class="main-hash">{{ stationInfo.stationHash }}</div>
+          </span>
+        </div>
+      </div>
+
+      <div class="icons">
+        <img
+          v-if="stationInfo.controlType"
+          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
+          :alt="stationInfo.controlType"
+          :title="'Sterowanie ' + stationInfo.controlType"
+        />
+
+        <img
+          v-if="stationInfo.signalType"
+          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
+          :alt="stationInfo.signalType"
+          :title="'Sygnalizacja ' + stationInfo.signalType"
+        />
+
+        <img
+          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
+          :src="require(`@/assets/icon-SBL.svg`)"
+          alt="SBL"
+          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+        />
+
+        <img
+          v-if="stationInfo.default"
+          :src="require(`@/assets/icon-td2.svg`)"
+          alt="default-pack"
+          title="Sceneria domyślnie dostępna w grze"
+        />
+
+        <img
+          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
+          :src="require(`@/assets/icon-lock.svg`)"
+          alt="non-public"
+          title="Sceneria niepubliczna"
+        />
+
+        <img
+          v-if="stationInfo.unavailable"
+          :src="require(`@/assets/icon-unavailable.svg`)"
+          alt="icon-unavailable"
+          title="Sceneria niedostępna"
+        />
+      </div>
+
+      <div class="dispatcher">
+        <div
+          class="dispatcher-level flex"
+          :style="
+            calculateExpStyle(
+              stationInfo.dispatcherExp,
+              stationInfo.dispatcherIsSupporter
+            )
+          "
+        >{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
+        <div class="dispatcher-info">
+          <div class="dispatcher-name">
+            <a
+              :href="
+                'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
+              "
+              target="_blank"
+              rel="noopener noreferrer"
+            >{{ stationInfo.dispatcherName || "---" }}</a>
+          </div>
+
+          <div class="dispatcher-rate">
+            <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
+            <span>{{ stationInfo.dispatcherRate }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="hours">
+        <div class="hours-title title">STATUS</div>
+        <span class="status" :class="statusClasses(stationInfo.occupiedTo)">
+          {{
+          stationInfo.occupiedTo
+          }}
+        </span>
+      </div>
+
+      <div class="spawns flex flex-column">
+        <h3 class="spawns-title title">OTWARTE SPAWNY</h3>
+        <div class="spawns-content">
+          <span
+            class="spawn"
+            v-for="(spawn, i) in stationInfo.spawnString"
+            :key="spawn + stationInfo.dispatcherName + i"
+          >{{ spawn }}</span>
+
+          <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
+        </div>
+      </div>
+
+      <div class="users flex flex-column">
+        <h3 class="users-title title">GRACZE NA STACJI</h3>
+        <div class="users-content">
+          <div
+            class="user-badge"
+            :class="train.stopStatus"
+            v-for="train in computedStationTrains"
+            :key="train.trainNo + train.driverName"
+          >
+            <router-link
+              :to="{
+                name: 'TrainsView',
+                params: { passedSearchedTrain: train.trainNo.toString() },
+              }"
+            >
+              <span>{{ train.trainNo }}</span>
+              |
+              <span>{{ train.driverName }}</span>
+            </router-link>
+          </div>
+
+          <span
+            class="user borderless"
+            v-if="
+              !stationInfo.stationTrains ||
+              stationInfo.stationTrains.length == 0
+            "
+          >BRAK</span>
+        </div>
+      </div>
+    </div>
+
+    <StationTimetable
+      :class="{ show: cardMode == 1 }"
+      :scheduledTrains="this.stationInfo.scheduledTrains"
+      :stationName="stationInfo.stationName"
+    />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch } from "vue-property-decorator";
+import { Getter } from "vuex-class";
+
+import styleMixin from "@/mixins/styleMixin";
+
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import StationTimetable from "@/components/StationsView/StationTimetable.vue";
+
+@Component({
+  components: {
+    StationTimetable
+  }
+})
+export default class StationCard extends styleMixin {
+  @Prop() stationInfo!: Station;
+  @Prop() exit!: void;
+
+  cardMode: number = 0;
+
+  get computedDispatcherExp(): string {
+    return this.stationInfo.dispatcherExp < 2
+      ? "L"
+      : `${this.stationInfo.dispatcherExp}`;
+  }
+
+  get computedStationTrains() {
+    return this.stationInfo.stationTrains.map(stationTrain => {
+      const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
+
+      return {
+        ...stationTrain,
+        stopStatus: scheduledData?.stopStatus || "no-timetable"
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+@import "../../styles/user_badge.scss";
+
+.title {
+  color: $accentCol;
+  font-weight: 600;
+  margin: 0.5em 0;
+}
+
+.card {
+  padding: 2em;
+  text-align: center;
+
+  font-size: calc(0.5rem + 0.4vw);
+  max-width: 800px;
+
+  @include bigScreen {
+    font-size: 1rem;
+  }
+
+  @include smallScreen {
+    font-size: 0.8em;
+    width: 100%;
+  }
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &-exit {
+    z-index: 3;
+    display: flex;
+    align-items: center;
+
+    img {
+      font-size: 1.6em;
+      margin: 0.1em 0.1em;
+    }
+
+    .schedule-icon {
+      font-size: 1.4em;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin-top: 1rem;
+
+    display: grid;
+    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 200px;
+    max-height: 600px;
+
+    transform: translateY(0%);
+
+    gap: 1.5em;
+
+    &.offline {
+      .users,
+      .spawns,
+      .dispatcher {
+        filter: grayscale(1);
+        opacity: 0.5;
+      }
+    }
+
+    @include smallScreen() {
+      grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
+    }
+  }
+}
+
+.main {
+  grid-area: main;
+  text-align: center;
+
+  &-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include smallScreen() {
+      flex-direction: column;
+    }
+  }
+
+  &-level {
+    background: $accentCol;
+    color: black;
+
+    font-size: 3em;
+    font-weight: 600;
+
+    border-radius: 50%;
+    width: 1.7em;
+    height: 1.7em;
+    margin: 0.3em 0.5em;
+  }
+
+  &-hash {
+    color: #9d9d9d;
+  }
+
+  &-name {
+    color: $accentCol;
+    font-weight: 600;
+    font-size: 2.3em;
+    text-transform: uppercase;
+  }
+}
+
+.icons {
+  grid-area: icons;
+
+  display: flex;
+  justify-content: center;
+
+  img {
+    max-width: 3em;
+    margin: 0 0.4em;
+  }
+}
+
+.dispatcher {
+  grid-area: dispatcher;
+
+  display: flex;
+  justify-content: center;
+
+  &-level {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-right: 0.3em;
+
+    max-width: 2em;
+
+    background: forestgreen;
+  }
+
+  &-info {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+    padding: 0.5em;
+  }
+
+  &-name {
+    font-size: 1.35em;
+    font-weight: bold;
+    padding-bottom: 0.5em;
+  }
+
+  &-rate {
+    display: flex;
+    font-size: 1.3em;
+
+    span {
+      margin: 0 0.3em;
+      color: $accentCol;
+    }
+
+    img {
+      width: 1.2em;
+    }
+  }
+}
+
+.hours {
+  grid-area: hours;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  .status {
+    font-size: 1.1em;
+  }
+}
+
+.users {
+  grid-area: users;
+
+  &-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+.spawns {
+  grid-area: spawns;
+
+  overflow: hidden;
+
+  &-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    & > .spawn {
+      padding: 0.3em 0.4em;
+      margin: 0.3em;
+      background: #585858;
+
+      text-align: center;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 22fcfed..e0665e8 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -1,395 +1,395 @@
-<template>
-  <section class="station_table">
-    <div class="table_wrapper">
-      <table>
-        <thead>
-          <tr>
-            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
-              <span class="header_wrapper">
-                <div class="header_item">
-                  <div v-if="head[0].includes('.svg')">
-                    <img :src="head[0]" alt="test" :title="head[1]" />
-                  </div>
-
-                  <div v-else>
-                    <div>{{ head[0] }}</div>
-                    <div v-if="head.length > 1">{{ head[1] }}</div>
-                  </div>
-                </div>
-
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.index == i"
-                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
-                  alt
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            class="station"
-            v-for="(station, i) in stations"
-            :key="i + station.stationHash"
-            @click="() => setScenery(station.stationName)"
-          >
-            <td
-              class="station_name"
-              :class="{
-              'default-station': station.default,
-              online: station.online,
-              'station-unavailable': station.unavailable,
-            }"
-            >{{ station.stationName }}</td>
-
-            <td class="station_level">
-              <span
-                v-if="station.reqLevel"
-                :style="calculateExpStyle(station.reqLevel)"
-              >{{ station.reqLevel && station.reqLevel > -1 ? parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L" : "?" }}</span>
-
-              <span v-else>?</span>
-            </td>
-
-            <td class="station_status">
-              <span
-                class="status"
-                :class="statusClasses(station.occupiedTo)"
-              >{{ station.occupiedTo}}</span>
-            </td>
-
-            <td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
-
-            <td class="station_dispatcher-exp">
-              <span
-                v-if="station.online"
-                :style="calculateExpStyle(station.dispatcherExp)"
-              >{{ 2 > station.dispatcherExp ? "L" : station.dispatcherExp }}</span>
-            </td>
-
-            <td class="station_tracks twoway">
-              <span
-                v-if="station.routes && station.routes.twoWay.catenary > 0"
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.catenary}`"
-              >{{ station.routes.twoWay.catenary }}</span>
-
-              <span
-                v-if="station.routes && station.routes.twoWay.noCatenary > 0"
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.noCatenary}`"
-              >{{ station.routes.twoWay.noCatenary }}</span>
-
-              <span class="separator"></span>
-
-              <span
-                v-if="station.routes && station.routes.oneWay.catenary > 0"
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.catenary}`"
-              >{{ station.routes.oneWay.catenary }}</span>
-
-              <span
-                v-if="station.routes && station.routes.oneWay.noCatenary > 0"
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.noCatenary}`"
-              >{{ station.routes.oneWay.noCatenary }}</span>
-            </td>
-
-            <td class="station_info">
-              <img
-                class="icon-info"
-                v-if="station.controlType"
-                :src="require(`@/assets/icon-${station.controlType}.svg`)"
-                :alt="station.controlType"
-                :title="'Sterowanie ' + station.controlType"
-              />
-
-              <img
-                class="icon-info"
-                v-if="station.signalType"
-                :src="require(`@/assets/icon-${station.signalType}.svg`)"
-                :alt="station.signalType"
-                :title="'Sygnalizacja ' + station.signalType"
-              />
-
-              <img
-                class="icon-info"
-                v-if="station.SBL && station.SBL !== ''"
-                :src="require(`@/assets/icon-SBL.svg`)"
-                alt="SBL"
-                title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-              />
-
-              <img
-                class="icon-info"
-                v-if="!station.reqLevel || station.nonPublic"
-                :src="require(`@/assets/icon-lock.svg`)"
-                alt="non-public"
-                title="Sceneria niepubliczna"
-              />
-            </td>
-
-            <td class="station_users" :class="{inactive: !station.online }">
-              <span>
-                <span class="highlight">{{ station.currentUsers }}</span>
-                /
-                <span>{{ station.maxUsers }}</span>
-              </span>
-            </td>
-
-            <td class="station_spawns" :class="{inactive: !station.online }">
-              <span class="highlight">{{ station.spawns.length }}</span>
-            </td>
-
-            <td class="station_schedules" :class="{inactive: !station.online }">
-              <span class="highlight">{{station.scheduledTrains.length}} &nbsp;</span>
-              /
-              <span
-                style="color: #bbb"
-              >{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
-            </td>
-            <!-- 
-            <td class="station_stats">
-              <div class="stats_wrapper"></div>
-            </td>-->
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
-  </section>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import { Component, Prop } from "vue-property-decorator";
-
-import Station from "@/scripts/interfaces/Station";
-
-import styleMixin from "@/mixins/styleMixin";
-
-import Options from "@/components/StationsView/Options.vue";
-
-@Component({
-  components: { Options },
-})
-export default class StationTable extends styleMixin {
-  @Prop() readonly stations!: Station[];
-  @Prop() readonly sorterActive!: number;
-
-  @Prop() readonly setFocusedStation!: () => void;
-  @Prop() readonly changeSorter!: () => void;
-
-  likeIcon: string = require("@/assets/icon-like.svg");
-  spawnIcon: string = require("@/assets/icon-spawn.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  userIcon: string = require("@/assets/icon-user.svg");
-  trainIcon: string = require("@/assets/icon-train.svg");
-
-  ascIcon: string = require("@/assets/icon-arrow-asc.svg");
-  descIcon: string = require("@/assets/icon-arrow-desc.svg");
-
-  headTitles: string[][] = [
-    ["Stacja"],
-    ["Min. poziom", "dyżurnego"],
-    ["Status"],
-    ["Dyżurny"],
-    ["Poziom", "dyżurnego"],
-    ["Szlaki", "2tor | 1tor"],
-    ["Informacje", "ogólne"],
-    [this.userIcon, "Mechanicy online"],
-    [this.spawnIcon, "Otwarte spawny"],
-    [this.timetableIcon, "Aktywne RJ"],
-  ];
-
-  setScenery(name: string) {
-    const station = this.stations.find(
-      (station) => station.stationName === name
-    );
-
-    if (!station) return;
-
-    if (!station.online) {
-      window.location.href = station.stationURL;
-      return;
-    }
-
-    this.$router.push({
-      name: "SceneryView",
-      query: { hash: station.stationHash },
-    });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
-
-$rowCol: #4b4b4b;
-
-.change-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 100ms ease-in;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.highlight {
-  color: gold;
-}
-
-section.station_table {
-  overflow: auto;
-  overflow-y: hidden;
-  font-size: calc(0.55rem + 0.35vw);
-  font-weight: 500;
-
-  @include smallScreen() {
-    font-size: 0.6rem;
-  }
-}
-
-.table_wrapper {
-  overflow: auto;
-}
-
-table {
-  white-space: nowrap;
-  border-collapse: collapse;
-
-  min-width: 1000px;
-
-  thead th {
-    position: sticky;
-    top: 0;
-
-    min-width: 85px;
-
-    padding: 0.5em;
-    background-color: $primaryCol;
-
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: 1.5em;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-
-tr.station {
-  background-color: $rowCol;
-
-  &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: lighten($rowCol, 20);
-  }
-
-  & > td {
-    padding: 0.3rem 1rem;
-    text-align: center;
-
-    cursor: pointer;
-
-    @include smallScreen() {
-      margin: 0;
-      padding: 0.1rem 0.5rem;
-    }
-  }
-}
-
-td.station {
-  &_level,
-  &_dispatcher-exp {
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-  }
-
-  &_level {
-    span {
-      background-color: #888;
-      border-radius: 50%;
-    }
-  }
-
-  &_info,
-  &_tracks {
-    img {
-      width: 2.2em;
-      margin: 0 0.2em;
-      vertical-align: middle;
-    }
-  }
-
-  &_tracks {
-    .no-catenary {
-      background-color: #939393;
-    }
-
-    .catenary {
-      background-color: #009dce;
-    }
-
-    .track {
-      margin: 0 0.3rem;
-      padding: 0.5em;
-    }
-  }
-
-  &_users,
-  &_spawns,
-  &_schedules {
-    &.inactive {
-      opacity: 0.2;
-    }
-  }
-}
-
-.separator {
-  border-left: 3px solid #b3b3b3;
-}
-
-.no-stations {
-  text-align: center;
-  font-size: 1.5em;
-
-  padding: 1rem;
-  margin: 1rem 0;
-
-  background: #333;
-}
-
-.station-unavailable {
-  color: #ff1e1e;
-  font-weight: bold;
-}
+<template>
+  <section class="station_table">
+    <div class="table_wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+              <span class="header_wrapper">
+                <div class="header_item">
+                  <div v-if="head[0].includes('.svg')">
+                    <img :src="head[0]" alt="test" :title="head[1]" />
+                  </div>
+
+                  <div v-else>
+                    <div>{{ head[0] }}</div>
+                    <div v-if="head.length > 1">{{ head[1] }}</div>
+                  </div>
+                </div>
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.index == i"
+                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
+                  alt
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr
+            class="station"
+            v-for="(station, i) in stations"
+            :key="i + station.stationHash"
+            @click="() => setScenery(station.stationName)"
+          >
+            <td
+              class="station_name"
+              :class="{
+              'default-station': station.default,
+              online: station.online,
+              'station-unavailable': station.unavailable,
+            }"
+            >{{ station.stationName }}</td>
+
+            <td class="station_level">
+              <span
+                v-if="station.reqLevel"
+                :style="calculateExpStyle(station.reqLevel)"
+              >{{ station.reqLevel && station.reqLevel > -1 ? parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L" : "?" }}</span>
+
+              <span v-else>?</span>
+            </td>
+
+            <td class="station_status">
+              <span
+                class="status"
+                :class="statusClasses(station.occupiedTo)"
+              >{{ station.occupiedTo}}</span>
+            </td>
+
+            <td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
+
+            <td class="station_dispatcher-exp">
+              <span
+                v-if="station.online"
+                :style="calculateExpStyle(station.dispatcherExp)"
+              >{{ 2 > station.dispatcherExp ? "L" : station.dispatcherExp }}</span>
+            </td>
+
+            <td class="station_tracks twoway">
+              <span
+                v-if="station.routes && station.routes.twoWay.catenary > 0"
+                class="track catenary"
+                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.catenary}`"
+              >{{ station.routes.twoWay.catenary }}</span>
+
+              <span
+                v-if="station.routes && station.routes.twoWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.noCatenary}`"
+              >{{ station.routes.twoWay.noCatenary }}</span>
+
+              <span class="separator"></span>
+
+              <span
+                v-if="station.routes && station.routes.oneWay.catenary > 0"
+                class="track catenary"
+                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.catenary}`"
+              >{{ station.routes.oneWay.catenary }}</span>
+
+              <span
+                v-if="station.routes && station.routes.oneWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.noCatenary}`"
+              >{{ station.routes.oneWay.noCatenary }}</span>
+            </td>
+
+            <td class="station_info">
+              <img
+                class="icon-info"
+                v-if="station.controlType"
+                :src="require(`@/assets/icon-${station.controlType}.svg`)"
+                :alt="station.controlType"
+                :title="'Sterowanie ' + station.controlType"
+              />
+
+              <img
+                class="icon-info"
+                v-if="station.signalType"
+                :src="require(`@/assets/icon-${station.signalType}.svg`)"
+                :alt="station.signalType"
+                :title="'Sygnalizacja ' + station.signalType"
+              />
+
+              <img
+                class="icon-info"
+                v-if="station.SBL && station.SBL !== ''"
+                :src="require(`@/assets/icon-SBL.svg`)"
+                alt="SBL"
+                title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+              />
+
+              <img
+                class="icon-info"
+                v-if="!station.reqLevel || station.nonPublic"
+                :src="require(`@/assets/icon-lock.svg`)"
+                alt="non-public"
+                title="Sceneria niepubliczna"
+              />
+            </td>
+
+            <td class="station_users" :class="{inactive: !station.online }">
+              <span>
+                <span class="highlight">{{ station.currentUsers }}</span>
+                /
+                <span>{{ station.maxUsers }}</span>
+              </span>
+            </td>
+
+            <td class="station_spawns" :class="{inactive: !station.online }">
+              <span class="highlight">{{ station.spawns.length }}</span>
+            </td>
+
+            <td class="station_schedules" :class="{inactive: !station.online }">
+              <span class="highlight">{{station.scheduledTrains.length}} &nbsp;</span>
+              /
+              <span
+                style="color: #bbb"
+              >{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+            </td>
+            <!-- 
+            <td class="station_stats">
+              <div class="stats_wrapper"></div>
+            </td>-->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
+  </section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+
+import Station from "@/scripts/interfaces/Station";
+
+import styleMixin from "@/mixins/styleMixin";
+
+import Options from "@/components/StationsView/Options.vue";
+
+@Component({
+  components: { Options },
+})
+export default class StationTable extends styleMixin {
+  @Prop() readonly stations!: Station[];
+  @Prop() readonly sorterActive!: number;
+
+  @Prop() readonly setFocusedStation!: () => void;
+  @Prop() readonly changeSorter!: () => void;
+
+  likeIcon: string = require("@/assets/icon-like.svg");
+  spawnIcon: string = require("@/assets/icon-spawn.svg");
+  timetableIcon: string = require("@/assets/icon-timetable.svg");
+  userIcon: string = require("@/assets/icon-user.svg");
+  trainIcon: string = require("@/assets/icon-train.svg");
+
+  ascIcon: string = require("@/assets/icon-arrow-asc.svg");
+  descIcon: string = require("@/assets/icon-arrow-desc.svg");
+
+  headTitles: string[][] = [
+    ["Stacja"],
+    ["Min. poziom", "dyżurnego"],
+    ["Status"],
+    ["Dyżurny"],
+    ["Poziom", "dyżurnego"],
+    ["Szlaki", "2tor | 1tor"],
+    ["Informacje", "ogólne"],
+    [this.userIcon, "Mechanicy online"],
+    [this.spawnIcon, "Otwarte spawny"],
+    [this.timetableIcon, "Aktywne RJ"],
+  ];
+
+  setScenery(name: string) {
+    const station = this.stations.find(
+      (station) => station.stationName === name
+    );
+
+    if (!station) return;
+
+    if (!station.online) {
+      window.location.href = station.stationURL;
+      return;
+    }
+
+    this.$router.push({
+      name: "SceneryView",
+      query: { hash: station.stationHash },
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+@import "../../styles/variables.scss";
+
+$rowCol: #4b4b4b;
+
+.change-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 100ms ease-in;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.highlight {
+  color: gold;
+}
+
+section.station_table {
+  overflow: auto;
+  overflow-y: hidden;
+  font-size: calc(0.55rem + 0.35vw);
+  font-weight: 500;
+
+  @include smallScreen() {
+    font-size: 0.6rem;
+  }
+}
+
+.table_wrapper {
+  overflow: auto;
+}
+
+table {
+  white-space: nowrap;
+  border-collapse: collapse;
+
+  min-width: 1000px;
+
+  thead th {
+    position: sticky;
+    top: 0;
+
+    min-width: 85px;
+
+    padding: 0.5em;
+    background-color: $primaryCol;
+
+    cursor: pointer;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 1.5em;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+tr.station {
+  background-color: $rowCol;
+
+  &:nth-child(even) {
+    background-color: lighten($rowCol, 5);
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: lighten($rowCol, 20);
+  }
+
+  & > td {
+    padding: 0.3rem 1rem;
+    text-align: center;
+
+    cursor: pointer;
+
+    @include smallScreen() {
+      margin: 0;
+      padding: 0.1rem 0.5rem;
+    }
+  }
+}
+
+td.station {
+  &_level,
+  &_dispatcher-exp {
+    span {
+      display: block;
+
+      width: 2em;
+      height: 2em;
+      line-height: 2em;
+      margin: 0 auto;
+    }
+  }
+
+  &_level {
+    span {
+      background-color: #888;
+      border-radius: 50%;
+    }
+  }
+
+  &_info,
+  &_tracks {
+    img {
+      width: 2.2em;
+      margin: 0 0.2em;
+      vertical-align: middle;
+    }
+  }
+
+  &_tracks {
+    .no-catenary {
+      background-color: #939393;
+    }
+
+    .catenary {
+      background-color: #009dce;
+    }
+
+    .track {
+      margin: 0 0.3rem;
+      padding: 0.5em;
+    }
+  }
+
+  &_users,
+  &_spawns,
+  &_schedules {
+    &.inactive {
+      opacity: 0.2;
+    }
+  }
+}
+
+.separator {
+  border-left: 3px solid #b3b3b3;
+}
+
+.no-stations {
+  text-align: center;
+  font-size: 1.5em;
+
+  padding: 1rem;
+  margin: 1rem 0;
+
+  background: #333;
+}
+
+.station-unavailable {
+  color: #ff1e1e;
+  font-weight: bold;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationsView/StationTimetable.vue b/src/components/StationsView/StationTimetable.vue
index 5cf321c..6c815d4 100644
--- a/src/components/StationsView/StationTimetable.vue
+++ b/src/components/StationsView/StationTimetable.vue
@@ -1,285 +1,285 @@
-<template>
-  <div class="station-timetable">
-    <div class="timetable-wrapper">
-      <div class="timetable-title title">
-        <div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
-        <div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
-      </div>
-
-      <div class="timetable-content">
-        <div
-          class="timetable-item"
-          v-for="(scheduledTrain, i) in computedScheduledTrains"
-          :key="i"
-        >
-          <span class="timetable-general">
-            <span class="general-info">
-              <router-link
-                :to="{
-                  name: 'TrainsView',
-                  params: {
-                    passedSearchedTrain: 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
-                >
-              </span>
-            </span>
-
-            <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">{{
-                scheduledTrain.stopLabel
-              }}</span>
-            </span>
-          </span>
-
-          <span class="timetable-schedule">
-            <span class="schedule-arrival">
-              <span
-                class="arrival-time begins"
-                v-if="scheduledTrain.stopInfo.beginsHere"
-                >ROZPOCZYNA BIEG</span
-              >
-              <span class="arrival-time" v-else
-                >{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-                  scheduledTrain.stopInfo.arrivalDelay
-                }})</span
-              >
-            </span>
-
-            <span class="schedule-stop">
-              <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"
-                >{{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType }}</span
-              >
-              <span class="stop-arrow arrow"></span>
-            </span>
-            <span class="schedule-departure">
-              <span
-                class="departure-time terminates"
-                v-if="scheduledTrain.stopInfo.terminatesHere"
-                >KOŃCZY BIEG</span
-              >
-              <span class="departure-time" v-else
-                >{{ scheduledTrain.stopInfo.departureTimeString }} ({{
-                  scheduledTrain.stopInfo.departureDelay
-                }})</span
-              >
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-import Station from "@/scripts/interfaces/Station";
-
-@Component
-export default class StationTimetable extends Vue {
-  @Prop() readonly scheduledTrains;
-  @Prop() readonly stationName;
-
-  get computedScheduledTrains() {
-    return this.scheduledTrains.sort((a, b) => {
-      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;
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.station-timetable {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  overflow: hidden;
-
-  transform: translateY(-100%);
-  -webikit-transform: translateY(-100%);
-
-  &.show {
-    transform: translateY(0);
-    -webkit-transform: translateY(0);
-  }
-
-  transition: transform 150ms ease-out;
-
-  background: #333;
-
-  @include smallScreen() {
-    font-size: 1.3em;
-  }
-}
-
-.timetable {
-  &-content {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  &-title {
-    padding-top: 2rem;
-    padding-bottom: 0.3rem;
-    font-size: 1.6em;
-  }
-
-  &-wrapper {
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-item {
-    margin: 1em auto;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-
-    padding: 0 1rem;
-
-    @include smallScreen() {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.timetable {
-  &-general {
-    padding: 0.3rem 0.7rem;
-    border: 2px solid white;
-    border-radius: 10px;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    @include smallScreen() {
-      width: 95%;
-      font-size: 0.85em;
-    }
-  }
-
-  &-schedule {
-    @include smallScreen() {
-      width: 80%;
-      margin: 0.7em 0;
-      font-size: 0.9em;
-    }
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-    font-size: 1.35em;
-  }
-}
-
-.arrow {
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: inline-block;
-  padding: 2px;
-  margin-left: 50px;
-
-  position: relative;
-
-  transform: rotate(-45deg);
-
-  &::before {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 55px;
-    height: 3px;
-    top: 4px;
-    left: 4px;
-
-    transform: translate(-100%, -1px) rotate(45deg);
-    transform-origin: right bottom;
-
-    background: white;
-  }
-}
-
-.general-info {
-  span {
-    color: $accentCol;
-  }
-}
-
-.general-status {
-  span.arriving {
-    color: #aaa;
-  }
-
-  span.departed {
-    color: lime;
-  }
-
-  span.stopped {
-    color: #ffa600;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: red;
-  }
-}
-
-.schedule {
-  &-arrival,
-  &-stop,
-  &-departure {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: 0 0.3rem;
-  }
-
-  &-stop {
-    display: flex;
-    flex-direction: column;
-
-    .stop-time {
-      font-size: 0.7em;
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.75em;
-}
+<template>
+  <div class="station-timetable">
+    <div class="timetable-wrapper">
+      <div class="timetable-title title">
+        <div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
+        <div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
+      </div>
+
+      <div class="timetable-content">
+        <div
+          class="timetable-item"
+          v-for="(scheduledTrain, i) in computedScheduledTrains"
+          :key="i"
+        >
+          <span class="timetable-general">
+            <span class="general-info">
+              <router-link
+                :to="{
+                  name: 'TrainsView',
+                  params: {
+                    passedSearchedTrain: 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
+                >
+              </span>
+            </span>
+
+            <span class="general-status">
+              <span :class="scheduledTrain.stopStatus">{{
+                scheduledTrain.stopLabel
+              }}</span>
+            </span>
+          </span>
+
+          <span class="timetable-schedule">
+            <span class="schedule-arrival">
+              <span
+                class="arrival-time begins"
+                v-if="scheduledTrain.stopInfo.beginsHere"
+                >ROZPOCZYNA BIEG</span
+              >
+              <span class="arrival-time" v-else
+                >{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
+                  scheduledTrain.stopInfo.arrivalDelay
+                }})</span
+              >
+            </span>
+
+            <span class="schedule-stop">
+              <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"
+                >{{ scheduledTrain.stopInfo.stopTime }}
+                {{ scheduledTrain.stopInfo.stopType }}</span
+              >
+              <span class="stop-arrow arrow"></span>
+            </span>
+            <span class="schedule-departure">
+              <span
+                class="departure-time terminates"
+                v-if="scheduledTrain.stopInfo.terminatesHere"
+                >KOŃCZY BIEG</span
+              >
+              <span class="departure-time" v-else
+                >{{ scheduledTrain.stopInfo.departureTimeString }} ({{
+                  scheduledTrain.stopInfo.departureDelay
+                }})</span
+              >
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import Station from "@/scripts/interfaces/Station";
+
+@Component
+export default class StationTimetable extends Vue {
+  @Prop() readonly scheduledTrains;
+  @Prop() readonly stationName;
+
+  get computedScheduledTrains() {
+    return this.scheduledTrains.sort((a, b) => {
+      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;
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.station-timetable {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+
+  transform: translateY(-100%);
+  -webikit-transform: translateY(-100%);
+
+  &.show {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+  }
+
+  transition: transform 150ms ease-out;
+
+  background: #333;
+
+  @include smallScreen() {
+    font-size: 1.3em;
+  }
+}
+
+.timetable {
+  &-content {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  &-title {
+    padding-top: 2rem;
+    padding-bottom: 0.3rem;
+    font-size: 1.6em;
+  }
+
+  &-wrapper {
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-item {
+    margin: 1em auto;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+    padding: 0 1rem;
+
+    @include smallScreen() {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.timetable {
+  &-general {
+    padding: 0.3rem 0.7rem;
+    border: 2px solid white;
+    border-radius: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include smallScreen() {
+      width: 95%;
+      font-size: 0.85em;
+    }
+  }
+
+  &-schedule {
+    @include smallScreen() {
+      width: 80%;
+      margin: 0.7em 0;
+      font-size: 0.9em;
+    }
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+    font-size: 1.35em;
+  }
+}
+
+.arrow {
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 2px;
+  margin-left: 50px;
+
+  position: relative;
+
+  transform: rotate(-45deg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 55px;
+    height: 3px;
+    top: 4px;
+    left: 4px;
+
+    transform: translate(-100%, -1px) rotate(45deg);
+    transform-origin: right bottom;
+
+    background: white;
+  }
+}
+
+.general-info {
+  span {
+    color: $accentCol;
+  }
+}
+
+.general-status {
+  span.arriving {
+    color: #aaa;
+  }
+
+  span.departed {
+    color: lime;
+  }
+
+  span.stopped {
+    color: #ffa600;
+  }
+
+  span.online {
+    color: gold;
+  }
+
+  span.terminated {
+    color: red;
+  }
+}
+
+.schedule {
+  &-arrival,
+  &-stop,
+  &-departure {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0 0.3rem;
+  }
+
+  &-stop {
+    display: flex;
+    flex-direction: column;
+
+    .stop-time {
+      font-size: 0.7em;
+    }
+  }
+}
+
+.arrival-time.begins,
+.departure-time.terminates {
+  font-size: 0.75em;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index e053f34..527ee89 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -1,235 +1,235 @@
-<template>
-  <div class="train-schedule" @click="click">
-    <div class="schedule-wrapper">
-      <div class="schedule-bar"></div>
-
-      <ul class="schedule-list">
-        <li
-          class="schedule-item"
-          v-for="(stop, i) in followingStops"
-          :key="i"
-          :class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
-        >
-          <div class="progress-bar"></div>
-
-          <div
-            class="stop-line arrival"
-            v-if="
-              i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
-            "
-          >{{ stop.arrivalLine }}</div>
-
-          <span class="stop-info">
-            <div class="info-indicator"></div>
-
-            <span class="info-name" v-html="stop.stopName"></span>
-            <span class="info-date">
-              <span
-                class="date-arrival"
-                v-if="!stop.beginsHere"
-                :class="{
-                  delayed: stop.arrivalDelay > 0,
-                  preponed: stop.arrivalDelay < 0,
-                }"
-              >
-                p.
-                {{
-                stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)
-                }}
-              </span>
-
-              <span
-                class="date-stop"
-                v-if="stop.stopTime"
-                :class="stop.stopType.replace(', ', '-')"
-              >{{ stop.stopTime }} {{ stop.stopType }}</span>
-
-              <span
-                class="date-departure"
-                v-if="!stop.terminatesHere && stop.stopTime != 0"
-                :class="{
-                  delayed: stop.departureDelay > 0,
-                  preponed: stop.departureDelay < 0,
-                }"
-              >
-                o.
-                {{
-                stylizeTime(stop.departureRealTimeString, stop.departureDelay)
-                }}
-              </span>
-            </span>
-          </span>
-
-          <div class="stop-line departure">{{ stop.departureLine }}</div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-import TrainStop from "@/scripts/interfaces/TrainStop";
-
-@Component
-export default class TrainSchedule extends Vue {
-  @Prop() readonly followingStops!: TrainStop[];
-  @Prop() readonly currentStationName!: string;
-
-  stylizeTime(timeString: string, delay: number) {
-    return (
-      timeString +
-      (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "")
-    );
-  }
-
-  click() {
-    this.$emit("click");
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-
-.train-schedule {
-  max-height: 600px;
-  overflow: auto;
-  margin-top: 1rem;
-
-  font-size: 1em;
-
-  @include smallScreen() {
-    font-size: 0.8em;
-  }
-}
-
-.schedule-bar,
-.progress-bar {
-  position: absolute;
-  z-index: 1;
-
-  width: 2px;
-  height: 100%;
-
-  top: 0;
-  left: 0;
-
-  background: white;
-}
-
-.progress-bar {
-  height: 100%;
-
-  top: 0;
-  left: calc(-0.5rem - 2px);
-  width: 2px;
-}
-
-.schedule-wrapper {
-  position: relative;
-  margin-top: 1rem;
-  margin-left: 0.5rem;
-}
-
-ul.schedule-list {
-  margin-left: 10px;
-}
-
-ul.schedule-list > li.schedule-item {
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-
-  padding: 0 0.5rem;
-
-  &.confirmed {
-    & > .progress-bar,
-    & > .stop-info > .info-indicator {
-      background: lime;
-    }
-  }
-
-  &.stopped {
-    & > .progress-bar {
-      background: lime;
-      height: 50%;
-    }
-
-    & > .stop-info > .info-indicator {
-      background: orangered;
-    }
-  }
-}
-
-li.schedule-item > .stop-info {
-  display: flex;
-
-  position: relative;
-
-  & > .info-indicator {
-    position: absolute;
-    z-index: 1;
-
-    top: 50%;
-    left: -1.5rem;
-
-    transform: translateY(-50%);
-
-    width: 15px;
-    height: 2px;
-
-    background: white;
-  }
-
-  & > .info-name {
-    background: rgb(0, 81, 187);
-    padding: 0.3rem 0.5rem;
-  }
-
-  & > .info-date {
-    display: flex;
-    align-items: center;
-
-    & > span {
-      background: #5c5c5c;
-      padding: 0.3rem 0.5rem;
-    }
-
-    & > .date-stop {
-      &.ph,
-      &.ph-pm {
-        background: #ce8d00;
-      }
-
-      &.pt,
-      &.pm,
-      &.pt-pm {
-        background: #252525;
-      }
-    }
-
-    & > .date-arrival,
-    & > .date-departure {
-      &.delayed {
-        background: rgb(250, 0, 0);
-      }
-
-      &.preponed {
-        background: rgb(0, 139, 0);
-      }
-    }
-  }
-}
-
-li.schedule-item > .stop-line {
-  font-size: 0.8em;
-  color: #bbb;
-  padding: 0.3em 0;
-  margin: 0.2em 0;
-
-  transform: translateX(-0.8rem);
-}
-</style>
+<template>
+  <div class="train-schedule" @click="click">
+    <div class="schedule-wrapper">
+      <div class="schedule-bar"></div>
+
+      <ul class="schedule-list">
+        <li
+          class="schedule-item"
+          v-for="(stop, i) in followingStops"
+          :key="i"
+          :class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
+        >
+          <div class="progress-bar"></div>
+
+          <div
+            class="stop-line arrival"
+            v-if="
+              i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
+            "
+          >{{ stop.arrivalLine }}</div>
+
+          <span class="stop-info">
+            <div class="info-indicator"></div>
+
+            <span class="info-name" v-html="stop.stopName"></span>
+            <span class="info-date">
+              <span
+                class="date-arrival"
+                v-if="!stop.beginsHere"
+                :class="{
+                  delayed: stop.arrivalDelay > 0,
+                  preponed: stop.arrivalDelay < 0,
+                }"
+              >
+                p.
+                {{
+                stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)
+                }}
+              </span>
+
+              <span
+                class="date-stop"
+                v-if="stop.stopTime"
+                :class="stop.stopType.replace(', ', '-')"
+              >{{ stop.stopTime }} {{ stop.stopType }}</span>
+
+              <span
+                class="date-departure"
+                v-if="!stop.terminatesHere && stop.stopTime != 0"
+                :class="{
+                  delayed: stop.departureDelay > 0,
+                  preponed: stop.departureDelay < 0,
+                }"
+              >
+                o.
+                {{
+                stylizeTime(stop.departureRealTimeString, stop.departureDelay)
+                }}
+              </span>
+            </span>
+          </span>
+
+          <div class="stop-line departure">{{ stop.departureLine }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import TrainStop from "@/scripts/interfaces/TrainStop";
+
+@Component
+export default class TrainSchedule extends Vue {
+  @Prop() readonly followingStops!: TrainStop[];
+  @Prop() readonly currentStationName!: string;
+
+  stylizeTime(timeString: string, delay: number) {
+    return (
+      timeString +
+      (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "")
+    );
+  }
+
+  click() {
+    this.$emit("click");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.train-schedule {
+  max-height: 600px;
+  overflow: auto;
+  margin-top: 1rem;
+
+  font-size: 1em;
+
+  @include smallScreen() {
+    font-size: 0.8em;
+  }
+}
+
+.schedule-bar,
+.progress-bar {
+  position: absolute;
+  z-index: 1;
+
+  width: 2px;
+  height: 100%;
+
+  top: 0;
+  left: 0;
+
+  background: white;
+}
+
+.progress-bar {
+  height: 100%;
+
+  top: 0;
+  left: calc(-0.5rem - 2px);
+  width: 2px;
+}
+
+.schedule-wrapper {
+  position: relative;
+  margin-top: 1rem;
+  margin-left: 0.5rem;
+}
+
+ul.schedule-list {
+  margin-left: 10px;
+}
+
+ul.schedule-list > li.schedule-item {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 0.5rem;
+
+  &.confirmed {
+    & > .progress-bar,
+    & > .stop-info > .info-indicator {
+      background: lime;
+    }
+  }
+
+  &.stopped {
+    & > .progress-bar {
+      background: lime;
+      height: 50%;
+    }
+
+    & > .stop-info > .info-indicator {
+      background: orangered;
+    }
+  }
+}
+
+li.schedule-item > .stop-info {
+  display: flex;
+
+  position: relative;
+
+  & > .info-indicator {
+    position: absolute;
+    z-index: 1;
+
+    top: 50%;
+    left: -1.5rem;
+
+    transform: translateY(-50%);
+
+    width: 15px;
+    height: 2px;
+
+    background: white;
+  }
+
+  & > .info-name {
+    background: rgb(0, 81, 187);
+    padding: 0.3rem 0.5rem;
+  }
+
+  & > .info-date {
+    display: flex;
+    align-items: center;
+
+    & > span {
+      background: #5c5c5c;
+      padding: 0.3rem 0.5rem;
+    }
+
+    & > .date-stop {
+      &.ph,
+      &.ph-pm {
+        background: #ce8d00;
+      }
+
+      &.pt,
+      &.pm,
+      &.pt-pm {
+        background: #252525;
+      }
+    }
+
+    & > .date-arrival,
+    & > .date-departure {
+      &.delayed {
+        background: rgb(250, 0, 0);
+      }
+
+      &.preponed {
+        background: rgb(0, 139, 0);
+      }
+    }
+  }
+}
+
+li.schedule-item > .stop-line {
+  font-size: 0.8em;
+  color: #bbb;
+  padding: 0.3em 0;
+  margin: 0.2em 0;
+
+  transform: translateX(-0.8rem);
+}
+</style>
diff --git a/src/components/TrainsView/TrainSearch.vue b/src/components/TrainsView/TrainSearch.vue
index f21c207..d179586 100644
--- a/src/components/TrainsView/TrainSearch.vue
+++ b/src/components/TrainsView/TrainSearch.vue
@@ -1,123 +1,123 @@
-<template>
-  <div class="train-search">
-    <span class="search train">
-      <div class="search-title title">Szukaj składu</div>
-      <div class="search-box">
-        <input class="search-input" v-model="searchedTrain" />
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedTrain = '')"
-        />
-      </div>
-    </span>
-
-    <span class="search driver">
-      <div class="search-title title">Szukaj maszynisty</div>
-      <div class="search-box">
-        <input class="search-input" v-model="searchedDriver" />
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedDriver = '')"
-        />
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch, Prop } from "vue-property-decorator";
-
-@Component
-export default class extends Vue {
-  exitIcon = require("@/assets/icon-exit.svg");
-  searchedTrain = "";
-  searchedDriver = "";
-
-  @Prop() readonly passedSearchedTrain!: string;
-  @Prop() readonly focusedTrain!: string;
-  // @Prop() readonly passedSearchedDriver!: string;
-
-  @Watch("searchedTrain")
-  onSearchedTrainChanged(val: string, oldVal: string) {
-    this.$emit("changeSearchedTrain", val);
-  }
-
-  @Watch("searchedDriver")
-  onSearchedDriverChanged(val: string, oldVal: string) {
-    this.$emit("changeSearchedDriver", val);
-  }
-
-  @Watch("passedSearchedTrain")
-  onPassedSearchedTrainChanged(val: string, oldVal: string) {
-    if (val && val != "") {
-      this.searchedTrain = val;
-      this.searchedDriver = "";
-    }
-  }
-
-  @Watch("focusedTrain")
-  onFocusedTrainChanged(val: string, oldVal: string) {
-    console.log(val);
-
-    this.searchedTrain = val;
-    this.searchedDriver = "";
-  }
-
-  mounted() {
-    if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
-      this.searchedTrain = this.passedSearchedTrain;
-      this.searchedDriver = "";
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-
-.train-search {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  margin-bottom: 1rem;
-}
-
-.search {
-  padding-right: 1rem;
-
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 150px;
-  }
-
-  &-input {
-    border: none;
-
-    padding: 0.5rem 1rem;
-    margin: 0;
-
-    font-size: 1em;
-
-    min-width: 85%;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
+<template>
+  <div class="train-search">
+    <span class="search train">
+      <div class="search-title title">Szukaj składu</div>
+      <div class="search-box">
+        <input class="search-input" v-model="searchedTrain" />
+        <img
+          class="search-exit"
+          :src="exitIcon"
+          alt="exit-icon"
+          @click="() => (searchedTrain = '')"
+        />
+      </div>
+    </span>
+
+    <span class="search driver">
+      <div class="search-title title">Szukaj maszynisty</div>
+      <div class="search-box">
+        <input class="search-input" v-model="searchedDriver" />
+        <img
+          class="search-exit"
+          :src="exitIcon"
+          alt="exit-icon"
+          @click="() => (searchedDriver = '')"
+        />
+      </div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+
+@Component
+export default class extends Vue {
+  exitIcon = require("@/assets/icon-exit.svg");
+  searchedTrain = "";
+  searchedDriver = "";
+
+  @Prop() readonly passedSearchedTrain!: string;
+  @Prop() readonly focusedTrain!: string;
+  // @Prop() readonly passedSearchedDriver!: string;
+
+  @Watch("searchedTrain")
+  onSearchedTrainChanged(val: string, oldVal: string) {
+    this.$emit("changeSearchedTrain", val);
+  }
+
+  @Watch("searchedDriver")
+  onSearchedDriverChanged(val: string, oldVal: string) {
+    this.$emit("changeSearchedDriver", val);
+  }
+
+  @Watch("passedSearchedTrain")
+  onPassedSearchedTrainChanged(val: string, oldVal: string) {
+    if (val && val != "") {
+      this.searchedTrain = val;
+      this.searchedDriver = "";
+    }
+  }
+
+  @Watch("focusedTrain")
+  onFocusedTrainChanged(val: string, oldVal: string) {
+    console.log(val);
+
+    this.searchedTrain = val;
+    this.searchedDriver = "";
+  }
+
+  mounted() {
+    if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
+      this.searchedTrain = this.passedSearchedTrain;
+      this.searchedDriver = "";
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.train-search {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  margin-bottom: 1rem;
+}
+
+.search {
+  padding-right: 1rem;
+
+  &-box {
+    position: relative;
+
+    background: #333;
+    border-radius: 0.5em;
+    min-width: 150px;
+  }
+
+  &-input {
+    border: none;
+
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    font-size: 1em;
+
+    min-width: 85%;
+  }
+
+  &-exit {
+    position: absolute;
+    cursor: pointer;
+
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+
+    width: 1em;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainSorter.vue b/src/components/TrainsView/TrainSorter.vue
index 1bd2601..8e62178 100644
--- a/src/components/TrainsView/TrainSorter.vue
+++ b/src/components/TrainsView/TrainSorter.vue
@@ -1,173 +1,173 @@
-<template>
-  <div class="train-sorter">
-    <div class="sorter-wrapper">
-      <div class="sorter-box">
-        <div class="title">Sortuj według</div>
-
-        <div class="selected" @click="toggleOptionList">
-          <span>{{ sorterName }}</span>
-          <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
-        </div>
-
-        <div class="options-container">
-          <ul class="options-list" :class="{ open: listOpen }">
-            <li
-              class="option"
-              v-for="(option, i) in sortOptionList"
-              :key="i"
-              @click="() => chooseOption(option)"
-            >
-              <input type="radio" name="sort" :id="option.id" />
-              <label :for="option.id">{{ option.content }}</label>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
-
-const ascSVG = require("@/assets/icon-arrow-asc.svg");
-const descSVG = require("@/assets/icon-arrow-desc.svg");
-
-@Component
-export default class TrainSorter extends Vue {
-  ascSVG = ascSVG;
-  descSVG = descSVG;
-
-  @Prop() trainList!: [];
-
-  listOpen: boolean = false;
-  sorterName: string = "numer pociągu";
-
-  sortOptionList: { id: string; content: string }[] = [
-    {
-      id: "mass",
-      content: "masa",
-    },
-    {
-      id: "speed",
-      content: "prędkość",
-    },
-    {
-      id: "length",
-      content: "długość",
-    },
-    {
-      id: "distance",
-      content: "kilometraż",
-    },
-    {
-      id: "timetable",
-      content: "numer pociągu",
-    },
-  ];
-
-  toggleOptionList() {
-    this.listOpen = !this.listOpen;
-  }
-
-  closeOptionList() {
-    this.listOpen = false;
-  }
-
-  chooseOption(option: { id: string; content: string }) {
-    this.$emit("changeSorter", { id: option.id, dir: -1 });
-    this.sorterName = option.content;
-
-    this.closeOptionList();
-  }
-
-  get compTrainList() {
-    return this.trainList;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.title {
-  padding-left: 0.3em;
-}
-
-.sorter-wrapper {
-  display: flex;
-
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-}
-
-.selected {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  span {
-    margin-right: 2rem;
-  }
-
-  img {
-    max-width: 0.75em;
-  }
-}
-
-.selected,
-.options-list {
-  background: #333;
-  border-radius: 0.5em;
-}
-
-.selected {
-  padding: 0.5rem 1rem;
-  min-width: 150px;
-  cursor: pointer;
-}
-
-.options-container {
-  position: relative;
-}
-
-.options-list {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  z-index: 10;
-
-  width: 100%;
-  background-color: rgba(#222, 0.95);
-  overflow: hidden;
-
-  max-height: 0;
-
-  &.open {
-    max-height: 250px;
-    opacity: 1;
-  }
-
-  transition: all 150ms ease-in;
-}
-
-.option {
-  display: flex;
-
-  &:hover {
-    background-color: rgba(#868686, 0.85);
-  }
-
-  transition: background 150ms ease-in;
-}
-
-input {
-  display: none;
-}
-
-label {
-  padding: 0.5rem 1rem;
-  width: 100%;
-  cursor: pointer;
-}
-</style>
+<template>
+  <div class="train-sorter">
+    <div class="sorter-wrapper">
+      <div class="sorter-box">
+        <div class="title">Sortuj według</div>
+
+        <div class="selected" @click="toggleOptionList">
+          <span>{{ sorterName }}</span>
+          <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
+        </div>
+
+        <div class="options-container">
+          <ul class="options-list" :class="{ open: listOpen }">
+            <li
+              class="option"
+              v-for="(option, i) in sortOptionList"
+              :key="i"
+              @click="() => chooseOption(option)"
+            >
+              <input type="radio" name="sort" :id="option.id" />
+              <label :for="option.id">{{ option.content }}</label>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
+
+@Component
+export default class TrainSorter extends Vue {
+  ascSVG = ascSVG;
+  descSVG = descSVG;
+
+  @Prop() trainList!: [];
+
+  listOpen: boolean = false;
+  sorterName: string = "numer pociągu";
+
+  sortOptionList: { id: string; content: string }[] = [
+    {
+      id: "mass",
+      content: "masa",
+    },
+    {
+      id: "speed",
+      content: "prędkość",
+    },
+    {
+      id: "length",
+      content: "długość",
+    },
+    {
+      id: "distance",
+      content: "kilometraż",
+    },
+    {
+      id: "timetable",
+      content: "numer pociągu",
+    },
+  ];
+
+  toggleOptionList() {
+    this.listOpen = !this.listOpen;
+  }
+
+  closeOptionList() {
+    this.listOpen = false;
+  }
+
+  chooseOption(option: { id: string; content: string }) {
+    this.$emit("changeSorter", { id: option.id, dir: -1 });
+    this.sorterName = option.content;
+
+    this.closeOptionList();
+  }
+
+  get compTrainList() {
+    return this.trainList;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  padding-left: 0.3em;
+}
+
+.sorter-wrapper {
+  display: flex;
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+.selected {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span {
+    margin-right: 2rem;
+  }
+
+  img {
+    max-width: 0.75em;
+  }
+}
+
+.selected,
+.options-list {
+  background: #333;
+  border-radius: 0.5em;
+}
+
+.selected {
+  padding: 0.5rem 1rem;
+  min-width: 150px;
+  cursor: pointer;
+}
+
+.options-container {
+  position: relative;
+}
+
+.options-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  z-index: 10;
+
+  width: 100%;
+  background-color: rgba(#222, 0.95);
+  overflow: hidden;
+
+  max-height: 0;
+
+  &.open {
+    max-height: 250px;
+    opacity: 1;
+  }
+
+  transition: all 150ms ease-in;
+}
+
+.option {
+  display: flex;
+
+  &:hover {
+    background-color: rgba(#868686, 0.85);
+  }
+
+  transition: background 150ms ease-in;
+}
+
+input {
+  display: none;
+}
+
+label {
+  padding: 0.5rem 1rem;
+  width: 100%;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue
index c383fa4..2060c80 100644
--- a/src/components/TrainsView/TrainStats.vue
+++ b/src/components/TrainsView/TrainStats.vue
@@ -1,322 +1,322 @@
-<template>
-  <div class="train-stats">
-    <div class="btn-wrapper">
-      <button
-        class="stats-btn button"
-        @click="toggleStats"
-        v-if="trains.length > 0"
-      >
-        STATYSTYKI RUCHU
-      </button>
-    </div>
-
-    <transition name="stats-anim">
-      <div class="stats-body" v-if="statsOpen">
-        <h2 class="stats-header">STATYSTYKI RUCHU</h2>
-
-        <div class="stats-speed">
-          <div class="title stats-title">
-            PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
-          </div>
-          <div class="stats-content">
-            {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
-          </div>
-        </div>
-
-        <div class="stats-length">
-          <div class="title stats-title">
-            DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
-          </div>
-          <div class="stats-content">
-            {{ timetableStats.min }} | {{ timetableStats.avg }} |
-            {{ timetableStats.max }}
-          </div>
-        </div>
-
-        <div class="stats-categories">
-          <div class="title stats-title">KATEGORIE RJ</div>
-
-          <div class="category-list">
-            <span
-              class="category"
-              v-for="[key, value] of categoryList"
-              :key="key"
-            >
-              <span class="category-type">{{ key }}</span>
-              <span class="category-count">{{ value }}</span>
-            </span>
-          </div>
-
-          <div class="special-list">
-            <span class="special twr">
-              <span class="special-type">WYSOKIEGO RYZYKA</span>
-              <span class="special-count">{{ specialTrainCount[0] }}</span>
-            </span>
-
-            <span class="special skr">
-              <span class="special-type">PRZEKROCZONA SKRAJNIA</span>
-              <span class="special-count">{{ specialTrainCount[1] }}</span>
-            </span>
-          </div>
-        </div>
-
-        <div class="stats-locos">
-          <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
-
-          <div class="loco-list stats-content">
-            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
-              {{ loco[0] }} | {{ loco[1] }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-import Train from "@/scripts/interfaces/Train";
-
-@Component
-export default class TrainStats extends Vue {
-  @Prop() readonly trains!: Train[];
-
-  statsOpen: boolean = false;
-
-  toggleStats() {
-    this.statsOpen = !this.statsOpen;
-  }
-
-  get speedStats(): { avg: string; min: string; max: string } {
-    if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
-
-    const avg = (
-      this.trains.reduce((acc, train) => acc + train.speed, 0) /
-      this.trains.length
-    ).toFixed(2);
-
-    const minMax = this.trains.reduce((acc, train) => {
-      if (!train.timetableData) return acc;
-
-      acc[0] =
-        acc[0] === undefined || train.speed < acc[0] ? train.speed : acc[0];
-
-      acc[1] =
-        acc[1] === undefined || train.speed > acc[1] ? train.speed : acc[1];
-      return acc;
-    }, [] as any);
-
-    return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
-  }
-
-  get timetableStats(): { avg: string; min: string; max: string } {
-    if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
-
-    const avg = (
-      this.trains.reduce((acc, train) => train.timetableData ? acc + train.timetableData.routeDistance : acc, 0) /
-      this.trains.length
-    ).toFixed(2);
-
-    const minMax = this.trains.reduce((acc, train) => {
-      if (!train.timetableData) return acc;
-
-      acc[0] =
-        acc[0] === undefined || train.timetableData.routeDistance < acc[0]
-          ? train.timetableData.routeDistance
-          : acc[0];
-
-      acc[1] =
-        acc[1] === undefined || train.timetableData.routeDistance > acc[1]
-          ? train.timetableData.routeDistance
-          : acc[1];
-      return acc;
-    }, [] as any);
-
-    return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
-  }
-
-  get categoryList(): Map<string, number> {
-    const map = this.trains.reduce((acc, train) => {
-      if (!train.timetableData || !train.timetableData.category) return acc;
-
-      acc.set(
-        train.timetableData.category,
-        acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
-      );
-
-      return acc;
-    }, new Map());
-
-    return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
-  }
-
-  get locoList(): any[] {
-    const map = this.trains.reduce((acc, train) => {
-      if (!train.timetableData || !train.locoType) return acc;
-
-      acc.set(
-        train.locoType,
-        acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
-      );
-
-      return acc;
-    }, new Map());
-
-    const sorted = [...map.entries()]
-      .sort((a, b) => b[1] - a[1])
-      .filter((v, i) => i < 3);
-
-    return sorted;
-  }
-
-  get specialTrainCount(): [number, number] {
-    const twrList = this.trains.filter((train) => train.timetableData && train.timetableData.TWR);
-    const skrList = this.trains.filter((train) => train.timetableData && train.timetableData.SKR);
-
-    return [twrList.length, skrList.length];
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive";
-@import "../../styles/variables";
-
-.stats-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-}
-
-.train-stats {
-  padding: 0.3em 0;
-  font-size: 1.1em;
-  z-index: 5;
-
-  position: relative;
-}
-
-.stats {
-  &-btn {
-    font-size: 1em;
-    padding: 0.5em;
-  }
-
-  &-header {
-    margin-bottom: 1rem;
-  }
-
-  &-body {
-    position: absolute;
-    display: inline-block;
-    max-width: 700px;
-
-    background: rgba(black, 0.85);
-    border-radius: 0 1em 1em 1em;
-
-    padding: 1rem;
-  }
-
-  &-content {
-    font-size: 1.1em;
-    color: #ddd;
-  }
-}
-
-.category,
-.special {
-  &-list {
-    display: flex;
-    flex-wrap: wrap;
-    font-size: 0.95em;
-  }
-
-  margin-right: 0.4em;
-  margin-bottom: 0.4em;
-
-  &-type,
-  &-count {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  &-type {
-    background: rgb(88, 88, 88);
-    font-weight: 600;
-  }
-
-  &-count {
-    background: #ffc014;
-    color: black;
-  }
-}
-
-.special {
-  &-list {
-    font-size: 0.85em;
-  }
-
-  &-count {
-    background: gray;
-    color: white;
-  }
-
-  &.twr > &-type {
-    background-color: $twr;
-    color: black;
-  }
-
-  &.skr > &-type {
-    background-color: $skr;
-    color: white;
-  }
-}
-
-.warning {
-  display: inline-block;
-  margin-right: 0.4em;
-  padding: 0.2em 0.3em;
-
-  color: black;
-  font-weight: bold;
-  font-size: 0.85em;
-
-  &.twr {
-    background-color: #ffc700;
-  }
-
-  &.skr {
-    background-color: #f00000;
-  }
-}
-
-@include smallScreen {
-  .button {
-    font-size: 0.85rem;
-  }
-
-  .stats-body {
-    display: block;
-    font-size: 0.9em;
-
-    width: 100%;
-
-    border-radius: 0 0 1em 1em;
-  }
-
-  .btn-wrapper {
-    display: flex;
-    justify-content: center;
-    margin-top: 1rem;
-  }
-}
+<template>
+  <div class="train-stats">
+    <div class="btn-wrapper">
+      <button
+        class="stats-btn button"
+        @click="toggleStats"
+        v-if="trains.length > 0"
+      >
+        STATYSTYKI RUCHU
+      </button>
+    </div>
+
+    <transition name="stats-anim">
+      <div class="stats-body" v-if="statsOpen">
+        <h2 class="stats-header">STATYSTYKI RUCHU</h2>
+
+        <div class="stats-speed">
+          <div class="title stats-title">
+            PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
+          </div>
+          <div class="stats-content">
+            {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
+          </div>
+        </div>
+
+        <div class="stats-length">
+          <div class="title stats-title">
+            DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
+          </div>
+          <div class="stats-content">
+            {{ timetableStats.min }} | {{ timetableStats.avg }} |
+            {{ timetableStats.max }}
+          </div>
+        </div>
+
+        <div class="stats-categories">
+          <div class="title stats-title">KATEGORIE RJ</div>
+
+          <div class="category-list">
+            <span
+              class="category"
+              v-for="[key, value] of categoryList"
+              :key="key"
+            >
+              <span class="category-type">{{ key }}</span>
+              <span class="category-count">{{ value }}</span>
+            </span>
+          </div>
+
+          <div class="special-list">
+            <span class="special twr">
+              <span class="special-type">WYSOKIEGO RYZYKA</span>
+              <span class="special-count">{{ specialTrainCount[0] }}</span>
+            </span>
+
+            <span class="special skr">
+              <span class="special-type">PRZEKROCZONA SKRAJNIA</span>
+              <span class="special-count">{{ specialTrainCount[1] }}</span>
+            </span>
+          </div>
+        </div>
+
+        <div class="stats-locos">
+          <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
+
+          <div class="loco-list stats-content">
+            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
+              {{ loco[0] }} | {{ loco[1] }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import Train from "@/scripts/interfaces/Train";
+
+@Component
+export default class TrainStats extends Vue {
+  @Prop() readonly trains!: Train[];
+
+  statsOpen: boolean = false;
+
+  toggleStats() {
+    this.statsOpen = !this.statsOpen;
+  }
+
+  get speedStats(): { avg: string; min: string; max: string } {
+    if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+
+    const avg = (
+      this.trains.reduce((acc, train) => acc + train.speed, 0) /
+      this.trains.length
+    ).toFixed(2);
+
+    const minMax = this.trains.reduce((acc, train) => {
+      if (!train.timetableData) return acc;
+
+      acc[0] =
+        acc[0] === undefined || train.speed < acc[0] ? train.speed : acc[0];
+
+      acc[1] =
+        acc[1] === undefined || train.speed > acc[1] ? train.speed : acc[1];
+      return acc;
+    }, [] as any);
+
+    return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
+  }
+
+  get timetableStats(): { avg: string; min: string; max: string } {
+    if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+
+    const avg = (
+      this.trains.reduce((acc, train) => train.timetableData ? acc + train.timetableData.routeDistance : acc, 0) /
+      this.trains.length
+    ).toFixed(2);
+
+    const minMax = this.trains.reduce((acc, train) => {
+      if (!train.timetableData) return acc;
+
+      acc[0] =
+        acc[0] === undefined || train.timetableData.routeDistance < acc[0]
+          ? train.timetableData.routeDistance
+          : acc[0];
+
+      acc[1] =
+        acc[1] === undefined || train.timetableData.routeDistance > acc[1]
+          ? train.timetableData.routeDistance
+          : acc[1];
+      return acc;
+    }, [] as any);
+
+    return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
+  }
+
+  get categoryList(): Map<string, number> {
+    const map = this.trains.reduce((acc, train) => {
+      if (!train.timetableData || !train.timetableData.category) return acc;
+
+      acc.set(
+        train.timetableData.category,
+        acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
+      );
+
+      return acc;
+    }, new Map());
+
+    return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
+  }
+
+  get locoList(): any[] {
+    const map = this.trains.reduce((acc, train) => {
+      if (!train.timetableData || !train.locoType) return acc;
+
+      acc.set(
+        train.locoType,
+        acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
+      );
+
+      return acc;
+    }, new Map());
+
+    const sorted = [...map.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .filter((v, i) => i < 3);
+
+    return sorted;
+  }
+
+  get specialTrainCount(): [number, number] {
+    const twrList = this.trains.filter((train) => train.timetableData && train.timetableData.TWR);
+    const skrList = this.trains.filter((train) => train.timetableData && train.timetableData.SKR);
+
+    return [twrList.length, skrList.length];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+@import "../../styles/variables";
+
+.stats-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+
+.train-stats {
+  padding: 0.3em 0;
+  font-size: 1.1em;
+  z-index: 5;
+
+  position: relative;
+}
+
+.stats {
+  &-btn {
+    font-size: 1em;
+    padding: 0.5em;
+  }
+
+  &-header {
+    margin-bottom: 1rem;
+  }
+
+  &-body {
+    position: absolute;
+    display: inline-block;
+    max-width: 700px;
+
+    background: rgba(black, 0.85);
+    border-radius: 0 1em 1em 1em;
+
+    padding: 1rem;
+  }
+
+  &-content {
+    font-size: 1.1em;
+    color: #ddd;
+  }
+}
+
+.category,
+.special {
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.95em;
+  }
+
+  margin-right: 0.4em;
+  margin-bottom: 0.4em;
+
+  &-type,
+  &-count {
+    display: inline-block;
+    padding: 0.2em 0.4em;
+  }
+
+  &-type {
+    background: rgb(88, 88, 88);
+    font-weight: 600;
+  }
+
+  &-count {
+    background: #ffc014;
+    color: black;
+  }
+}
+
+.special {
+  &-list {
+    font-size: 0.85em;
+  }
+
+  &-count {
+    background: gray;
+    color: white;
+  }
+
+  &.twr > &-type {
+    background-color: $twr;
+    color: black;
+  }
+
+  &.skr > &-type {
+    background-color: $skr;
+    color: white;
+  }
+}
+
+.warning {
+  display: inline-block;
+  margin-right: 0.4em;
+  padding: 0.2em 0.3em;
+
+  color: black;
+  font-weight: bold;
+  font-size: 0.85em;
+
+  &.twr {
+    background-color: #ffc700;
+  }
+
+  &.skr {
+    background-color: #f00000;
+  }
+}
+
+@include smallScreen {
+  .button {
+    font-size: 0.85rem;
+  }
+
+  .stats-body {
+    display: block;
+    font-size: 0.9em;
+
+    width: 100%;
+
+    border-radius: 0 0 1em 1em;
+  }
+
+  .btn-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index ea253bb..556a390 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -1,485 +1,485 @@
-<template>
-  <div class="train-table">
-    <div class="no-trains" v-if="computedTrains.length == 0">
-      Ups! Brak pociągów do wyświetlenia :/
-    </div>
-
-    <ul class="train-list">
-      <li
-        class="train-row"
-        v-for="(train, i) in computedTrains"
-        :key="i"
-        :id="train.timetableData.timetableId"
-      >
-        <span class="wrapper">
-          <span
-            class="info"
-            @click="changeScheduleShowState(train.timetableData.timetableId)"
-          >
-            <div class="info-main">
-              <div class="info-category">
-                <div class="category-left">
-                  <span class="warning twr" v-if="train.timetableData.TWR">
-                    TWR
-                  </span>
-
-                  <span class="warning skr" v-if="train.timetableData.SKR">
-                    SKR
-                  </span>
-
-                  <span>
-                    <strong>{{ train.timetableData.category }}</strong>
-                    {{ train.trainNo }} |
-
-                    <span style="color: gold">
-                      {{ train.timetableData.routeDistance }} km
-                    </span>
-                  </span>
-                </div>
-
-                <div class="category-right tooltip">
-                  <img
-                    :src="
-                      showedSchedule === train.timetableData.timetableId
-                        ? ascSVG
-                        : descSVG
-                    "
-                    alt="asc-arrow"
-                  />
-
-                  <span>SRJP</span>
-
-                  <span class="tooltip-text">
-                    Szczegółowy rozkład jazdy pociągu {{ train.trainNo }}
-                  </span>
-                </div>
-              </div>
-
-              <div class="info-route">
-                <span class="info-route-text">
-                  <strong>
-                    {{ train.timetableData.route.replace("|", " - ") }}
-                  </strong>
-                </span>
-              </div>
-
-              <div class="info-stops">
-                <span v-if="train.timetableData.followingStops.length > 2">
-                  Przez:
-
-                  <span
-                    v-html="
-                      generateStopList(train.timetableData.followingStops)
-                    "
-                  ></span>
-                </span>
-              </div>
-            </div>
-
-            <div class="info-bottom">
-              <span
-                class="info-label user-badge"
-                :class="train.stopStatus || 'disconnected'"
-              >
-                <span
-                  class="tooltip"
-                  :style="!train.online ? 'color: gray' : ''"
-                >
-                  <span v-if="train.stopStatus">{{ train.stopLabel }}</span>
-                  <span v-else-if="train.currentStationName">
-                    Pociąg na złej stacji!
-                  </span>
-                  <span v-else>Sceneria offline!</span>
-
-                  <span class="tooltip-text" v-if="!train.online">
-                    Pociąg offline
-                  </span>
-                </span>
-              </span>
-            </div>
-          </span>
-
-          <span class="driver">
-            <span class="driver-name">
-              <a
-                :href="'https://td2.info.pl/profile/?u=' + train.driverId"
-                target="_blank"
-              >
-                {{ train.driverName }}
-              </a>
-            </span>
-
-            <span class="driver-type">
-              {{ train.locoType }}
-            </span>
-
-            <span class="driver-loco">
-              <img :src="train.locoURL" @error="onImageError" />
-            </span>
-          </span>
-
-          <span class="stats">
-            <div class="stats-main">
-              <span class="mass">
-                <img :src="massIcon" alt="icon-mass" />
-                {{ train.mass / 1000 }}t
-              </span>
-
-              <span class="speed">
-                <img :src="speedIcon" alt="icon-speed" />
-                {{ train.speed }} km/h
-              </span>
-
-              <span class="length">
-                <img :src="lengthIcon" alt="icon-length" />
-                {{ train.length }}m
-              </span>
-            </div>
-
-            <div class="stats-position">
-              <span class="station">
-                <div class="stat-icon">
-                  <img :src="sceneryIcon" alt="icon-scenery" />
-                </div>
-                {{ train.currentStationName || "---" }}
-              </span>
-              <span class="track">
-                <div class="stat-icon">
-                  <img :src="routeIcon" alt="icon-scenery" />
-                </div>
-                {{ train.connectedTrack || "---" }}
-              </span>
-              <span class="signal">
-                <div class="stat-icon">
-                  <img :src="signalIcon" alt="icon-scenery" />
-                </div>
-                {{ train.signal || "---" }}
-              </span>
-              <span class="distance">
-                <div class="stat-icon">
-                  <img :src="distanceIcon" alt="icon-scenery" />
-                </div>
-                {{ train.distance || "0" }}m
-              </span>
-            </div>
-          </span>
-        </span>
-
-        <TrainSchedule
-          :followingStops="train.timetableData.followingStops"
-          :currentStationName="train.currentStationName"
-          @click="changeScheduleShowState(train.timetableData.timetableId)"
-          v-if="showedSchedule == train.timetableData.timetableId"
-        />
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-
-const unknownTrainImage = require("@/assets/unknown.png");
-
-const ascSVG = require("@/assets/icon-arrow-asc.svg");
-const descSVG = require("@/assets/icon-arrow-desc.svg");
-
-import Train from "@/scripts/interfaces/Train";
-import Station from "@/scripts/interfaces/Station";
-
-import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
-import TrainStop from '@/scripts/interfaces/TrainStop';
-
-@Component({
-  components: { TrainSchedule }
-})
-export default class TrainTable extends Vue {
-  @Prop() computedTrains!: Train[];
-
-  showedSchedule = 0;
-
-  ascSVG = ascSVG;
-  descSVG = descSVG;
-
-  speedIcon: string = require("@/assets/icon-speed.svg");
-  massIcon: string = require("@/assets/icon-mass.svg");
-  lengthIcon: string = require("@/assets/icon-length.svg");
-
-  distanceIcon: string = require("@/assets/icon-distance.svg");
-  sceneryIcon: string = require("@/assets/icon-scenery.svg");
-  signalIcon: string = require("@/assets/icon-signal.svg");
-  routeIcon: string = require("@/assets/icon-route.svg");
-
-  changeScheduleShowState(timetableId: number) {
-    this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
-  }
-
-  onImageError(e: Event) {
-    (e.target as HTMLImageElement).src = unknownTrainImage;
-  }
-
-  generateStopList(stops: any): string | undefined {
-    if (!stops) return "";
-    return stops.reduce((acc, stop: TrainStop, i) => {
-      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."))
-        acc.push(`<span style='color:${stop.confirmed ? "springgreen" : "lightgray"}'>${stop.stopName}</span>`);
-      return acc;
-    }, []).join(" * ");
-  }
-
-
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
-@import "../../styles/user_badge.scss";
-
-.no-trains {
-  text-align: center;
-  font-size: 1.5em;
-
-  padding: 1rem;
-  margin: 1rem 0;
-
-  background: #333;
-}
-
-.train {
-  &-list {
-    @include smallScreen() {
-      width: 100%;
-      overflow: hidden;
-    }
-  }
-
-  &-row {
-    padding: 1rem;
-    margin-bottom: 1rem;
-
-    background-color: $primaryCol;
-
-    cursor: pointer;
-
-    & > .wrapper {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      font-size: calc(0.4rem + 0.5vw);
-
-      @include smallScreen() {
-        grid-template-columns: 1fr;
-        grid-template-rows: repeat(3, minmax(100px, 1fr));
-
-        font-size: 0.8rem;
-        gap: 0.4em 0;
-      }
-
-      @include bigScreen() {
-        font-size: 1.1rem;
-      }
-    }
-  }
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  &-category {
-    font-size: 1.05em;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    div {
-      display: flex;
-    }
-
-    .category-right {
-      padding: 0.15em 0.5em;
-
-      background: #1085b3;
-      border-radius: 1em;
-
-      font-size: 0.9em;
-
-      -moz-user-select: none;
-      -webkit-user-select: none;
-
-      img {
-        vertical-align: middle;
-        width: 1.2em;
-      }
-
-      .tooltip-text {
-        font-size: 0.9em;
-        background-color: #1085b3;
-
-        &::after {
-          border-color: #1085b3 transparent transparent transparent;
-        }
-      }
-    }
-  }
-
-  &-route {
-    display: flex;
-    align-items: center;
-
-    font-size: 1.25em;
-    margin: 5px 0;
-  }
-
-  &-stops {
-    margin-bottom: 10px;
-
-    font-size: 0.75em;
-  }
-
-  &-online {
-    background-color: #ce0000;
-
-    padding: 0.2em 0.7em;
-    font-size: 0.85em;
-
-    border-radius: 1em;
-
-    &.online {
-      background-color: #009700;
-    }
-  }
-
-  &-bottom {
-    display: flex;
-    align-items: center;
-
-    button {
-      margin-left: 10px;
-      border-radius: 0.7em;
-      padding: 0.2em 0.5em;
-      font-size: 0.85em;
-
-      border: 1px solid white;
-    }
-  }
-}
-
-.driver {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  &-exp {
-    font-size: 1.4em;
-    padding: 0.3em 0.6em;
-
-    border-radius: 0.4em;
-
-    background-color: red;
-  }
-
-  &-name {
-    margin: 0 0.3em;
-    font-weight: bold;
-  }
-
-  &-type {
-    color: #bbb;
-    margin-left: 1em;
-  }
-
-  &-loco {
-    width: 100%;
-    text-align: center;
-  }
-
-  &-loco img {
-    width: 13em;
-    max-width: 190px;
-  }
-}
-
-.stats {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-
-  &-main {
-    display: flex;
-    margin-bottom: 1.5em;
-
-    & > span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 100%;
-    }
-
-    img {
-      margin: 0 0.3em;
-      width: 2em;
-    }
-  }
-
-  &-position {
-    display: flex;
-
-    margin-top: 1em;
-    text-align: center;
-
-    font-size: 0.9em;
-
-    p {
-      color: #00cff3;
-    }
-
-    & > span {
-      width: 100%;
-
-      img {
-        width: 2em;
-      }
-    }
-  }
-}
-
-.warning {
-  border-radius: 15px;
-  padding: 0.1em 1.2em;
-  margin-right: 0.5em;
-
-  display: flex;
-  align-items: center;
-
-  color: white;
-
-  font-weight: bold;
-  font-size: 0.7em;
-
-  &.twr {
-    border: 2px solid $twr;
-  }
-
-  &.skr {
-    border: 2px solid $skr;
-  }
-}
-
-@include bigScreen() {
-  .item {
-    font-size: 1rem;
-  }
-}
-
-@include smallScreen() {
-  .info-bottom {
-    text-align: center;
-  }
-}
+<template>
+  <div class="train-table">
+    <div class="no-trains" v-if="computedTrains.length == 0">
+      Ups! Brak pociągów do wyświetlenia :/
+    </div>
+
+    <ul class="train-list">
+      <li
+        class="train-row"
+        v-for="(train, i) in computedTrains"
+        :key="i"
+        :id="train.timetableData.timetableId"
+      >
+        <span class="wrapper">
+          <span
+            class="info"
+            @click="changeScheduleShowState(train.timetableData.timetableId)"
+          >
+            <div class="info-main">
+              <div class="info-category">
+                <div class="category-left">
+                  <span class="warning twr" v-if="train.timetableData.TWR">
+                    TWR
+                  </span>
+
+                  <span class="warning skr" v-if="train.timetableData.SKR">
+                    SKR
+                  </span>
+
+                  <span>
+                    <strong>{{ train.timetableData.category }}</strong>
+                    {{ train.trainNo }} |
+
+                    <span style="color: gold">
+                      {{ train.timetableData.routeDistance }} km
+                    </span>
+                  </span>
+                </div>
+
+                <div class="category-right tooltip">
+                  <img
+                    :src="
+                      showedSchedule === train.timetableData.timetableId
+                        ? ascSVG
+                        : descSVG
+                    "
+                    alt="asc-arrow"
+                  />
+
+                  <span>SRJP</span>
+
+                  <span class="tooltip-text">
+                    Szczegółowy rozkład jazdy pociągu {{ train.trainNo }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="info-route">
+                <span class="info-route-text">
+                  <strong>
+                    {{ train.timetableData.route.replace("|", " - ") }}
+                  </strong>
+                </span>
+              </div>
+
+              <div class="info-stops">
+                <span v-if="train.timetableData.followingStops.length > 2">
+                  Przez:
+
+                  <span
+                    v-html="
+                      generateStopList(train.timetableData.followingStops)
+                    "
+                  ></span>
+                </span>
+              </div>
+            </div>
+
+            <div class="info-bottom">
+              <span
+                class="info-label user-badge"
+                :class="train.stopStatus || 'disconnected'"
+              >
+                <span
+                  class="tooltip"
+                  :style="!train.online ? 'color: gray' : ''"
+                >
+                  <span v-if="train.stopStatus">{{ train.stopLabel }}</span>
+                  <span v-else-if="train.currentStationName">
+                    Pociąg na złej stacji!
+                  </span>
+                  <span v-else>Sceneria offline!</span>
+
+                  <span class="tooltip-text" v-if="!train.online">
+                    Pociąg offline
+                  </span>
+                </span>
+              </span>
+            </div>
+          </span>
+
+          <span class="driver">
+            <span class="driver-name">
+              <a
+                :href="'https://td2.info.pl/profile/?u=' + train.driverId"
+                target="_blank"
+              >
+                {{ train.driverName }}
+              </a>
+            </span>
+
+            <span class="driver-type">
+              {{ train.locoType }}
+            </span>
+
+            <span class="driver-loco">
+              <img :src="train.locoURL" @error="onImageError" />
+            </span>
+          </span>
+
+          <span class="stats">
+            <div class="stats-main">
+              <span class="mass">
+                <img :src="massIcon" alt="icon-mass" />
+                {{ train.mass / 1000 }}t
+              </span>
+
+              <span class="speed">
+                <img :src="speedIcon" alt="icon-speed" />
+                {{ train.speed }} km/h
+              </span>
+
+              <span class="length">
+                <img :src="lengthIcon" alt="icon-length" />
+                {{ train.length }}m
+              </span>
+            </div>
+
+            <div class="stats-position">
+              <span class="station">
+                <div class="stat-icon">
+                  <img :src="sceneryIcon" alt="icon-scenery" />
+                </div>
+                {{ train.currentStationName || "---" }}
+              </span>
+              <span class="track">
+                <div class="stat-icon">
+                  <img :src="routeIcon" alt="icon-scenery" />
+                </div>
+                {{ train.connectedTrack || "---" }}
+              </span>
+              <span class="signal">
+                <div class="stat-icon">
+                  <img :src="signalIcon" alt="icon-scenery" />
+                </div>
+                {{ train.signal || "---" }}
+              </span>
+              <span class="distance">
+                <div class="stat-icon">
+                  <img :src="distanceIcon" alt="icon-scenery" />
+                </div>
+                {{ train.distance || "0" }}m
+              </span>
+            </div>
+          </span>
+        </span>
+
+        <TrainSchedule
+          :followingStops="train.timetableData.followingStops"
+          :currentStationName="train.currentStationName"
+          @click="changeScheduleShowState(train.timetableData.timetableId)"
+          v-if="showedSchedule == train.timetableData.timetableId"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+
+const unknownTrainImage = require("@/assets/unknown.png");
+
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
+
+import Train from "@/scripts/interfaces/Train";
+import Station from "@/scripts/interfaces/Station";
+
+import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
+import TrainStop from '@/scripts/interfaces/TrainStop';
+
+@Component({
+  components: { TrainSchedule }
+})
+export default class TrainTable extends Vue {
+  @Prop() computedTrains!: Train[];
+
+  showedSchedule = 0;
+
+  ascSVG = ascSVG;
+  descSVG = descSVG;
+
+  speedIcon: string = require("@/assets/icon-speed.svg");
+  massIcon: string = require("@/assets/icon-mass.svg");
+  lengthIcon: string = require("@/assets/icon-length.svg");
+
+  distanceIcon: string = require("@/assets/icon-distance.svg");
+  sceneryIcon: string = require("@/assets/icon-scenery.svg");
+  signalIcon: string = require("@/assets/icon-signal.svg");
+  routeIcon: string = require("@/assets/icon-route.svg");
+
+  changeScheduleShowState(timetableId: number) {
+    this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
+  }
+
+  onImageError(e: Event) {
+    (e.target as HTMLImageElement).src = unknownTrainImage;
+  }
+
+  generateStopList(stops: any): string | undefined {
+    if (!stops) return "";
+    return stops.reduce((acc, stop: TrainStop, i) => {
+      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."))
+        acc.push(`<span style='color:${stop.confirmed ? "springgreen" : "lightgray"}'>${stop.stopName}</span>`);
+      return acc;
+    }, []).join(" * ");
+  }
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+@import "../../styles/variables.scss";
+@import "../../styles/user_badge.scss";
+
+.no-trains {
+  text-align: center;
+  font-size: 1.5em;
+
+  padding: 1rem;
+  margin: 1rem 0;
+
+  background: #333;
+}
+
+.train {
+  &-list {
+    @include smallScreen() {
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &-row {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    background-color: $primaryCol;
+
+    cursor: pointer;
+
+    & > .wrapper {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      font-size: calc(0.4rem + 0.5vw);
+
+      @include smallScreen() {
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(3, minmax(100px, 1fr));
+
+        font-size: 0.8rem;
+        gap: 0.4em 0;
+      }
+
+      @include bigScreen() {
+        font-size: 1.1rem;
+      }
+    }
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &-category {
+    font-size: 1.05em;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      display: flex;
+    }
+
+    .category-right {
+      padding: 0.15em 0.5em;
+
+      background: #1085b3;
+      border-radius: 1em;
+
+      font-size: 0.9em;
+
+      -moz-user-select: none;
+      -webkit-user-select: none;
+
+      img {
+        vertical-align: middle;
+        width: 1.2em;
+      }
+
+      .tooltip-text {
+        font-size: 0.9em;
+        background-color: #1085b3;
+
+        &::after {
+          border-color: #1085b3 transparent transparent transparent;
+        }
+      }
+    }
+  }
+
+  &-route {
+    display: flex;
+    align-items: center;
+
+    font-size: 1.25em;
+    margin: 5px 0;
+  }
+
+  &-stops {
+    margin-bottom: 10px;
+
+    font-size: 0.75em;
+  }
+
+  &-online {
+    background-color: #ce0000;
+
+    padding: 0.2em 0.7em;
+    font-size: 0.85em;
+
+    border-radius: 1em;
+
+    &.online {
+      background-color: #009700;
+    }
+  }
+
+  &-bottom {
+    display: flex;
+    align-items: center;
+
+    button {
+      margin-left: 10px;
+      border-radius: 0.7em;
+      padding: 0.2em 0.5em;
+      font-size: 0.85em;
+
+      border: 1px solid white;
+    }
+  }
+}
+
+.driver {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  &-exp {
+    font-size: 1.4em;
+    padding: 0.3em 0.6em;
+
+    border-radius: 0.4em;
+
+    background-color: red;
+  }
+
+  &-name {
+    margin: 0 0.3em;
+    font-weight: bold;
+  }
+
+  &-type {
+    color: #bbb;
+    margin-left: 1em;
+  }
+
+  &-loco {
+    width: 100%;
+    text-align: center;
+  }
+
+  &-loco img {
+    width: 13em;
+    max-width: 190px;
+  }
+}
+
+.stats {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  &-main {
+    display: flex;
+    margin-bottom: 1.5em;
+
+    & > span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 100%;
+    }
+
+    img {
+      margin: 0 0.3em;
+      width: 2em;
+    }
+  }
+
+  &-position {
+    display: flex;
+
+    margin-top: 1em;
+    text-align: center;
+
+    font-size: 0.9em;
+
+    p {
+      color: #00cff3;
+    }
+
+    & > span {
+      width: 100%;
+
+      img {
+        width: 2em;
+      }
+    }
+  }
+}
+
+.warning {
+  border-radius: 15px;
+  padding: 0.1em 1.2em;
+  margin-right: 0.5em;
+
+  display: flex;
+  align-items: center;
+
+  color: white;
+
+  font-weight: bold;
+  font-size: 0.7em;
+
+  &.twr {
+    border: 2px solid $twr;
+  }
+
+  &.skr {
+    border: 2px solid $skr;
+  }
+}
+
+@include bigScreen() {
+  .item {
+    font-size: 1rem;
+  }
+}
+
+@include smallScreen() {
+  .info-bottom {
+    text-align: center;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/data/options.json b/src/data/options.json
index 6d5dda8..9bdca24 100644
--- a/src/data/options.json
+++ b/src/data/options.json
@@ -1,161 +1,161 @@
-{
-  "options": [{
-      "id": "is-default",
-      "name": "default",
-      "section": "access",
-      "value": true,
-      "defaultValue": true,
-      "content": "W PACZCE"
-    },
-    {
-      "id": "not-default",
-      "name": "notDefault",
-      "section": "access",
-      "value": true,
-      "defaultValue": true,
-      "content": "POZA PACZKĄ"
-    },
-    {
-      "id": "non-public",
-      "name": "nonPublic",
-      "section": "access",
-      "value": true,
-      "defaultValue": true,
-      "content": "NIEPUBLICZNA"
-    },
-    {
-      "id": "SPK",
-      "name": "SPK",
-      "section": "control",
-      "value": true,
-      "defaultValue": true,
-      "content": "SPK"
-    },
-    {
-      "id": "SCS",
-      "name": "SCS",
-      "section": "control",
-      "value": true,
-      "defaultValue": true,
-      "content": "SCS"
-    },
-    {
-      "id": "by-hand",
-      "name": "ręczne",
-      "section": "control",
-      "value": true,
-      "defaultValue": true,
-      "content": "RĘCZNE"
-    },
-    {
-      "id": "levers",
-      "name": "mechaniczne",
-      "section": "control",
-      "value": true,
-      "defaultValue": true,
-      "content": "MECHANICZNE"
-    },
-    {
-      "id": "modern",
-      "name": "współczesna",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true,
-      "content": "WSPÓŁCZESNA"
-    },
-    {
-      "id": "semaphore",
-      "name": "kształtowa",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true,
-      "content": "KSZTAŁTOWA"
-    },
-    {
-      "id": "mixed",
-      "name": "mieszana",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true,
-      "content": "MIESZANA"
-    },
-    {
-      "id": "historic",
-      "name": "historyczna",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true,
-      "content": "HISTORYCZNA"
-    },
-    {
-      "id": "free",
-      "name": "free",
-      "section": "status",
-      "value": false,
-      "defaultValue": false,
-      "content": "WOLNA"
-    },
-    {
-      "id": "occupied",
-      "name": "occupied",
-      "section": "status",
-      "value": true,
-      "defaultValue": true,
-      "content": "ZAJĘTA"
-    },
-    {
-      "id": "ending",
-      "name": "ending",
-      "section": "status",
-      "value": true,
-      "defaultValue": true,
-      "content": "KOŃCZY"
-    }
-  ],
-  "sliders": [{
-      "id": "min-level",
-      "name": "minLevel",
-      "minRange": 0,
-      "maxRange": 20,
-      "value": 0,
-      "defaultValue": 0,
-      "content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
-    },
-    {
-      "id": "min-oneway-e",
-      "name": "minOneWayCatenary",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0,
-      "content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
-    },
-    {
-      "id": "min-oneway-ne",
-      "name": "minOneWay",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0,
-      "content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
-    },
-    {
-      "id": "min-twoway-e",
-      "name": "minTwoWayCatenary",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0,
-      "content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
-    },
-    {
-      "id": "min-twoway-ne",
-      "name": "minTwoWay",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0,
-      "content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
-    }
-  ]
+{
+  "options": [{
+      "id": "is-default",
+      "name": "default",
+      "section": "access",
+      "value": true,
+      "defaultValue": true,
+      "content": "W PACZCE"
+    },
+    {
+      "id": "not-default",
+      "name": "notDefault",
+      "section": "access",
+      "value": true,
+      "defaultValue": true,
+      "content": "POZA PACZKĄ"
+    },
+    {
+      "id": "non-public",
+      "name": "nonPublic",
+      "section": "access",
+      "value": true,
+      "defaultValue": true,
+      "content": "NIEPUBLICZNA"
+    },
+    {
+      "id": "SPK",
+      "name": "SPK",
+      "section": "control",
+      "value": true,
+      "defaultValue": true,
+      "content": "SPK"
+    },
+    {
+      "id": "SCS",
+      "name": "SCS",
+      "section": "control",
+      "value": true,
+      "defaultValue": true,
+      "content": "SCS"
+    },
+    {
+      "id": "by-hand",
+      "name": "ręczne",
+      "section": "control",
+      "value": true,
+      "defaultValue": true,
+      "content": "RĘCZNE"
+    },
+    {
+      "id": "levers",
+      "name": "mechaniczne",
+      "section": "control",
+      "value": true,
+      "defaultValue": true,
+      "content": "MECHANICZNE"
+    },
+    {
+      "id": "modern",
+      "name": "współczesna",
+      "section": "signals",
+      "value": true,
+      "defaultValue": true,
+      "content": "WSPÓŁCZESNA"
+    },
+    {
+      "id": "semaphore",
+      "name": "kształtowa",
+      "section": "signals",
+      "value": true,
+      "defaultValue": true,
+      "content": "KSZTAŁTOWA"
+    },
+    {
+      "id": "mixed",
+      "name": "mieszana",
+      "section": "signals",
+      "value": true,
+      "defaultValue": true,
+      "content": "MIESZANA"
+    },
+    {
+      "id": "historic",
+      "name": "historyczna",
+      "section": "signals",
+      "value": true,
+      "defaultValue": true,
+      "content": "HISTORYCZNA"
+    },
+    {
+      "id": "free",
+      "name": "free",
+      "section": "status",
+      "value": false,
+      "defaultValue": false,
+      "content": "WOLNA"
+    },
+    {
+      "id": "occupied",
+      "name": "occupied",
+      "section": "status",
+      "value": true,
+      "defaultValue": true,
+      "content": "ZAJĘTA"
+    },
+    {
+      "id": "ending",
+      "name": "ending",
+      "section": "status",
+      "value": true,
+      "defaultValue": true,
+      "content": "KOŃCZY"
+    }
+  ],
+  "sliders": [{
+      "id": "min-level",
+      "name": "minLevel",
+      "minRange": 0,
+      "maxRange": 20,
+      "value": 0,
+      "defaultValue": 0,
+      "content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
+    },
+    {
+      "id": "min-oneway-e",
+      "name": "minOneWayCatenary",
+      "minRange": 0,
+      "maxRange": 5,
+      "value": 0,
+      "defaultValue": 0,
+      "content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
+    },
+    {
+      "id": "min-oneway-ne",
+      "name": "minOneWay",
+      "minRange": 0,
+      "maxRange": 5,
+      "value": 0,
+      "defaultValue": 0,
+      "content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
+    },
+    {
+      "id": "min-twoway-e",
+      "name": "minTwoWayCatenary",
+      "minRange": 0,
+      "maxRange": 5,
+      "value": 0,
+      "defaultValue": 0,
+      "content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
+    },
+    {
+      "id": "min-twoway-ne",
+      "name": "minTwoWay",
+      "minRange": 0,
+      "maxRange": 5,
+      "value": 0,
+      "defaultValue": 0,
+      "content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/src/data/stationData.json b/src/data/stationData.json
index 0f7b5db..1d3a714 100644
--- a/src/data/stationData.json
+++ b/src/data/stationData.json
@@ -1 +1 @@
-[["Blaszki","https://td2.info.pl/scenerie/blaszki/","",null,"10","NIE","współczesna","SPK","","",1,1,2,0,null,null,true,false,false],["LCS Borowe","https://td2.info.pl/scenerie/lcs-borowe/","",null,"10","NIE","współczesna","SCS","TAK","TAK",1,0,3,0,["Borowe, podg.","Wysoka, podg.","Naprawa, podg.","Borowe Towarowe"],["Borowe, podg.","Wysoka, podg.","Naprawa, podg.","Borowe Towarowe"],false,false,false],["LCS Gdańsk","https://td2.info.pl/scenerie/lcs-gdansk/","9, 202, 227, 249, 250",null,"10","NIE","współczesna","SCS","TAK","TAK",3,0,3,0,["Gdańsk Główny","SKM Śródmieście","Gdańsk Południowy"],["Gdańsk Główny"],true,false,false],["Lębork","https://td2.info.pl/scenerie/lebork-5834/","202, 229, 237",null,"8","NIE","współczesna","mechaniczne+SCS","","",2,2,0,0,null,null,true,false,false],["Grabów Miasto","https://td2.info.pl/scenerie/grabow-miasto-v2/","",null,"6","NIE","współczesna","SCS","","TAK",2,1,1,0,["Grabów Miasto","Grabów Wieś"],null,true,false,false],["Parzęczewo","https://td2.info.pl/scenerie/parzeczewo/","",null,"6","NIE","mieszana","SCS","TAK","TAK",1,0,2,0,["Parzęczewo","Parzęczewo Miasto","Parzęczewo gt"],null,true,false,false],["Aleksandrów Kujawski","https://td2.info.pl/scenerie/aleksandrow-kujawski/","18, 245",null,"4","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,null,null,true,false,false],["Arkadia Zdrój 2012","https://td2.info.pl/scenerie/arkadia-zdroj/","",null,"4","NIE","mieszana","mechaniczne+SPK","","",1,0,2,0,null,null,true,false,false],["Buk 2018","https://td2.info.pl/scenerie/buk2/","",null,"4","NIE","współczesna","SCS-SPK","","TAK",2,0,1,0,null,null,true,false,false],["Jordanowo","https://td2.info.pl/scenerie/jordanowo/","",null,"4","NIE","mieszana","mechaniczne","","",3,2,0,0,null,null,true,false,false],["LCS Głowno","https://td2.info.pl/scenerie/glowno-(linia-nr-15-lka)/","15","ŁKA","4","NIE","współczesna","SCS","","",2,0,0,0,["Głowno","Domaniewice"],["Głowno"],true,false,false],["LCS Ozorków","https://td2.info.pl/scenerie/lcs-ozorkow/","16","ŁKA","4","NIE","współczesna","SCS","","",2,0,0,0,["Ozorków","Chociszew"],["Ozorków"],true,false,false],["LCS Skrzynki","https://td2.info.pl/scenerie/lcs-skrzynki/","25","ŁKA","4","NIE","współczesna","SCS-SPK","","TAK",0,0,2,0,["Skrzynki","Wykno"],["Skrzynki"],true,false,false],["Łask","https://td2.info.pl/scenerie/lask-w-ramach-lka/","14","ŁKA","4","NIE","współczesna","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Naterki","https://td2.info.pl/scenerie/naterki/","353",null,"4","NIE","kształtowa","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Santok Zdrój","https://td2.info.pl/scenerie/santok-zdroj/","",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Testowo","https://td2.info.pl/scenerie/testowo-3581","",null,"4","NIE","współczesna","SPK","TAK (szlak Sl)","TAK",1,1,1,0,null,null,true,false,false],["Tłoki","https://td2.info.pl/scenerie/podg-tloki","",null,"4","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,null,["Tłoki, podg."],true,false,false],["Witaszyczki","https://td2.info.pl/scenerie/witaszyczki/","",null,"4","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,true,false,false],["Bydgowo","https://td2.info.pl/scenerie/bydgowo/","",null,"2","NIE","współczesna","SPK","TAK (szlak SK)","TAK",0,0,2,0,null,null,true,false,false],["Głębce","https://td2.info.pl/scenerie/glebce","",null,"2","NIE","współczesna","ręczne+SPK","","",1,0,0,0,null,null,true,false,false],["Hel","https://td2.info.pl/scenerie/hel/","213",null,"2","NIE","współczesna","SPK","","",0,1,0,0,null,null,true,false,false],["Kcynia","https://td2.info.pl/scenerie/kcynia","281, 356",null,"2","NIE","kształtowa","mechaniczne","","",0,4,0,0,null,null,true,false,false],["Lewków","https://td2.info.pl/scenerie/lewkow/","",null,"2","NIE","mieszana","mechaniczne+SCS","","TAK (szlak Ks)",0,0,2,0,null,null,true,false,false],["Cis 2013","https://td2.info.pl/scenerie/cis2","",null,"0","NIE","kształtowa","mechaniczne","","",2,0,0,0,null,null,true,false,false],["Cis 2018","https://td2.info.pl/scenerie/cis2","",null,"0","NIE","współczesna","SCS-SPK","","",2,0,0,0,null,null,true,false,false],["Glinnik","https://td2.info.pl/scenerie/glinnik-(projekt-lka)/","15","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Głogowo","https://td2.info.pl/scenerie/glogowo","",null,"0","NIE","współczesna","SCS","","",0,2,0,0,null,null,true,false,false],["Karszynek","https://td2.info.pl/scenerie/karszynek/","",null,"0","NIE","historyczna","mechaniczne","","",0,0,2,0,null,null,true,false,false],["Imielin 2015","https://td2.info.pl/scenerie/imielin-2015","138",null,"0","NIE","współczesna","mechaniczne+SCS","","TAK",0,0,2,0,null,null,true,false,false],["Kolsko","https://td2.info.pl/scenerie/kolsko/","",null,"0","NIE","kształtowa","mechaniczne","","",0,3,0,0,null,null,true,false,false],["LCS Bucz Wileński","https://td2.info.pl/scenerie/bucz-wilenski/","",null,"0","NIE","współczesna","SCS","TAK","TAK",0,0,1,0,null,["Bucz Wileński"],true,false,false],["Lisiczki","https://td2.info.pl/scenerie/lisiczki","",null,"6","NIE","współczesna","SCS-SPK","","",2,0,0,0,null,null,true,false,false],["Łęczyca","https://td2.info.pl/scenerie/leczyca-projekt-lka/","16","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Poreńsk","https://td2.info.pl/scenerie/porensk/","",null,"0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Radowice","https://td2.info.pl/scenerie/radowice","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,true,false,false],["Witonia","https://td2.info.pl/scenerie/witonia-(projekt-lka)/","16","ŁKA","0","NIE","współczesna","SCS","","",2,0,0,0,null,null,true,false,false],["Wola","https://td2.info.pl/scenerie/wola/","",null,"0","NIE","mieszana","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Zgierz Kontrewers","https://td2.info.pl/scenerie/zgierz-kontrewers-6172/","16","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Bargowice","https://td2.info.pl/scenerie/bargowice-4441/","",null,"10","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,["Bargowice","Bargowice Zachód"],null,false,false,false],["Szklana Poręba","https://td2.info.pl/scenerie/szklana-poreba-gorna/","",null,"8","TAK","współczesna","mechaniczne","","",1,0,0,0,null,null,false,false,false],["Wschodna","https://td2.info.pl/scenerie/wschodna/","",null,"8","NIE","kształtowa","mechaniczne","","",1,0,2,0,null,null,false,false,false],["Zabłocie","https://td2.info.pl/scenerie/zablocie-3896","",null,"8","NIE","współczesna","SCS","","TAK",2,0,1,0,null,null,false,false,false],["Zdroje","https://td2.info.pl/scenerie/zdroje","",null,"8","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Grzybowo","https://td2.info.pl/scenerie/grzybowo","",null,"6","NIE","kształtowa","mechaniczne","","",0,0,2,0,null,null,false,false,false],["Zwardoń","https://td2.info.pl/scenerie/zwardon-4161","139",null,"6","TAK","współczesna","SCS","","",2,0,0,0,null,null,false,false,false],["Piaskowo","https://td2.info.pl/scenerie/piaskowo/","",null,"4","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Rajcza","https://td2.info.pl/scenerie/rajcza/","139",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Brzezinka","https://td2.info.pl/scenerie/brzezinka/","",null,"3","NIE","współczesna","SCS-SPK","","TAK (szlak KSG)",0,0,2,0,null,null,false,false,false],["Torzyn","https://td2.info.pl/scenerie/torzyn/","",null,"3","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Wola Nowska","https://td2.info.pl/scenerie/wola-nowska//","",null,"3","NIE","współczesna","SPK","","TAK",1,0,2,0,null,null,false,false,false],["Chełmik Wołowski","https://td2.info.pl/scenerie/chelmik-wolowski//","",null,"2","NIE","współczesna","SPK","","TAK",1,0,2,0,null,null,false,false,false],["Drzewko","https://td2.info.pl/w-trakcie-prac/drzewko/","",null,"2","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,false,false,false],["Krzemienice","https://td2.info.pl/scenerie/krzemienice/","",null,"2","NIE","współczesna","SCS","","TAK",3,0,1,0,null,null,false,false,false],["Milówka","https://td2.info.pl/scenerie/milowka/","139",null,"2","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Orniki","https://td2.info.pl/scenerie/orniki/","",null,"2","NIE","współczesna","SPK","","TAK",1,1,2,0,null,null,false,false,false],["Otwocko","https://td2.info.pl/scenerie/otwocko/","",null,"2","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,false,false,false],["Skostomłoty","https://td2.info.pl/w-trakcie-prac/skostomloty/","",null,"2","NIE","współczesna","mechaniczne","","TAK",0,0,2,0,null,null,false,false,false],["Babimost","https://td2.info.pl/scenerie/babimost","358",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,false,false,false],["Czerepy","https://td2.info.pl/scenerie/czerepy/","",null,"0","NIE","współczesna","SPK","TAK (szlak BO)","TAK",0,0,2,0,null,null,false,false,false],["Grabiny","https://td2.info.pl/scenerie/grabiny","",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,false,false,false],["Kieły","https://td2.info.pl/scenerie/kiely-6224/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Lutol Suchy","https://td2.info.pl/scenerie/lutol-suchy/","367",null,"0","NIE","współczesna","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Raki","https://td2.info.pl/scenerie/raki/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Sieniawka","https://td2.info.pl/scenerie/sieniawka/","",null,"0","NIE","współczesna","mechaniczne","","",0,1,0,1,null,null,false,false,false],["Stefanowo","https://td2.info.pl/scenerie/stefanowo/","359",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Szlichtyngowa","https://td2.info.pl/scenerie/szlichtyngowa//","",null,"0","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Tarnowo Górne","https://td2.info.pl/scenerie/tarnowo-gorne/","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Tartakowo 2013","https://td2.info.pl/w-trakcie-prac/tartakowo/","",null,"0","NIE","mieszana","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Wielgowo","https://td2.info.pl/scenerie/wielgowo/","",null,"0","NIE","współczesna","SPK","","",0,2,0,0,null,null,false,false,false],["Sulechów","https://td2.info.pl/scenerie/sulechow/","358",null,"0","NIE","mieszana","SPK","","",2,1,0,0,null,null,false,false,false],["Wilczyca","https://td2.info.pl/scenerie/wilczyca/","",null,"0","NIE","współczesna","SCS","","",0,2,0,0,null,null,false,false,false],["Sowi Bór","https://td2.info.pl/scenerie/sowi-bor/","",null,"3","NIE","współczesna","SPK","","",0,0,2,0,null,null,false,false,false],["Sól","https://td2.info.pl/scenerie/sol/","139",null,"2","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Hetmanice","https://td2.info.pl/scenerie/hetmanice-stacja-dla-poczatkujacych/","",null,"0","NIE","współczesna","SCS-SPK","","",0,0,2,0,null,null,false,false,false],["Starzynki","https://td2.info.pl/w-trakcie-prac/starzynki/","",null,"3","NIE","współczesna","SPK","TAK (Szlak Ps)","TAK",2,0,1,0,null,null,false,false,false],["Głęboszów","https://td2.info.pl/scenerie/gleboszow/","",null,"3","NIE","współczesna","SCS","TAK (Szlaki Br oraz GO)","TAK",1,0,2,0,null,null,false,false,false],["Skawce","https://td2.info.pl/w-trakcie-prac/skawce-(projekt-zakopianka)/","97",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,true],["Sroka","https://td2.info.pl/scenerie/sroka-projekt-1001/","",null,"7","NIE","współczesna","SCS","","TAK",1,0,3,0,["Sroka, podg.","Sroka Południe, podg."],["Sroka, podg."],false,false,false],["Luzino","https://td2.info.pl/scenerie/luzino-6501/","202",null,"3","NIE","współczesna","mechaniczne","","TAK",2,0,0,0,null,null,false,false,false],["Zajączkowo","https://td2.info.pl/scenerie/zajaczkowo/","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Kudowa-Zdrój","https://td2.info.pl/scenerie/kudowa-zdroj-6616/","309",null,"4","NIE","współczesna","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Ciechany","https://td2.info.pl/w-trakcie-prac/ciechany/","",null,"3","NIE","współczesna","SCS","","",1,0,0,0,null,["Pawonki"],false,false,false],["Czermin","https://td2.info.pl/scenerie/czermin/","",null,"8","NIE","współczesna","SCS","TAK (szlaki Łk i Fw)","",2,0,2,0,null,null,false,false,false],["Rebrowo Dolne","https://td2.info.pl/scenerie/rebrowo-dolne/","",null,"2","NIE","współczesna","SPK","","",3,0,0,0,null,null,false,false,false],["Lublinek","https://td2.info.pl/scenerie/lublinek-projekt-lka/","14",null,"0","NIE","współczesna","mechaniczne","","",0,0,2,0,null,null,true,false,false],["Stryków","https://td2.info.pl/scenerie/strykow-projekt-lka/","14",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,true,false,false],["Strączki","https://td2.info.pl/scenerie/straczki/","",null,"4","NIE","współczesna","mechaniczne","","",1,0,1,0,null,null,false,false,false],["Niedoradz","https://td2.info.pl/scenerie/niedoradz","",null,"0","NIE","współczesna","SPK","","",0,0,2,0,null,null,false,false,false],["Zgierz","https://td2.info.pl/scenerie/zgierz/","15,16",null,"12","TAK","współczesna","mechaniczne","","",3,0,1,0,null,null,false,false,false],["Łebnino","https://td2.info.pl/scenerie/lebnino-4511/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Legno","https://td2.info.pl/scenerie/legno/","",null,"0","NIE","współczesna","SCS","TAK (szlak Mr)","TAK",0,0,2,0,null,null,false,false,false],["Buczek","https://td2.info.pl/scenerie/buczek/","",null,"0","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Dziewoszyce","https://td2.info.pl/scenerie/dziewoszyce/","",null,"4","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Razemsko 2012","https://td2.info.pl/scenerie/razemsko-2012/","",null,"4","NIE","mieszana","mechaniczne","","",0,1,0,1,null,null,false,false,false],["Buskowo Zdrój","https://td2.info.pl/scenerie/buskowo-zdroj/","",null,"4","NIE","mieszana","mechaniczne","","",1,0,0,0,null,null,false,false,false],["Bełchów","https://td2.info.pl/scenerie/belchow-projekt-lka/","11","ŁKA","2","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Modlinków","https://td2.info.pl/scenerie/podg-modlinkow/","",null,"6","NIE","współczesna","SPK","","TAK",3,0,2,0,null,null,false,false,false],["Arkadia Zdrój 2019","https://td2.info.pl/scenerie/arkadia-zdroj-2016/","",null,"","NIE","współczesna","SCS","TAK (szlak wewn.)","TAK",1,0,2,0,null,null,false,true,false]]
\ No newline at end of file
+[["Blaszki","https://td2.info.pl/scenerie/blaszki/","",null,"10","NIE","współczesna","SPK","","",1,1,2,0,null,null,true,false,false],["LCS Borowe","https://td2.info.pl/scenerie/lcs-borowe/","",null,"10","NIE","współczesna","SCS","TAK","TAK",1,0,3,0,["Borowe, podg.","Wysoka, podg.","Naprawa, podg.","Borowe Towarowe"],["Borowe, podg.","Wysoka, podg.","Naprawa, podg.","Borowe Towarowe"],false,false,false],["LCS Gdańsk","https://td2.info.pl/scenerie/lcs-gdansk/","9, 202, 227, 249, 250",null,"10","NIE","współczesna","SCS","TAK","TAK",3,0,3,0,["Gdańsk Główny","SKM Śródmieście","Gdańsk Południowy"],["Gdańsk Główny"],true,false,false],["Lębork","https://td2.info.pl/scenerie/lebork-5834/","202, 229, 237",null,"8","NIE","współczesna","mechaniczne+SCS","","",2,2,0,0,null,null,true,false,false],["Grabów Miasto","https://td2.info.pl/scenerie/grabow-miasto-v2/","",null,"6","NIE","współczesna","SCS","","TAK",2,1,1,0,["Grabów Miasto","Grabów Wieś"],null,true,false,false],["Parzęczewo","https://td2.info.pl/scenerie/parzeczewo/","",null,"6","NIE","mieszana","SCS","TAK","TAK",1,0,2,0,["Parzęczewo","Parzęczewo Miasto","Parzęczewo gt"],null,true,false,false],["Aleksandrów Kujawski","https://td2.info.pl/scenerie/aleksandrow-kujawski/","18, 245",null,"4","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,null,null,true,false,false],["Arkadia Zdrój 2012","https://td2.info.pl/scenerie/arkadia-zdroj/","",null,"4","NIE","mieszana","mechaniczne+SPK","","",1,0,2,0,null,null,true,false,false],["Buk 2018","https://td2.info.pl/scenerie/buk2/","",null,"4","NIE","współczesna","SCS-SPK","","TAK",2,0,1,0,null,null,true,false,false],["Jordanowo","https://td2.info.pl/scenerie/jordanowo/","",null,"4","NIE","mieszana","mechaniczne","","",3,2,0,0,null,null,true,false,false],["LCS Głowno","https://td2.info.pl/scenerie/glowno-(linia-nr-15-lka)/","15","ŁKA","4","NIE","współczesna","SCS","","",2,0,0,0,["Głowno","Domaniewice"],["Głowno"],true,false,false],["LCS Ozorków","https://td2.info.pl/scenerie/lcs-ozorkow/","16","ŁKA","4","NIE","współczesna","SCS","","",2,0,0,0,["Ozorków","Chociszew"],["Ozorków"],true,false,false],["LCS Skrzynki","https://td2.info.pl/scenerie/lcs-skrzynki/","25","ŁKA","4","NIE","współczesna","SCS-SPK","","TAK",0,0,2,0,["Skrzynki","Wykno"],["Skrzynki"],true,false,false],["Łask","https://td2.info.pl/scenerie/lask-w-ramach-lka/","14","ŁKA","4","NIE","współczesna","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Naterki","https://td2.info.pl/scenerie/naterki/","353",null,"4","NIE","kształtowa","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Santok Zdrój","https://td2.info.pl/scenerie/santok-zdroj/","",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Testowo","https://td2.info.pl/scenerie/testowo-3581","",null,"4","NIE","współczesna","SPK","TAK (szlak Sl)","TAK",1,1,1,0,null,null,true,false,false],["Tłoki","https://td2.info.pl/scenerie/podg-tloki","",null,"4","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,null,["Tłoki, podg."],true,false,false],["Witaszyczki","https://td2.info.pl/scenerie/witaszyczki/","",null,"4","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,true,false,false],["Bydgowo","https://td2.info.pl/scenerie/bydgowo/","",null,"2","NIE","współczesna","SPK","TAK (szlak SK)","TAK",0,0,2,0,null,null,true,false,false],["Głębce","https://td2.info.pl/scenerie/glebce","",null,"2","NIE","współczesna","ręczne+SPK","","",1,0,0,0,null,null,true,false,false],["Hel","https://td2.info.pl/scenerie/hel/","213",null,"2","NIE","współczesna","SPK","","",0,1,0,0,null,null,true,false,false],["Kcynia","https://td2.info.pl/scenerie/kcynia","281, 356",null,"2","NIE","kształtowa","mechaniczne","","",0,4,0,0,null,null,true,false,false],["Lewków","https://td2.info.pl/scenerie/lewkow/","",null,"2","NIE","mieszana","mechaniczne+SCS","","TAK (szlak Ks)",0,0,2,0,null,null,true,false,false],["Cis 2013","https://td2.info.pl/scenerie/cis2","",null,"0","NIE","kształtowa","mechaniczne","","",2,0,0,0,null,null,true,false,false],["Cis 2018","https://td2.info.pl/scenerie/cis2","",null,"0","NIE","współczesna","SCS-SPK","","",2,0,0,0,null,null,true,false,false],["Glinnik","https://td2.info.pl/scenerie/glinnik-(projekt-lka)/","15","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Głogowo","https://td2.info.pl/scenerie/glogowo","",null,"0","NIE","współczesna","SCS","","",0,2,0,0,null,null,true,false,false],["Karszynek","https://td2.info.pl/scenerie/karszynek/","",null,"0","NIE","historyczna","mechaniczne","","",0,0,2,0,null,null,true,false,false],["Imielin 2015","https://td2.info.pl/scenerie/imielin-2015","138",null,"0","NIE","współczesna","mechaniczne+SCS","","TAK",0,0,2,0,null,null,true,false,false],["Kolsko","https://td2.info.pl/scenerie/kolsko/","",null,"0","NIE","kształtowa","mechaniczne","","",0,3,0,0,null,null,true,false,false],["LCS Bucz Wileński","https://td2.info.pl/scenerie/bucz-wilenski/","",null,"0","NIE","współczesna","SCS","TAK","TAK",0,0,1,0,null,["Bucz Wileński"],true,false,false],["Lisiczki","https://td2.info.pl/scenerie/lisiczki","",null,"6","NIE","współczesna","SCS-SPK","","",2,0,0,0,null,null,true,false,false],["Łęczyca","https://td2.info.pl/scenerie/leczyca-projekt-lka/","16","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Poreńsk","https://td2.info.pl/scenerie/porensk/","",null,"0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Radowice","https://td2.info.pl/scenerie/radowice","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,true,false,false],["Witonia","https://td2.info.pl/scenerie/witonia-(projekt-lka)/","16","ŁKA","0","NIE","współczesna","SCS","","",2,0,0,0,null,null,true,false,false],["Wola","https://td2.info.pl/scenerie/wola/","",null,"0","NIE","mieszana","mechaniczne+SCS","","",0,0,2,0,null,null,true,false,false],["Zgierz Kontrewers","https://td2.info.pl/scenerie/zgierz-kontrewers-6172/","16","ŁKA","0","NIE","współczesna","SPK","","",2,0,0,0,null,null,true,false,false],["Bargowice","https://td2.info.pl/scenerie/bargowice-4441/","",null,"10","NIE","współczesna","SCS-SPK","","TAK",1,0,2,0,["Bargowice","Bargowice Zachód"],null,false,false,false],["Szklana Poręba","https://td2.info.pl/scenerie/szklana-poreba-gorna/","",null,"8","TAK","współczesna","mechaniczne","","",1,0,0,0,null,null,false,false,false],["Wschodna","https://td2.info.pl/scenerie/wschodna/","",null,"8","NIE","kształtowa","mechaniczne","","",1,0,2,0,null,null,false,false,false],["Zabłocie","https://td2.info.pl/scenerie/zablocie-3896","",null,"8","NIE","współczesna","SCS","","TAK",2,0,1,0,null,null,false,false,false],["Zdroje","https://td2.info.pl/scenerie/zdroje","",null,"8","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Grzybowo","https://td2.info.pl/scenerie/grzybowo","",null,"6","NIE","kształtowa","mechaniczne","","",0,0,2,0,null,null,false,false,false],["Zwardoń","https://td2.info.pl/scenerie/zwardon-4161","139",null,"6","TAK","współczesna","SCS","","",2,0,0,0,null,null,false,false,false],["Piaskowo","https://td2.info.pl/scenerie/piaskowo/","",null,"4","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Rajcza","https://td2.info.pl/scenerie/rajcza/","139",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Brzezinka","https://td2.info.pl/scenerie/brzezinka/","",null,"3","NIE","współczesna","SCS-SPK","","TAK (szlak KSG)",0,0,2,0,null,null,false,false,false],["Torzyn","https://td2.info.pl/scenerie/torzyn/","",null,"3","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Wola Nowska","https://td2.info.pl/scenerie/wola-nowska//","",null,"3","NIE","współczesna","SPK","","TAK",1,0,2,0,null,null,false,false,false],["Chełmik Wołowski","https://td2.info.pl/scenerie/chelmik-wolowski//","",null,"2","NIE","współczesna","SPK","","TAK",1,0,2,0,null,null,false,false,false],["Drzewko","https://td2.info.pl/w-trakcie-prac/drzewko/","",null,"2","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,false,false,false],["Krzemienice","https://td2.info.pl/scenerie/krzemienice/","",null,"2","NIE","współczesna","SCS","","TAK",3,0,1,0,null,null,false,false,false],["Milówka","https://td2.info.pl/scenerie/milowka/","139",null,"2","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Orniki","https://td2.info.pl/scenerie/orniki/","",null,"2","NIE","współczesna","SPK","","TAK",1,1,2,0,null,null,false,false,false],["Otwocko","https://td2.info.pl/scenerie/otwocko/","",null,"2","NIE","współczesna","SCS","","TAK",0,0,2,0,null,null,false,false,false],["Skostomłoty","https://td2.info.pl/w-trakcie-prac/skostomloty/","",null,"2","NIE","współczesna","mechaniczne","","TAK",0,0,2,0,null,null,false,false,false],["Babimost","https://td2.info.pl/scenerie/babimost","358",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,false,false,false],["Czerepy","https://td2.info.pl/scenerie/czerepy/","",null,"0","NIE","współczesna","SPK","TAK (szlak BO)","TAK",0,0,2,0,null,null,false,false,false],["Grabiny","https://td2.info.pl/scenerie/grabiny","",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,false,false,false],["Kieły","https://td2.info.pl/scenerie/kiely-6224/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Lutol Suchy","https://td2.info.pl/scenerie/lutol-suchy/","367",null,"0","NIE","współczesna","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Raki","https://td2.info.pl/scenerie/raki/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Sieniawka","https://td2.info.pl/scenerie/sieniawka/","",null,"0","NIE","współczesna","mechaniczne","","",0,1,0,1,null,null,false,false,false],["Stefanowo","https://td2.info.pl/scenerie/stefanowo/","359",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Szlichtyngowa","https://td2.info.pl/scenerie/szlichtyngowa//","",null,"0","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Tarnowo Górne","https://td2.info.pl/scenerie/tarnowo-gorne/","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Tartakowo 2013","https://td2.info.pl/w-trakcie-prac/tartakowo/","",null,"0","NIE","mieszana","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Wielgowo","https://td2.info.pl/scenerie/wielgowo/","",null,"0","NIE","współczesna","SPK","","",0,2,0,0,null,null,false,false,false],["Sulechów","https://td2.info.pl/scenerie/sulechow/","358",null,"0","NIE","mieszana","SPK","","",2,1,0,0,null,null,false,false,false],["Wilczyca","https://td2.info.pl/scenerie/wilczyca/","",null,"0","NIE","współczesna","SCS","","",0,2,0,0,null,null,false,false,false],["Sowi Bór","https://td2.info.pl/scenerie/sowi-bor/","",null,"3","NIE","współczesna","SPK","","",0,0,2,0,null,null,false,false,false],["Sól","https://td2.info.pl/scenerie/sol/","139",null,"2","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,false],["Hetmanice","https://td2.info.pl/scenerie/hetmanice-stacja-dla-poczatkujacych/","",null,"0","NIE","współczesna","SCS-SPK","","",0,0,2,0,null,null,false,false,false],["Starzynki","https://td2.info.pl/w-trakcie-prac/starzynki/","",null,"3","NIE","współczesna","SPK","TAK (Szlak Ps)","TAK",2,0,1,0,null,null,false,false,false],["Głęboszów","https://td2.info.pl/scenerie/gleboszow/","",null,"3","NIE","współczesna","SCS","TAK (Szlaki Br oraz GO)","TAK",1,0,2,0,null,null,false,false,false],["Skawce","https://td2.info.pl/w-trakcie-prac/skawce-(projekt-zakopianka)/","97",null,"4","NIE","współczesna","SPK","","",2,0,0,0,null,null,false,false,true],["Sroka","https://td2.info.pl/scenerie/sroka-projekt-1001/","",null,"7","NIE","współczesna","SCS","","TAK",1,0,3,0,["Sroka, podg.","Sroka Południe, podg."],["Sroka, podg."],false,false,false],["Luzino","https://td2.info.pl/scenerie/luzino-6501/","202",null,"3","NIE","współczesna","mechaniczne","","TAK",2,0,0,0,null,null,false,false,false],["Zajączkowo","https://td2.info.pl/scenerie/zajaczkowo/","",null,"0","NIE","kształtowa","mechaniczne","","",0,2,0,0,null,null,false,false,false],["Kudowa-Zdrój","https://td2.info.pl/scenerie/kudowa-zdroj-6616/","309",null,"4","NIE","współczesna","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Ciechany","https://td2.info.pl/w-trakcie-prac/ciechany/","",null,"3","NIE","współczesna","SCS","","",1,0,0,0,null,["Pawonki"],false,false,false],["Czermin","https://td2.info.pl/scenerie/czermin/","",null,"8","NIE","współczesna","SCS","TAK (szlaki Łk i Fw)","",2,0,2,0,null,null,false,false,false],["Rebrowo Dolne","https://td2.info.pl/scenerie/rebrowo-dolne/","",null,"2","NIE","współczesna","SPK","","",3,0,0,0,null,null,false,false,false],["Lublinek","https://td2.info.pl/scenerie/lublinek-projekt-lka/","14",null,"0","NIE","współczesna","mechaniczne","","",0,0,2,0,null,null,true,false,false],["Stryków","https://td2.info.pl/scenerie/strykow-projekt-lka/","14",null,"0","NIE","współczesna","mechaniczne","","",2,0,0,0,null,null,true,false,false],["Strączki","https://td2.info.pl/scenerie/straczki/","",null,"4","NIE","współczesna","mechaniczne","","",1,0,1,0,null,null,false,false,false],["Niedoradz","https://td2.info.pl/scenerie/niedoradz","",null,"0","NIE","współczesna","SPK","","",0,0,2,0,null,null,false,false,false],["Zgierz","https://td2.info.pl/scenerie/zgierz/","15,16",null,"12","TAK","współczesna","mechaniczne","","",3,0,1,0,null,null,false,false,false],["Łebnino","https://td2.info.pl/scenerie/lebnino-4511/","",null,"0","NIE","kształtowa","mechaniczne","","",0,1,0,0,null,null,false,false,false],["Legno","https://td2.info.pl/scenerie/legno/","",null,"0","NIE","współczesna","SCS","TAK (szlak Mr)","TAK",0,0,2,0,null,null,false,false,false],["Buczek","https://td2.info.pl/scenerie/buczek/","",null,"0","NIE","współczesna","SCS","TAK","TAK",0,0,2,0,null,null,false,false,false],["Dziewoszyce","https://td2.info.pl/scenerie/dziewoszyce/","",null,"4","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Razemsko 2012","https://td2.info.pl/scenerie/razemsko-2012/","",null,"4","NIE","mieszana","mechaniczne","","",0,1,0,1,null,null,false,false,false],["Buskowo Zdrój","https://td2.info.pl/scenerie/buskowo-zdroj/","",null,"4","NIE","mieszana","mechaniczne","","",1,0,0,0,null,null,false,false,false],["Bełchów","https://td2.info.pl/scenerie/belchow-projekt-lka/","11","ŁKA","2","NIE","współczesna","SPK","","TAK",0,0,2,0,null,null,false,false,false],["Modlinków","https://td2.info.pl/scenerie/podg-modlinkow/","",null,"6","NIE","współczesna","SPK","","TAK",3,0,2,0,null,null,false,false,false],["Arkadia Zdrój 2019","https://td2.info.pl/scenerie/arkadia-zdroj-2016/","",null,"","NIE","współczesna","SCS","TAK (szlak wewn.)","TAK",1,0,2,0,null,null,false,false,false]]
\ No newline at end of file
diff --git a/src/scripts/interfaces/ScheduledTrain.ts b/src/scripts/interfaces/ScheduledTrain.ts
index 01b2e34..5c4cd08 100644
--- a/src/scripts/interfaces/ScheduledTrain.ts
+++ b/src/scripts/interfaces/ScheduledTrain.ts
@@ -1,19 +1,19 @@
-import TrainStop from "./TrainStop";
-
-export default interface ScheduledTrain {
-    trainNo: number;
-    driverName: string;
-    driverId: number;
-    currentStationName: string;
-    currentStationHash: string;
-    category: string;
-    stopInfo: TrainStop;
-
-    terminatesAt: string;
-    beginsAt: string;
-    nearestStop: string;
-
-    stopLabel: string;
-    stopStatus: string;
-    stopStatusID: number;
+import TrainStop from "./TrainStop";
+
+export default interface ScheduledTrain {
+    trainNo: number;
+    driverName: string;
+    driverId: number;
+    currentStationName: string;
+    currentStationHash: string;
+    category: string;
+    stopInfo: TrainStop;
+
+    terminatesAt: string;
+    beginsAt: string;
+    nearestStop: string;
+
+    stopLabel: string;
+    stopStatus: string;
+    stopStatusID: number;
 }
\ No newline at end of file
diff --git a/src/scripts/interfaces/Timetable.ts b/src/scripts/interfaces/Timetable.ts
index fe2ef84..b6da1a1 100644
--- a/src/scripts/interfaces/Timetable.ts
+++ b/src/scripts/interfaces/Timetable.ts
@@ -1,16 +1,16 @@
-export default interface Timetable {
-  trainNo: number;
-  driverName: string;
-  category: string;
-  stopName: string;
-  stopType: string;
-  arrivalTime: number;
-  arrivalDelay: number;
-  departureTime: number;
-  departureDelay: number;
-  confirmed: boolean;
-  stopped: boolean;
-  stopTime: number;
-  beginsHere: boolean;
-  terminatesHere: boolean;
-}
+export default interface Timetable {
+  trainNo: number;
+  driverName: string;
+  category: string;
+  stopName: string;
+  stopType: string;
+  arrivalTime: number;
+  arrivalDelay: number;
+  departureTime: number;
+  departureDelay: number;
+  confirmed: boolean;
+  stopped: boolean;
+  stopTime: number;
+  beginsHere: boolean;
+  terminatesHere: boolean;
+}
diff --git a/src/scripts/interfaces/Train.ts b/src/scripts/interfaces/Train.ts
index 0980403..0363502 100644
--- a/src/scripts/interfaces/Train.ts
+++ b/src/scripts/interfaces/Train.ts
@@ -1,31 +1,31 @@
-import TrainStop from '@/scripts/interfaces/TrainStop';
-
-export default interface Train {
-  mass: number;
-  length: number;
-  speed: number;
-  signal: string;
-  distance: number;
-  connectedTrack: string;
-  driverId: number;
-  trainNo: number;
-  driverName: string;
-  currentStationName: string;
-  currentStationHash: string;
-  locoURL: string;
-  locoType: string;
-  online: boolean;
-
-  timetableData?: {
-    timetableId: number;
-    category: string;
-    route: string;
-    followingStops: TrainStop[];
-    TWR: boolean;
-    SKR: boolean;
-    routeDistance: number;
-  };
-
-  stopStatus: string;
-  stopLabel: string;
-}
+import TrainStop from '@/scripts/interfaces/TrainStop';
+
+export default interface Train {
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  driverId: number;
+  trainNo: number;
+  driverName: string;
+  currentStationName: string;
+  currentStationHash: string;
+  locoURL: string;
+  locoType: string;
+  online: boolean;
+
+  timetableData?: {
+    timetableId: number;
+    category: string;
+    route: string;
+    followingStops: TrainStop[];
+    TWR: boolean;
+    SKR: boolean;
+    routeDistance: number;
+  };
+
+  stopStatus: string;
+  stopLabel: string;
+}
diff --git a/src/scripts/interfaces/TrainStop.ts b/src/scripts/interfaces/TrainStop.ts
index 9e30bd3..b46138e 100644
--- a/src/scripts/interfaces/TrainStop.ts
+++ b/src/scripts/interfaces/TrainStop.ts
@@ -1,28 +1,28 @@
-export default interface TrainStop {
-  stopName: string;
-  stopNameRAW: string;
-  stopType: string;
-  mainStop: boolean;
-
-  arrivalLine: string;
-  arrivalTimeString: string;
-  arrivalTimestamp: number;
-  arrivalRealTimeString: string;
-  arrivalRealTimestamp: number;
-  arrivalDelay: number;
-
-  departureLine: string;
-  departureTimeString: string;
-  departureTimestamp: number;
-  departureRealTimeString: string;
-  departureRealTimestamp: number;
-  departureDelay: number;
-
-  comments?: any;
-
-  beginsHere: boolean;
-  terminatesHere: boolean;
-  confirmed: boolean;
-  stopped: boolean;
-  stopTime: number;
-}
+export default interface TrainStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  mainStop: boolean;
+
+  arrivalLine: string;
+  arrivalTimeString: string;
+  arrivalTimestamp: number;
+  arrivalRealTimeString: string;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
+
+  departureLine: string;
+  departureTimeString: string;
+  departureTimestamp: number;
+  departureRealTimeString: string;
+  departureRealTimestamp: number;
+  departureDelay: number;
+
+  comments?: any;
+
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: boolean;
+  stopped: boolean;
+  stopTime: number;
+}
diff --git a/src/scripts/stationFilterManager.ts b/src/scripts/stationFilterManager.ts
index a5457e8..0cc5d1a 100644
--- a/src/scripts/stationFilterManager.ts
+++ b/src/scripts/stationFilterManager.ts
@@ -1,140 +1,138 @@
-import Station from '@/scripts/interfaces/Station';
-
-export default class StationFilterManager {
-  private filterInitStates = {
-    default: false,
-    notDefault: false,
-    nonPublic: false,
-    SPK: false,
-    SCS: false,
-    ręczne: false,
-    mechaniczne: false,
-    współczesna: false,
-    kształtowa: false,
-    historyczna: false,
-    mieszana: false,
-    minLevel: 0,
-    minOneWayCatenary: 0,
-    minOneWay: 0,
-    minTwoWayCatenary: 0,
-    minTwoWay: 0,
-    'no-1track': false,
-    'no-2track': false,
-    free: true,
-    occupied: false,
-    ending: false,
-  };
-
-  private filters = { ...this.filterInitStates };
-
-  private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
-
-  filteredStationList(stationList: Station[]): Station[] {
-    return stationList
-      .filter(station => {
-        if (!station.reqLevel || station.reqLevel == '-1') return true;
-
-        if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
-
-        if (station.online && station.occupiedTo == 'KOŃCZY' && this.filters['ending']) return false;
-
-        if (station.online && this.filters['occupied']) return false;
-        if (!station.online && this.filters['free']) return false;
-
-        if (station.default && this.filters['default']) return false;
-        if (!station.default && this.filters['notDefault']) return false;
-
-        if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
-
-        if (this.filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
-        if (this.filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
-
-        if (station.routes.oneWay.catenary < this.filters['minOneWayCatenary']) return false;
-        if (station.routes.oneWay.noCatenary < this.filters['minOneWay']) return false;
-
-        if (station.routes.twoWay.catenary < this.filters['minTwoWayCatenary']) return false;
-        if (station.routes.twoWay.noCatenary < this.filters['minTwoWay']) return false;
-
-        if (this.filters[station.controlType]) return false;
-        if (this.filters[station.signalType]) return false;
-
-        if (this.filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
-        if (this.filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
-
-        if (this.filters['SCS'] && this.filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
-
-        if (this.filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
-
-        if (this.filters['ręczne'] && station.controlType.includes('ręczne')) return false;
-
-        return true;
-      })
-      .sort((a, b) => {
-        switch (this.sorter.index) {
-          case 1:
-            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return this.sorter.dir;
-            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -this.sorter.dir;
-            break;
-
-          case 2:
-            if (a.statusTimestamp > b.statusTimestamp) return this.sorter.dir;
-            if (a.statusTimestamp < b.statusTimestamp) return -this.sorter.dir;
-            break;
-
-          case 3:
-            if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return this.sorter.dir;
-            if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -this.sorter.dir;
-            break;
-
-          case 4:
-            if (a.dispatcherExp > b.dispatcherExp) return this.sorter.dir;
-            if (a.dispatcherExp < b.dispatcherExp) return -this.sorter.dir;
-            break;
-
-          case 7:
-            if (a.currentUsers > b.currentUsers) return this.sorter.dir;
-            if (a.currentUsers < b.currentUsers) return -this.sorter.dir;
-            if (a.maxUsers > b.maxUsers) return this.sorter.dir;
-            if (a.maxUsers < b.maxUsers) return -this.sorter.dir;
-            break;
-
-          case 8:
-            if (a.spawns > b.spawns) return this.sorter.dir;
-            if (a.spawns < b.spawns) return -this.sorter.dir;
-
-            break;
-
-          case 9:
-            if (a.scheduledTrains.length > b.scheduledTrains.length) return this.sorter.dir;
-            if (a.scheduledTrains.length < b.scheduledTrains.length) return -this.sorter.dir;
-
-          default:
-            break;
-        }
-
-        if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return this.sorter.dir;
-        return -this.sorter.dir;
-      });
-  }
-
-  changeFilterValue(filter: { name: string; value: number }) {
-    this.filters[filter.name] = filter.value;
-  }
-
-  resetFilters() {
-    this.filters = { ...this.filterInitStates };
-  }
-
-  changeSorter(index: number) {
-    if (index > 4 && index < 7) return;
-
-    if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
-    else this.sorter.dir = 1;
-
-    this.sorter.index = index;
-  }
-
-  getSorter() {
-    return this.sorter;
-  }
-}
+import Station from '@/scripts/interfaces/Station';
+
+export default class StationFilterManager {
+  private filterInitStates = {
+    default: false,
+    notDefault: false,
+    nonPublic: false,
+    SPK: false,
+    SCS: false,
+    ręczne: false,
+    mechaniczne: false,
+    współczesna: false,
+    kształtowa: false,
+    historyczna: false,
+    mieszana: false,
+    minLevel: 0,
+    minOneWayCatenary: 0,
+    minOneWay: 0,
+    minTwoWayCatenary: 0,
+    minTwoWay: 0,
+    'no-1track': false,
+    'no-2track': false,
+    free: true,
+    occupied: false,
+    ending: false,
+  };
+
+  private filters = { ...this.filterInitStates };
+
+  private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
+
+  filteredStationList(stationList: Station[]): Station[] {
+    return stationList
+      .filter(station => {
+        if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
+
+        if (station.online && station.occupiedTo == 'KOŃCZY' && this.filters['ending']) return false;
+
+        if (station.online && this.filters['occupied']) return false;
+        if (!station.online && this.filters['free']) return false;
+
+        if (station.default && this.filters['default']) return false;
+        if (!station.default && this.filters['notDefault']) return false;
+
+        if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
+
+        if (this.filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
+        if (this.filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
+
+        if (station.routes.oneWay.catenary < this.filters['minOneWayCatenary']) return false;
+        if (station.routes.oneWay.noCatenary < this.filters['minOneWay']) return false;
+
+        if (station.routes.twoWay.catenary < this.filters['minTwoWayCatenary']) return false;
+        if (station.routes.twoWay.noCatenary < this.filters['minTwoWay']) return false;
+
+        if (this.filters[station.controlType]) return false;
+        if (this.filters[station.signalType]) return false;
+
+        if (this.filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
+        if (this.filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
+
+        if (this.filters['SCS'] && this.filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
+
+        if (this.filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
+
+        if (this.filters['ręczne'] && station.controlType.includes('ręczne')) return false;
+
+        return true;
+      })
+      .sort((a, b) => {
+        switch (this.sorter.index) {
+          case 1:
+            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return this.sorter.dir;
+            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -this.sorter.dir;
+            break;
+
+          case 2:
+            if (a.statusTimestamp > b.statusTimestamp) return this.sorter.dir;
+            if (a.statusTimestamp < b.statusTimestamp) return -this.sorter.dir;
+            break;
+
+          case 3:
+            if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return this.sorter.dir;
+            if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -this.sorter.dir;
+            break;
+
+          case 4:
+            if (a.dispatcherExp > b.dispatcherExp) return this.sorter.dir;
+            if (a.dispatcherExp < b.dispatcherExp) return -this.sorter.dir;
+            break;
+
+          case 7:
+            if (a.currentUsers > b.currentUsers) return this.sorter.dir;
+            if (a.currentUsers < b.currentUsers) return -this.sorter.dir;
+            if (a.maxUsers > b.maxUsers) return this.sorter.dir;
+            if (a.maxUsers < b.maxUsers) return -this.sorter.dir;
+            break;
+
+          case 8:
+            if (a.spawns > b.spawns) return this.sorter.dir;
+            if (a.spawns < b.spawns) return -this.sorter.dir;
+
+            break;
+
+          case 9:
+            if (a.scheduledTrains.length > b.scheduledTrains.length) return this.sorter.dir;
+            if (a.scheduledTrains.length < b.scheduledTrains.length) return -this.sorter.dir;
+
+          default:
+            break;
+        }
+
+        if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return this.sorter.dir;
+        return -this.sorter.dir;
+      });
+  }
+
+  changeFilterValue(filter: { name: string; value: number }) {
+    this.filters[filter.name] = filter.value;
+  }
+
+  resetFilters() {
+    this.filters = { ...this.filterInitStates };
+  }
+
+  changeSorter(index: number) {
+    if (index > 4 && index < 7) return;
+
+    if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
+    else this.sorter.dir = 1;
+
+    this.sorter.index = index;
+  }
+
+  getSorter() {
+    return this.sorter;
+  }
+}
diff --git a/src/scripts/storageManager.ts b/src/scripts/storageManager.ts
index 82883c1..b24ee2c 100644
--- a/src/scripts/storageManager.ts
+++ b/src/scripts/storageManager.ts
@@ -1,42 +1,42 @@
-export default class StorageManager {
-  static registerStorage(name: string) {
-    window.localStorage.setItem(name, '1');
-  }
-
-  static unregisterStorage(name: string) {
-    window.localStorage.removeItem(name);
-  }
-
-  static isRegistered(name: string) {
-    return window.localStorage.getItem(name) ? true : false;
-  }
-
-  static setBooleanValue(key: string, val: boolean) {
-    window.localStorage.setItem(key, val.toString());
-  }
-
-  static setNumericValue(key: string, val: number) {
-    window.localStorage.setItem(key, val.toString());
-  }
-
-  static setStringValue(key: string, val: string) {
-    window.localStorage.setItem(key, val);
-  }
-
-  static removeValue(key: string) {
-    window.localStorage.removeItem(key);
-  }
-
-  static getBooleanValue(key: string): boolean {
-    return window.localStorage.getItem(key) === 'true' ? true : false;
-  }
-
-  static getStringValue(key: string): string {
-    return window.localStorage.getItem(key) || '';
-  }
-
-  static getNumericValue(key: string): number {
-    const itemValue = window.localStorage.getItem(key);
-    return itemValue ? parseInt(itemValue) : 0;
-  }
-}
+export default class StorageManager {
+  static registerStorage(name: string) {
+    window.localStorage.setItem(name, '1');
+  }
+
+  static unregisterStorage(name: string) {
+    window.localStorage.removeItem(name);
+  }
+
+  static isRegistered(name: string) {
+    return window.localStorage.getItem(name) ? true : false;
+  }
+
+  static setBooleanValue(key: string, val: boolean) {
+    window.localStorage.setItem(key, val.toString());
+  }
+
+  static setNumericValue(key: string, val: number) {
+    window.localStorage.setItem(key, val.toString());
+  }
+
+  static setStringValue(key: string, val: string) {
+    window.localStorage.setItem(key, val);
+  }
+
+  static removeValue(key: string) {
+    window.localStorage.removeItem(key);
+  }
+
+  static getBooleanValue(key: string): boolean {
+    return window.localStorage.getItem(key) === 'true' ? true : false;
+  }
+
+  static getStringValue(key: string): string {
+    return window.localStorage.getItem(key) || '';
+  }
+
+  static getNumericValue(key: string): number {
+    const itemValue = window.localStorage.getItem(key);
+    return itemValue ? parseInt(itemValue) : 0;
+  }
+}
diff --git a/src/store/store.ts b/src/store/store.ts
index a543b62..53ea121 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,625 +1,625 @@
-import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
-import axios from 'axios';
-
-import JSONStationData from '@/data/stationData.json';
-
-import Station from '@/scripts/interfaces/Station';
-import Train from '@/scripts/interfaces/Train';
-import TrainStop from '@/scripts/interfaces/TrainStop';
-
-enum Status {
-  Initialized = -1,
-  Loading = 0,
-  Error = 1,
-  Loaded = 2,
-}
-
-interface TimetableData {
-  trainNo: number;
-  driverName: string;
-  driverId: number;
-  currentStationName: string;
-  currentStationHash: string;
-  timetableId: number;
-  category: string;
-  route: string;
-  TWR: boolean;
-  SKR: boolean;
-  routeDistance: number;
-  followingStops: TrainStop[];
-  followingSceneries: string[];
-}
-
-// const devEnv = true;
-
-const URLs = {
-  stations: 'https://api.td2.info.pl:9640/?method=getStationsOnline',
-  trains: 'https://api.td2.info.pl:9640/?method=getTrainsOnline',
-  dispatchers: 'https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1',
-};
-
-const timetableURL = (trainNo: number) => `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3Beu`;
-const getLocoURL = (locoType: string) => `https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes('EN') ? locoType + 'rb' : locoType}.png`;
-
-const getStatusLabel = (stationStatus: any) => {
-  if (!stationStatus) return 'NIEZALOGOWANY';
-
-  const statusCode = stationStatus[2];
-  const statusTimestamp = stationStatus[3];
-
-  switch (statusCode) {
-    case 0:
-      if (statusTimestamp - Date.now() > 21000000) return 'BEZ LIMITU';
-
-      return `DO ${new Date(statusTimestamp).toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-      })}`;
-
-    case 1:
-      return 'Z/W';
-
-    case 2:
-      if (statusTimestamp == 0) return 'KOŃCZY';
-      break;
-
-    case 3:
-      return 'BRAK MIEJSCA';
-
-    default:
-      break;
-  }
-
-  return 'NIEDOSTĘPNY';
-};
-
-const getStatusTimestamp = (stationStatus: any) => {
-  if (!stationStatus) return -2;
-
-  const statusCode = stationStatus[2];
-  const statusTimestamp = stationStatus[3];
-
-  switch (statusCode) {
-    case 0:
-    case 1:
-    case 3:
-      return statusTimestamp;
-
-    case 2:
-      if (statusTimestamp == 0) return 0;
-      break;
-
-    default:
-      break;
-  }
-
-  return -1;
-};
-
-const parseSpawns = (spawnString: string) => {
-  if (!spawnString) return [];
-  if (spawnString === 'NO_SPAWN') return [];
-
-  return spawnString.split(';').map(spawn => {
-    const spawnArray = spawn.split(',');
-    const spawnName = spawnArray[6] ? spawnArray[6] : spawnArray[0];
-    const spawnLength = parseInt(spawnArray[2]);
-
-    return { spawnName, spawnLength };
-  });
-};
-
-const getTimestamp = (date: string) => (date ? new Date(date).getTime() : 0);
-const timestampToTime = (timestamp: number) =>
-  new Date(timestamp).toLocaleTimeString('pl-PL', {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-
-@Module
-export default class Store extends VuexModule {
-  private trainCount: number = 0;
-  private stationCount: number = 0;
-
-  private dataConnectionStatus: Status = Status.Loading;
-  private timetableLoaded: Status = Status.Loading;
-
-  private stationList: Station[] = [];
-  private trainList: Train[] = [];
-
-  //GETTERS
-  get getAllData() {
-    return {
-      stationList: this.stationList,
-      trainList: this.trainList,
-      trainCount: this.trainCount,
-      stationCount: this.stationCount,
-      dataConnectionStatus: this.dataConnectionStatus,
-      timetableDataStatus: this.timetableLoaded,
-    };
-  }
-
-  get getStationList() {
-    return this.stationList;
-  }
-
-  get getTrainList() {
-    return this.trainList;
-  }
-
-  get getTimetableDataStatus() {
-    return this.timetableLoaded;
-  }
-
-  get getDataStatus() {
-    return this.dataConnectionStatus;
-  }
-
-  //ACTIONS
-  @Action
-  async synchronizeData() {
-    this.context.commit('setJSONData');
-
-    this.context.dispatch('fetchOnlineData');
-    setInterval(() => this.context.dispatch('fetchOnlineData'), 20000);
-  }
-
-  @Action({ commit: 'updateTimetableData' })
-  async fetchTimetableData() {
-    return this.trainList.reduce(async (acc: Promise<TimetableData[]>, train) => {
-      const timetable = await (await axios.get(timetableURL(train.trainNo))).data.message;
-      const trainInfo = timetable.trainInfo;
-
-      if (!timetable || !trainInfo) return acc;
-
-      const followingStops: TrainStop[] = timetable.stopPoints.reduce((stopsAcc: TrainStop[], point) => {
-        const arrivalTimestamp = getTimestamp(point.arrivalTime);
-        const arrivalRealTimestamp = getTimestamp(point.arrivalRealTime);
-
-        const departureTimestamp = getTimestamp(point.departureTime);
-        const departureRealTimestamp = getTimestamp(point.departureRealTime);
-
-        stopsAcc.push({
-          stopName: point.pointName,
-          stopNameRAW: point.pointNameRAW,
-          stopType: point.pointStopType,
-          mainStop: point.pointName.includes('strong'),
-
-          arrivalLine: point.arrivalLine,
-          arrivalTimeString: timestampToTime(point.arrivalTime),
-          arrivalTimestamp: arrivalTimestamp,
-          arrivalRealTimeString: timestampToTime(point.arrivalRealTime),
-          arrivalRealTimestamp: arrivalRealTimestamp,
-          arrivalDelay: point.arrivalDelay,
-
-          departureLine: point.departureLine,
-          departureTimeString: timestampToTime(point.departureTime),
-          departureTimestamp: departureTimestamp,
-          departureRealTimeString: timestampToTime(point.departureRealTime),
-          departureRealTimestamp: departureRealTimestamp,
-          departureDelay: point.departureDelay,
-
-          beginsHere: arrivalTimestamp == 0,
-          terminatesHere: departureTimestamp == 0,
-
-          confirmed: point.confirmed,
-          stopped: point.isStopped,
-          stopTime: point.pointStopTime,
-        });
-
-        return stopsAcc;
-      }, []);
-
-      (await acc).push({
-        trainNo: train.trainNo,
-        driverName: train.driverName,
-        driverId: train.driverId,
-        currentStationName: train.currentStationName,
-        currentStationHash: train.currentStationHash,
-        timetableId: trainInfo.timetableId,
-        category: trainInfo.trainCategoryCode,
-        route: trainInfo.route,
-        TWR: trainInfo.twr,
-        SKR: trainInfo.skr,
-        routeDistance: timetable.stopPoints[timetable.stopPoints.length - 1].pointDistance,
-        followingStops,
-        followingSceneries: trainInfo.sceneries,
-      });
-
-      return acc;
-    }, Promise.resolve([]));
-  }
-
-  @Action
-  async fetchOnlineData() {
-    Promise.all([axios.get(URLs.stations), axios.get(URLs.trains), axios.get(URLs.dispatchers)])
-      .then(async response => {
-        const onlineStationsData = response[0].data.message;
-        const onlineTrainsData = await response[1].data.message;
-        const onlineDispatchersData = await response[2].data.message;
-
-        let updatedStationList = onlineStationsData.reduce((acc, station) => {
-          if (station.region !== 'eu' || !station.isOnline) return acc;
-
-          const stationStatus = onlineDispatchersData.find(status => status[0] == station.stationHash && status[1] == 'eu');
-
-          const statusLabel = getStatusLabel(stationStatus);
-          const statusTimestamp = getStatusTimestamp(stationStatus);
-
-          const stationTrains = onlineTrainsData.filter(train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName);
-
-          acc.push({
-            stationName: station.stationName,
-            stationHash: station.stationHash,
-            maxUsers: station.maxUsers,
-            currentUsers: station.currentUsers,
-            spawns: parseSpawns(station.spawnString),
-            dispatcherName: station.dispatcherName,
-            dispatcherRate: station.dispatcherRate,
-            dispatcherId: station.dispatcherId,
-            dispatcherExp: station.dispatcherExp,
-            dispatcherIsSupporter: station.dispatcherIsSupporter,
-            occupiedTo: statusLabel,
-            stationTrains,
-            statusTimestamp,
-          });
-
-          return acc;
-        }, []);
-
-        let updatedTrainList = await Promise.all(
-          onlineTrainsData
-            .filter(train => train.region === 'eu')
-            .map(async train => {
-              const locoType = train.dataCon.split(';') ? train.dataCon.split(';')[0] : train.dataCon;
-
-              return {
-                trainNo: train.trainNo,
-                mass: train.dataMass,
-                length: train.dataLength,
-                speed: train.dataSpeed,
-                distance: train.dataDistance,
-                signal: train.dataSignal,
-                online: train.isOnline,
-                driverId: train.driverId,
-                driverName: train.driverName,
-                currentStationName: train.station.stationName,
-                currentStationHash: train.station.stationHash,
-                connectedTrack: train.dataSceneryConnection,
-                locoType,
-                locoURL: getLocoURL(locoType),
-              };
-            })
-        );
-
-        this.context.commit('updateOnlineStations', updatedStationList);
-        this.context.commit('updateOnlineTrains', updatedTrainList);
-
-        this.context.dispatch('fetchTimetableData');
-      })
-      .catch(err => {
-        this.context.commit('setDataConnectionStatus', Status.Error);
-      });
-  }
-
-  //MUTATIONS
-  @Mutation
-  private setDataConnectionStatus(status: Status) {
-    this.dataConnectionStatus = status;
-  }
-
-  @Mutation setJSONData() {
-    /*  
-    0: stationName,
-    1: stationURL,
-    2: stationlines,
-    3: stationProject?,
-    4: reqLevel,
-    5: supportersOnly,
-    6: signalType,
-    7: controlType,
-    8: SBL,
-    9: two-way block,
-    10: routes, one-way, catenary,
-    11: routes, one-way, no catenary,
-    12: routes, two-way, catenary,
-    13: routes, two-way, no catenary,
-    14: subStations?,
-    15: stops?,
-    16: default,
-    17: nonPublic,
-    18: unavailable
-    */
-
-    this.stationList = JSONStationData.map(station => ({
-      stationName: station[0] as string,
-      stationURL: station[1] as string,
-      stationLines: station[2] as string,
-      stationProject: station[3] as string,
-      reqLevel: station[4] as string,
-      supportersOnly: station[5] as string,
-      signalType: station[6] as string,
-      controlType: station[7] as string,
-      SBL: station[8] as string,
-      TWB: station[9] as string,
-      routes: {
-        oneWay: {
-          catenary: station[10] as number,
-          noCatenary: station[11] as number,
-        },
-        twoWay: {
-          catenary: station[12] as number,
-          noCatenary: station[13] as number,
-        },
-      },
-      checkpoints: station[14] ? (station[14] as string[]).map(sub => ({ checkpointName: sub, scheduledTrains: [] })) : null,
-      stops: station[15] as string[],
-
-      default: station[16] as boolean,
-      nonPublic: station[17] as boolean,
-      unavailable: station[18] as boolean,
-
-      stationHash: '',
-      maxUsers: 0,
-      currentUsers: 0,
-      dispatcherName: '',
-      dispatcherRate: 0,
-      dispatcherExp: -1,
-      dispatcherId: 0,
-      dispatcherIsSupporter: false,
-      online: false,
-      occupiedTo: 'WOLNA',
-      statusTimestamp: -3,
-      stationTrains: [],
-      scheduledTrains: [],
-      spawns: [],
-    }));
-  }
-
-  @Mutation
-  private updateOnlineStations(updatedStationList: any[]) {
-    this.stationList = this.stationList.reduce((acc, station) => {
-      const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
-      const registeredStation = JSONStationData.find(data => data[0] === station.stationName);
-
-      if (onlineStationData)
-        acc.push({
-          ...station,
-          ...onlineStationData,
-          online: true,
-        });
-      else if (registeredStation)
-        acc.push({
-          ...station,
-          stationProject: '',
-          stationHash: '',
-          maxUsers: 0,
-          currentUsers: 0,
-          dispatcherName: '',
-          dispatcherRate: 0,
-          dispatcherExp: -1,
-          dispatcherId: 0,
-          dispatcherIsSupporter: false,
-          online: false,
-          occupiedTo: 'WOLNA',
-          statusTimestamp: -3,
-          stationTrains: [],
-          scheduledTrains: [],
-          checkpoints: null,
-        });
-
-      return acc;
-    }, [] as Station[]);
-
-    // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy
-    updatedStationList.forEach(updatedStation => {
-      const alreadyInList: any = this.stationList.some(station => station.stationName === updatedStation.stationName);
-
-      if (!alreadyInList) {
-        this.stationList.push({
-          ...updatedStation,
-          scheduledTrains: [],
-          stationTrains: [],
-          subStations: [],
-          online: true,
-          reqLevel: '-1',
-          nonPublic: true,
-        });
-      }
-    });
-
-    this.stationCount = this.stationList.filter(station => station.online).length;
-    this.dataConnectionStatus = Status.Loaded;
-  }
-
-  @Mutation
-  private updateOnlineTrains(updatedTrainList) {
-    this.trainList = updatedTrainList.reduce((acc, updatedTrain) => {
-      const trainData = this.trainList.find(train => train.trainNo === updatedTrain.trainNo);
-
-      if (trainData) acc.push({ ...trainData, ...updatedTrain });
-      else acc.push({ ...updatedTrain });
-
-      return acc;
-    }, [] as Train[]);
-
-    this.trainCount = this.trainList.filter(train => train.online).length;
-    this.dataConnectionStatus = Status.Loaded;
-  }
-
-  @Mutation
-  private updateTimetableData(timetableList: TimetableData[]) {
-    this.stationList = this.stationList.map(station => {
-      const stationName = station.stationName.toLowerCase();
-      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: TimetableData, index) => {
-        if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
-
-        const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
-          const stopName = stop.stopNameRAW.toLowerCase();
-
-          if (stationName === stopName) return true;
-          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
-          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
-          if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName === stopName.split(', podg.')[0]) return true;
-
-          if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
-
-          return false;
-        });
-
-        if (stopInfoIndex == -1) return acc;
-
-        const stopInfo = timetableData.followingStops[stopInfoIndex];
-
-        let stopStatus = '';
-        let stopLabel = '';
-        let stopStatusID = 0;
-        let nearestStop = '';
-
-        if (stopInfo.terminatesHere && stopInfo.confirmed) {
-          stopStatus = 'terminated';
-          stopLabel = 'Skończył bieg';
-          stopStatusID = 5;
-        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
-          stopStatus = 'departed';
-          stopLabel = 'Odprawiony';
-          stopStatusID = 2;
-        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
-          stopStatus = 'departed-away';
-          stopLabel = 'Odjechał';
-          stopStatusID = 4;
-        } else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
-          stopStatus = 'online';
-          stopLabel = 'Na stacji';
-          stopStatusID = 0;
-        } else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
-          stopStatus = 'stopped';
-          stopLabel = 'Postój';
-          stopStatusID = 1;
-        } else if (timetableData.currentStationName != station.stationName) {
-          stopStatus = 'arriving';
-          stopLabel = 'W drodze';
-          stopStatusID = 3;
-        }
-
-        if (stopInfoIndex < timetableData.followingStops.length - 2) {
-          for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
-            const stop = timetableData.followingStops[i];
-
-            if (stop.mainStop && stop.stopType.includes('ph')) {
-              nearestStop = stop.stopNameRAW;
-              break;
-            }
-          }
-        }
-
-        acc.push({
-          trainNo: timetableData.trainNo,
-          driverName: timetableData.driverName,
-          driverId: timetableData.driverId,
-          currentStationName: timetableData.currentStationName,
-          currentStationHash: timetableData.currentStationHash,
-          category: timetableData.category,
-          beginsAt: timetableData.followingStops[0].stopNameRAW,
-          terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
-          nearestStop,
-          stopInfo,
-          stopLabel,
-          stopStatus,
-          stopStatusID,
-        });
-
-        return acc;
-      }, []);
-
-      if (station.checkpoints) {
-        station.checkpoints.forEach(cp => (cp.scheduledTrains.length = 0));
-
-        for (let checkpoint of station.checkpoints) {
-          timetableList.reduce((acc, data) => {
-            data.followingStops
-              .filter(stop => stop.stopNameRAW === checkpoint.checkpointName)
-              .forEach(stopInfo => {
-                // const stopInfo = data.followingStops[stopInfoIndex];
-
-                let stopStatus = '';
-                let stopLabel = '';
-                let nearestStop = '';
-                let stopStatusID = 0;
-
-                if (stopInfo.terminatesHere && stopInfo.confirmed) {
-                  stopStatus = 'terminated';
-                  stopLabel = 'Skończył bieg';
-                  stopStatusID = 5;
-                } else if (!stopInfo.terminatesHere && stopInfo.confirmed && data.currentStationName == station.stationName) {
-                  stopStatus = 'departed';
-                  stopLabel = 'Odprawiony';
-                  stopStatusID = 2;
-                } else if (!stopInfo.terminatesHere && stopInfo.confirmed && data.currentStationName != station.stationName) {
-                  stopStatus = 'departed-away';
-                  stopLabel = 'Odjechał';
-                  stopStatusID = 4;
-                } else if (data.currentStationName == station.stationName && !stopInfo.stopped) {
-                  stopStatus = 'online';
-                  stopLabel = 'Na stacji';
-                  stopStatusID = 0;
-                } else if (data.currentStationName == station.stationName && stopInfo.stopped) {
-                  stopStatus = 'stopped';
-                  stopLabel = 'Postój';
-                  stopStatusID = 1;
-                } else if (data.currentStationName != station.stationName) {
-                  stopStatus = 'arriving';
-                  stopLabel = 'W drodze';
-                  stopStatusID = 3;
-                }
-
-                // for (let i = stopInfoIndex; i < data.followingStops.length - 1; i++){
-                //   const stop = data.followingStops[i];
-
-                //   if (stop.mainStop && stop.stopType.includes("ph")) {
-                //     nearestStop = stop.stopNameRAW;
-                //     break;
-                //   }
-                // }
-
-                checkpoint.scheduledTrains.push({
-                  trainNo: data.trainNo,
-                  driverName: data.driverName,
-                  driverId: data.driverId,
-                  currentStationName: data.currentStationName,
-                  currentStationHash: data.currentStationHash,
-                  category: data.category,
-                  beginsAt: data.followingStops[0].stopNameRAW,
-                  terminatesAt: data.followingStops[data.followingStops.length - 1].stopNameRAW,
-                  stopInfo,
-                  stopLabel,
-                  stopStatus,
-                  nearestStop,
-                  stopStatusID,
-                });
-              });
-
-            return acc;
-          }, []);
-        }
-      }
-
-      return { ...station, scheduledTrains };
-    });
-
-    this.trainList = this.trainList.reduce((acc, train) => {
-      const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
-
-      if (timetableData) {
-        const trainData = this.stationList.find(station => station.stationName === train.currentStationName)?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
-
-        acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || '', stopLabel: trainData?.stopLabel || '' });
-      }
-
-      return acc;
-    }, [] as Train[]);
-
-    this.timetableLoaded = Status.Loaded;
-  }
-}
+import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
+import axios from 'axios';
+
+import JSONStationData from '@/data/stationData.json';
+
+import Station from '@/scripts/interfaces/Station';
+import Train from '@/scripts/interfaces/Train';
+import TrainStop from '@/scripts/interfaces/TrainStop';
+
+enum Status {
+  Initialized = -1,
+  Loading = 0,
+  Error = 1,
+  Loaded = 2,
+}
+
+interface TimetableData {
+  trainNo: number;
+  driverName: string;
+  driverId: number;
+  currentStationName: string;
+  currentStationHash: string;
+  timetableId: number;
+  category: string;
+  route: string;
+  TWR: boolean;
+  SKR: boolean;
+  routeDistance: number;
+  followingStops: TrainStop[];
+  followingSceneries: string[];
+}
+
+// const devEnv = true;
+
+const URLs = {
+  stations: 'https://api.td2.info.pl:9640/?method=getStationsOnline',
+  trains: 'https://api.td2.info.pl:9640/?method=getTrainsOnline',
+  dispatchers: 'https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1',
+};
+
+const timetableURL = (trainNo: number) => `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3Beu`;
+const getLocoURL = (locoType: string) => `https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes('EN') ? locoType + 'rb' : locoType}.png`;
+
+const getStatusLabel = (stationStatus: any) => {
+  if (!stationStatus) return 'NIEZALOGOWANY';
+
+  const statusCode = stationStatus[2];
+  const statusTimestamp = stationStatus[3];
+
+  switch (statusCode) {
+    case 0:
+      if (statusTimestamp - Date.now() > 21000000) return 'BEZ LIMITU';
+
+      return `DO ${new Date(statusTimestamp).toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+      })}`;
+
+    case 1:
+      return 'Z/W';
+
+    case 2:
+      if (statusTimestamp == 0) return 'KOŃCZY';
+      break;
+
+    case 3:
+      return 'BRAK MIEJSCA';
+
+    default:
+      break;
+  }
+
+  return 'NIEDOSTĘPNY';
+};
+
+const getStatusTimestamp = (stationStatus: any) => {
+  if (!stationStatus) return -2;
+
+  const statusCode = stationStatus[2];
+  const statusTimestamp = stationStatus[3];
+
+  switch (statusCode) {
+    case 0:
+    case 1:
+    case 3:
+      return statusTimestamp;
+
+    case 2:
+      if (statusTimestamp == 0) return 0;
+      break;
+
+    default:
+      break;
+  }
+
+  return -1;
+};
+
+const parseSpawns = (spawnString: string) => {
+  if (!spawnString) return [];
+  if (spawnString === 'NO_SPAWN') return [];
+
+  return spawnString.split(';').map(spawn => {
+    const spawnArray = spawn.split(',');
+    const spawnName = spawnArray[6] ? spawnArray[6] : spawnArray[0];
+    const spawnLength = parseInt(spawnArray[2]);
+
+    return { spawnName, spawnLength };
+  });
+};
+
+const getTimestamp = (date: string) => (date ? new Date(date).getTime() : 0);
+const timestampToTime = (timestamp: number) =>
+  new Date(timestamp).toLocaleTimeString('pl-PL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+@Module
+export default class Store extends VuexModule {
+  private trainCount: number = 0;
+  private stationCount: number = 0;
+
+  private dataConnectionStatus: Status = Status.Loading;
+  private timetableLoaded: Status = Status.Loading;
+
+  private stationList: Station[] = [];
+  private trainList: Train[] = [];
+
+  //GETTERS
+  get getAllData() {
+    return {
+      stationList: this.stationList,
+      trainList: this.trainList,
+      trainCount: this.trainCount,
+      stationCount: this.stationCount,
+      dataConnectionStatus: this.dataConnectionStatus,
+      timetableDataStatus: this.timetableLoaded,
+    };
+  }
+
+  get getStationList() {
+    return this.stationList;
+  }
+
+  get getTrainList() {
+    return this.trainList;
+  }
+
+  get getTimetableDataStatus() {
+    return this.timetableLoaded;
+  }
+
+  get getDataStatus() {
+    return this.dataConnectionStatus;
+  }
+
+  //ACTIONS
+  @Action
+  async synchronizeData() {
+    this.context.commit('setJSONData');
+
+    this.context.dispatch('fetchOnlineData');
+    setInterval(() => this.context.dispatch('fetchOnlineData'), 20000);
+  }
+
+  @Action({ commit: 'updateTimetableData' })
+  async fetchTimetableData() {
+    return this.trainList.reduce(async (acc: Promise<TimetableData[]>, train) => {
+      const timetable = await (await axios.get(timetableURL(train.trainNo))).data.message;
+      const trainInfo = timetable.trainInfo;
+
+      if (!timetable || !trainInfo) return acc;
+
+      const followingStops: TrainStop[] = timetable.stopPoints.reduce((stopsAcc: TrainStop[], point) => {
+        const arrivalTimestamp = getTimestamp(point.arrivalTime);
+        const arrivalRealTimestamp = getTimestamp(point.arrivalRealTime);
+
+        const departureTimestamp = getTimestamp(point.departureTime);
+        const departureRealTimestamp = getTimestamp(point.departureRealTime);
+
+        stopsAcc.push({
+          stopName: point.pointName,
+          stopNameRAW: point.pointNameRAW,
+          stopType: point.pointStopType,
+          mainStop: point.pointName.includes('strong'),
+
+          arrivalLine: point.arrivalLine,
+          arrivalTimeString: timestampToTime(point.arrivalTime),
+          arrivalTimestamp: arrivalTimestamp,
+          arrivalRealTimeString: timestampToTime(point.arrivalRealTime),
+          arrivalRealTimestamp: arrivalRealTimestamp,
+          arrivalDelay: point.arrivalDelay,
+
+          departureLine: point.departureLine,
+          departureTimeString: timestampToTime(point.departureTime),
+          departureTimestamp: departureTimestamp,
+          departureRealTimeString: timestampToTime(point.departureRealTime),
+          departureRealTimestamp: departureRealTimestamp,
+          departureDelay: point.departureDelay,
+
+          beginsHere: arrivalTimestamp == 0,
+          terminatesHere: departureTimestamp == 0,
+
+          confirmed: point.confirmed,
+          stopped: point.isStopped,
+          stopTime: point.pointStopTime,
+        });
+
+        return stopsAcc;
+      }, []);
+
+      (await acc).push({
+        trainNo: train.trainNo,
+        driverName: train.driverName,
+        driverId: train.driverId,
+        currentStationName: train.currentStationName,
+        currentStationHash: train.currentStationHash,
+        timetableId: trainInfo.timetableId,
+        category: trainInfo.trainCategoryCode,
+        route: trainInfo.route,
+        TWR: trainInfo.twr,
+        SKR: trainInfo.skr,
+        routeDistance: timetable.stopPoints[timetable.stopPoints.length - 1].pointDistance,
+        followingStops,
+        followingSceneries: trainInfo.sceneries,
+      });
+
+      return acc;
+    }, Promise.resolve([]));
+  }
+
+  @Action
+  async fetchOnlineData() {
+    Promise.all([axios.get(URLs.stations), axios.get(URLs.trains), axios.get(URLs.dispatchers)])
+      .then(async response => {
+        const onlineStationsData = response[0].data.message;
+        const onlineTrainsData = await response[1].data.message;
+        const onlineDispatchersData = await response[2].data.message;
+
+        let updatedStationList = onlineStationsData.reduce((acc, station) => {
+          if (station.region !== 'eu' || !station.isOnline) return acc;
+
+          const stationStatus = onlineDispatchersData.find(status => status[0] == station.stationHash && status[1] == 'eu');
+
+          const statusLabel = getStatusLabel(stationStatus);
+          const statusTimestamp = getStatusTimestamp(stationStatus);
+
+          const stationTrains = onlineTrainsData.filter(train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName);
+
+          acc.push({
+            stationName: station.stationName,
+            stationHash: station.stationHash,
+            maxUsers: station.maxUsers,
+            currentUsers: station.currentUsers,
+            spawns: parseSpawns(station.spawnString),
+            dispatcherName: station.dispatcherName,
+            dispatcherRate: station.dispatcherRate,
+            dispatcherId: station.dispatcherId,
+            dispatcherExp: station.dispatcherExp,
+            dispatcherIsSupporter: station.dispatcherIsSupporter,
+            occupiedTo: statusLabel,
+            stationTrains,
+            statusTimestamp,
+          });
+
+          return acc;
+        }, []);
+
+        let updatedTrainList = await Promise.all(
+          onlineTrainsData
+            .filter(train => train.region === 'eu')
+            .map(async train => {
+              const locoType = train.dataCon.split(';') ? train.dataCon.split(';')[0] : train.dataCon;
+
+              return {
+                trainNo: train.trainNo,
+                mass: train.dataMass,
+                length: train.dataLength,
+                speed: train.dataSpeed,
+                distance: train.dataDistance,
+                signal: train.dataSignal,
+                online: train.isOnline,
+                driverId: train.driverId,
+                driverName: train.driverName,
+                currentStationName: train.station.stationName,
+                currentStationHash: train.station.stationHash,
+                connectedTrack: train.dataSceneryConnection,
+                locoType,
+                locoURL: getLocoURL(locoType),
+              };
+            })
+        );
+
+        this.context.commit('updateOnlineStations', updatedStationList);
+        this.context.commit('updateOnlineTrains', updatedTrainList);
+
+        this.context.dispatch('fetchTimetableData');
+      })
+      .catch(err => {
+        this.context.commit('setDataConnectionStatus', Status.Error);
+      });
+  }
+
+  //MUTATIONS
+  @Mutation
+  private setDataConnectionStatus(status: Status) {
+    this.dataConnectionStatus = status;
+  }
+
+  @Mutation setJSONData() {
+    /*  
+    0: stationName,
+    1: stationURL,
+    2: stationlines,
+    3: stationProject?,
+    4: reqLevel,
+    5: supportersOnly,
+    6: signalType,
+    7: controlType,
+    8: SBL,
+    9: two-way block,
+    10: routes, one-way, catenary,
+    11: routes, one-way, no catenary,
+    12: routes, two-way, catenary,
+    13: routes, two-way, no catenary,
+    14: subStations?,
+    15: stops?,
+    16: default,
+    17: nonPublic,
+    18: unavailable
+    */
+
+    this.stationList = JSONStationData.map(station => ({
+      stationName: station[0] as string,
+      stationURL: station[1] as string,
+      stationLines: station[2] as string,
+      stationProject: station[3] as string,
+      reqLevel: station[4] as string,
+      supportersOnly: station[5] as string,
+      signalType: station[6] as string,
+      controlType: station[7] as string,
+      SBL: station[8] as string,
+      TWB: station[9] as string,
+      routes: {
+        oneWay: {
+          catenary: station[10] as number,
+          noCatenary: station[11] as number,
+        },
+        twoWay: {
+          catenary: station[12] as number,
+          noCatenary: station[13] as number,
+        },
+      },
+      checkpoints: station[14] ? (station[14] as string[]).map(sub => ({ checkpointName: sub, scheduledTrains: [] })) : null,
+      stops: station[15] as string[],
+
+      default: station[16] as boolean,
+      nonPublic: station[17] as boolean,
+      unavailable: station[18] as boolean,
+
+      stationHash: '',
+      maxUsers: 0,
+      currentUsers: 0,
+      dispatcherName: '',
+      dispatcherRate: 0,
+      dispatcherExp: -1,
+      dispatcherId: 0,
+      dispatcherIsSupporter: false,
+      online: false,
+      occupiedTo: 'WOLNA',
+      statusTimestamp: -3,
+      stationTrains: [],
+      scheduledTrains: [],
+      spawns: [],
+    }));
+  }
+
+  @Mutation
+  private updateOnlineStations(updatedStationList: any[]) {
+    this.stationList = this.stationList.reduce((acc, station) => {
+      const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
+      const registeredStation = JSONStationData.find(data => data[0] === station.stationName);
+
+      if (onlineStationData)
+        acc.push({
+          ...station,
+          ...onlineStationData,
+          online: true,
+        });
+      else if (registeredStation)
+        acc.push({
+          ...station,
+          stationProject: '',
+          stationHash: '',
+          maxUsers: 0,
+          currentUsers: 0,
+          dispatcherName: '',
+          dispatcherRate: 0,
+          dispatcherExp: -1,
+          dispatcherId: 0,
+          dispatcherIsSupporter: false,
+          online: false,
+          occupiedTo: 'WOLNA',
+          statusTimestamp: -3,
+          stationTrains: [],
+          scheduledTrains: [],
+          checkpoints: null,
+        });
+
+      return acc;
+    }, [] as Station[]);
+
+    // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy
+    updatedStationList.forEach(updatedStation => {
+      const alreadyInList: any = this.stationList.some(station => station.stationName === updatedStation.stationName);
+
+      if (!alreadyInList) {
+        this.stationList.push({
+          ...updatedStation,
+          scheduledTrains: [],
+          stationTrains: [],
+          subStations: [],
+          online: true,
+          reqLevel: '-1',
+          nonPublic: true,
+        });
+      }
+    });
+
+    this.stationCount = this.stationList.filter(station => station.online).length;
+    this.dataConnectionStatus = Status.Loaded;
+  }
+
+  @Mutation
+  private updateOnlineTrains(updatedTrainList) {
+    this.trainList = updatedTrainList.reduce((acc, updatedTrain) => {
+      const trainData = this.trainList.find(train => train.trainNo === updatedTrain.trainNo);
+
+      if (trainData) acc.push({ ...trainData, ...updatedTrain });
+      else acc.push({ ...updatedTrain });
+
+      return acc;
+    }, [] as Train[]);
+
+    this.trainCount = this.trainList.filter(train => train.online).length;
+    this.dataConnectionStatus = Status.Loaded;
+  }
+
+  @Mutation
+  private updateTimetableData(timetableList: TimetableData[]) {
+    this.stationList = this.stationList.map(station => {
+      const stationName = station.stationName.toLowerCase();
+      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: TimetableData, index) => {
+        if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
+
+        const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
+          const stopName = stop.stopNameRAW.toLowerCase();
+
+          if (stationName === stopName) return true;
+          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
+          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
+          if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName === stopName.split(', podg.')[0]) return true;
+
+          if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
+
+          return false;
+        });
+
+        if (stopInfoIndex == -1) return acc;
+
+        const stopInfo = timetableData.followingStops[stopInfoIndex];
+
+        let stopStatus = '';
+        let stopLabel = '';
+        let stopStatusID = 0;
+        let nearestStop = '';
+
+        if (stopInfo.terminatesHere && stopInfo.confirmed) {
+          stopStatus = 'terminated';
+          stopLabel = 'Skończył bieg';
+          stopStatusID = 5;
+        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
+          stopStatus = 'departed';
+          stopLabel = 'Odprawiony';
+          stopStatusID = 2;
+        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
+          stopStatus = 'departed-away';
+          stopLabel = 'Odjechał';
+          stopStatusID = 4;
+        } else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
+          stopStatus = 'online';
+          stopLabel = 'Na stacji';
+          stopStatusID = 0;
+        } else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
+          stopStatus = 'stopped';
+          stopLabel = 'Postój';
+          stopStatusID = 1;
+        } else if (timetableData.currentStationName != station.stationName) {
+          stopStatus = 'arriving';
+          stopLabel = 'W drodze';
+          stopStatusID = 3;
+        }
+
+        if (stopInfoIndex < timetableData.followingStops.length - 2) {
+          for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
+            const stop = timetableData.followingStops[i];
+
+            if (stop.mainStop && stop.stopType.includes('ph')) {
+              nearestStop = stop.stopNameRAW;
+              break;
+            }
+          }
+        }
+
+        acc.push({
+          trainNo: timetableData.trainNo,
+          driverName: timetableData.driverName,
+          driverId: timetableData.driverId,
+          currentStationName: timetableData.currentStationName,
+          currentStationHash: timetableData.currentStationHash,
+          category: timetableData.category,
+          beginsAt: timetableData.followingStops[0].stopNameRAW,
+          terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
+          nearestStop,
+          stopInfo,
+          stopLabel,
+          stopStatus,
+          stopStatusID,
+        });
+
+        return acc;
+      }, []);
+
+      if (station.checkpoints) {
+        station.checkpoints.forEach(cp => (cp.scheduledTrains.length = 0));
+
+        for (let checkpoint of station.checkpoints) {
+          timetableList.reduce((acc, data) => {
+            data.followingStops
+              .filter(stop => stop.stopNameRAW === checkpoint.checkpointName)
+              .forEach(stopInfo => {
+                // const stopInfo = data.followingStops[stopInfoIndex];
+
+                let stopStatus = '';
+                let stopLabel = '';
+                let nearestStop = '';
+                let stopStatusID = 0;
+
+                if (stopInfo.terminatesHere && stopInfo.confirmed) {
+                  stopStatus = 'terminated';
+                  stopLabel = 'Skończył bieg';
+                  stopStatusID = 5;
+                } else if (!stopInfo.terminatesHere && stopInfo.confirmed && data.currentStationName == station.stationName) {
+                  stopStatus = 'departed';
+                  stopLabel = 'Odprawiony';
+                  stopStatusID = 2;
+                } else if (!stopInfo.terminatesHere && stopInfo.confirmed && data.currentStationName != station.stationName) {
+                  stopStatus = 'departed-away';
+                  stopLabel = 'Odjechał';
+                  stopStatusID = 4;
+                } else if (data.currentStationName == station.stationName && !stopInfo.stopped) {
+                  stopStatus = 'online';
+                  stopLabel = 'Na stacji';
+                  stopStatusID = 0;
+                } else if (data.currentStationName == station.stationName && stopInfo.stopped) {
+                  stopStatus = 'stopped';
+                  stopLabel = 'Postój';
+                  stopStatusID = 1;
+                } else if (data.currentStationName != station.stationName) {
+                  stopStatus = 'arriving';
+                  stopLabel = 'W drodze';
+                  stopStatusID = 3;
+                }
+
+                // for (let i = stopInfoIndex; i < data.followingStops.length - 1; i++){
+                //   const stop = data.followingStops[i];
+
+                //   if (stop.mainStop && stop.stopType.includes("ph")) {
+                //     nearestStop = stop.stopNameRAW;
+                //     break;
+                //   }
+                // }
+
+                checkpoint.scheduledTrains.push({
+                  trainNo: data.trainNo,
+                  driverName: data.driverName,
+                  driverId: data.driverId,
+                  currentStationName: data.currentStationName,
+                  currentStationHash: data.currentStationHash,
+                  category: data.category,
+                  beginsAt: data.followingStops[0].stopNameRAW,
+                  terminatesAt: data.followingStops[data.followingStops.length - 1].stopNameRAW,
+                  stopInfo,
+                  stopLabel,
+                  stopStatus,
+                  nearestStop,
+                  stopStatusID,
+                });
+              });
+
+            return acc;
+          }, []);
+        }
+      }
+
+      return { ...station, scheduledTrains };
+    });
+
+    this.trainList = this.trainList.reduce((acc, train) => {
+      const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
+
+      if (timetableData) {
+        const trainData = this.stationList.find(station => station.stationName === train.currentStationName)?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
+
+        acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || '', stopLabel: trainData?.stopLabel || '' });
+      }
+
+      return acc;
+    }, [] as Train[]);
+
+    this.timetableLoaded = Status.Loaded;
+  }
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c68a957..14f6328 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,233 +1,233 @@
-:root {
-  font-size: 16px;
-}
-
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-
-  &-track {
-    background: #222;
-  }
-
-  &-thumb {
-    border-radius: 1rem;
-    background: #777;
-  }
-}
-
-
-.tooltip {
-  position: relative;
-  
-  & > &-text {
-    display: inline-block;
-    width: 150px;
-
-    padding: .5rem .35rem;
-    background-color: #830000;
-    border-radius: .5rem;
-    
-    display: inline-block;
-    max-width: 150px;
-    
-    font-size: 1em;
-    text-align: center;
-    color: #fff;
-    
-    position: absolute;
-    z-index: 1;
-    visibility: hidden;
-    opacity: 0;
-
-    left: 50%;
-    transform: translate(-50%, calc(-100% - 1rem));
-
-    transition: opacity 0.3s;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: #830000 transparent transparent transparent;
-    }
-  }
-
-  &:hover > &-text {
-    @include smallScreen() {
-      display: none;
-    }
-
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  width: 100%;
-  margin: 0;
-  // font-family: "Open Sans", sans-serif;
-  font-family: "Quicksand", sans-serif;
-
-  overflow-x: hidden;
-}
-
-button,
-input,
-select {
-  // font-family: "Open Sans", sans-serif;
-  font-family: "Quicksand", sans-serif;
-}
-
-input {
-  border: 1px solid white;
-  background: none;
-  color: white;
-  font-size: 1em;
-
-  padding: 0.15em;
-  margin: 0.2em;
-
-  max-width: 55px;
-  outline: none;
-
-  &::placeholder {
-    color: #bebebe;
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-
-  -webkit-tap-highlight-color: transparent;
-}
-
-.default-station {
-  font-weight: bold;
-  color: $accentCol;
-}
-
-.card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 4;
-
-  overflow: auto;
-  background: #262a2e;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 75%;
-  max-width: 750px;
-  max-height: 95%;
-
-  // font-size: calc(0.6rem + 0.5vw);
-  font-size: calc(0.45rem + 0.35vw);
-
-  @include smallScreen {
-    width: 95%;
-  }
-
-  @include bigScreen {
-    font-size: 1.4rem;
-  }
-
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0.3em 0em;
-
-    img {
-      width: 1.6em;
-    }
-
-    cursor: pointer;
-  }
-}
-
-.title {
-  color: $accentCol;
-  font-weight: 600;
-
-  padding: .35em 0;
-
-}
-
-.button {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 0.9em;
-
-  outline: none;
-  padding: 0.35em;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  &.open {
-    color: $accentCol;
-    border: none;
-  }
-
-  &:hover {
-    background: rgba(#e0e0e0, 0.4);
-  }
-}
-
-a {
-  color: white;
-  text-decoration: none;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-    outline: none;
-  }
-}
-
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-
-  &-spaced {
-    justify-content: space-between;
-  }
-
-  &-column {
-    flex-direction: column;
-  }
+:root {
+  font-size: 16px;
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+
+  &-track {
+    background: #222;
+  }
+
+  &-thumb {
+    border-radius: 1rem;
+    background: #777;
+  }
+}
+
+
+.tooltip {
+  position: relative;
+  
+  & > &-text {
+    display: inline-block;
+    width: 150px;
+
+    padding: .5rem .35rem;
+    background-color: #830000;
+    border-radius: .5rem;
+    
+    display: inline-block;
+    max-width: 150px;
+    
+    font-size: 1em;
+    text-align: center;
+    color: #fff;
+    
+    position: absolute;
+    z-index: 1;
+    visibility: hidden;
+    opacity: 0;
+
+    left: 50%;
+    transform: translate(-50%, calc(-100% - 1rem));
+
+    transition: opacity 0.3s;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #830000 transparent transparent transparent;
+    }
+  }
+
+  &:hover > &-text {
+    @include smallScreen() {
+      display: none;
+    }
+
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  // font-family: "Open Sans", sans-serif;
+  font-family: "Quicksand", sans-serif;
+
+  overflow-x: hidden;
+}
+
+button,
+input,
+select {
+  // font-family: "Open Sans", sans-serif;
+  font-family: "Quicksand", sans-serif;
+}
+
+input {
+  border: 1px solid white;
+  background: none;
+  color: white;
+  font-size: 1em;
+
+  padding: 0.15em;
+  margin: 0.2em;
+
+  max-width: 55px;
+  outline: none;
+
+  &::placeholder {
+    color: #bebebe;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+
+  -webkit-tap-highlight-color: transparent;
+}
+
+.default-station {
+  font-weight: bold;
+  color: $accentCol;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+
+  overflow: auto;
+  background: #262a2e;
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  width: 75%;
+  max-width: 750px;
+  max-height: 95%;
+
+  // font-size: calc(0.6rem + 0.5vw);
+  font-size: calc(0.45rem + 0.35vw);
+
+  @include smallScreen {
+    width: 95%;
+  }
+
+  @include bigScreen {
+    font-size: 1.4rem;
+  }
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.3em 0em;
+
+    img {
+      width: 1.6em;
+    }
+
+    cursor: pointer;
+  }
+}
+
+.title {
+  color: $accentCol;
+  font-weight: 600;
+
+  padding: .35em 0;
+
+}
+
+.button {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.9em;
+
+  outline: none;
+  padding: 0.35em;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  &.open {
+    color: $accentCol;
+    border: none;
+  }
+
+  &:hover {
+    background: rgba(#e0e0e0, 0.4);
+  }
+}
+
+a {
+  color: white;
+  text-decoration: none;
+
+  transition: color 0.3s;
+
+  &:hover,
+  &:focus {
+    color: $accentCol;
+    border: none;
+    outline: none;
+  }
+}
+
+ul {
+  padding: 0;
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  &-spaced {
+    justify-content: space-between;
+  }
+
+  &-column {
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/scenery_status.scss b/src/styles/scenery_status.scss
index a990bf3..6ec29eb 100644
--- a/src/styles/scenery_status.scss
+++ b/src/styles/scenery_status.scss
@@ -1,51 +1,51 @@
-$free: #8a8a8a;
-$ending: #e6c300;
-$no-limit: #0077ae;
-$unav: #ff3d5d;
-$brb: #e6a100;
-$no-space: #222;
-$taken: #09a116;
-
-.status {
-  border-radius: 1rem;
-  font-weight: 500;
-
-  font-size: 0.9em;
-  padding: 0.2em 0.45em;
-
-  background-color: $taken;
-
-  &.free {
-    background-color: $free;
-    font-size: 0.95em;
-  }
-
-  &.ending {
-    background-color: $ending;
-    color: black;
-    font-size: 0.9em;
-  }
-
-  &.no-limit {
-    background-color: $no-limit;
-    font-size: 0.85em;
-  }
-
-  &.not-signed,
-  &.unavailable {
-    background-color: $unav;
-    font-size: 0.8em;
-  }
-
-  &.brb {
-    background-color: $brb;
-    color: black;
-    font-size: 0.95em;
-  }
-
-  &.no-space {
-    background-color: $no-space;
-    color: white;
-    font-size: 0.85em;
-  }
+$free: #8a8a8a;
+$ending: #e6c300;
+$no-limit: #0077ae;
+$unav: #ff3d5d;
+$brb: #e6a100;
+$no-space: #222;
+$taken: #09a116;
+
+.status {
+  border-radius: 1rem;
+  font-weight: 500;
+
+  font-size: 0.9em;
+  padding: 0.2em 0.45em;
+
+  background-color: $taken;
+
+  &.free {
+    background-color: $free;
+    font-size: 0.95em;
+  }
+
+  &.ending {
+    background-color: $ending;
+    color: black;
+    font-size: 0.9em;
+  }
+
+  &.no-limit {
+    background-color: $no-limit;
+    font-size: 0.85em;
+  }
+
+  &.not-signed,
+  &.unavailable {
+    background-color: $unav;
+    font-size: 0.8em;
+  }
+
+  &.brb {
+    background-color: $brb;
+    color: black;
+    font-size: 0.95em;
+  }
+
+  &.no-space {
+    background-color: $no-space;
+    color: white;
+    font-size: 0.85em;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/user_badge.scss b/src/styles/user_badge.scss
index e0395a4..4bfa106 100644
--- a/src/styles/user_badge.scss
+++ b/src/styles/user_badge.scss
@@ -1,54 +1,54 @@
-$no-timetable: #aaa;
-$departed: springgreen;
-$stopped: #ffa600;
-$online: gold;
-$terminated: red;
-$disconnected: slategray;
-
-
-.user-badge {
-    border: 2px solid white;
-    z-index: 4;
-
-    margin-top: 0.5rem;
-    margin-right: 0.5rem;
-
-    border-radius: 0.7em;
-    padding: 0.3em 0.5em;
-    font-size: 0.95em;
-
-    &.borderless {
-        border: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    &.no-timetable {
-        border: 2px solid $no-timetable;
-
-        a {
-            color: $no-timetable;
-            pointer-events: none;
-        }
-    }
-
-    &.departed {
-        border: 2px solid $departed;
-    }
-
-    &.stopped {
-        border: 2px solid $stopped;
-    }
-
-    &.online {
-        border: 2px solid $online;
-    }
-
-    &.terminated {
-        border: 2px solid $terminated;
-    }
-
-    &.disconnected {
-        border: 1px solid $disconnected;
-    }
+$no-timetable: #aaa;
+$departed: springgreen;
+$stopped: #ffa600;
+$online: gold;
+$terminated: red;
+$disconnected: slategray;
+
+
+.user-badge {
+    border: 2px solid white;
+    z-index: 4;
+
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+
+    border-radius: 0.7em;
+    padding: 0.3em 0.5em;
+    font-size: 0.95em;
+
+    &.borderless {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &.no-timetable {
+        border: 2px solid $no-timetable;
+
+        a {
+            color: $no-timetable;
+            pointer-events: none;
+        }
+    }
+
+    &.departed {
+        border: 2px solid $departed;
+    }
+
+    &.stopped {
+        border: 2px solid $stopped;
+    }
+
+    &.online {
+        border: 2px solid $online;
+    }
+
+    &.terminated {
+        border: 2px solid $terminated;
+    }
+
+    &.disconnected {
+        border: 1px solid $disconnected;
+    }
 }
\ No newline at end of file
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index e535693..b6f4287 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -1,148 +1,148 @@
-<template>
-  <div class="scenery-view">
-    <div
-      class="scenery-offline"
-      v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
-    >
-      Ups! Nie znaleziono danej stacji bądź jest ona offline!
-      <button class="button">
-        <router-link to="/">Wróć na stronę główną</router-link>
-      </button>
-    </div>
-
-    <div class="scenery-wrapper" v-if="stationInfo">
-      <SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
-
-      <SceneryTimetable
-        :stationInfo="stationInfo"
-        :timetableOnly="timetableOnly"
-        :dataStatus="timetableDataStatus"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-
-import { Getter } from "vuex-class";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
-import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
-
-@Component({
-  components: { SceneryInfo, SceneryTimetable },
-})
-export default class SceneryView extends Vue {
-  @Getter("getStationList") storeStationList!: Station[];
-  @Getter("getTimetableDataStatus") timetableDataStatus!: number;
-  @Getter("getDataStatus") dataStatus!: number;
-
-  timetableOnly: boolean = false;
-
-  activated() {
-    this.timetableOnly =
-      this.$route.query["timetable_only"] == "1" ? true : false;
-  }
-
-  get currentPath() {
-    return this.$route.path;
-  }
-
-  // get dataLoaded() {
-  //   return this.storeStationList ? true : false;
-  // }
-
-  get stationInfo(): Station | null {
-    if (!this.$route.query.hash || !this.storeStationList) return null;
-
-    const info =
-      this.storeStationList.find(
-        (station) => station.stationHash === this.$route.query.hash.toString()
-      ) || null;
-
-    return info;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../styles/responsive.scss";
-@import "../styles/variables.scss";
-
-h3 {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
-}
-
-.scenery {
-  &-view {
-    min-height: 100%;
-
-    display: flex;
-    justify-content: center;
-
-    font-size: calc(0.5rem + 0.65vw);
-
-    @include bigScreen() {
-      font-size: 1.25rem;
-      align-items: flex-start;
-    }
-
-    @include smallScreen {
-      font-size: calc(0.5rem + 1vw);
-    }
-  }
-
-  &-offline {
-    align-self: center;
-    font-size: 2em;
-    text-align: center;
-    padding: 0 1em;
-
-    color: $warningCol;
-
-    display: inline-block;
-
-    .button {
-      margin: 1rem auto;
-      font-size: 0.85em;
-    }
-  }
-
-  &-wrapper {
-    // background: #555;
-    max-width: 950px;
-    width: 75%;
-
-    @include smallScreen {
-      width: 95%;
-    }
-
-    // max-height: 100vh;
-    // overflow: auto;
-
-    background: #333;
-    padding: 1em;
-    margin: 1rem 0;
-
-    border-radius: 1.5em;
-
-    text-align: center;
-  }
-}
+<template>
+  <div class="scenery-view">
+    <div
+      class="scenery-offline"
+      v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
+    >
+      Ups! Nie znaleziono danej stacji bądź jest ona offline!
+      <button class="button">
+        <router-link to="/">Wróć na stronę główną</router-link>
+      </button>
+    </div>
+
+    <div class="scenery-wrapper" v-if="stationInfo">
+      <SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
+
+      <SceneryTimetable
+        :stationInfo="stationInfo"
+        :timetableOnly="timetableOnly"
+        :dataStatus="timetableDataStatus"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+import { Getter } from "vuex-class";
+
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
+import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
+
+@Component({
+  components: { SceneryInfo, SceneryTimetable },
+})
+export default class SceneryView extends Vue {
+  @Getter("getStationList") storeStationList!: Station[];
+  @Getter("getTimetableDataStatus") timetableDataStatus!: number;
+  @Getter("getDataStatus") dataStatus!: number;
+
+  timetableOnly: boolean = false;
+
+  activated() {
+    this.timetableOnly =
+      this.$route.query["timetable_only"] == "1" ? true : false;
+  }
+
+  get currentPath() {
+    return this.$route.path;
+  }
+
+  // get dataLoaded() {
+  //   return this.storeStationList ? true : false;
+  // }
+
+  get stationInfo(): Station | null {
+    if (!this.$route.query.hash || !this.storeStationList) return null;
+
+    const info =
+      this.storeStationList.find(
+        (station) => station.stationHash === this.$route.query.hash.toString()
+      ) || null;
+
+    return info;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/responsive.scss";
+@import "../styles/variables.scss";
+
+h3 {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+
+  img {
+    width: 1.1em;
+    margin-left: 0.5em;
+  }
+}
+
+.scenery {
+  &-view {
+    min-height: 100%;
+
+    display: flex;
+    justify-content: center;
+
+    font-size: calc(0.5rem + 0.65vw);
+
+    @include bigScreen() {
+      font-size: 1.25rem;
+      align-items: flex-start;
+    }
+
+    @include smallScreen {
+      font-size: calc(0.5rem + 1vw);
+    }
+  }
+
+  &-offline {
+    align-self: center;
+    font-size: 2em;
+    text-align: center;
+    padding: 0 1em;
+
+    color: $warningCol;
+
+    display: inline-block;
+
+    .button {
+      margin: 1rem auto;
+      font-size: 0.85em;
+    }
+  }
+
+  &-wrapper {
+    // background: #555;
+    max-width: 950px;
+    width: 75%;
+
+    @include smallScreen {
+      width: 95%;
+    }
+
+    // max-height: 100vh;
+    // overflow: auto;
+
+    background: #333;
+    padding: 1em;
+    margin: 1rem 0;
+
+    border-radius: 1.5em;
+
+    text-align: center;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 34aab7f..8ed1560 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -1,373 +1,373 @@
-<template>
-  <div class="stations_view">
-    <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
-
-    <div class="stations_wrapper">
-      <div class="stations_body">
-        <div class="body_bar">
-          <div class="bar_actions">
-            <button
-              class="action-btn"
-              :class="{ open: filterCardOpen }"
-              @click="() => toggleCardsState('filter')"
-            >
-              <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
-              <p>FILTRY</p>
-            </button>
-
-            <button class="action-btn" @click="toggleModal">
-              <img :src="dolarIcon" alt="icon-dolar" />
-
-              <p>WESPRZYJ</p>
-            </button>
-          </div>
-
-          <div class="bar_indicators">
-            <transition name="indicator-anim">
-              <span
-                class="indicator_scenery-data"
-                v-if="data.dataConnectionStatus < 2"
-                :class="dataStatusClass"
-              >
-                <img :src="trainIcon" alt="icon-train" />
-              </span>
-            </transition>
-
-            <transition name="indicator-anim">
-              <span
-                class="indicator_timetable-data"
-                v-if="data.timetableDataStatus < 2"
-                :class="timetableDataStatusClass"
-              >
-                <img :src="timetableIcon" alt="icon-timetable" />
-              </span>
-            </transition>
-          </div>
-        </div>
-
-        <div class="body_table">
-          <StationTable
-            :stations="computedStations"
-            :sorterActive="filterManager.getSorter()"
-            :setFocusedStation="setFocusedStation"
-            :changeSorter="changeSorter"
-          />
-        </div>
-      </div>
-    </div>
-
-    <transition name="card-anim">
-      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
-    </transition>
-
-    <transition name="card-anim">
-      <FilterCard
-        v-if="filterCardOpen"
-        :exit="() => toggleCardsState('filter')"
-        @changeFilterValue="changeFilterValue"
-        @resetFilters="resetFilters"
-      />
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-import { Getter } from "vuex-class";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import StorageManager from "@/scripts/storageManager";
-import StationFilterManager from "@/scripts/stationFilterManager";
-
-import inputData from "@/data/options.json";
-
-import StationTable from "@/components/StationsView/StationTable.vue";
-import StationCard from "@/components/StationsView/StationCard.vue";
-import FilterCard from "@/components/StationsView/FilterCard.vue";
-
-import DonationModal from "@/components/Global/DonationModal.vue";
-
-@Component({
-  components: {
-    StationCard,
-    StationTable,
-    FilterCard,
-    DonationModal,
-  },
-})
-export default class StationsView extends Vue {
-  STORAGE_KEY: string = "options_saved";
-  STORAGE_MODAL: string = "modal";
-
-  trainIcon: string = require("@/assets/icon-train.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  dolarIcon: string = require("@/assets/icon-dolar.svg");
-
-  filterManager: StationFilterManager = new StationFilterManager();
-
-  focusedStationName: string = "";
-  filterCardOpen: boolean = false;
-  modalHidden: boolean = true;
-
-  inputs = inputData;
-
-  @Getter("getStationList") stationList!: Station[];
-  @Getter("getAllData") data;
-
-  get dataStatusClass() {
-    if (this.data.dataConnectionStatus == 0) return "loading";
-    if (this.data.dataConnectionStatus == 1) return "error";
-
-    return "success";
-  }
-
-  get timetableDataStatusClass() {
-    if (this.data.timetableDataStatus == 0) return "loading";
-    if (this.data.timetableDataStatus == 1) return "error";
-
-    return "success";
-  }
-
-  mounted() {
-    this.initializeOptionsStorage();
-    // this.initializeModalStorage();
-
-    window.addEventListener("keydown", (e: KeyboardEvent) => {
-      if (e.keyCode == 27 && this.focusedStationName != "") {
-        this.focusedStationName = "";
-      }
-    });
-  }
-
-  initializeOptionsStorage() {
-    if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
-
-    this.inputs.options.forEach((option) => {
-      const value = StorageManager.getBooleanValue(option.name);
-
-      this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
-      option.value = value;
-    });
-
-    this.inputs.sliders.forEach((slider) => {
-      const value = StorageManager.getNumericValue(slider.name);
-
-      this.changeFilterValue({ name: slider.name, value });
-      slider.value = value;
-    });
-  }
-
-  initializeModalStorage() {
-    if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
-      this.modalHidden = StorageManager.getBooleanValue(
-        `${this.STORAGE_MODAL}_hidden`
-      );
-  }
-
-  toggleModal() {
-    this.modalHidden = !this.modalHidden;
-
-    StorageManager.setBooleanValue(
-      `${this.STORAGE_MODAL}_hidden`,
-      this.modalHidden
-    );
-  }
-
-  toggleCardsState(name: string): void {
-    if (name == "filter") {
-      this.filterCardOpen = !this.filterCardOpen;
-    }
-  }
-
-  changeSorter(index: number) {
-    this.filterManager.changeSorter(index);
-  }
-
-  changeFilterValue(filter: { name: string; value: number }) {
-    this.filterManager.changeFilterValue(filter);
-  }
-
-  resetFilters() {
-    this.filterManager.resetFilters();
-  }
-
-  get computedStations() {
-    return this.filterManager.filteredStationList(this.stationList);
-  }
-
-  closeCard() {
-    this.focusedStationName = "";
-  }
-
-  setFocusedStation(name: string) {
-    if (this.focusedStationName == name) this.focusedStationName = "";
-    else this.focusedStationName = name;
-  }
-
-  get focusedStationInfo() {
-    return this.computedStations.find(
-      (station) => station.stationName === this.focusedStationName
-    );
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../styles/variables.scss";
-@import "../styles/responsive.scss";
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translate(-45%, -50%);
-    opacity: 0;
-  }
-}
-
-.indicator-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-.stations_view {
-  position: relative;
-
-  padding: 1rem 0;
-  min-height: 100%;
-
-  font-size: calc(0.6rem + 0.9vw);
-}
-
-.stations_wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.stations_body {
-  margin: 0 auto;
-  overflow: auto;
-
-  & > .body_bar {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.bar_actions {
-  display: flex;
-
-  button {
-    margin-right: 0.5em;
-  }
-}
-
-.bar_indicators {
-  display: flex;
-  align-items: flex-end;
-
-  > span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 1.2em;
-    height: 1.2em;
-
-    margin-left: 0.5em;
-
-    // background-color: #e68e00;
-    border-radius: 0.5em 0.5em 0 0;
-
-    &.loading {
-      background-color: $accentCol;
-    }
-
-    &.error {
-      background-color: $errorCol;
-    }
-
-    &.success {
-      background-color: $secondaryCol;
-    }
-
-    & > img {
-      width: 0.9em;
-      animation: blinkAnim 2s ease-in-out infinite forwards;
-    }
-
-    @include smallScreen() {
-      width: 1.5em;
-      height: 1.5em;
-    }
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 0.65em;
-
-  padding: 0.3em;
-
-  outline: none;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  img {
-    width: 1.3em;
-    margin-right: 0.2em;
-  }
-
-  p {
-    font-size: 1em;
-    overflow: hidden;
-
-    transition: max-width 0.35s ease-in-out;
-  }
-
-  &:hover {
-    color: $accentCol;
-    background: rgba(#e0e0e0, 0.4);
-  }
-
-  &.open {
-    color: $accentCol;
-  }
-
-  @include smallScreen() {
-    font-size: 0.75rem;
-  }
-}
-
-@keyframes blinkAnim {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
-}
-</style>
+<template>
+  <div class="stations_view">
+    <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
+
+    <div class="stations_wrapper">
+      <div class="stations_body">
+        <div class="body_bar">
+          <div class="bar_actions">
+            <button
+              class="action-btn"
+              :class="{ open: filterCardOpen }"
+              @click="() => toggleCardsState('filter')"
+            >
+              <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
+              <p>FILTRY</p>
+            </button>
+
+            <button class="action-btn" @click="toggleModal">
+              <img :src="dolarIcon" alt="icon-dolar" />
+
+              <p>WESPRZYJ</p>
+            </button>
+          </div>
+
+          <div class="bar_indicators">
+            <transition name="indicator-anim">
+              <span
+                class="indicator_scenery-data"
+                v-if="data.dataConnectionStatus < 2"
+                :class="dataStatusClass"
+              >
+                <img :src="trainIcon" alt="icon-train" />
+              </span>
+            </transition>
+
+            <transition name="indicator-anim">
+              <span
+                class="indicator_timetable-data"
+                v-if="data.timetableDataStatus < 2"
+                :class="timetableDataStatusClass"
+              >
+                <img :src="timetableIcon" alt="icon-timetable" />
+              </span>
+            </transition>
+          </div>
+        </div>
+
+        <div class="body_table">
+          <StationTable
+            :stations="computedStations"
+            :sorterActive="filterManager.getSorter()"
+            :setFocusedStation="setFocusedStation"
+            :changeSorter="changeSorter"
+          />
+        </div>
+      </div>
+    </div>
+
+    <transition name="card-anim">
+      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
+    </transition>
+
+    <transition name="card-anim">
+      <FilterCard
+        v-if="filterCardOpen"
+        :exit="() => toggleCardsState('filter')"
+        @changeFilterValue="changeFilterValue"
+        @resetFilters="resetFilters"
+      />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+import { Getter } from "vuex-class";
+
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import StorageManager from "@/scripts/storageManager";
+import StationFilterManager from "@/scripts/stationFilterManager";
+
+import inputData from "@/data/options.json";
+
+import StationTable from "@/components/StationsView/StationTable.vue";
+import StationCard from "@/components/StationsView/StationCard.vue";
+import FilterCard from "@/components/StationsView/FilterCard.vue";
+
+import DonationModal from "@/components/Global/DonationModal.vue";
+
+@Component({
+  components: {
+    StationCard,
+    StationTable,
+    FilterCard,
+    DonationModal,
+  },
+})
+export default class StationsView extends Vue {
+  STORAGE_KEY: string = "options_saved";
+  STORAGE_MODAL: string = "modal";
+
+  trainIcon: string = require("@/assets/icon-train.svg");
+  timetableIcon: string = require("@/assets/icon-timetable.svg");
+  dolarIcon: string = require("@/assets/icon-dolar.svg");
+
+  filterManager: StationFilterManager = new StationFilterManager();
+
+  focusedStationName: string = "";
+  filterCardOpen: boolean = false;
+  modalHidden: boolean = true;
+
+  inputs = inputData;
+
+  @Getter("getStationList") stationList!: Station[];
+  @Getter("getAllData") data;
+
+  get dataStatusClass() {
+    if (this.data.dataConnectionStatus == 0) return "loading";
+    if (this.data.dataConnectionStatus == 1) return "error";
+
+    return "success";
+  }
+
+  get timetableDataStatusClass() {
+    if (this.data.timetableDataStatus == 0) return "loading";
+    if (this.data.timetableDataStatus == 1) return "error";
+
+    return "success";
+  }
+
+  mounted() {
+    this.initializeOptionsStorage();
+    // this.initializeModalStorage();
+
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.keyCode == 27 && this.focusedStationName != "") {
+        this.focusedStationName = "";
+      }
+    });
+  }
+
+  initializeOptionsStorage() {
+    if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
+
+    this.inputs.options.forEach((option) => {
+      const value = StorageManager.getBooleanValue(option.name);
+
+      this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
+      option.value = value;
+    });
+
+    this.inputs.sliders.forEach((slider) => {
+      const value = StorageManager.getNumericValue(slider.name);
+
+      this.changeFilterValue({ name: slider.name, value });
+      slider.value = value;
+    });
+  }
+
+  initializeModalStorage() {
+    if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
+      this.modalHidden = StorageManager.getBooleanValue(
+        `${this.STORAGE_MODAL}_hidden`
+      );
+  }
+
+  toggleModal() {
+    this.modalHidden = !this.modalHidden;
+
+    StorageManager.setBooleanValue(
+      `${this.STORAGE_MODAL}_hidden`,
+      this.modalHidden
+    );
+  }
+
+  toggleCardsState(name: string): void {
+    if (name == "filter") {
+      this.filterCardOpen = !this.filterCardOpen;
+    }
+  }
+
+  changeSorter(index: number) {
+    this.filterManager.changeSorter(index);
+  }
+
+  changeFilterValue(filter: { name: string; value: number }) {
+    this.filterManager.changeFilterValue(filter);
+  }
+
+  resetFilters() {
+    this.filterManager.resetFilters();
+  }
+
+  get computedStations() {
+    return this.filterManager.filteredStationList(this.stationList);
+  }
+
+  closeCard() {
+    this.focusedStationName = "";
+  }
+
+  setFocusedStation(name: string) {
+    if (this.focusedStationName == name) this.focusedStationName = "";
+    else this.focusedStationName = name;
+  }
+
+  get focusedStationInfo() {
+    return this.computedStations.find(
+      (station) => station.stationName === this.focusedStationName
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/variables.scss";
+@import "../styles/responsive.scss";
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.indicator-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.stations_view {
+  position: relative;
+
+  padding: 1rem 0;
+  min-height: 100%;
+
+  font-size: calc(0.6rem + 0.9vw);
+}
+
+.stations_wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.stations_body {
+  margin: 0 auto;
+  overflow: auto;
+
+  & > .body_bar {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.bar_actions {
+  display: flex;
+
+  button {
+    margin-right: 0.5em;
+  }
+}
+
+.bar_indicators {
+  display: flex;
+  align-items: flex-end;
+
+  > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 1.2em;
+    height: 1.2em;
+
+    margin-left: 0.5em;
+
+    // background-color: #e68e00;
+    border-radius: 0.5em 0.5em 0 0;
+
+    &.loading {
+      background-color: $accentCol;
+    }
+
+    &.error {
+      background-color: $errorCol;
+    }
+
+    &.success {
+      background-color: $secondaryCol;
+    }
+
+    & > img {
+      width: 0.9em;
+      animation: blinkAnim 2s ease-in-out infinite forwards;
+    }
+
+    @include smallScreen() {
+      width: 1.5em;
+      height: 1.5em;
+    }
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.65em;
+
+  padding: 0.3em;
+
+  outline: none;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  img {
+    width: 1.3em;
+    margin-right: 0.2em;
+  }
+
+  p {
+    font-size: 1em;
+    overflow: hidden;
+
+    transition: max-width 0.35s ease-in-out;
+  }
+
+  &:hover {
+    color: $accentCol;
+    background: rgba(#e0e0e0, 0.4);
+  }
+
+  &.open {
+    color: $accentCol;
+  }
+
+  @include smallScreen() {
+    font-size: 0.75rem;
+  }
+}
+
+@keyframes blinkAnim {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index 61f9487..4469712 100644
--- a/src/views/TimetableView.vue
+++ b/src/views/TimetableView.vue
@@ -1,770 +1,770 @@
-<template>
-  <div class="timetable-view" v-if="stationInfo">
-    <div class="view-content">
-      <div class="timetable-options">
-        <div
-          class="option"
-          v-for="(option, key) in options"
-          :key="key"
-          :class="{ checked: option.state }"
-          @click="setOption(key, !option.state)"
-        >{{ option.name }}</div>
-      </div>
-
-      <div class="timetable-wrapper">
-        <div class="timetable-title">
-          <b>{{ stationInfo.stationName.toUpperCase() }}</b>
-        </div>
-
-        <div class="timetable-header">
-          <span>DO STACJI</span>
-          <span>PRZEZ</span>
-          <span>POCIĄG</span>
-          <span>PLAN. ODJAZD</span>
-          <span>OPÓŹNIENIE</span>
-        </div>
-
-        <div class="timetable-body">
-          <div class="timetable-item" v-for="timetable in computedRows" :key="timetable.trainNo">
-            <div class="row-bar"></div>
-            <div class="timetable-row">
-              <span class="row-destination">
-                <div class="letter-wrapper">
-                  <div v-for="(letter, j) in timetable.destinationTable" :key="j" class="letter">
-                    <transition name="roll-anim" mode="out-in">
-                      <span :key="letter">{{ letter }}</span>
-                    </transition>
-                  </div>
-                </div>
-              </span>
-
-              <span class="row-next" ref="next">
-                <div v-for="(letter, j) in timetable.nearestStopTable" :key="j" class="letter">
-                  <transition name="roll-anim" mode="out-in">
-                    <span :key="letter">{{ letter }}</span>
-                  </transition>
-                </div>
-              </span>
-
-              <span class="row-type">
-                <div class="letter-wrapper">
-                  <span class="letter" v-for="(letter, j) in timetable.trainCategoryTable" :key="j">
-                    <transition name="roll-anim" mode="out-in">
-                      <span :key="letter">{{ letter }}</span>
-                    </transition>
-                  </span>
-                </div>
-
-                <div class="letter-wrapper">
-                  <span class="letter" v-for="(num, j) in timetable.trainNumberTable" :key="j+3">
-                    <transition name="roll-anim" mode="out-in">
-                      <span :key="num">{{ num }}</span>
-                    </transition>
-                  </span>
-                </div>
-              </span>
-
-              <span class="row-time">
-                <div class="letter-wrapper">
-                  <span class="letter" v-for="(num, h) in timetable.departureHoursTable" :key="h">
-                    <transition name="roll-anim" mode="out-in">
-                      <span :key="num">{{ num }}</span>
-                    </transition>
-                  </span>
-
-                  <span>:</span>
-
-                  <span
-                    class="letter"
-                    v-for="(num, i) in timetable.departureMinutesTable"
-                    :key="i + 5"
-                  >
-                    <transition name="roll-anim" mode="out-in">
-                      <span :key="num">{{ num }}</span>
-                    </transition>
-                  </span>
-                </div>
-              </span>
-
-              <span class="row-delay">
-                <transition name="roll-anim" mode="out-in">
-                  <span
-                    :key="timetable.delay"
-                  >{{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}</span>
-                </transition>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- <div v-if="stationInfo.online">
-      {{ stationInfo.stationName }}
-    </div>
-    <div v-else>Stacja offline!</div>-->
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { Getter } from "vuex-class";
-import { Howl } from "howler";
-
-import Station from "@/scripts/interfaces/Station";
-import Timetable from "@/scripts/interfaces/Timetable";
-
-interface TimetableRow {
-  destinationTable: string[];
-  destinationString: string;
-
-  nearestStopTable: string[];
-  nearestStopString: string;
-
-  departureHoursTable: string[];
-  departureHoursString: string;
-
-  departureMinutesTable: string[];
-  departureMinutesString: string;
-
-  trainNumberTable: string[];
-  trainNumberString: string;
-
-  trainCategoryTable: string[];
-  trainCategoryString: string;
-
-  category: string;
-  number: number;
-
-  delay: number;
-  delayPlate: string;
-
-  departureTimestamp: number;
-  arrivalTimestamp: number;
-}
-
-const sound = new Howl({
-  src: require("@/assets/sound.wav"),
-  loop: true,
-  autoplay: false,
-});
-
-let soundPlaying = false;
-
-const filteredNames = [
-  ["ALEKSANDRÓW KUJAWSKI", "ALEKSDR KUJ."],
-  ["GDAŃSK GŁÓWNY", "GDAŃSK GŁ."],
-  ["GDAŃSK POŁUDNIOWY", "GDAŃSK PŁD."],
-  ["ARKADIA ZDRÓJ", "ARKADIA ZDR."],
-  ["GRABÓW MIASTO", "GRABÓW M."],
-  ["ZGIERZ KONTREWERS", "ZGIERZ KONTR."],
-  ["BUCZ WILEŃSKI", "BUCZ WIL."],
-  ["SZKLANA PORĘBA", "SZKLANA POR."],
-  ["TARNOWO GÓRNE", "TARNOWO G."],
-  ["BARGOWICE ZACHÓD", "BARGOWICE Z."],
-];
-
-const letterSet: string[] = Array.from(
-  " -.,/AĄBCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWXYZŹŻ"
-);
-
-const numberSet: string[] = Array.from(" 0123456789");
-
-const delaySet: string[] = [
-  "5 min",
-  "10 min",
-  "15 min",
-  "20 min",
-  "25 min",
-  "30 min",
-  "35 min",
-  "40 min",
-  "45 min",
-  "50 min",
-  "55 min",
-  "60 min",
-  ">60 min",
-];
-
-let globalID = 0;
-let letterSeekArray: {
-  currentRowIndex: number;
-  letterIndex: number;
-  currentChar: string;
-  finalChar: string;
-  arrayName: string;
-  numeric: boolean;
-  id: number;
-}[] = [];
-
-let plateSeekArray: {
-  currentRowIndex: number;
-  currentPlate: string;
-  wantedPlate: string;
-}[] = [];
-
-let nextRefreshTime = 0;
-
-@Component
-export default class TimetableView extends Vue {
-  @Getter("getStationList") stationList!: Station[];
-
-  maxRows = 5;
-
-  options = {
-    excludeCargo: { name: "Tylko pasażerskie", state: false },
-    playSounds: { name: "Dźwięki", state: false },
-  };
-
-  timetableRows: TimetableRow[] = new Array(this.maxRows)
-    .fill(0)
-    .map((row) => ({
-      origin: new Array(13).fill(" "),
-
-      destinationTable: new Array(13).fill(" "),
-      destinationString: "",
-
-      nearestStopTable: new Array(13).fill(" "),
-      nearestStopString: "",
-
-      departureHoursTable: new Array(2).fill(" "),
-      departureHoursString: "",
-
-      departureMinutesTable: new Array(2).fill(" "),
-      departureMinutesString: "",
-
-      trainNumberTable: new Array(6).fill(" "),
-      trainNumberString: "",
-
-      trainCategoryTable: new Array(3).fill(" "),
-      trainCategoryString: "",
-
-      category: "",
-      number: 0,
-
-      delay: 0,
-      delayPlate: "",
-
-      departureTimestamp: 0,
-      arrivalTimestamp: 0,
-    }));
-
-  mounted() {
-    window.requestAnimationFrame(this.findNextLetters);
-  }
-
-  deactivated() {
-    this.resetTimetable();
-    letterSeekArray.length = 0;
-  }
-
-  /* Options */
-  setOption(optionKey: string, optionValue: any) {
-    this.$set(this.options[optionKey], "state", optionValue);
-
-    // this.options[optionKey].state = optionValue;
-  }
-
-  /* ===== */
-
-  resetTimetable(indexFrom: number = 0, forceClear: boolean = false) {
-    if (indexFrom > this.maxRows - 1) return;
-
-    console.log("reset");
-
-    for (let i = indexFrom; i < this.timetableRows.length; i++) {
-      const currentRow = this.timetableRows[i];
-
-      for (let propName in currentRow) {
-        let propValue = currentRow[propName];
-
-        switch (typeof propValue) {
-          case "object":
-            propValue = propValue.map((v) => " ");
-            this.addToSeek(i, propName, propValue, false);
-            this.$set(this.timetableRows[i], propName, propValue);
-            break;
-
-          case "string":
-            propValue = "";
-            this.$set(this.timetableRows[i], propName, propValue);
-            break;
-
-          case "number":
-            propValue = 0;
-            this.$set(this.timetableRows[i], propName, propValue);
-
-            break;
-        }
-      }
-    }
-  }
-
-  addToSeek(
-    currentRowIndex: number,
-    arrayName: string,
-    next: string | string[],
-    numeric: boolean
-  ) {
-    // globalID++;
-
-    this.timetableRows[currentRowIndex][arrayName].forEach((letter, i) => {
-      letterSeekArray.push({
-        currentRowIndex,
-        letterIndex: i,
-        currentChar: letter,
-        finalChar: next[i] ? next[i] : numeric ? "0" : " ",
-        arrayName,
-        numeric,
-        id: ++globalID,
-      });
-    });
-  }
-
-  get stationInfo(): Station | null {
-    if (!this.$route.query.station) return null;
-
-    const station = this.stationList.find(
-      (station) => station.stationHash === this.$route.query.station
-    );
-
-    return station || null;
-  }
-
-  updateRows(info: Station | null = this.stationInfo) {
-    if (!info) return;
-    if (info.scheduledTrains.length == 0) return;
-
-    console.log("update");
-
-    const scheduledTrains = info.scheduledTrains
-      .filter((train) => {
-        if (train.stopInfo.departureTimestamp == 0) return false;
-
-        if (this.options.excludeCargo.state) {
-          if (train.trainNo.toString().length === 5) return true;
-          return false;
-        }
-
-        // if (!this.options.excludeCargo.state) return true;
-
-        // const trainNumberLength = train.trainNo.toString().length;
-
-        // if (trainNumberLength === 4 || trainNumberLength === 5) return true;
-
-        return true;
-      })
-      .sort((a, b) => {
-        if (a.stopInfo.departureTimestamp >= b.stopInfo.departureTimestamp)
-          return 1;
-
-        return -1;
-      });
-
-    let currentRowIndex = 0;
-    for (let train of scheduledTrains) {
-      if (train.stopInfo.confirmed) continue;
-      if (currentRowIndex > this.maxRows - 1) break;
-
-      const currentRow = this.timetableRows[currentRowIndex];
-
-      const departureHours = new Array(2)
-        .fill("0")
-        .map((num, i) => train.stopInfo.departureTimeString[i]);
-
-      const departureMinutes = new Array(2)
-        .fill("0")
-        .map((num, i) => train.stopInfo.departureTimeString[i + 3]);
-
-      const trainNumberString = train.trainNo.toString();
-
-      let destination = train.terminatesAt.toUpperCase();
-      let nearestStop = train.nearestStop.toUpperCase();
-
-      for (let name of filteredNames) {
-        if (name[0] === destination) destination = name[1];
-
-        if (name[0] === nearestStop) nearestStop = name[1];
-      }
-
-      if (currentRow.destinationString !== destination) {
-        console.log(destination);
-
-        this.addToSeek(currentRowIndex, "destinationTable", destination, false);
-      }
-
-      if (currentRow.nearestStopString !== nearestStop) {
-        this.addToSeek(currentRowIndex, "nearestStopTable", nearestStop, false);
-      }
-
-      if (currentRow.departureHoursString != departureHours.toString()) {
-        this.addToSeek(
-          currentRowIndex,
-          "departureHoursTable",
-          departureHours,
-          true
-        );
-      }
-
-      if (currentRow.departureMinutesString != departureMinutes.toString()) {
-        this.addToSeek(
-          currentRowIndex,
-          "departureMinutesTable",
-          departureMinutes,
-          true
-        );
-      }
-
-      if (currentRow.trainNumberString != train.trainNo.toString()) {
-        this.addToSeek(
-          currentRowIndex,
-          "trainNumberTable",
-          trainNumberString,
-          true
-        );
-      }
-
-      if (currentRow.trainCategoryString != train.category) {
-        this.addToSeek(
-          currentRowIndex,
-          "trainCategoryTable",
-          train.category,
-          false
-        );
-      }
-
-      if (currentRow.delayPlate != currentRow.delay.toString()) {
-        plateSeekArray.push({
-          currentRowIndex,
-          currentPlate: currentRow.delayPlate,
-          wantedPlate: currentRow.delay > 0 ? currentRow.delay.toString() : "",
-        });
-      }
-
-      currentRow.destinationString = destination;
-      currentRow.nearestStopString = nearestStop;
-
-      currentRow.category = train.category;
-      currentRow.number = train.trainNo;
-
-      currentRow.departureHoursString = departureHours.toString();
-      currentRow.departureMinutesString = departureMinutes.toString();
-
-      currentRow.trainNumberString = trainNumberString;
-      currentRow.trainCategoryString = train.category;
-
-      currentRow.arrivalTimestamp = train.stopInfo.arrivalTimestamp;
-      currentRow.departureTimestamp = train.stopInfo.departureTimestamp;
-
-      currentRow.delay =
-        train.stopInfo.arrivalDelay >= 0 ? train.stopInfo.arrivalDelay : 0;
-
-      currentRowIndex++;
-    }
-
-    this.resetTimetable(currentRowIndex);
-  }
-
-  get computedRows(): TimetableRow[] {
-    this.updateRows();
-
-    return this.timetableRows;
-  }
-
-  seekMainLetters() {
-    if (letterSeekArray.length == 0) return;
-
-    for (let i = 0; i < letterSeekArray.length; i++) {
-      const wanted = letterSeekArray[i];
-
-      const currentSet = wanted.numeric ? numberSet : letterSet;
-
-      if (wanted.currentChar === wanted.finalChar) {
-        letterSeekArray = letterSeekArray.filter(
-          (letter) => letter.id !== wanted.id
-        );
-
-        continue;
-      }
-
-      const currentIndex = currentSet.findIndex(
-        (char) => char === wanted.currentChar
-      );
-      const nextIndex =
-        currentIndex == currentSet.length - 1 ? 0 : currentIndex + 1;
-      const nextChar = currentSet[nextIndex];
-
-      this.$set(
-        this.timetableRows[wanted.currentRowIndex][wanted.arrayName],
-        wanted.letterIndex,
-        currentSet[nextIndex]
-      );
-
-      if (nextChar === wanted.finalChar) {
-        letterSeekArray = letterSeekArray.filter(
-          (letter) => letter.id !== wanted.id
-        );
-
-        continue;
-      }
-
-      letterSeekArray[i].currentChar = nextChar;
-    }
-  }
-
-  seekDelayPlate() {
-    if (plateSeekArray.length == 0) return;
-
-    for (let i = 0; i < plateSeekArray.length; i++) {
-      const plate = plateSeekArray[i];
-
-      if (plate.currentPlate === plate.wantedPlate) {
-        plateSeekArray = plateSeekArray.filter(
-          (p) => plate.currentRowIndex === p.currentRowIndex
-        );
-
-        continue;
-      }
-
-      const currentIndex = delaySet.findIndex((p) => p === plate.currentPlate);
-
-      const nextIndex =
-        currentIndex == delaySet.length - 1 ? 0 : currentIndex + 1;
-
-      const nextPlate = delaySet[nextIndex];
-
-      this.timetableRows[plate.currentRowIndex].delayPlate =
-        delaySet[nextIndex];
-
-      if (nextPlate === plate.wantedPlate) {
-        plateSeekArray = plateSeekArray.filter(
-          (p) => plate.currentRowIndex === p.currentRowIndex
-        );
-
-        continue;
-      }
-    }
-  }
-
-  findNextLetters(time) {
-    if (time > nextRefreshTime) {
-      this.seekMainLetters();
-      // this.seekDelayPlate();
-      // this.seekSideLetters(time);
-
-      nextRefreshTime = time + 140;
-    }
-
-    // console.log(
-    //   letterSeekArray.length < 10 ? letterSeekArray : letterSeekArray.length
-    // );
-
-    if (this.options.playSounds.state) {
-      if (letterSeekArray.length > 0 && !soundPlaying) {
-        sound.play();
-        soundPlaying = true;
-      } else if (letterSeekArray.length == 0) {
-        setTimeout(() => {
-          sound.stop();
-          soundPlaying = false;
-        }, 200);
-      }
-    } else {
-      sound.stop();
-      soundPlaying = false;
-    }
-
-    requestAnimationFrame(this.findNextLetters);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$bg: #111;
-
-.timetable-view {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 3rem;
-}
-
-.timetable-wrapper {
-  width: 1500px;
-  min-width: 1500px;
-
-  padding: 0.5rem;
-
-  background: $bg;
-}
-
-.timetable-options {
-  margin-bottom: 0.5rem;
-
-  width: 100%;
-
-  font-size: 0.4em;
-
-  display: flex;
-}
-
-.option {
-  position: relative;
-
-  cursor: pointer;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-
-  margin: 0.3em;
-  padding: 0.35em 0.7em;
-  border-radius: 0.4em;
-
-  transition: all 0.2s ease-in;
-
-  &:not(.checked) {
-    background-color: #585858;
-
-    &::before {
-      box-shadow: none;
-    }
-  }
-
-  &.checked {
-    background-color: #05b702;
-
-    &::before {
-      box-shadow: 0 0 6px 1px #05b702;
-    }
-  }
-
-  &::before {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    border-radius: inherit;
-    transition: inherit;
-  }
-}
-
-.timetable {
-  &-title {
-    text-align: center;
-
-    padding: 0.5rem 0;
-  }
-
-  &-header,
-  &-row {
-    display: grid;
-    grid-template-columns: 4fr 4fr 3fr 1fr 1fr;
-  }
-
-  &-header {
-    span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    text-align: center;
-    font-size: 0.35em;
-
-    margin-bottom: 0.5rem;
-  }
-
-  &-row {
-    width: 100%;
-
-    font-size: 0.4em;
-    margin-top: 0.5rem;
-
-    span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-
-.letter {
-  border: 1px solid gray;
-  width: 25px;
-  height: 30px;
-
-  margin: 0 2px;
-
-  font-weight: bold;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.letter-wrapper {
-  display: flex;
-}
-
-.row {
-  &-bar {
-    width: 100%;
-    height: 3px;
-    background: white;
-
-    margin-top: 0.5rem;
-  }
-
-  &-type {
-    text-align: center;
-
-    div {
-      margin: 0 0.5em;
-    }
-
-    // span {
-    //   display: inline-block;
-    //   width: 60%;
-    //   min-height: 40px;
-    //   line-height: 40px;
-    // }
-  }
-
-  &-delay {
-    text-align: center;
-
-    span {
-      display: inline-block;
-      width: 70%;
-      min-height: 40px;
-      line-height: 40px;
-
-      background: #444;
-    }
-  }
-}
-
-.type {
-  &-category {
-    background: red;
-  }
-}
-
-.roll-anim-enter-active,
-.roll-anim-leave-active {
-  transition: transform 70ms;
-  will-change: transform;
-
-  // opacity: 0;
-}
-.roll-anim-enter,
-.roll-anim-leave-to {
-  transform: rotate3d(1, 0, 0, -90deg);
-  // opacity: 0;
-}
+<template>
+  <div class="timetable-view" v-if="stationInfo">
+    <div class="view-content">
+      <div class="timetable-options">
+        <div
+          class="option"
+          v-for="(option, key) in options"
+          :key="key"
+          :class="{ checked: option.state }"
+          @click="setOption(key, !option.state)"
+        >{{ option.name }}</div>
+      </div>
+
+      <div class="timetable-wrapper">
+        <div class="timetable-title">
+          <b>{{ stationInfo.stationName.toUpperCase() }}</b>
+        </div>
+
+        <div class="timetable-header">
+          <span>DO STACJI</span>
+          <span>PRZEZ</span>
+          <span>POCIĄG</span>
+          <span>PLAN. ODJAZD</span>
+          <span>OPÓŹNIENIE</span>
+        </div>
+
+        <div class="timetable-body">
+          <div class="timetable-item" v-for="timetable in computedRows" :key="timetable.trainNo">
+            <div class="row-bar"></div>
+            <div class="timetable-row">
+              <span class="row-destination">
+                <div class="letter-wrapper">
+                  <div v-for="(letter, j) in timetable.destinationTable" :key="j" class="letter">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="letter">{{ letter }}</span>
+                    </transition>
+                  </div>
+                </div>
+              </span>
+
+              <span class="row-next" ref="next">
+                <div v-for="(letter, j) in timetable.nearestStopTable" :key="j" class="letter">
+                  <transition name="roll-anim" mode="out-in">
+                    <span :key="letter">{{ letter }}</span>
+                  </transition>
+                </div>
+              </span>
+
+              <span class="row-type">
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(letter, j) in timetable.trainCategoryTable" :key="j">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="letter">{{ letter }}</span>
+                    </transition>
+                  </span>
+                </div>
+
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(num, j) in timetable.trainNumberTable" :key="j+3">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+                </div>
+              </span>
+
+              <span class="row-time">
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(num, h) in timetable.departureHoursTable" :key="h">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+
+                  <span>:</span>
+
+                  <span
+                    class="letter"
+                    v-for="(num, i) in timetable.departureMinutesTable"
+                    :key="i + 5"
+                  >
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+                </div>
+              </span>
+
+              <span class="row-delay">
+                <transition name="roll-anim" mode="out-in">
+                  <span
+                    :key="timetable.delay"
+                  >{{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}</span>
+                </transition>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div v-if="stationInfo.online">
+      {{ stationInfo.stationName }}
+    </div>
+    <div v-else>Stacja offline!</div>-->
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { Getter } from "vuex-class";
+import { Howl } from "howler";
+
+import Station from "@/scripts/interfaces/Station";
+import Timetable from "@/scripts/interfaces/Timetable";
+
+interface TimetableRow {
+  destinationTable: string[];
+  destinationString: string;
+
+  nearestStopTable: string[];
+  nearestStopString: string;
+
+  departureHoursTable: string[];
+  departureHoursString: string;
+
+  departureMinutesTable: string[];
+  departureMinutesString: string;
+
+  trainNumberTable: string[];
+  trainNumberString: string;
+
+  trainCategoryTable: string[];
+  trainCategoryString: string;
+
+  category: string;
+  number: number;
+
+  delay: number;
+  delayPlate: string;
+
+  departureTimestamp: number;
+  arrivalTimestamp: number;
+}
+
+const sound = new Howl({
+  src: require("@/assets/sound.wav"),
+  loop: true,
+  autoplay: false,
+});
+
+let soundPlaying = false;
+
+const filteredNames = [
+  ["ALEKSANDRÓW KUJAWSKI", "ALEKSDR KUJ."],
+  ["GDAŃSK GŁÓWNY", "GDAŃSK GŁ."],
+  ["GDAŃSK POŁUDNIOWY", "GDAŃSK PŁD."],
+  ["ARKADIA ZDRÓJ", "ARKADIA ZDR."],
+  ["GRABÓW MIASTO", "GRABÓW M."],
+  ["ZGIERZ KONTREWERS", "ZGIERZ KONTR."],
+  ["BUCZ WILEŃSKI", "BUCZ WIL."],
+  ["SZKLANA PORĘBA", "SZKLANA POR."],
+  ["TARNOWO GÓRNE", "TARNOWO G."],
+  ["BARGOWICE ZACHÓD", "BARGOWICE Z."],
+];
+
+const letterSet: string[] = Array.from(
+  " -.,/AĄBCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWXYZŹŻ"
+);
+
+const numberSet: string[] = Array.from(" 0123456789");
+
+const delaySet: string[] = [
+  "5 min",
+  "10 min",
+  "15 min",
+  "20 min",
+  "25 min",
+  "30 min",
+  "35 min",
+  "40 min",
+  "45 min",
+  "50 min",
+  "55 min",
+  "60 min",
+  ">60 min",
+];
+
+let globalID = 0;
+let letterSeekArray: {
+  currentRowIndex: number;
+  letterIndex: number;
+  currentChar: string;
+  finalChar: string;
+  arrayName: string;
+  numeric: boolean;
+  id: number;
+}[] = [];
+
+let plateSeekArray: {
+  currentRowIndex: number;
+  currentPlate: string;
+  wantedPlate: string;
+}[] = [];
+
+let nextRefreshTime = 0;
+
+@Component
+export default class TimetableView extends Vue {
+  @Getter("getStationList") stationList!: Station[];
+
+  maxRows = 5;
+
+  options = {
+    excludeCargo: { name: "Tylko pasażerskie", state: false },
+    playSounds: { name: "Dźwięki", state: false },
+  };
+
+  timetableRows: TimetableRow[] = new Array(this.maxRows)
+    .fill(0)
+    .map((row) => ({
+      origin: new Array(13).fill(" "),
+
+      destinationTable: new Array(13).fill(" "),
+      destinationString: "",
+
+      nearestStopTable: new Array(13).fill(" "),
+      nearestStopString: "",
+
+      departureHoursTable: new Array(2).fill(" "),
+      departureHoursString: "",
+
+      departureMinutesTable: new Array(2).fill(" "),
+      departureMinutesString: "",
+
+      trainNumberTable: new Array(6).fill(" "),
+      trainNumberString: "",
+
+      trainCategoryTable: new Array(3).fill(" "),
+      trainCategoryString: "",
+
+      category: "",
+      number: 0,
+
+      delay: 0,
+      delayPlate: "",
+
+      departureTimestamp: 0,
+      arrivalTimestamp: 0,
+    }));
+
+  mounted() {
+    window.requestAnimationFrame(this.findNextLetters);
+  }
+
+  deactivated() {
+    this.resetTimetable();
+    letterSeekArray.length = 0;
+  }
+
+  /* Options */
+  setOption(optionKey: string, optionValue: any) {
+    this.$set(this.options[optionKey], "state", optionValue);
+
+    // this.options[optionKey].state = optionValue;
+  }
+
+  /* ===== */
+
+  resetTimetable(indexFrom: number = 0, forceClear: boolean = false) {
+    if (indexFrom > this.maxRows - 1) return;
+
+    console.log("reset");
+
+    for (let i = indexFrom; i < this.timetableRows.length; i++) {
+      const currentRow = this.timetableRows[i];
+
+      for (let propName in currentRow) {
+        let propValue = currentRow[propName];
+
+        switch (typeof propValue) {
+          case "object":
+            propValue = propValue.map((v) => " ");
+            this.addToSeek(i, propName, propValue, false);
+            this.$set(this.timetableRows[i], propName, propValue);
+            break;
+
+          case "string":
+            propValue = "";
+            this.$set(this.timetableRows[i], propName, propValue);
+            break;
+
+          case "number":
+            propValue = 0;
+            this.$set(this.timetableRows[i], propName, propValue);
+
+            break;
+        }
+      }
+    }
+  }
+
+  addToSeek(
+    currentRowIndex: number,
+    arrayName: string,
+    next: string | string[],
+    numeric: boolean
+  ) {
+    // globalID++;
+
+    this.timetableRows[currentRowIndex][arrayName].forEach((letter, i) => {
+      letterSeekArray.push({
+        currentRowIndex,
+        letterIndex: i,
+        currentChar: letter,
+        finalChar: next[i] ? next[i] : numeric ? "0" : " ",
+        arrayName,
+        numeric,
+        id: ++globalID,
+      });
+    });
+  }
+
+  get stationInfo(): Station | null {
+    if (!this.$route.query.station) return null;
+
+    const station = this.stationList.find(
+      (station) => station.stationHash === this.$route.query.station
+    );
+
+    return station || null;
+  }
+
+  updateRows(info: Station | null = this.stationInfo) {
+    if (!info) return;
+    if (info.scheduledTrains.length == 0) return;
+
+    console.log("update");
+
+    const scheduledTrains = info.scheduledTrains
+      .filter((train) => {
+        if (train.stopInfo.departureTimestamp == 0) return false;
+
+        if (this.options.excludeCargo.state) {
+          if (train.trainNo.toString().length === 5) return true;
+          return false;
+        }
+
+        // if (!this.options.excludeCargo.state) return true;
+
+        // const trainNumberLength = train.trainNo.toString().length;
+
+        // if (trainNumberLength === 4 || trainNumberLength === 5) return true;
+
+        return true;
+      })
+      .sort((a, b) => {
+        if (a.stopInfo.departureTimestamp >= b.stopInfo.departureTimestamp)
+          return 1;
+
+        return -1;
+      });
+
+    let currentRowIndex = 0;
+    for (let train of scheduledTrains) {
+      if (train.stopInfo.confirmed) continue;
+      if (currentRowIndex > this.maxRows - 1) break;
+
+      const currentRow = this.timetableRows[currentRowIndex];
+
+      const departureHours = new Array(2)
+        .fill("0")
+        .map((num, i) => train.stopInfo.departureTimeString[i]);
+
+      const departureMinutes = new Array(2)
+        .fill("0")
+        .map((num, i) => train.stopInfo.departureTimeString[i + 3]);
+
+      const trainNumberString = train.trainNo.toString();
+
+      let destination = train.terminatesAt.toUpperCase();
+      let nearestStop = train.nearestStop.toUpperCase();
+
+      for (let name of filteredNames) {
+        if (name[0] === destination) destination = name[1];
+
+        if (name[0] === nearestStop) nearestStop = name[1];
+      }
+
+      if (currentRow.destinationString !== destination) {
+        console.log(destination);
+
+        this.addToSeek(currentRowIndex, "destinationTable", destination, false);
+      }
+
+      if (currentRow.nearestStopString !== nearestStop) {
+        this.addToSeek(currentRowIndex, "nearestStopTable", nearestStop, false);
+      }
+
+      if (currentRow.departureHoursString != departureHours.toString()) {
+        this.addToSeek(
+          currentRowIndex,
+          "departureHoursTable",
+          departureHours,
+          true
+        );
+      }
+
+      if (currentRow.departureMinutesString != departureMinutes.toString()) {
+        this.addToSeek(
+          currentRowIndex,
+          "departureMinutesTable",
+          departureMinutes,
+          true
+        );
+      }
+
+      if (currentRow.trainNumberString != train.trainNo.toString()) {
+        this.addToSeek(
+          currentRowIndex,
+          "trainNumberTable",
+          trainNumberString,
+          true
+        );
+      }
+
+      if (currentRow.trainCategoryString != train.category) {
+        this.addToSeek(
+          currentRowIndex,
+          "trainCategoryTable",
+          train.category,
+          false
+        );
+      }
+
+      if (currentRow.delayPlate != currentRow.delay.toString()) {
+        plateSeekArray.push({
+          currentRowIndex,
+          currentPlate: currentRow.delayPlate,
+          wantedPlate: currentRow.delay > 0 ? currentRow.delay.toString() : "",
+        });
+      }
+
+      currentRow.destinationString = destination;
+      currentRow.nearestStopString = nearestStop;
+
+      currentRow.category = train.category;
+      currentRow.number = train.trainNo;
+
+      currentRow.departureHoursString = departureHours.toString();
+      currentRow.departureMinutesString = departureMinutes.toString();
+
+      currentRow.trainNumberString = trainNumberString;
+      currentRow.trainCategoryString = train.category;
+
+      currentRow.arrivalTimestamp = train.stopInfo.arrivalTimestamp;
+      currentRow.departureTimestamp = train.stopInfo.departureTimestamp;
+
+      currentRow.delay =
+        train.stopInfo.arrivalDelay >= 0 ? train.stopInfo.arrivalDelay : 0;
+
+      currentRowIndex++;
+    }
+
+    this.resetTimetable(currentRowIndex);
+  }
+
+  get computedRows(): TimetableRow[] {
+    this.updateRows();
+
+    return this.timetableRows;
+  }
+
+  seekMainLetters() {
+    if (letterSeekArray.length == 0) return;
+
+    for (let i = 0; i < letterSeekArray.length; i++) {
+      const wanted = letterSeekArray[i];
+
+      const currentSet = wanted.numeric ? numberSet : letterSet;
+
+      if (wanted.currentChar === wanted.finalChar) {
+        letterSeekArray = letterSeekArray.filter(
+          (letter) => letter.id !== wanted.id
+        );
+
+        continue;
+      }
+
+      const currentIndex = currentSet.findIndex(
+        (char) => char === wanted.currentChar
+      );
+      const nextIndex =
+        currentIndex == currentSet.length - 1 ? 0 : currentIndex + 1;
+      const nextChar = currentSet[nextIndex];
+
+      this.$set(
+        this.timetableRows[wanted.currentRowIndex][wanted.arrayName],
+        wanted.letterIndex,
+        currentSet[nextIndex]
+      );
+
+      if (nextChar === wanted.finalChar) {
+        letterSeekArray = letterSeekArray.filter(
+          (letter) => letter.id !== wanted.id
+        );
+
+        continue;
+      }
+
+      letterSeekArray[i].currentChar = nextChar;
+    }
+  }
+
+  seekDelayPlate() {
+    if (plateSeekArray.length == 0) return;
+
+    for (let i = 0; i < plateSeekArray.length; i++) {
+      const plate = plateSeekArray[i];
+
+      if (plate.currentPlate === plate.wantedPlate) {
+        plateSeekArray = plateSeekArray.filter(
+          (p) => plate.currentRowIndex === p.currentRowIndex
+        );
+
+        continue;
+      }
+
+      const currentIndex = delaySet.findIndex((p) => p === plate.currentPlate);
+
+      const nextIndex =
+        currentIndex == delaySet.length - 1 ? 0 : currentIndex + 1;
+
+      const nextPlate = delaySet[nextIndex];
+
+      this.timetableRows[plate.currentRowIndex].delayPlate =
+        delaySet[nextIndex];
+
+      if (nextPlate === plate.wantedPlate) {
+        plateSeekArray = plateSeekArray.filter(
+          (p) => plate.currentRowIndex === p.currentRowIndex
+        );
+
+        continue;
+      }
+    }
+  }
+
+  findNextLetters(time) {
+    if (time > nextRefreshTime) {
+      this.seekMainLetters();
+      // this.seekDelayPlate();
+      // this.seekSideLetters(time);
+
+      nextRefreshTime = time + 140;
+    }
+
+    // console.log(
+    //   letterSeekArray.length < 10 ? letterSeekArray : letterSeekArray.length
+    // );
+
+    if (this.options.playSounds.state) {
+      if (letterSeekArray.length > 0 && !soundPlaying) {
+        sound.play();
+        soundPlaying = true;
+      } else if (letterSeekArray.length == 0) {
+        setTimeout(() => {
+          sound.stop();
+          soundPlaying = false;
+        }, 200);
+      }
+    } else {
+      sound.stop();
+      soundPlaying = false;
+    }
+
+    requestAnimationFrame(this.findNextLetters);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$bg: #111;
+
+.timetable-view {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 3rem;
+}
+
+.timetable-wrapper {
+  width: 1500px;
+  min-width: 1500px;
+
+  padding: 0.5rem;
+
+  background: $bg;
+}
+
+.timetable-options {
+  margin-bottom: 0.5rem;
+
+  width: 100%;
+
+  font-size: 0.4em;
+
+  display: flex;
+}
+
+.option {
+  position: relative;
+
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  margin: 0.3em;
+  padding: 0.35em 0.7em;
+  border-radius: 0.4em;
+
+  transition: all 0.2s ease-in;
+
+  &:not(.checked) {
+    background-color: #585858;
+
+    &::before {
+      box-shadow: none;
+    }
+  }
+
+  &.checked {
+    background-color: #05b702;
+
+    &::before {
+      box-shadow: 0 0 6px 1px #05b702;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: inherit;
+    transition: inherit;
+  }
+}
+
+.timetable {
+  &-title {
+    text-align: center;
+
+    padding: 0.5rem 0;
+  }
+
+  &-header,
+  &-row {
+    display: grid;
+    grid-template-columns: 4fr 4fr 3fr 1fr 1fr;
+  }
+
+  &-header {
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    text-align: center;
+    font-size: 0.35em;
+
+    margin-bottom: 0.5rem;
+  }
+
+  &-row {
+    width: 100%;
+
+    font-size: 0.4em;
+    margin-top: 0.5rem;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.letter {
+  border: 1px solid gray;
+  width: 25px;
+  height: 30px;
+
+  margin: 0 2px;
+
+  font-weight: bold;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.letter-wrapper {
+  display: flex;
+}
+
+.row {
+  &-bar {
+    width: 100%;
+    height: 3px;
+    background: white;
+
+    margin-top: 0.5rem;
+  }
+
+  &-type {
+    text-align: center;
+
+    div {
+      margin: 0 0.5em;
+    }
+
+    // span {
+    //   display: inline-block;
+    //   width: 60%;
+    //   min-height: 40px;
+    //   line-height: 40px;
+    // }
+  }
+
+  &-delay {
+    text-align: center;
+
+    span {
+      display: inline-block;
+      width: 70%;
+      min-height: 40px;
+      line-height: 40px;
+
+      background: #444;
+    }
+  }
+}
+
+.type {
+  &-category {
+    background: red;
+  }
+}
+
+.roll-anim-enter-active,
+.roll-anim-leave-active {
+  transition: transform 70ms;
+  will-change: transform;
+
+  // opacity: 0;
+}
+.roll-anim-enter,
+.roll-anim-leave-to {
+  transform: rotate3d(1, 0, 0, -90deg);
+  // opacity: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 9a4379f..189bfc6 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -1,166 +1,166 @@
-<template>
-  <section class="trains-view">
-    <div class="body-wrapper">
-      <div class="options-wrapper">
-        <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <TrainSearch
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-          :passedSearchedTrain="passedSearchedTrain"
-          :focusedTrain="focusedTrain"
-        />
-      </div>
-
-      <TrainStats :trains="trains" />
-      <TrainTable
-        :computedTrains="computedTrains"
-        @changeFocusedTrain="changeFocusedTrain"
-      />
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import { Component, Prop } from "vue-property-decorator";
-import { Getter, Action } from "vuex-class";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
-import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
-import TrainTable from "@/components/TrainsView/TrainTable.vue";
-import TrainStats from "@/components/TrainsView/TrainStats.vue";
-
-import axios from "axios";
-
-@Component({
-  components: {
-    TrainSorter,
-    TrainTable,
-    TrainStats,
-    TrainSearch,
-  },
-})
-export default class TrainsView extends Vue {
-  @Getter("getTrainList") trains!: Train[];
-  @Prop() readonly passedSearchedTrain!: string;
-
-  sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
-
-  searchedTrain: string = "";
-  searchedDriver: string = "";
-  focusedTrain: string = "";
-
-  changeSearchedTrain(trainNo: string) {
-    this.searchedTrain = trainNo;
-  }
-
-  changeSearchedDriver(name: string) {
-    this.searchedDriver = name;
-  }
-
-  changeFocusedTrain(trainNo: string) {
-    this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
-  }
-
-  changeSorter(sorter: { id: string; dir: number }) {
-    this.sorterActive = sorter;
-  }
-
-  get computedTrains() {
-    return this.trains
-      .filter(
-        (train) =>
-          train.timetableData &&
-          (this.searchedTrain.length > 0
-            ? train.trainNo.toString().includes(this.searchedTrain)
-            : true) &&
-          (this.searchedDriver.length > 0
-            ? train.driverName
-              .toLowerCase()
-              .includes(this.searchedDriver.toLowerCase())
-            : true)
-      )
-      .sort((a, b) => {
-        switch (this.sorterActive.id) {
-          case "mass":
-            if (a.mass > b.mass) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
-            break;
-
-          case "distance":
-            if (!a.timetableData || !b.timetableData) return 0;
-
-            if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
-            break;
-
-          case "speed":
-            if (a.speed > b.speed) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
-            break;
-
-          case "timetable":
-            if (a.trainNo > b.trainNo) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
-            break;
-
-          case "length":
-            if (a.length > b.length) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
-            break;
-
-          default:
-            break;
-        }
-
-        return 0;
-      });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../styles/responsive.scss";
-
-.trains-view {
-  min-height: 100%;
-  position: relative;
-}
-
-.body-wrapper {
-  margin: 1rem auto;
-  max-width: 1300px;
-
-  padding: 0 0.5rem;
-
-  font-size: calc(0.4rem + 0.4vw);
-}
-
-.options-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-
-  & > div {
-    margin-right: 1rem;
-  }
-}
-
-@include bigScreen() {
-  .body-wrapper {
-    font-size: 0.9rem;
-  }
-}
-
-@include smallScreen {
-  .body-wrapper {
-    font-size: 0.8rem;
-  }
-
-  .options-wrapper {
-    justify-content: center;
-  }
-}
-</style>
+<template>
+  <section class="trains-view">
+    <div class="body-wrapper">
+      <div class="options-wrapper">
+        <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
+        <TrainSearch
+          @changeSearchedTrain="changeSearchedTrain"
+          @changeSearchedDriver="changeSearchedDriver"
+          :passedSearchedTrain="passedSearchedTrain"
+          :focusedTrain="focusedTrain"
+        />
+      </div>
+
+      <TrainStats :trains="trains" />
+      <TrainTable
+        :computedTrains="computedTrains"
+        @changeFocusedTrain="changeFocusedTrain"
+      />
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { Getter, Action } from "vuex-class";
+
+import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
+import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
+import TrainTable from "@/components/TrainsView/TrainTable.vue";
+import TrainStats from "@/components/TrainsView/TrainStats.vue";
+
+import axios from "axios";
+
+@Component({
+  components: {
+    TrainSorter,
+    TrainTable,
+    TrainStats,
+    TrainSearch,
+  },
+})
+export default class TrainsView extends Vue {
+  @Getter("getTrainList") trains!: Train[];
+  @Prop() readonly passedSearchedTrain!: string;
+
+  sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
+
+  searchedTrain: string = "";
+  searchedDriver: string = "";
+  focusedTrain: string = "";
+
+  changeSearchedTrain(trainNo: string) {
+    this.searchedTrain = trainNo;
+  }
+
+  changeSearchedDriver(name: string) {
+    this.searchedDriver = name;
+  }
+
+  changeFocusedTrain(trainNo: string) {
+    this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
+  }
+
+  changeSorter(sorter: { id: string; dir: number }) {
+    this.sorterActive = sorter;
+  }
+
+  get computedTrains() {
+    return this.trains
+      .filter(
+        (train) =>
+          train.timetableData &&
+          (this.searchedTrain.length > 0
+            ? train.trainNo.toString().includes(this.searchedTrain)
+            : true) &&
+          (this.searchedDriver.length > 0
+            ? train.driverName
+              .toLowerCase()
+              .includes(this.searchedDriver.toLowerCase())
+            : true)
+      )
+      .sort((a, b) => {
+        switch (this.sorterActive.id) {
+          case "mass":
+            if (a.mass > b.mass) return this.sorterActive.dir;
+            else return -this.sorterActive.dir;
+            break;
+
+          case "distance":
+            if (!a.timetableData || !b.timetableData) return 0;
+
+            if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
+            else return -this.sorterActive.dir;
+            break;
+
+          case "speed":
+            if (a.speed > b.speed) return this.sorterActive.dir;
+            else return -this.sorterActive.dir;
+            break;
+
+          case "timetable":
+            if (a.trainNo > b.trainNo) return this.sorterActive.dir;
+            else return -this.sorterActive.dir;
+            break;
+
+          case "length":
+            if (a.length > b.length) return this.sorterActive.dir;
+            else return -this.sorterActive.dir;
+            break;
+
+          default:
+            break;
+        }
+
+        return 0;
+      });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/responsive.scss";
+
+.trains-view {
+  min-height: 100%;
+  position: relative;
+}
+
+.body-wrapper {
+  margin: 1rem auto;
+  max-width: 1300px;
+
+  padding: 0 0.5rem;
+
+  font-size: calc(0.4rem + 0.4vw);
+}
+
+.options-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > div {
+    margin-right: 1rem;
+  }
+}
+
+@include bigScreen() {
+  .body-wrapper {
+    font-size: 0.9rem;
+  }
+}
+
+@include smallScreen {
+  .body-wrapper {
+    font-size: 0.8rem;
+  }
+
+  .options-wrapper {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index cd2b477..0702cd8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,3 @@
-// module.exports = {
-//   publicPath: process.env.NODE_ENV === "production" ? "/dist" : "/",
-// };
+// module.exports = {
+//   publicPath: process.env.NODE_ENV === "production" ? "/dist" : "/",
+// };