refactor: scenery view back button routing; component setup script

src/router/index.ts

@@ -36,7 +36,10 @@ const routes: Array<RouteRecordRaw> = [
     props: (route) => ({
       region: route.query.region,
       station: route.query.station
-    })
+    }),
+    beforeEnter: (to, from) => {
+      to.meta['prevPath'] = from.fullPath;
+    }
   },
   {
     path: '/journal',
@@ -72,7 +75,7 @@ const router = createRouter({
       from.query['view'] === undefined &&
       !savedPosition
     )
-      return { el: `.scenery-left`, behavior: 'instant', top: 3 };
+      return { el: `.app_main`, behavior: 'instant', top: -13 };
 
     if (savedPosition) return savedPosition;
   },

src/views/SceneryView.vue

@@ -23,8 +23,8 @@
             v-for="(viewMode, i) in viewModes"
             :key="i"
             class="btn btn--option"
-            :class="{ checked: currentMode == viewMode.component }"
+            :class="{ checked: currentMode == viewMode.component.name }"
-            @click="setViewMode(viewMode.component)"
+            @click="setViewMode(viewMode.component.name!)"
           >
             {{ $t(viewMode.id) }}
           </button>
@@ -32,17 +32,17 @@
 
         <div
           v-if="
-            apiStore.dataStatuses.sceneries == Status.Loading ||
+            apiStore.dataStatuses.sceneries == Status.Data.Loading ||
-            apiStore.dataStatuses.connection == Status.Loading
+            apiStore.dataStatuses.connection == Status.Data.Loading
           "
         ></div>
 
         <keep-alive v-else>
           <component
-            :is="currentMode"
+            :is="currentViewComponent"
             :onlineScenery="onlineSceneryInfo"
             :station="stationInfo"
-            :key="currentMode"
+            :key="currentViewComponent.name"
           ></component>
         </keep-alive>
       </div>
@@ -50,40 +50,28 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
-import routerMixin from '../mixins/routerMixin';
 import { useMainStore } from '../store/mainStore';
 
 import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
 import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
+
 import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';
 import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
 import SceneryDispatchersHistory from '../components/SceneryView/SceneryDispatchersHistory.vue';
-import ActionButton from '../components/Global/ActionButton.vue';
+
-import { Status } from '../typings/common';
 import { useApiStore } from '../store/apiStore';
+import { ref } from 'vue';
+import { Status } from '../typings/common';
 
-enum SceneryViewMode {
+const route = useRoute();
-  'TIMETABLES_ACTIVE',
+const router = useRouter();
-  'TIMETABLES_HISTORY',
-  'SCENERY_HISTORY'
-}
 
-export default defineComponent({
+const prevPath = ref('/');
-  name: 'SceneryView',
 
-  components: {
+const props = defineProps({
-    SceneryInfo,
-    SceneryTimetable,
-    ActionButton,
-    SceneryHeader,
-    SceneryTimetablesHistory,
-    SceneryDispatchersHistory
-  },
-
-  props: {
   region: {
     type: String,
     required: false
@@ -93,87 +81,68 @@ export default defineComponent({
     type: String,
     required: true
   }
-  },
+});
 
-  mixins: [routerMixin],
+const store = useMainStore();
+const apiStore = useApiStore();
 
-  data: () => ({
+const viewModes = [
-    store: useMainStore(),
-    apiStore: useApiStore(),
-
-    viewModes: [
   {
     id: 'scenery.option-active-timetables',
-        component: 'SceneryTimetable'
+    component: SceneryTimetable
   },
   {
     id: 'scenery.option-timetables-history',
-        component: 'SceneryTimetablesHistory'
+    component: SceneryTimetablesHistory
   },
   {
     id: 'scenery.option-dispatchers-history',
-        component: 'SceneryDispatchersHistory'
+    component: SceneryDispatchersHistory
   }
-    ],
+];
-    sceneryViewMode: SceneryViewMode,
-    selectedCheckpoint: '',
-    currentViewCompontent: 'SceneryTimetable',
-    onlineFrom: -1,
-    Status: Status.Data
-  }),
 
-  setup() {
+onMounted(() => {
-    const route = useRoute();
+  prevPath.value = (route.meta['prevPath'] as string) ?? '/';
+});
 
-    const isComponentVisible = computed(() => route.path === '/scenery');
+const currentMode = computed(() => {
+  return route.query.view?.toString() ?? 'SceneryTimetable';
+});
 
-    return {
+const currentViewComponent = computed(() => {
-      isComponentVisible
+  return (
-    };
+    viewModes.find((mode) => mode.component.name == currentMode.value)?.component ??
-  },
+    SceneryTimetable
-
-  computed: {
-    currentMode() {
-      return this.$route.query.view?.toString() ?? 'SceneryTimetable';
-    },
-
-    stationInfo() {
-      return this.store.stationList.find(
-        (station) => station.name === this.station?.toString().replace(/_/g, ' ')
   );
-    },
+});
 
-    onlineSceneryInfo() {
+const stationInfo = computed(() => {
-      return this.store.activeSceneryList.find(
+  return store.stationList.find(
+    (station) => station.name === props.station?.toString().replace(/_/g, ' ')
+  );
+});
+
+const onlineSceneryInfo = computed(() => {
+  return store.activeSceneryList.find(
     (scenery) =>
-          scenery.name === this.station?.toString().replace(/_/g, ' ') &&
+      scenery.name === props.station?.toString().replace(/_/g, ' ') &&
-          scenery.region == this.store.region.id
+      scenery.region == store.region.id
   );
-    }
+});
-  },
 
-  methods: {
+function setViewMode(componentName: string) {
-    setViewMode(componentName: string) {
+  router.push({
-      this.$router.push({
+    path: route.path,
-        path: this.$route.path,
     query: {
-          ...this.$route.query,
+      ...route.query,
       view: componentName
     }
   });
-    },
+}
 
-    loadSelectedCheckpoint() {
+function onReturnButtonClick() {
-      if (!this.stationInfo?.generalInfo?.checkpoints) return;
+  router.push(prevPath.value);
-      if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
+}
-      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0];
-    },
-
-    onReturnButtonClick() {
-      this.$router.back();
-    }
-  }
-});
 </script>
 
 <style lang="scss" scoped>