Restrukturyzacja pobierania danych, zmiany w wyglądzie

src/App.vue

@@ -13,9 +13,9 @@
             <Clock />
             <div class="counter">
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-              <span>{{onlineInfo.stationCount}}</span>
+              <span>{{data.stationCount}}</span>
 
-              <span>{{onlineInfo.trainCount}}</span>
+              <span>{{data.trainCount}}</span>
               <img src="@/assets/icon-train.svg" alt="icon train" />
             </div>
           </span>
@@ -40,10 +40,10 @@
       </footer>
 
       <transition name="message-anim" mode="out-in">
-        <span :key="connState">
-          <div class="message loading" v-if="connState == 0">Pobieranie danych...</div>
+        <span :key="data.dataConnectionStatus">
+          <div class="message loading" v-if="data.dataConnectionStatus == 0">Pobieranie danych...</div>
 
-          <div class="message error" v-if="connState == 1">
+          <div class="message error" v-if="data.dataConnectionStatus == 1">
             <img :src="ErrorIcon" alt="Error" />
             Brak odpowiedzi ze strony serwera!
           </div>
@@ -67,20 +67,25 @@ import Clock from "@/components/App/Clock.vue";
 export default class App extends Vue {
   ErrorIcon = require("@/assets/icon-error.svg");
 
-  @Getter("getOnlineInfo") onlineInfo;
-  @Getter("getConnectionState") connState;
+  @Action("synchronizeData") synchronizeData;
 
-  @Action("initStations") initStations;
+  @Getter("getAllData") data;
 
-  @Action("fetchOnlineStations") fetchStations;
-  @Action("fetchTrainsData") fetchTrainsData;
+  // @Getter("getOnlineInfo") onlineInfo;
+  // @Getter("getConnectionState") connState;
 
-  async mounted() {
-    this.initStations();
-    this.fetchTrainsData();
+  // @Action("initStations") initStations;
 
-    setInterval(this.fetchStations, 15000);
-    setInterval(this.fetchTrainsData, 10000);
+  // @Action("fetchOnlineStations") fetchStations;
+  // @Action("fetchTrainsData") fetchTrainsData;
+
+  mounted() {
+    this.synchronizeData();
+    // this.initStations();
+    // this.fetchTrainsData();
+
+    // setInterval(this.fetchStations, 15000);
+    // setInterval(this.fetchTrainsData, 45000);
   }
 }
 </script>
@@ -161,10 +166,10 @@ export default class App extends Vue {
   background: $bgCol;
   color: white;
 
-  font-size: calc(1rem + 2.1vw);
+  font-size: calc(1.1rem + 2.1vw);
 
   @include smallScreen() {
-    font-size: 2rem;
+    font-size: 2.5rem;
   }
 }