Poprawki struktury projektu

src/App.vue

@@ -41,8 +41,8 @@ git <template>
             <Clock />
             <div class="info_counter">
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-              <span>{{ data.stationCount }}</span>
+              <span>{{ data.activeStationCount }}</span>
-              <span>{{ data.trainCount }}</span>
+              <span>{{ data.activeTrainCount }}</span>
               <img src="@/assets/icon-train.svg" alt="icon train" />
             </div>
           </span>
@@ -89,14 +89,15 @@ import { Action, Getter } from "vuex-class";
 import UpdateModal from "@/components/Global/UpdateModal.vue";
 import Clock from "@/components/App/Clock.vue";
 
-import StorageManager from "@/scripts/storageManager";
+import StorageManager from "@/scripts/managers/storageManager";
+import { StoreData } from "./scripts/interfaces/StoreData";
 
 @Component({
   components: { Clock, UpdateModal },
 })
 export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
-  @Getter("getAllData") data;
+  @Getter("getAllData") data!: StoreData;
 
   private VERSION = "1.4.5";
 

src/components/SceneryView/SceneryInfo.vue

@@ -12,11 +12,16 @@
 
         <span v-else>{{ stationInfo.stationName }}</span>
       </div>
-      <div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
+      <div class="scenery-hash" v-if="stationInfo.stationHash">
+        #{{ stationInfo.stationHash }}
+      </div>
     </div>
 
     <section v-if="!timetableOnly">
-      <div class="info-stats">
+      <div
+        class="info-stats"
+        :class="!stationInfo.stationHash ? 'no-stats' : ''"
+      >
         <span class="likes">
           <img :src="likeIcon" alt="icon-like" />
           <span>{{ stationInfo.dispatcherRate }}</span>
@@ -106,7 +111,7 @@
       </div>
 
       <div class="info-dispatcher">
-        <div class="dispatcher">
+        <div class="dispatcher" v-if="stationInfo.stationHash">
           <span
             class="dispatcher_level"
             :style="
@@ -124,12 +129,12 @@
           <span class="dispatcher_name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
-        <span class="status-badge" :class="stationInfo.statusID"
+        <span class="status-badge" :class="stationInfo.statusID">
-          >{{ $t(`status.${stationInfo.statusID}`) }}
+          {{ $t(`status.${stationInfo.statusID}`) }}
           {{
             stationInfo.statusID == "online" ? stationInfo.statusTimeString : ""
-          }}</span
+          }}
-        >
+        </span>
       </div>
 
       <div class="info-lists">
@@ -276,6 +281,10 @@ h3 {
 
     font-size: 1.65em;
 
+    &.no-stats {
+      opacity: 0.5;
+    }
+
     & > span {
       display: flex;
       align-items: center;

src/components/StationsView/FilterCard.vue

@@ -75,7 +75,7 @@ import { Vue, Component, Prop } from "vue-property-decorator";
 
 import inputData from "@/data/options.json";
 
-import StorageManager from "@/scripts/storageManager";
+import StorageManager from "@/scripts/managers/storageManager";
 import ActionButton from "../Global/ActionButton.vue";
 
 @Component({ components: { ActionButton } })

src/components/StationsView/StationTable.vue

@@ -281,14 +281,9 @@ export default class StationTable extends styleMixin {
 
     if (!station) return;
 
-    if (!station.online) {
-      window.location.href = station.stationURL;
-      return;
-    }
-
     this.$router.push({
       name: "SceneryView",
-      query: { hash: station.stationHash },
+      query: { station: station.stationName.replaceAll(" ", "_") },
     });
   }
 }

src/lang/en.json

@@ -118,7 +118,7 @@
     "no-timetables": "No active timetables!",
     "no-users": "NO ACTIVE PLAYERS",
     "no-spawns": "NO OPEN SPAWNS",
-    "no-scenery": "Oops! This scenery doesn't exist or is offline!",
+    "no-scenery": "Oops! This scenery doesn't exist!",
     "return-btn": "Return to main site"
   },
   "timetables": {

src/lang/pl.json

@@ -118,7 +118,7 @@
     "no-timetables": "Brak aktywnych rozkładów!",
     "no-users": "BRAK AKTYWNYCH GRACZY",
     "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
-    "no-scenery": "Ups! Nie znaleziono danej stacji bądź jest ona offline!",
+    "no-scenery": "Ups! Ta sceneria nie istnieje!",
     "return-btn": "Wróć na stronę główną"
   },
   "timetables": {

src/router/index.ts

@@ -1,40 +1,40 @@
-import Vue from 'vue';
+import Vue from "vue";
-import VueRouter, { RouteConfig } from 'vue-router';
+import VueRouter, { RouteConfig } from "vue-router";
 
-import StationsView from '../views/StationsView.vue';
+import StationsView from "../views/StationsView.vue";
-import TrainsView from '../views/TrainsView.vue';
+import TrainsView from "../views/TrainsView.vue";
 
 Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
   {
-    path: '/',
+    path: "/",
-    name: 'StationsView',
+    name: "StationsView",
-    component: StationsView,
+    component: StationsView
   },
   {
-    path: '/trains',
+    path: "/trains",
-    name: 'TrainsView',
+    name: "TrainsView",
     component: TrainsView,
-    props: true,
+    props: true
   },
   {
-    path: '/scenery',
+    path: "/scenery",
-    name: 'SceneryView',
+    name: "SceneryView",
-    component: () => import('@/views/SceneryView.vue'),
+    component: () => import("@/views/SceneryView.vue"),
-    props: true,
+    props: true
   },
   {
-    path: '/history',
+    path: "/history",
-    name: 'HistoryView',
+    name: "HistoryView",
-    component: () => import('@/views/HistoryView.vue'),
+    component: () => import("@/views/HistoryView.vue")
-  },
+  }
 ];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes,
