From 02838b2be3f568c5f4adfa7221b4c24d0642f0ff Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 21 Jul 2020 18:32:37 +0200
Subject: [PATCH] =?UTF-8?q?Migracja=20pozosta=C5=82ych=20klas=20i=20kompon?=
 =?UTF-8?q?ent=C3=B3w=20na=20TS,=20optymalizacja=20kodu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  42 ++-
 src/components/ui/AppBar.vue      |   2 +-
 src/components/ui/LegendCard.vue  |   5 +
 src/components/ui/List.vue        | 474 ++++++++++++++----------------
 src/components/ui/Options.vue     |   2 +-
 src/components/ui/StationCard.vue |  48 +--
 src/mixins/styleMixin.ts          |  43 ++-
 src/scripts/interfaces/Filter.ts  |  23 ++
 src/scripts/interfaces/Station.ts |  23 ++
 src/store/modules/store.ts        |  26 +-
 10 files changed, 338 insertions(+), 350 deletions(-)
 create mode 100644 src/scripts/interfaces/Filter.ts
 create mode 100644 src/scripts/interfaces/Station.ts

diff --git a/src/App.vue b/src/App.vue
index 8abcc45..a00dc22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,9 +14,9 @@
       <AppBar :stationCount="stationCount" :trainCount="trainCount" />
 
       <main class="app-main">
-          <Loading v-if="connectionState == 0" />
-          <Error v-else-if="connectionState == 1" :error="errorMessage" />
-          <router-view v-else />
+        <Loading v-if="connectionState == 0" />
+        <Error v-else-if="connectionState == 1" :error="errorMessage" />
+        <router-view v-else />
       </main>
 
       <footer class="app-footer flex">&copy; Spythere 2020</footer>
@@ -36,30 +36,32 @@ import Clock from "@/components/ui/Clock.vue";
 import AppBar from "@/components/ui/AppBar.vue";
 
 enum ConnState {
-    Loading = 0,
-    Error = 1,
-    Connected = 2
+  Loading = 0,
+  Error = 1,
+  Connected = 2
 }
 
 @Component({
   components: { Error, Loading, Clock, AppBar }
 })
 export default class App extends Vue {
-  @Getter('getStations') stations
-  @Getter('getTrainCount') trainCount
-  @Getter("getStationCount") stationCount
+  @Getter("getStations") stations;
+  @Getter("getTrainCount") trainCount;
+  @Getter("getStationCount") stationCount;
 
-  @Action("initStations") initStations
+  @Action("initStations") initStations;
 
   errorMessage: string = "";
   connectionState: ConnState = ConnState.Loading;
-  
+
   mounted() {
     this.initStations();
 
-    this.$store.watch((state, getters) => getters.getConnectionState, (state: ConnState) => this.connectionState = state);
+    this.$store.watch(
+      (state, getters) => getters.getConnectionState,
+      (state: ConnState) => (this.connectionState = state)
+    );
   }
-
 }
 </script>
 
