Migracja pozostałych klas i komponentów na TS, optymalizacja kodu

src/App.vue

@@ -45,11 +45,11 @@ enum ConnState {
   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;
@@ -57,9 +57,11 @@ export default class App extends Vue {
   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%;

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;
 }
 

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"
     }
   ];
 }

src/components/ui/List.vue

@@ -41,24 +41,21 @@
           <td class="item-station-level">
             <span
               v-if="station.reqLevel"
-                :style="calculateStyle(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="item-station-status">
-              <span
-                class="status"
-                :class="occupationClasses(station.occupiedTo)"
-              >{{station.occupiedTo}}</span>
+            <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)"
+              :style="calculateExpStyle(station.dispatcherExp)"
             >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
           </td>
           <td
@@ -132,29 +129,29 @@
 </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: [
+@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 };
+
+  @Getter("getStations") stations!: Station[];
+
+  headTitles: string[][] = [
     ["Stacja"],
     ["Wymagany poz.", "dyżurnego"],
     ["Status"],
@@ -164,27 +161,57 @@ export default Vue.extend({
     ["Informacje", "ogólne"],
     ["Szlaki", "dwutorowe"],
     ["Szlaki", "jednotorowe"]
-    ]
-  }),
-  computed: {
-    ...mapGetters({ stations: "getStations" }),
-    computedStations() {
-      let sortFun;
+  ];
+
+  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;
+  }
+
+  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, b) => {
+    const sortByName = (a: Station, b: Station) => {
       if (a.stationName >= b.stationName) return type;
-        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:
-          sortFun = sortByName;
+        return (currentSort = sortByName);
         break;
 
       case 1:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
           if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
 
@@ -193,7 +220,7 @@ export default Vue.extend({
         break;
 
       case 2:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (a.statusTimestamp > b.statusTimestamp) return type;
           if (a.statusTimestamp < b.statusTimestamp) return -type;
 
@@ -205,7 +232,7 @@ export default Vue.extend({
         break;
 
       case 3:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (a.dispatcherName > b.dispatcherName) return type;
           if (a.dispatcherName < b.dispatcherName) return -type;
 
@@ -214,7 +241,7 @@ export default Vue.extend({
         break;
 
       case 4:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (a.dispatcherExp > b.dispatcherExp) return type;
           if (a.dispatcherExp < b.dispatcherExp) return -type;
 
@@ -223,7 +250,7 @@ export default Vue.extend({
         break;
 
       case 5:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (a.currentUsers > b.currentUsers) return type;
           if (a.currentUsers < b.currentUsers) return -type;
 
@@ -232,7 +259,7 @@ export default Vue.extend({
         break;
 
       case 6:
-          sortFun = (a, b) => {
+        currentSort = (a, b) => {
           if (a.currentUsers > b.currentUsers) return type;
           if (a.currentUsers < b.currentUsers) return -type;
 
@@ -242,78 +269,9 @@ export default Vue.extend({
         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 = "";
+    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 {

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;
 

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;
 

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;
+    }
 }

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
+}

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;
+}

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: {}[] = [];