chore: added more advanced routing to elements

package.json

@@ -16,7 +16,8 @@
     "pinia": "^2.0.17",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "9.11.0"
+    "vue-i18n": "9.11.0",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <AppModals />
   <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
-  <AppContainerView />
+ 
+  <router-view></router-view>
 </template>
 
 <script lang="ts">

src/components/sections/StockSection.vue

@@ -1,46 +1,29 @@
 <template>
   <section class="stock-section">
     <div class="section_modes">
-      <button
+      <router-link v-for="(route, i) in testRoutes" :key="route" class="link-btn" :to="`/${route}`">
-        v-for="(id, i) in sectionModes"
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route}`) }}
-        :key="id"
+        <span v-if="route == 'stock-list'">({{ store.stockList.length }})</span>
-        class="btn"
+      </router-link>
-        ref="sectionButtonRefs"
-        @click="chooseSection(id)"
-        :data-selected="store.stockSectionMode == id"
-      >
-        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
-        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
-      </button>
     </div>
 
     <transition name="tab-change" mode="out-in">
       <keep-alive>
-        <component :is="chosenSectionComponent"></component>
+        <component :is="route.meta.viewMode"></component>
       </keep-alive>
     </transition>
   </section>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
+import { useRoute } from 'vue-router';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
-
-const sectionButtonRefs = ref([]);
 
 const store = useStore();
-type SectionMode = typeof store.stockSectionMode;
+const route = useRoute();
 
-const sectionModes: SectionMode[] = [
+const testRoutes = ['stock', 'wiki', 'numgen', 'stockgen'];
-  'stock-list',
-  'wiki-list',
-  'number-generator',
-  'stock-generator',
-];
 
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
@@ -49,34 +32,11 @@ onMounted(() => {
     if (/^[1234]$/.test(e.key)) {
       const keyNum = Number(e.key);
 
-      store.stockSectionMode = sectionModes[keyNum - 1];
+      // store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
+      // (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
     }
   });
 });
-
-const chosenSectionComponent = computed(() => {
-  switch (store.stockSectionMode) {
-    case 'stock-list':
-      return StockListTab;
-
-    case 'wiki-list':
-      return WikiListTab;
-
-    case 'stock-generator':
-      return StockGeneratorTab;
-
-    case 'number-generator':
-      return NumberGeneratorTab;
-
-    default:
-      return StockListTab;
-  }
-});
-
-function chooseSection(sectionId: SectionMode) {
-  store.stockSectionMode = sectionId;
-}
 </script>
 
 <style lang="scss">
@@ -107,32 +67,15 @@ function chooseSection(sectionId: SectionMode) {
 .section_modes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+  padding: 1px;
 
   gap: 0.5em;
 
   margin-bottom: 1em;
+}
 
-  button {
+a.router-link-active {
-    position: relative;
+  color: gold;
-    border-radius: 0.5em 0.5em 0 0;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-
-      content: '';
-      width: 0;
-      height: 2px;
-      transition: all 100ms;
-      background-color: $accentColor;
-    }
-
-    &[data-selected='true']::after {
-      width: 100%;
-    }
-  }
 }
 
 @media screen and (max-width: 650px) {

src/components/tabs/StockGeneratorTab.vue

@@ -280,10 +280,9 @@ export default defineComponent({
 
       const bestStockList = bestGeneration.stockList;
 
-      this.groupStock(bestStockList);
-
       this.store.stockList = bestGeneration.stockList;
-      this.store.stockSectionMode = 'stock-list';
+      this.groupStock(bestStockList);
+      this.$router.push('/');
     },
 
     previewCar(type: string) {

src/locales/en.json

@@ -41,10 +41,10 @@
     "construction": "Construction type:"
   },
   "topbar": {
-    "stock-list": "STOCK",
+    "stock": "STOCK",
-    "wiki-list": "VEHICLES",
+    "wiki": "VEHICLES",
-    "number-generator": "NUMBER GEN.",
+    "numgen": "NUMBER GEN.",
-    "stock-generator": "STOCK GEN."
+    "stockgen": "STOCK GEN."
   },
   "stocklist": {
     "title": "STOCK EDITOR",

src/locales/pl.json

@@ -41,10 +41,10 @@
     "construction": "Typ konstrukcji:"
   },
   "topbar": {
-    "stock-list": "SKŁAD",
+    "stock": "SKŁAD",
-    "wiki-list": "POJAZDY",
+    "wiki": "POJAZDY",
-    "number-generator": "GNR NUMERU",
+    "numgen": "GNR NUMERU",
-    "stock-generator": "GNR SKŁADU"
+    "stockgen": "GNR SKŁADU"
   },
   "stocklist": {
     "title": "EDYTOR SKŁADU",

src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 
 import App from './App.vue';
 import i18n from './i18n-setup';
+import router from './router';
 const pinia = createPinia();
 
-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).use(router).mount('#app');

src/managers/apiManager.ts

@@ -0,0 +1,16 @@
+import http from '../http';
+import { API } from '../types/api.types';
+
+export class ApiManager {
+  static async fetchActiveData() {
+    try {
+      const responseData = (await http.get<API.ActiveData>('/api/getActiveData')).data;
+
+      return responseData;
+    } catch (error) {
+      console.error('Nie udało się pobrać zdalnej zawartości', error);
+    }
+
+    return null;
+  }
+}

src/managers/apiStockManager.ts

@@ -1,3 +0,0 @@
-class ApiStockManager {
-   
-}

src/router.ts

@@ -0,0 +1,53 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import AppContainerView from './views/AppContainerView.vue';
+import WikiListTab from './components/tabs/WikiListTab.vue';
+import StockListTab from './components/tabs/StockListTab.vue';
+import NumberGeneratorTab from './components/tabs/NumberGeneratorTab.vue';
+import StockGeneratorTab from './components/tabs/StockGeneratorTab.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: AppContainerView,
+    meta: {
+      viewMode: StockListTab,
+    },
+    children: [
+      {
+        path: 'stock',
+        redirect: '/',
+        meta: {
+          viewMode: StockListTab,
+        },
+      },
+      {
+        path: 'wiki',
+        component: AppContainerView,
+        meta: {
+          viewMode: WikiListTab,
+        },
+      },
+      {
+        path: 'numgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: NumberGeneratorTab,
+        },
+      },
+      {
+        path: 'stockgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: StockGeneratorTab,
+        },
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/store.ts

@@ -50,8 +50,6 @@ export const useStore = defineStore({
 
     vehiclePreviewSrc: '',
 
-    stockSectionMode: 'stock-list',
-
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 
@@ -139,18 +137,8 @@ export const useStore = defineStore({
     },
 
     handleRouting() {
-      switch (window.location.pathname) {
+      if (window.location.search.includes('trainId=')) {
-        case '/numgnr':
+        const trainId = window.location.search;
-          this.stockSectionMode = 'number-generator';
-          break;
-        case '/stockgnr':
-          this.stockSectionMode = 'stock-generator';
-          break;
-        case '/vehicles':
-          this.stockSectionMode = 'wiki-list';
-          break;
-        default:
-          break;
       }
     },
   },

src/styles/global.scss

@@ -138,7 +138,8 @@ button {
   cursor: pointer;
 }
 
-.btn {
+.btn,
+.link-btn {
   padding: 0.4em 0.75em;
 
   outline: none;
@@ -206,6 +207,10 @@ button {
   }
 }
 
+.link-btn.router-link-active {
+  color: $accentColor;
+}
+
 select,
 input[type='text'],
 input[type='number'] {

src/types/common.types.ts

@@ -1,5 +1,4 @@
 export type IVehicle = ILocomotive | ICarWagon;
-export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
 
 export type LocoGroupType = 'loco-electric' | 'loco-diesel' | 'unit-electric' | 'unit-diesel';
 export type WagonGroupType = 'wagon-passenger' | 'wagon-freight';

yarn.lock

@@ -1672,6 +1672,11 @@
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz"
   integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
 
+"@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/eslint-config-prettier@^9.0.0":
   version "9.0.0"
   resolved "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz"
@@ -4346,6 +4351,13 @@ vue-i18n@9.11.0:
     "@intlify/shared" "9.11.0"
     "@vue/devtools-api" "^6.5.0"
 
+vue-router@4:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.0.tgz#58fc5fe374e10b6018f910328f756c3dae081f14"
+  integrity sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"