+  routes
 });
 
 export default router;

src/scripts/enums/DataStatus.ts

@@ -0,0 +1,8 @@
+const enum DataStatus {
+  Initialized = -1,
+  Loading = 0,
+  Error = 1,
+  Loaded = 2
+}
+
+export default DataStatus;

src/scripts/interfaces/StoreData.ts

@@ -0,0 +1,14 @@
+import DataStatus from "../enums/DataStatus";
+import Station from "./Station";
+import Train from "./Train";
+
+export interface StoreData {
+  stationList: Station[];
+  trainList: Train[];
+
+  activeTrainCount: number;
+  activeStationCount: number;
+
+  dataConnectionStatus: DataStatus;
+  timetableDataStatus: DataStatus;
+}

src/store/store.ts

@@ -8,13 +8,8 @@ import Train from "@/scripts/interfaces/Train";
 import TrainStop from "@/scripts/interfaces/TrainStop";
 
 import utils from "@/scripts/utils/storeUtils";
-
+import DataStatus from "@/scripts/enums/DataStatus";
-enum Status {
+import { StoreData } from "@/scripts/interfaces/StoreData";
-  Initialized = -1,
-  Loading = 0,
-  Error = 1,
-  Loaded = 2
-}
 
 interface TimetableData {
   trainNo: number;
@@ -62,20 +57,22 @@ export default class Store extends VuexModule {
   private trainCount: number = 0;
   private stationCount: number = 0;
 
-  private dataConnectionStatus: Status = Status.Loading;
+  private dataConnectionStatus: DataStatus = DataStatus.Loading;
-  private sceneryDataStatus: Status = Status.Loading;
+  private sceneryDataStatus: DataStatus = DataStatus.Loading;
-  private timetableLoaded: Status = Status.Loading;
+  private timetableLoaded: DataStatus = DataStatus.Loading;
 
   private stationList: Station[] = [];
   private trainList: Train[] = [];
 
   //GETTERS
-  get getAllData() {
+  get getAllData(): StoreData {
     return {
       stationList: this.stationList,
       trainList: this.trainList,
-      trainCount: this.trainCount,
+
-      stationCount: this.stationCount,
+      activeTrainCount: this.trainCount,
+      activeStationCount: this.stationCount,
+
       dataConnectionStatus: this.dataConnectionStatus,
       timetableDataStatus: this.timetableLoaded
     };
@@ -104,7 +101,7 @@ export default class Store extends VuexModule {
   @Action
   async synchronizeData() {
     this.context.commit("setSceneryData");
-    this.context.commit("setSceneryDataStatus", Status.Loaded);
+    this.context.commit("setSceneryDataStatus", DataStatus.Loaded);
 
     this.context.dispatch("fetchOnlineData");
     setInterval(() => this.context.dispatch("fetchOnlineData"), 20000);
@@ -249,18 +246,18 @@ export default class Store extends VuexModule {
         this.context.dispatch("fetchTimetableData");
       })
       .catch(err => {
-        this.context.commit("setDataConnectionStatus", Status.Error);
+        this.context.commit("setDataConnectionStatus", DataStatus.Error);
       });
   }
 
   //MUTATIONS
   @Mutation
-  private setDataConnectionStatus(status: Status) {
+  private setDataConnectionStatus(status: DataStatus) {
     this.dataConnectionStatus = status;
   }
 
   @Mutation
-  private setSceneryDataStatus(status: Status) {
+  private setSceneryDataStatus(status: DataStatus) {
     this.sceneryDataStatus = status;
   }
 
@@ -385,7 +382,7 @@ export default class Store extends VuexModule {
       });
 
     this.stationCount = this.stationList.filter(station => station.online).length;
-    this.dataConnectionStatus = Status.Loaded;
+    this.dataConnectionStatus = DataStatus.Loaded;
   }
 
   @Mutation
@@ -400,7 +397,7 @@ export default class Store extends VuexModule {
     }, [] as Train[]);
 
     this.trainCount = this.trainList.filter(train => train.online).length;
-    this.dataConnectionStatus = Status.Loaded;
+    this.dataConnectionStatus = DataStatus.Loaded;
   }
 
   @Mutation
@@ -495,6 +492,6 @@ export default class Store extends VuexModule {
       return acc;
     }, [] as Train[]);
 
-    this.timetableLoaded = Status.Loaded;
+    this.timetableLoaded = DataStatus.Loaded;
   }
 }

