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

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

@@ -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 {

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;