Poprawki struktury projektu

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("getTimetableDataStatus") timetableDataStatus!: number;
-  @Getter("getDataStatus") dataStatus!: number;
+  @Getter("getAllData") data!: StoreData;
 
   timetableOnly: boolean = false;
 
@@ -47,19 +49,22 @@ export default class SceneryView extends Vue {
       this.$route.query["timetable_only"] == "1" ? true : false;
   }
 
-  get currentPath() {
-    return this.$route.path;
+  get isComponentVisible() {
+    return this.$route.path === "/scenery";
   }
 
-  get stationInfo(): Station | null {
-    if (!this.$route.query.hash || !this.storeStationList) return null;
+  get isDataLoaded() {
+    return this.data.dataConnectionStatus == DataStatus.Loaded;
+  }
 
-    const info =
-      this.storeStationList.find(
-        (station) => station.stationHash === this.$route.query.hash.toString()
-      ) || null;
+  get stationInfo(): Station | undefined {
+    if (!this.$route.query.station) return;
 
-    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 StationFilterManager from "@/scripts/stationFilterManager";
+import StorageManager from "@/scripts/managers/storageManager";
+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 == 1) return "error";
+    if (this.data.dataConnectionStatus == DataStatus.Loading) return "loading";
+    if (this.data.dataConnectionStatus == DataStatus.Error) return "error";
 
     return "success";
   }
 
   get timetableDataStatusClass() {
-    if (this.data.timetableDataStatus == 0) return "loading";
-    if (this.data.timetableDataStatus == 1) return "error";
+    if (this.data.timetableDataStatus == DataStatus.Loading) return "loading";
+    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 = "";
-    else this.focusedStationName = name;
+    this.focusedStationName = this.focusedStationName == name ? "" : name;
   }
 
   get focusedStationInfo() {