Dodanie opcji sortowania (W.I.P.), zmiana czcionki

public/index.html

@@ -6,8 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;700&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Muli:wght@400;500;700&display=swap" rel="stylesheet">
   <title>Stacjownik</title>
 </head>
 

src/App.vue

@@ -67,7 +67,7 @@ export default Vue.extend({
     ...mapActions(["initStations"]),
     getStationList() {
       this.initStations()
-        .then(() => (this.connectionState = 2))
+        .then(result => (this.connectionState = 2))
         .catch(err => {
           this.connectionState = 1;
           this.errorMessage = err.message;
@@ -94,7 +94,8 @@ export default Vue.extend({
 }
 
 ::-webkit-scrollbar {
-  width: 15px;
+  width: 0.5rem;
+  height: 0.5rem;
 
   &-track {
     background: #222;
@@ -113,12 +114,12 @@ html {
 body {
   width: 100%;
   margin: 0;
-  font-family: "Lato", sans-serif;
+  font-family: "Muli", sans-serif;
 }
 
 button,
 input {
-  font-family: "Lato", sans-serif;
+  font-family: "Muli", sans-serif;
 }
 
 input {

src/assets/icon-arrow-asc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>

src/assets/icon-arrow-desc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>

src/assets/icon-sort.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/></svg>

src/components/ui/Card.vue

@@ -168,6 +168,7 @@ export default Vue.extend({
 .card {
   display: flex;
   flex-direction: column;
+
   position: fixed;
   top: 50%;
   left: 50%;

src/components/ui/Icon.vue

@@ -0,0 +1,10 @@
+<template>
+  <img class="icon" :src="require(`@/assets/icon-${name}.svg`)" alt />
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: ["name"]
+});
+</script>

src/components/ui/List.vue

@@ -2,33 +2,29 @@
   <div class="list flex">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
-    <!-- <div class="info">Ups! Brak stacji do wyświetlenia!</div> -->
+    <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
-    <div class="table-wrapper">
-      <table class="table" v-if="stations.length > 0">
+    <div class="table-wrapper" v-if="stations.length > 0">
+      <table class="table">
         <thead>
           <tr>
-            <th>Stacja</th>
-            <th>Status</th>
-            <th>Dyżurny</th>
-            <th>Poziom</th>
-            <th>Maszyniści</th>
-            <th>
-              Informacje
-              <div>ogólne</div>
-            </th>
-            <th>
-              Szlaki
-              <div>2-torowe</div>
-            </th>
-            <th>
-              Szlaki
-              <div>1-torowe</div>
+            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+              <span>
+                <div>
+                  <div>{{head[0]}}</div>
+                  <div v-if="head.length > 1">{{head[1]}}</div>
+                </div>
+
+                <Icon
+                  :name="`arrow-${sorterActive.type == 1 ? 'asc' : 'desc'}`"
+                  v-if="sorterActive.index == i"
+                />
+              </span>
             </th>
           </tr>
         </thead>
 
-        <tbody>
+        <transition-group tag="tbody" name="table-anim">
           <tr
             class="table-item"
             v-for="(station, i) in computedStations"
@@ -51,7 +47,7 @@
               <span
                 v-if="station.online"
                 :style="calculateStyle(station.dispatcherExp)"
-              >{{station.dispatcherExp}}</span>
+              >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
             </td>
             <td
               class="users"
@@ -121,7 +117,7 @@
               >{{station.routes.oneWay.noCatenary}}</span>
             </td>
           </tr>
-        </tbody>
+        </transition-group>
       </table>
     </div>
   </div>
@@ -132,21 +128,105 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 export default Vue.extend({
   name: "List",
   components: {
-    Card
+    Card,
+    Icon
   },
   data: () => ({
-    focusedStationName: ""
+    focusedStationName: "",
+    sorterActive: { index: 0, type: 1 },
+    headTitles: [
+      ["Stacja"],
+      ["Status"],
+      ["Dyżurny"],
+      ["Poziom"],
+      ["Maszyniści"],
+      ["Informacje", "ogólne"],
+      ["Szlaki", "dwutorowe"],
+      ["Szlaki", "jednotorowe"]
+    ]
   }),
   computed: {
     ...mapGetters({ stations: "getStations" }),
     computedStations() {
-      return this.stations.sort((a: any, b: any) =>
-        a.stationName < b.stationName ? -1 : 1
-      );
+      let sortFun;
+      const type: number = this.sorterActive.type;
+
+      const sortByName = (a, b) => {
+        if (a.stationName > b.stationName) return type;
+        if (a.stationName < b.stationName) return -type;
+      };
+
+      switch (this.sorterActive.index) {
+        case 0:
+        default:
+          sortFun = sortByName;
+          break;
+
+        case 1:
+          sortFun = (a, b) => {
+            if (a.occupiedTo > b.occupiedTo) return type;
+            if (a.occupiedTo < b.occupiedTo) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 2:
+          sortFun = (a, b) => {
+            if (a.dispatcherName > b.dispatcherName) return type;
+            if (a.dispatcherName < b.dispatcherName) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 3:
+          sortFun = (a, b) => {
+            if (a.dispatcherExp > b.dispatcherExp) return type;
+            if (a.dispatcherExp < b.dispatcherExp) return -type;
+
+            // TO DO: naprawić bugujące się sortowanie
+
+            // sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 4:
+          sortFun = (a, b) => {
+            if (a.currentUsers > b.currentUsers) return type;
+            if (a.currentUsers < b.currentUsers) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 5:
+          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;
+
+            return 0;
+          };
+          break;
+      }
+
+      return this.stations.sort(sortFun);
     },
     focusedStationInfo() {
       return this.stations.find(
@@ -155,9 +235,17 @@ export default Vue.extend({
     }
   },
   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) => {
-      const bgColor =
-        exp === "L" ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+      const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
       const fontColor = exp > 15 ? "white" : "black";
 
       return `backgroundColor: ${bgColor}; color: ${fontColor}`;
@@ -276,9 +364,25 @@ export default Vue.extend({
     font-size: 0.75rem;
   }
 
-  thead th {
+  th {
     padding: 0.3rem;
     background-color: #444;
+    min-width: 150px;
+
+    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;
+      }
+    }
   }
 
   tr {

src/components/ui/OptionCard.vue

@@ -1,14 +1,14 @@
 <template>
-  <transition name="slide">
-    <section class="filter-card">
+  <transition name="appear">
+    <section class="option-card">
       <div class="card-exit" @click="exit">
         <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
       </div>
 
-      <div class="card-title flex">FILTRY</div>
+      <div class="card-title flex">FILTRUJ STACJE</div>
 
       <div class="card-options">
-        <div class="option" v-for="(option, i) in options" :key="i">
+        <div class="option" v-for="(option, i) in inputs.options" :key="i">
           <label class="option-label">
             <input
               class="option-input"
@@ -24,8 +24,12 @@
         </div>
       </div>
 
+      <div class="card-sorts">
+        <!-- <div class="sort" v-for="(sort, i) in inputs.sorts" :key="i">{{ sort.content }}</div> -->
+      </div>
+
       <div class="card-sliders">
-        <div class="slider" v-for="(slider, i) in sliders" :key="i">
+        <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
           <input
             class="slider-input"
             type="range"
@@ -51,225 +55,79 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-import { mapActions } from "vuex";
+import { Vue, Component, Prop } from "vue-property-decorator";
+import { Action } from "vuex-class";
 
-export default Vue.extend({
-  name: "list-filter",
-  data: () => ({
-    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"
-      },
+import inputData from "@/data/options.json";
 
-      {
-        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"
-      }
-    ],
+@Component
+export default class OptionCard extends Vue {
+  inputs = { ...inputData };
 
-    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 NIEELEKTR. (MINIMUM)"
-      }
-    ]
-  }),
-  props: ["exit"],
-  methods: {
-    ...mapActions(["setFilter", "resetFilters"]),
-    handleChange(e: any) {
-      this.setFilter({
-        filterName: e.target.name,
-        value: !e.target.checked
-      });
-    },
-    handleInput(e: any) {
-      this.setFilter({
-        filterName: e.target.name,
-        value: parseInt(e.target.value)
-      });
-    },
-    reset() {
-      this.options.forEach(option => (option.value = option.defaultValue));
-      this.sliders.forEach(slider => (slider.value = slider.defaultValue));
+  mounted() {}
 
-      this.resetFilters();
-    },
-    exitFilters() {
-      this.exit();
-    }
+  @Prop() exit!: () => void;
+
+  @Action("setFilter") setFilter;
+  @Action("resetFilters") resetFilters;
+
+  handleChange(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+
+    this.setFilter({
+      filterName: target.name,
+      value: !target.checked
+    });
   }
-});
+
+  handleInput(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+
+    this.setFilter({
+      filterName: target.name,
+      value: parseInt(target.value)
+    });
+  }
+
+  reset(): void {
+    this.inputs.options.forEach(option => {
+      option.value = option.defaultValue;
+    });
+
+    this.inputs.sliders.forEach(slider => {
+      slider.value = slider.defaultValue;
+    });
+
+    this.resetFilters();
+  }
+
+  closeCard(): void {
+    this.exit();
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
 @import "../../styles/variables";
 
-.slide-enter-active,
-.slide-leave-active {
+.appear-enter-active,
+.appear-leave-active {
   transition: all 0.3s ease;
 }
 
-.slide-enter,
-.slide-leave-to {
+.appear-enter,
+.appear-leave-to {
   opacity: 0;
 }
 
-.filter-card {
+.option-card {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  z-index: 0;
+  z-index: 3;
 
   overflow: auto;
   max-height: 95vh;
@@ -281,12 +139,12 @@ export default Vue.extend({
   background: #262a2e;
 
   font-size: calc(0.75rem + 0.4vw);
+  box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
     width: 85vw;
     font-size: 1em;
   }
-  box-shadow: 0 0 15px 5px #474747;
 }
 
 .card {
@@ -294,6 +152,7 @@ export default Vue.extend({
     position: absolute;
     top: 0;
     right: 0;
+
     margin: 0.8em;
 
     img {

src/components/ui/Options.vue

@@ -1,30 +1,31 @@
 <template>
   <div class="options">
-    <div class="option-buttons">
-      <button class="button" :class="{'open': filtersOpen}" @click="filtersOpen = !filtersOpen">
-        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> FILTRY
+    <div class="options-actions">
+      <button class="action-btn button" :class="{'open': filterCardOpen}" @click="toggleCardState">
+        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> OPCJE
       </button>
     </div>
 
     <keep-alive>
-      <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
+      <OptionCard v-if="filterCardOpen" :exit="toggleCardState" />
     </keep-alive>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import ListFilter from "@/components/utils/ListFilter.vue";
+import { Vue, Component } from "vue-property-decorator";
+import OptionCard from "@/components/ui/OptionCard.vue";
 
-export default Vue.extend({
-  components: {
-    ListFilter
-  },
-  data: () => ({
-    filtersOpen: false,
-    sortingsOpen: false
-  })
-});
+@Component({
+  components: { OptionCard }
+})
+export default class Options extends Vue {
+  filterCardOpen: boolean = false;
+
+  toggleCardState(): void {
+    this.filterCardOpen = !this.filterCardOpen;
+  }
+}
 </script>
 
 
@@ -34,10 +35,15 @@ export default Vue.extend({
 
 .options {
   font-size: calc(0.6rem + 0.9vw);
+
+  &-actions {
+    display: flex;
+  }
 }
 
-.button {
+.action-btn {
   font-size: 0.75em;
+  margin: 0 0.2em;
 
   img {
     width: 1.3em;

src/data/options.json

@@ -0,0 +1,186 @@
+{
+    "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)"
+        }
+    ],
+    "sorts": [
+        {
+            "id": "scenery-asc",
+            "name": "sceneryAsc",
+            "value": true,
+            "defaultValue": true,
+            "content": "SCENERIE (ROSNĄCO)"
+        },
+        {
+            "id": "status-asc",
+            "name": "statusAsc",
+            "value": false,
+            "defaultValue": false,
+            "content": "STATUS (ROSNĄCO)"
+        },
+        {
+            "id": "status-desc",
+            "name": "statusDesc",
+            "value": false,
+            "defaultValue": false,
+            "content": "STATUS (MALEJĄCO)"
+        }
+    ]
+}

src/store/modules/store.ts

@@ -1,11 +1,27 @@
 import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';
+import axios from 'axios';
 import data from '@/data/stations.json';
 
+enum ConnState {
+    Loading = 0,
+    Error = 1,
+    Connected = 2
+}
+
 @Module
 class Store extends VuexModule {
     private trainCount: number = 0;
     private stationCount: number = 0;
 
+    private connectionState: number = ConnState.Loading;
+    private errorMessage: string = "";
+
+    private apiURLS = {
+        stationDataURL: "https://api.td2.info.pl:9640/?method=getStationsOnline",
+        trainDataURL: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
+        dispatcherDataURL: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1"
+    }
+
     private stations: {
         stationName: string;
         stationHash: string;
@@ -94,8 +110,8 @@ class Store extends VuexModule {
     }
 
     @Action
-    private async fetchStations() {
-        let onlineStations: {
+    private fetchStations() {
+        let onlineStationsData: {
             stationName: string,
             stationHash: string,
             maxUsers: number,
@@ -109,81 +125,98 @@ class Store extends VuexModule {
             isOnline: number
         }[];
 
-        let statusList: [string, string, number, number][];
+        let onlineDispatchersData: [string, string, number, number][];
 
-        let onlineTrains: { isOnline: number, region: string, station: { stationName: string } }[];
+        let onlineTrainsData: { isOnline: number, region: string, station: { stationName: string } }[];
 
-        try {
-            onlineStations = (await (await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')).json()).message
-            statusList = (await (await fetch('https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1')).json()).message
-            onlineTrains = (await (await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')).json()).message
-        } catch (error) {
-            throw Error(error.message);
-        }
+        const queryStations = (async () => {
+            return (await axios.get(this.apiURLS.stationDataURL)).data.message;
+        })();
 
-        this.context.commit('setTrainCount', onlineTrains.filter((train) => train.isOnline && train.region === 'eu').length);
+        const queryTrains = (async () => {
+            return await (await axios.get(this.apiURLS.trainDataURL)).data.message;
+        })();
 
-        const mappedStations = onlineStations
-            .filter((station) => station.region === 'eu')
-            .filter((station) => station.isOnline)
-            .map((
-                { stationName = '', stationHash = '', maxUsers = 0, currentUsers = 0, spawnString = '',
-                    dispatcherRate = 0, dispatcherName = '', dispatcherExp = 0, dispatcherId = 0 }) => {
+        const queryDisptachers = (async () => {
+            return await (await axios.get(this.apiURLS.dispatcherDataURL)).data.message;
+        })();
 
-                const status = statusList.find((s) => s[0] === stationHash && s[1] === 'eu')
-                let occupiedTo = "---"
-                let occupiedTimestamp = 0
+        return Promise.all([queryStations, queryTrains, queryDisptachers])
+            .then(response => {
+                onlineStationsData = response[0];
+                onlineTrainsData = response[1];
+                onlineDispatchersData = response[2];
 
-                if (!status)
-                    occupiedTo = "NIEZALOGOWANY";
-                else {
-                    let occupiedCode = status[2];
+                const updatedStations = onlineStationsData.filter(station => station.region === "eu" && station.isOnline).map(station => {
+                    const stationStatus = onlineDispatchersData.find(status => status[0] == station.stationHash && status[1] == "eu");
 
-                    occupiedTimestamp = status[3];
-                    occupiedTo = "NIEDOSTĘPNY";
+                    let statusLabel = "";
 
-                    if (occupiedCode === 0) {
-                        if (occupiedTimestamp - Date.now() > 21000000)
-                            occupiedTo = "BEZ LIMITU";
-                        else
-                            occupiedTo = new Date(status[3])
-                                .toLocaleTimeString('en-US',
-                                    { hour12: false, hour: '2-digit', minute: '2-digit' });
+                    if (!stationStatus)
+                        statusLabel = "NIEZALOGOWANY";
+                    else {
+                        let statusCode = stationStatus[2];
+                        let statusTimestamp = stationStatus[3];
+
+                        statusLabel = "NIEDOSTĘPNY";
+
+                        switch (statusCode) {
+                            case 0:
+                                if (statusTimestamp - Date.now() > 21000000)
+                                    statusLabel = "BEZ LIMITU";
+                                else
+                                    statusLabel = new Date(statusTimestamp)
+                                        .toLocaleTimeString('en-US',
+                                            { hour12: false, hour: '2-digit', minute: '2-digit' });
+                                break;
+
+                            case 1:
+                                statusLabel = "Z/W";
+                                break;
+
+                            case 2:
+                                if (statusTimestamp == 0)
+                                    statusLabel = "KOŃCZY";
+                                break;
+
+                            case 3:
+                                statusLabel = "BRAK MIEJSCA"
+                                break;
+
+                            default:
+                                break;
+                        }
                     }
 
-                    if (occupiedCode === 1)
-                        occupiedTo = "Z/W";
+                    const trains = onlineTrainsData.filter((train) =>
+                        train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName)
 
-                    if (occupiedCode === 2 && occupiedTimestamp === 0)
-                        occupiedTo = "KOŃCZY";
+                    const stationData = data.find(s => s.stationName === station.stationName) || { stationName: station.stationName, stationURL: "" }
 
-                    if (occupiedCode === 3)
-                        occupiedTo = "BRAK MIEJSCA";
-                }
+                    return {
+                        ...stationData,
+                        stationHash: station.stationHash,
+                        maxUsers: station.maxUsers,
+                        currentUsers: station.currentUsers,
+                        spawnString: station.spawnString && station.spawnString.split(';')
+                            .map(v => v.split(',')[6] ? v.split(',')[6] : v.split(',')[0]),
+                        dispatcherName: station.dispatcherName,
+                        dispatcherRate: station.dispatcherRate,
+                        dispatcherId: station.dispatcherId,
+                        dispatcherExp: station.dispatcherExp,
+                        occupiedTo: statusLabel,
+                        trains
+                    }
+                });
 
-                const trains = onlineTrains.filter((train) =>
-                    train.region === 'eu' && train.isOnline && train.station.stationName === stationName)
+                this.context.commit('updateStations', {
+                    updatedStations,
+                    trainCount: onlineTrainsData.filter((train) => train.isOnline && train.region === 'eu').length
+                });
 
-                const stationData = data.find((station) => station.stationName === stationName) || { stationName, stationURL: "" }
-
-                return {
-                    ...stationData,
-                    stationHash,
-                    maxUsers,
-                    currentUsers,
-                    spawnString: spawnString && spawnString.split(';').map(v => v.split(',')[6] ? v.split(',')[6] : v.split(',')[0]),
-                    dispatcherName,
-                    dispatcherRate,
-                    dispatcherId,
-                    dispatcherExp: dispatcherExp < 2 ? 'L' : dispatcherExp,
-                    occupiedTo,
-                    trains
-                }
+                this.context.commit('filterStations');
             })
-
-        this.context.commit('updateStations', mappedStations);
-        this.context.commit('setStationCount', mappedStations.length);
-        this.context.commit('filterStations');
+            .catch(err => console.log(err));
     }
 
     @Mutation
@@ -239,17 +272,10 @@ class Store extends VuexModule {
             occupiedTo: "WOLNA",
             ...stationData,
         }))
-
-        // WSPARCIE DLA NIEWPISANYCH SCENERII!!!
     }
 
     @Mutation
-    private resetFilterList() {
-        this.filters = { ...this.filterInitStates };
-    }
-
-    @Mutation
-    private updateStations(updatedStations: any) {
+    private updateStations({ updatedStations, trainCount }) {
         for (let i = 0; i < this.stations.length; i++) {
             const toUpdate: any = updatedStations.find((updated: any) => updated.stationName === this.stations[i].stationName);
 
@@ -263,7 +289,6 @@ class Store extends VuexModule {
             this.stations[i].online = true;
 
             updatedStations = updatedStations.filter((updated: any) => updated.stationName !== this.stations[i].stationName);
-
         }
 
         // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy 
@@ -274,16 +299,10 @@ class Store extends VuexModule {
                 this.stations.push({ ...updated, online: true });
             }
         })
-    }
 
-    @Mutation
-    private setTrainCount(count: number) {
-        this.trainCount = count;
-    }
-
-    @Mutation
-    private setStationCount(count: number) {
-        this.stationCount = count;
+        // Aktualizacja liczników
+        this.stationCount = this.stations.filter(station => station.online).length;
+        this.trainCount = trainCount;
     }
 
     @Mutation
@@ -291,6 +310,11 @@ class Store extends VuexModule {
         this.filters[payload.filterName] = payload.value;
     }
 
+
+    @Mutation
+    private resetFilterList() {
+        this.filters = { ...this.filterInitStates };
+    }
 }
 
 export default Store;