@@ -126,7 +128,7 @@ input {
   border-radius: 1.3rem;
   font-weight: 500;
 
-  font-size: .95em;
+  font-size: 0.95em;
   padding: 0.25em 0.4em;
 
   background-color: #00be19;
@@ -144,17 +146,13 @@ input {
 
   &.no-limit {
     background-color: #0077ae;
-    font-size: 0.9em;
-  }
-
-  &.not-signed {
-    background-color: $accent2Col;
-    font-size: 0.8em;
+    font-size: 0.85em;
   }
 
+  &.not-signed,
   &.unavailable {
     background-color: $accent2Col;
-    font-size: 0.9em;
+    font-size: 0.8em;
   }
 
   &.brb {
@@ -196,7 +194,7 @@ input {
   max-height: 95%;
 
   // font-size: calc(0.6rem + 0.5vw);
-  font-size: calc(0.55rem + 0.35vw);
+  font-size: calc(0.45rem + 0.35vw);
 
   @include smallScreen {
     width: 95%;
diff --git a/src/components/ui/AppBar.vue b/src/components/ui/AppBar.vue
index 0e32473..439fb4f 100644
--- a/src/components/ui/AppBar.vue
+++ b/src/components/ui/AppBar.vue
@@ -43,7 +43,7 @@ export default class AppBar extends Vue {
 
   position: sticky;
   top: 0;
-  font-size: 0.3em;
+  font-size: 0.25em;
   background: #222;
 }
 
diff --git a/src/components/ui/LegendCard.vue b/src/components/ui/LegendCard.vue
index 243470f..895d290 100644
--- a/src/components/ui/LegendCard.vue
+++ b/src/components/ui/LegendCard.vue
@@ -58,6 +58,11 @@ export default class LegendCard extends Vue {
       name: "mieszana",
       desc:
         "Sceneria ze sygnalizacją mieszaną (kształtowe, historyczne lub/i współczesne)"
+    },
+    {
+      name: "SBL",
+      desc:
+        "Sceneria posiadająca samoczynną blokadę liniową na co najmniej jednym z jej szlaków"
     }
   ];
 }
diff --git a/src/components/ui/List.vue b/src/components/ui/List.vue
index 40f2b9c..0dbaa06 100644
--- a/src/components/ui/List.vue
+++ b/src/components/ui/List.vue
@@ -27,293 +27,251 @@
           </tr>
         </thead>
 
-          <tr
-            class="table-item"
-            v-for="(station, i) in computedStations"
-            :key="i + station.stationHash"
-            @click="() => { if(station.online) setFocusedStation(station.stationName) }"
-          >
-            <td
-              class="item-station-name"
-              :class="{'default-station': station.default, 'online': station.online}"
-            >{{station.stationName}}</td>
+        <tr
+          class="table-item"
+          v-for="(station, i) in computedStations"
+          :key="i + station.stationHash"
+          @click="() => { if(station.online) setFocusedStation(station.stationName) }"
+        >
+          <td
+            class="item-station-name"
+            :class="{'default-station': station.default, 'online': station.online}"
+          >{{station.stationName}}</td>
 
-            <td class="item-station-level">
-              <span
-                v-if="station.reqLevel"
-                :style="calculateStyle(station.reqLevel)"
-              >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+          <td class="item-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>
+            <span v-else>?</span>
+          </td>
 
-            <td class="item-station-status">
-              <span
-                class="status"
-                :class="occupationClasses(station.occupiedTo)"
-              >{{station.occupiedTo}}</span>
-            </td>
+          <td class="item-station-status">
+            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+          </td>
 
-            <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
-            <td class="item-dispatcher-exp">
-              <span
-                v-if="station.online"
-                :style="calculateStyle(station.dispatcherExp)"
-              >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
-            </td>
-            <td
-              class="item-users"
-            >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-            <td class="item-info">
-              <img
-                class="icon-info"
-                v-if="station.controlType"
-                :src="require(`@/assets/icon-${station.controlType}.svg`)"
-                :alt="station.controlType"
-                :title="'Sterowanie ' + station.controlType"
-              />
+          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+          <td class="item-dispatcher-exp">
+            <span
+              v-if="station.online"
+              :style="calculateExpStyle(station.dispatcherExp)"
+            >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
+          </td>
+          <td
+            class="item-users"
+          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+          <td class="item-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.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.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>
+            <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="item-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>
+          <td class="item-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>
-            </td>
+            <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>
+          </td>
 
-            <td class="item-tracks oneway">
-              <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>
+          <td class="item-tracks oneway">
+            <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>
-          </tr>
+            <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>
+        </tr>
       </table>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import { mapGetters } from "vuex";
+import { Component } from "vue-property-decorator";
+import { Getter } from "vuex-class";
 
 import styleMixin from "@/mixins/styleMixin";
 
 import StationCard from "@/components/ui/StationCard.vue";
 
+import Station from "@/scripts/interfaces/Station";
+
 const ascSVG = require("@/assets/icon-arrow-asc.svg");
 const descSVG = require("@/assets/icon-arrow-desc.svg");
 
-export default Vue.extend({
-  name: "List",
-  components: {
-    StationCard
-  },
-  data: () => ({
-    focusedStationName: "",
-    icons: {
-      ascSVG,
-      descSVG
-    },
-    sorterActive: { index: 0, type: 1 },
-    headTitles: [
-      ["Stacja"],
-      ["Wymagany poz.", "dyżurnego"],
-      ["Status"],
-      ["Dyżurny"],
-      ["Poziom", "dyżurnego"],
-      ["Maszyniści"],
-      ["Informacje", "ogólne"],
-      ["Szlaki", "dwutorowe"],
-      ["Szlaki", "jednotorowe"]
-    ]
-  }),
-  computed: {
-    ...mapGetters({ stations: "getStations" }),
-    computedStations() {
-      let sortFun;
-      const type: number = this.sorterActive.type;
+@Component({
+  components: { StationCard }
+})
+export default class List extends styleMixin {
+  focusedStationName: string = "";
+  icons: { ascSVG; descSVG } = { ascSVG, descSVG };
+  sorterActive: { index: number; type: number } = { index: 0, type: 1 };
 
-      const sortByName = (a, b) => {
-        if (a.stationName >= b.stationName) return type;
-        if (a.stationName < b.stationName) return -type;
-      };
+  @Getter("getStations") stations!: Station[];
 
-      switch (this.sorterActive.index) {
-        case 0:
-        default:
-          sortFun = sortByName;
-          break;
+  headTitles: string[][] = [
+    ["Stacja"],
+    ["Wymagany poz.", "dyżurnego"],
+    ["Status"],
+    ["Dyżurny"],
+    ["Poziom", "dyżurnego"],
+    ["Maszyniści"],
+    ["Informacje", "ogólne"],
+    ["Szlaki", "dwutorowe"],
+    ["Szlaki", "jednotorowe"]
+  ];
 
-        case 1:
-          sortFun = (a, b) => {
-            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
-            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
+  changeSorter(index: number) {
+    if (index > 5) return;
 
-            return sortByName(a, b);
-          };
-          break;
+    if (index == this.sorterActive.index)
+      this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
+    else this.sorterActive.type = 1;
 
-        case 2:
-          sortFun = (a, b) => {
-            if (a.statusTimestamp > b.statusTimestamp) return type;
-            if (a.statusTimestamp < b.statusTimestamp) return -type;
-
-            if (a.occupiedTo > b.occupiedTo) return type;
-            if (a.occupiedTo < b.occupiedTo) return -type;
-
-            return sortByName(a, b);
-          };
-          break;
-
-        case 3:
-          sortFun = (a, b) => {
-            if (a.dispatcherName > b.dispatcherName) return type;
-            if (a.dispatcherName < b.dispatcherName) return -type;
-
-            return sortByName(a, b);
-          };
-          break;
-
-        case 4:
-          sortFun = (a, b) => {
-            if (a.dispatcherExp > b.dispatcherExp) return type;
-            if (a.dispatcherExp < b.dispatcherExp) return -type;
-
-            return sortByName(a, b);
-          };
-          break;
-
-        case 5:
-          sortFun = (a, b) => {
-            if (a.currentUsers > b.currentUsers) return type;
-            if (a.currentUsers < b.currentUsers) return -type;
-
-            return sortByName(a, b);
-          };
-          break;
-
-        case 6:
-          sortFun = (a, b) => {
-            if (a.currentUsers > b.currentUsers) return type;
-            if (a.currentUsers < b.currentUsers) return -type;
-
-            if (a.maxUsers > b.maxUsers) return type;
-            if (a.maxUsers < b.maxUsers) return -type;
-          };
-          break;
-      }
-
-      return this.stations.sort(sortFun);
-    },
-    focusedStationInfo() {
-      return this.stations.find(
-        (station: any) => station.stationName === this.focusedStationName
-      );
-    }
-  },
-  methods: {
-    changeSorter(index: number) {
-      if (index > 5) return;
-
-      if (index == this.sorterActive.index)
-        this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
-      else this.sorterActive.type = 1;
-
-      this.sorterActive.index = index;
-    },
-    calculateStyle(exp: string | number): string {
-      const bgColor =
-        exp > -1
-          ? exp < 2
-            ? "#26B0D9"
-            : `hsl(${-exp * 5 + 100},  65%, 50%)`
-          : "#888";
-
-      const fontColor = exp > 15 ? "white" : "black";
-
-      return `backgroundColor: ${bgColor}; color: ${fontColor}`;
-    },
-    occupationClasses: (occupiedTo: string) => {
-      let className = "";
-
-      switch (occupiedTo) {
-        case "WOLNA":
-          className = "free";
-          break;
-        case "KOŃCZY":
-          className = "ending";
-          break;
-        case "NIEZALOGOWANY":
-          className = "not-signed";
-          break;
-        case "BEZ LIMITU":
-          className = "no-limit";
-          break;
-        case "NIEDOSTĘPNY":
-          className = "unavailable";
-          break;
-        case "Z/W":
-          className = "brb";
-          break;
-        case "BRAK MIEJSCA":
-          className = "no-space";
-          break;
-        default:
-          break;
-      }
-
-      return className;
-    },
-
-    setFocusedStation(name: string) {
-      if (this.focusedStationName == name) this.focusedStationName = "";
-      else this.focusedStationName = name;
-    },
-
-    closeCard() {
-      this.focusedStationName = "";
-    }
+    this.sorterActive.index = index;
   }
-});
+
+  setFocusedStation(name: string) {
+    if (this.focusedStationName == name) this.focusedStationName = "";
+    else this.focusedStationName = name;
+  }
+
+  closeCard() {
+    this.focusedStationName = "";
+  }
+
+  get focusedStationInfo() {
+    return this.stations.find(
+      station => station.stationName === this.focusedStationName
+    );
+  }
+
+  get computedStations() {
+    const type: number = this.sorterActive.type;
+
+    const sortByName = (a: Station, b: Station) => {
+      if (a.stationName >= b.stationName) return type;
+      return -type;
+    };
+
+    if (this.sorterActive.index == 0)
+      return this.stations.sort((a, b) => {
+        if (a.stationName >= b.stationName) return type;
+        return -type;
+      });
+
+    let currentSort;
+
+    switch (this.sorterActive.index) {
+      case 0:
+      default:
+        return (currentSort = sortByName);
+        break;
+
+      case 1:
+        currentSort = (a, b) => {
+          if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
+          if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
+
+          return sortByName(a, b);
+        };
+        break;
+
+      case 2:
+        currentSort = (a, b) => {
+          if (a.statusTimestamp > b.statusTimestamp) return type;
+          if (a.statusTimestamp < b.statusTimestamp) return -type;
+
+          if (a.occupiedTo > b.occupiedTo) return type;
+          if (a.occupiedTo < b.occupiedTo) return -type;
+
+          return sortByName(a, b);
+        };
+        break;
+
+      case 3:
+        currentSort = (a, b) => {
+          if (a.dispatcherName > b.dispatcherName) return type;
+          if (a.dispatcherName < b.dispatcherName) return -type;
+
+          return sortByName(a, b);
+        };
+        break;
+
+      case 4:
+        currentSort = (a, b) => {
+          if (a.dispatcherExp > b.dispatcherExp) return type;
+          if (a.dispatcherExp < b.dispatcherExp) return -type;
+
+          return sortByName(a, b);
+        };
+        break;
+
+      case 5:
+        currentSort = (a, b) => {
+          if (a.currentUsers > b.currentUsers) return type;
+          if (a.currentUsers < b.currentUsers) return -type;
+
+          return sortByName(a, b);
+        };
+        break;
+
+      case 6:
+        currentSort = (a, b) => {
+          if (a.currentUsers > b.currentUsers) return type;
+          if (a.currentUsers < b.currentUsers) return -type;
+
+          if (a.maxUsers > b.maxUsers) return type;
+          if (a.maxUsers < b.maxUsers) return -type;
+        };
+        break;
+    }
+
+    return this.stations.sort(currentSort);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -342,10 +300,10 @@ export default Vue.extend({
   white-space: nowrap;
   border-collapse: collapse;
 
-  font-size: calc(0.7rem + 0.3vw);
+  font-size: calc(0.5rem + 0.3vw);
 
   @include smallScreen() {
-    font-size: 0.75rem;
+    font-size: 0.65rem;
   }
 
   &-head th {
diff --git a/src/components/ui/Options.vue b/src/components/ui/Options.vue
index 339fc03..a3f631d 100644
--- a/src/components/ui/Options.vue
+++ b/src/components/ui/Options.vue
@@ -92,7 +92,7 @@ export default class Options extends Vue {
   border: none;
 
   color: #e0e0e0;
-  font-size: 0.9em;
+  font-size: 0.7em;
 
   padding: 0.3em;
 
diff --git a/src/components/ui/StationCard.vue b/src/components/ui/StationCard.vue
index cd0937f..1988e07 100644
--- a/src/components/ui/StationCard.vue
+++ b/src/components/ui/StationCard.vue
@@ -67,7 +67,7 @@
       <div class="dispatcher">
         <div
           class="dispatcher-level flex"
-          :style="calculateStyle(stationInfo.dispatcherExp)"
+          :style="calculateExpStyle(stationInfo.dispatcherExp)"
         >{{computedExp}}</div>
         <div class="dispatcher-info">
           <div class="dispatcher-name">
@@ -136,52 +136,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Component, Prop } from "vue-property-decorator";
+import styleMixin from "@/mixins/styleMixin";
 
 @Component
-export default class StationCard extends Vue {
+export default class StationCard extends styleMixin {
   @Prop() stationInfo;
   @Prop() exit!: void;
 
-  calculateStyle(exp: number): string {
-    const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
-    const fontColor = exp > 15 ? "white" : "black";
-
-    return `backgroundColor: ${bgColor}; color: ${fontColor}`;
-  }
-
-  statusClasses(status: string) {
-    let className = "";
-
-    switch (status) {
-      case "WOLNA":
-        className = "free";
-        break;
-      case "KOŃCZY":
-        className = "ending";
-        break;
-      case "NIEZALOGOWANY":
-        className = "not-signed";
-        break;
-      case "BEZ LIMITU":
-        className = "no-limit";
-        break;
-      case "NIEDOSTĘPNY":
-        className = "unavailable";
-        break;
-      case "Z/W":
-        className = "brb";
-        break;
-      case "BRAK MIEJSCA":
-        className = "no-space";
-        break;
-      default:
-        break;
-    }
-
-    return className;
-  }
-
   get computedExp(): string {
     return this.stationInfo.dispatcherExp < 2
       ? "L"
@@ -282,7 +244,7 @@ export default class StationCard extends Vue {
   &-level {
     font-size: 2.5em;
     font-weight: bold;
-    margin-right: .3em;
+    margin-right: 0.3em;
 
     max-width: 2em;
 
diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts
index b21d346..d36562a 100644
--- a/src/mixins/styleMixin.ts
+++ b/src/mixins/styleMixin.ts
@@ -4,10 +4,49 @@ import Component from 'vue-class-component'
 // You can declare mixins as the same style as components.
 @Component
 export default class styleMixin extends Vue {
-    calculateStyle(exp: string | number): string {
-        const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+    calculateExpStyle(exp: string | number): string {
+        const bgColor =
+            exp > -1
+                ? exp < 2
+                    ? "#26B0D9"
+                    : `hsl(${-exp * 5 + 100},  65%, 50%)`
+                : "#888";
+
         const fontColor = exp > 15 ? "white" : "black";
 
         return `backgroundColor: ${bgColor}; color: ${fontColor}`;
     }
+
+
+    statusClasses(occupiedTo: string) {
+        let className = "";
+
+        switch (occupiedTo) {
+            case "WOLNA":
+                className = "free";
+                break;
+            case "KOŃCZY":
+                className = "ending";
+                break;
+            case "NIEZALOGOWANY":
+                className = "not-signed";
+                break;
+            case "BEZ LIMITU":
+                className = "no-limit";
+                break;
+            case "NIEDOSTĘPNY":
+                className = "unavailable";
+                break;
+            case "Z/W":
+                className = "brb";
+                break;
+            case "BRAK MIEJSCA":
+                className = "no-space";
+                break;
+            default:
+                break;
+        }
+
+        return className;
+    }
 }
diff --git a/src/scripts/interfaces/Filter.ts b/src/scripts/interfaces/Filter.ts
new file mode 100644
index 0000000..e991581
--- /dev/null
+++ b/src/scripts/interfaces/Filter.ts
@@ -0,0 +1,23 @@
+export default interface Filter {
+    "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
+}
\ No newline at end of file
diff --git a/src/scripts/interfaces/Station.ts b/src/scripts/interfaces/Station.ts
new file mode 100644
index 0000000..838d4e6
--- /dev/null
+++ b/src/scripts/interfaces/Station.ts
@@ -0,0 +1,23 @@
+export default interface Station {
+    stationName: string;
+    stationHash: string;
+    maxUsers: number;
+    currentUsers: number;
+    spawnString: string;
+    dispatcherRate: number;
+    dispatcherName: string;
+    dispatcherExp: number;
+    dispatcherId: number;
+    stationLines: string;
+    stationProject: string;
+    reqLevel: string;
+    supportersOnly: string;
+    signalType: string;
+    controlType: string;
+    default: boolean;
+    nonPublic: boolean;
+    routes: { oneWay: { catenary: number; noCatenary: number; }, twoWay: { catenary: number; noCatenary: number; } };
+    online: boolean;
+    occupiedTo: string;
+    statusTimestamp: number;
+}
\ No newline at end of file
diff --git a/src/store/modules/store.ts b/src/store/modules/store.ts
index f477f18..3ae0eb4 100644
--- a/src/store/modules/store.ts
+++ b/src/store/modules/store.ts
@@ -2,6 +2,8 @@ import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';
 import axios from 'axios';
 import data from '@/data/stations.json';
 
+import Station from "@/scripts/interfaces/Station";
+
 enum ConnState {
     Loading = 0,
     Error = 1,
@@ -21,29 +23,7 @@ class Store extends VuexModule {
         dispatcherDataURL: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1"
     }
 
-    private stations: {
-        stationName: string;
-        stationHash: string;
-        maxUsers: number;
-        currentUsers: number;
-        spawnString: string;
-        dispatcherRate: number;
-        dispatcherName: string;
-        dispatcherExp: number;
-        dispatcherId: number;
-        stationLines: string;
-        stationProject: string;
-        reqLevel: string;
-        supportersOnly: string;
-        signalType: string;
-        controlType: string;
-        default: boolean;
-        nonPublic: boolean;
-        routes: { oneWay: { catenary: number; noCatenary: number; }, twoWay: { catenary: number; noCatenary: number; } };
-        online: boolean;
-        occupiedTo: string;
-        statusTimestamp: number;
-    }[] = [];
+    private stations: Station[] = [];
 
     private filteredStations: {}[] = [];