src/views/SceneryView.vue

@@ -2,12 +2,13 @@
   <div class="scenery-view">
     <div
       class="scenery-offline"
-      v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
+      v-if="!stationInfo && isDataLoaded && isComponentVisible"
     >
       {{ $t("scenery.no-scenery") }}
-      <button class="button">
+
+      <action-button>
         <router-link to="/">{{ $t("scenery.return-btn") }}</router-link>
-      </button>
+      </action-button>
     </div>
 
     <div class="scenery-wrapper" v-if="stationInfo">
@@ -16,7 +17,7 @@
       <SceneryTimetable
         :stationInfo="stationInfo"
         :timetableOnly="timetableOnly"
-        :dataStatus="timetableDataStatus"
+        :dataStatus="data.timetableDataStatus"
       />
     </div>
   </div>
@@ -31,14 +32,15 @@ import Station from "@/scripts/interfaces/Station";
 
 import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
 import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
+import { StoreData } from "@/scripts/interfaces/StoreData";
+import DataStatus from "@/scripts/enums/DataStatus";
+import ActionButton from "@/components/Global/ActionButton.vue";
 
 @Component({
-  components: { SceneryInfo, SceneryTimetable },
+  components: { SceneryInfo, SceneryTimetable, ActionButton },
 })
 export default class SceneryView extends Vue {
-  @Getter("getStationList") storeStationList!: Station[];
+  @Getter("getAllData") data!: StoreData;
-  @Getter("getTimetableDataStatus") timetableDataStatus!: number;
-  @Getter("getDataStatus") dataStatus!: number;
 
   timetableOnly: boolean = false;
 
@@ -47,19 +49,22 @@ export default class SceneryView extends Vue {
       this.$route.query["timetable_only"] == "1" ? true : false;
   }
 
-  get currentPath() {
+  get isComponentVisible() {
-    return this.$route.path;
+    return this.$route.path === "/scenery";
   }
 
-  get stationInfo(): Station | null {
+  get isDataLoaded() {
-    if (!this.$route.query.hash || !this.storeStationList) return null;
+    return this.data.dataConnectionStatus == DataStatus.Loaded;
+  }
 
-    const info =
+  get stationInfo(): Station | undefined {
-      this.storeStationList.find(
+    if (!this.$route.query.station) return;
-        (station) => station.stationHash === this.$route.query.hash.toString()
-      ) || null;
 
-    return info;
+    return this.data.stationList.find(
+      (station) =>
+        station.stationName ===
+        this.$route.query.station.toString().replaceAll("_", " ")
+    );
   }
 }
 </script>
@@ -89,9 +94,8 @@ $sceneryBgCol: #333;
 
     font-size: 2em;
 
-    .button {
+    button {
       margin: 1em auto;
-      font-size: 0.85em;
     }
   }
 

src/views/StationsView.vue

@@ -59,12 +59,13 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
+
 import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 
-import StorageManager from "@/scripts/storageManager";
+import StorageManager from "@/scripts/managers/storageManager";
-import StationFilterManager from "@/scripts/stationFilterManager";
+import StationFilterManager from "@/scripts/managers/stationFilterManager";
 
 import inputData from "@/data/options.json";
 
@@ -72,6 +73,8 @@ import StationTable from "@/components/StationsView/StationTable.vue";
 import FilterCard from "@/components/StationsView/FilterCard.vue";
 import DonationModal from "@/components/Global/DonationModal.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
+import { StoreData } from "@/scripts/interfaces/StoreData";
+import DataStatus from "@/scripts/enums/DataStatus";
 
 @Component({
   components: {
@@ -98,18 +101,18 @@ export default class StationsView extends Vue {
   inputs = inputData;
 
   @Getter("getStationList") stationList!: Station[];
-  @Getter("getAllData") data;
+  @Getter("getAllData") data!: StoreData;
 
   get dataStatusClass() {
-    if (this.data.dataConnectionStatus == 0) return "loading";
+    if (this.data.dataConnectionStatus == DataStatus.Loading) return "loading";
-    if (this.data.dataConnectionStatus == 1) return "error";
+    if (this.data.dataConnectionStatus == DataStatus.Error) return "error";
 
     return "success";
   }
 
   get timetableDataStatusClass() {
-    if (this.data.timetableDataStatus == 0) return "loading";
+    if (this.data.timetableDataStatus == DataStatus.Loading) return "loading";
-    if (this.data.timetableDataStatus == 1) return "error";
+    if (this.data.timetableDataStatus == DataStatus.Error) return "error";
 
     return "success";
   }
@@ -186,8 +189,7 @@ export default class StationsView extends Vue {
   }
 
   setFocusedStation(name: string) {
-    if (this.focusedStationName == name) this.focusedStationName = "";
+    this.focusedStationName = this.focusedStationName == name ? "" : name;
-    else this.focusedStationName = name;
   }
 
   get focusedStationInfo() {