refactor: code organization

src/App.vue

@@ -1,17 +1,18 @@
 <template>
-  <PopUpCard v-if="store.alertMessage || store.confirmMessage" />
+  <PopUpCard />
 
-  <router-view v-if="!tokenLoading"></router-view>
+  <router-view></router-view>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import PopUpCard from './components/PopUpCard.vue';
-import { RouterView } from 'vue-router';
-import { useStore } from './store';
 import useLocalStorage from './mixins/useLocalStorage';
-import { IUser } from './types/types';
 import client from './common/http';
+import { IUser } from './types/auth.types';
+import { LoadingState } from './types/common.types';
+import { useAuthStore } from './stores/auth.store';
+import { useSceneriesStore } from './stores/sceneries.store';
 
 export default defineComponent({
   components: { PopUpCard },
@@ -22,26 +23,26 @@ export default defineComponent({
     setupStorage();
 
     return {
-      store: useStore(),
-      tokenLoading: false,
+      authStore: useAuthStore(),
+      sceneriesStore: useSceneriesStore(),
+
+      tokenState: LoadingState.LOADING,
+      LoadingState,
     };
   },
 
   methods: {
     async autoLogin() {
       try {
-        this.tokenLoading = true;
-
+        this.tokenState = LoadingState.LOADING;
         const response = await client.post<IUser>('/auth/token');
-
-        this.store.setUserData(response.data);
-        // this.$router.push('/');
+        this.authStore.setUserData(response.data);
+        this.tokenState = LoadingState.SUCCESS;
       } catch (error) {
-        this.store.removeUserData();
+        this.authStore.removeUserData();
         this.$router.push('/login');
+        this.tokenState = LoadingState.ERROR;
       }
-
-      this.tokenLoading = false;
     },
   },
 
@@ -49,138 +50,13 @@ export default defineComponent({
     this.autoLogin();
 
     if (window.localStorage.getItem('notifyDiscord') !== null) {
-      this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
+      this.sceneriesStore.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
     }
   },
 });
 </script>
 
 <style lang="scss">
+@import './styles/global.scss';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
-
-a {
-  color: white;
-  text-decoration: none;
-}
-
-a:visited {
-  color: rgb(124, 164, 218);
-}
-
-* {
-  font-family: 'Inter', sans-serif;
-}
-
-body,
-html {
-  padding: 0 0.25em;
-  margin: 0;
-  background-color: #1e2341;
-  color: white;
-
-  @media screen and (max-width: 700px) {
-    font-size: calc(0.7vw + 0.7rem);
-  }
-
-  font-size: 16px;
-}
-
-button,
-select,
-input {
-  font-size: inherit;
-}
-
-button {
-  appearance: none;
-  outline: none;
-  border: none;
-
-  background-color: #3c5a89;
-  color: white;
-
-  padding: 0.5em 0.5em;
-
-  font-weight: bold;
-  font-size: 0.9em;
-
-  cursor: pointer;
-  transition: all 75ms;
-
-  &:hover:not([data-disabled='true']),
-  &:focus-visible {
-    background-color: lighten($color: #3c5a89, $amount: 10%);
-  }
-
-  &[data-disabled='true'] {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    color: #999;
-  }
-
-  &.btn--icon {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  &:focus-visible {
-    outline: 1px solid gold;
-  }
-}
-
-// Text
-.text {
-  &--accent {
-    color: gold;
-  }
-}
-
-// Card modal
-.g-card {
-  position: fixed;
-  z-index: 999;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  width: 90vw;
-  max-width: 550px;
-
-  padding: 0.5em 1em;
-
-  border-radius: 1em;
-
-  background-color: #1d1c33;
-  box-shadow: 0 0 6px 1px #414141;
-}
-
-// Scrollbar
-/* width */
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-/* Corner */
-::-webkit-scrollbar-corner {
-  background: #333;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 1rem;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #aaa;
-}
 </style>

src/components/Changelog.vue

@@ -40,22 +40,22 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import { Availability, HeaderTypes } from '../types/types';
-import { getAvailabilityValue } from '../types/typeUitls';
 import RouteList from './RouteList.vue';
+import { Availability, AvailabilityTypes, HeaderTypes } from '../types/sceneries.types';
+import { useSceneriesStore } from '../stores/sceneries.store';
 
 export default defineComponent({
+  components: { RouteList },
   data() {
     return {
-      store: useStore(),
-      getAvailabilityValue,
+      sceneriesStore: useSceneriesStore(),
       HeaderTypes,
     };
   },
+
   computed: {
     changeList() {
-      return this.store.changeList.map((changeItem) => {
+      return this.sceneriesStore.changeList.map((changeItem) => {
         return {
           name: changeItem.name,
           toRemove: changeItem.toRemove,
@@ -66,7 +66,12 @@ export default defineComponent({
       });
     },
   },
-  components: { RouteList },
+
+  methods: {
+    getAvailabilityValue(availability: Availability) {
+      return AvailabilityTypes[availability];
+    },
+  },
 });
 </script>
 

src/components/ChangesModal.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="changes-modal">
     <transition name="modal-anim">
-      <div class="content g-card" v-if="store.changesResponse.length > 0">
+      <div class="content g-card" v-if="sceneriesStore.changesResponse.length > 0">
         <h2>Wprowadzone zmiany</h2>
         <div>
           <ul class="changelog">
-            <li v-for="change in store.changesResponse">{{ change }}</li>
+            <li v-for="change in sceneriesStore.changesResponse">{{ change }}</li>
           </ul>
         </div>
       </div>
@@ -15,12 +15,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
+import { useSceneriesStore } from '../stores/sceneries.store';
 
 export default defineComponent({
   setup() {
     return {
-      store: useStore(),
+      sceneriesStore: useSceneriesStore(),
     };
   },
 });

src/components/PopUpCard.vue

@@ -1,40 +1,42 @@
 <template>
-  <div class="bg-dimmer"></div>
-  <div class="g-card popup-card">
-    <div class="card_content">
-      <p>{{ store.alertMessage || store.confirmMessage }}</p>
-    </div>
+  <div v-if="globalStore.alertMessage || globalStore.confirmMessage">
+    <div class="bg-dimmer"></div>
+    <div class="g-card popup-card">
+      <div class="card_content">
+        <p>{{ globalStore.alertMessage || globalStore.confirmMessage }}</p>
+      </div>
 
-    <div class="card_actions">
-      <span v-if="store.alertMessage">
-        <button @click="closeCard">OK!</button>
-      </span>
+      <div class="card_actions">
+        <span v-if="globalStore.alertMessage">
+          <button @click="closeCard">OK!</button>
+        </span>
 
-      <span v-else-if="store.confirmMessage">
-        <button @click="confirm">OK!</button>
-        <button @click="closeCard">Anuluj</button>
-      </span>
+        <span v-else-if="globalStore.confirmMessage">
+          <button @click="confirm">OK!</button>
+          <button @click="closeCard">Anuluj</button>
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
+import { useGlobalStore } from '../stores/global.store';
 
 export default defineComponent({
   emits: ['confirm'],
 
   setup() {
     return {
-      store: useStore(),
+      globalStore: useGlobalStore(),
     };
   },
 
   methods: {
     closeCard() {
-      this.store.alertMessage = '';
-      this.store.confirmMessage = '';
+      this.globalStore.alertMessage = '';
+      this.globalStore.confirmMessage = '';
     },
 
     confirm() {

src/components/RouteList.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { SceneryRoutesInfo } from '../types/types';
+import { SceneryRoutesInfo } from '../types/sceneries.types';
 
 export default defineComponent({
   props: {

src/components/RoutesModal.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bg" @click="closeRoutesModal"></div>
-  <div class="routes-modal" v-if="store.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
+  <div class="routes-modal" v-if="sceneriesStore.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
     <div class="modal-content">
       <div class="modal-wrapper">
         <h1>
-          Szlaki na scenerii {{ store.currentStation.name }}
+          Szlaki na scenerii {{ sceneriesStore.currentStation.name }}
           <div class="exit" @click="closeRoutesModal">
             <img src="/icon-exit.svg" alt="exit icon" />
           </div>
@@ -103,17 +103,17 @@
 <script lang="ts">
 import { Ref, computed, defineComponent, ref } from 'vue';
 import changeMixin from '../mixins/changeMixin';
-import { useStore } from '../store';
-import { SceneryRoutesInfo } from '../types/types';
+import { SceneryRoutesInfo } from '../types/sceneries.types';
+import { useSceneriesStore } from '../stores/sceneries.store';
 
 export default defineComponent({
   setup() {
-    const store = useStore();
+    const sceneriesStore = useSceneriesStore();
     const currentRoutes: Ref<SceneryRoutesInfo[]> = ref([]);
     const routeBackup: Ref<SceneryRoutesInfo[]> = ref([]);
 
     return {
-      store,
+      sceneriesStore,
       routeBackup,
       currentRoutes,
     };
@@ -121,13 +121,11 @@ export default defineComponent({
 
   mixins: [changeMixin],
 
-  data: () => ({}),
-
   mounted() {
-    if (this.store.currentStation) {
+    if (this.sceneriesStore.currentStation) {
       // unrefed copy of routesInfo object
-      this.currentRoutes = JSON.parse(JSON.stringify(this.store.currentStation.routesInfo));
-      this.routeBackup = [...this.store.currentStation.routesInfo];
+      this.currentRoutes = JSON.parse(JSON.stringify(this.sceneriesStore.currentStation.routesInfo));
+      this.routeBackup = [...this.sceneriesStore.currentStation.routesInfo];
 
       (this.$refs['modal'] as HTMLElement).focus();
     }
@@ -135,7 +133,7 @@ export default defineComponent({
 
   methods: {
     closeRoutesModal() {
-      this.store.currentStation = null;
+      this.sceneriesStore.currentStation = null;
     },
 
     addNewRoute() {
@@ -157,7 +155,7 @@ export default defineComponent({
     },
 
     parseRoutes() {
-      const routeString = this.store.currentStation?.routesInfo
+      const routeString = this.sceneriesStore.currentStation?.routesInfo
         .map(
           (route) =>
             `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${route.isElectric ? 'E' : 'N'}${
@@ -170,14 +168,12 @@ export default defineComponent({
     },
 
     saveRoutes() {
-      const index = this.store.stationList.findIndex((station) => station.name === this.store.currentStation?.name);
+      const index = this.sceneriesStore.stationList.findIndex((station) => station.name === this.sceneriesStore.currentStation?.name);
 
       if (index == -1) return;
 
-      // const routeString = this.parseRoutes();
-
-      this.addChange(this.store.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
-      this.store.stationList[index]['routesInfo'] = this.currentRoutes;
+      this.addChange(this.sceneriesStore.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
+      this.sceneriesStore.stationList[index]['routesInfo'] = this.currentRoutes;
     },
   },
 });

src/components/TableActions.vue

@@ -8,19 +8,19 @@
       <div>
         <div style="font-size: 0.75em; color: #ccc">v{{ packageVersion }}</div>
         <div>
-          <span v-if="store.user">
-            Zalogowany jako <b>{{ store.user.name }}</b>
+          <span v-if="authStore.user != null">
+            Zalogowany jako <b>{{ authStore.user.name }}</b>
           </span>
           &bull;
-          <span class="info-file" :class="store.dataState">
-            <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
-            <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
-            <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
+          <span class="info-file" :class="sceneriesStore.dataState">
+            <span v-if="sceneriesStore.dataState == LoadingState.LOADING">Ładowanie danych...</span>
+            <span v-if="sceneriesStore.dataState == LoadingState.SUCCESS">Załadowano dane z bazy!</span>
+            <span v-if="sceneriesStore.dataState == LoadingState.ERROR">Błąd podczas pobierania danych!</span>
           </span>
         </div>
 
         <div>
-          <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
+          <span class="file-changes" style="color: salmon" v-if="sceneriesStore.unsavedChanges">Niezapisane zmiany!</span>
           <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
         </div>
       </div>
@@ -29,40 +29,42 @@
     <div class="pane actions-pane">
       <button @click="addNewStation">Dodaj nową stację</button>
       <button @click="confirmLoadData">Odśwież dane</button>
-      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">Zapisz zmiany</button>
+      <button @click="confirmUpdateList" :data-disabled="!sceneriesStore.unsavedChanges" :disabled="!sceneriesStore.unsavedChanges">
+        Zapisz zmiany
+      </button>
       <button @click="signOut">Wyloguj się</button>
     </div>
 
     <div class="pane notify-pane">
       <label class="notify">
-        <input type="checkbox" v-model="store.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
+        <input type="checkbox" v-model="sceneriesStore.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
         <span>
-          Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
+          Powiadom o zmianach: <b>{{ sceneriesStore.notifyDiscord ? 'TAK' : 'NIE' }}</b>
         </span>
       </label>
     </div>
 
     <div class="pane search-pane">
-      <input class="search" ref="search" type="text" v-model="store.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />
+      <input class="search" ref="search" type="text" v-model="sceneriesStore.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />
 
       <button @click="clearInput">Wyczyść</button>
     </div>
 
     <div class="pane">
       Pokazuj maks.
-      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 3em; margin: 0 0.5em" />
+      <input type="number" min="1" v-model="sceneriesStore.maxVisibleResults" style="width: 3em; margin: 0 0.5em" />
       wyników
     </div>
 
     <div class="pane">
       Obecnie pokazane scenerie:
-      {{ Math.min(store.maxVisibleResults, store.stationList.length, store.sortedStationList.length) }} /
-      {{ store.stationList.length }}
+      {{ Math.min(sceneriesStore.maxVisibleResults, sceneriesStore.stationList.length, sceneriesStore.sortedStationList.length) }} /
+      {{ sceneriesStore.stationList.length }}
     </div>
 
     <div class="pane">
       <button @click="changelogVisible = !changelogVisible">
-        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ store.changeList.length }})
+        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ sceneriesStore.changeList.length }})
       </button>
     </div>
 
@@ -72,17 +74,24 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import { SceneryRowItem } from '../types/types';
 import client from '../common/http';
 
 import { version } from '../../package.json';
 import Changelog from './Changelog.vue';
+import { useSceneriesStore } from '../stores/sceneries.store';
+import { LoadingState } from '../types/common.types';
+import { SceneryRowItem } from '../types/sceneries.types';
+import { useGlobalStore } from '../stores/global.store';
+import { useAuthStore } from '../stores/auth.store';
 
 export default defineComponent({
   setup() {
     return {
-      store: useStore(),
+      sceneriesStore: useSceneriesStore(),
+      globalStore: useGlobalStore(),
+      authStore: useAuthStore(),
+
+      LoadingState,
     };
   },
   data() {
@@ -94,48 +103,54 @@ export default defineComponent({
   methods: {
     confirmLoadData() {
       const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
-      if (confirmed) this.store.fetchSceneriesData();
+      if (confirmed) this.sceneriesStore.fetchSceneriesData();
     },
+
     confirmRestoreList() {
       const confirmed = confirm('Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!');
       if (confirmed) this.restoreList();
     },
+
     confirmUpdateList() {
       const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');
       if (confirmed) this.updateListToDb();
     },
+
     async signOut() {
       await client.post('/auth/logout');
       this.$router.push('/login');
-      this.store.removeUserData();
+      this.authStore.removeUserData();
     },
+
     onNotifyCheckboxChange(value: boolean) {
       window.localStorage.setItem('notifyDiscord', Number(value).toString());
     },
+
     async updateListToDb() {
       try {
-        const mappedChangeList = this.store.changeList.map((v) => {
+        const mappedChangeList = this.sceneriesStore.changeList.map((v) => {
           if (/^#/.test(v.id.toString())) {
             return { ...v, id: undefined };
           }
           return { ...v };
         });
-        const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
-        this.store.changesResponse = updateResData;
-        this.store.fetchSceneriesData();
+        const updateResData = (await this.sceneriesStore.updateSceneriesData(mappedChangeList)).data;
+        this.sceneriesStore.changesResponse = updateResData;
+        this.sceneriesStore.fetchSceneriesData();
       } catch (error) {
-        this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
+        this.globalStore.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
         console.error(error);
       }
     },
+
     addNewStation() {
       const name = prompt('Nazwa nowej scenerii');
       if (!name) return;
-      if (this.store.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
-        this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
+      if (this.sceneriesStore.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
+        this.globalStore.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
         return;
       }
-      this.store.newStationsCount++;
+      this.sceneriesStore.newStationsCount++;
       const newSt: SceneryRowItem = {
         name,
         abbr: name.slice(0, 2),
@@ -167,20 +182,20 @@ export default defineComponent({
         availability: 'default',
         id: `#${Math.random().toString(32).substring(2)}`,
       };
-      this.store.changeList.push({ ...newSt });
+      this.sceneriesStore.changeList.push({ ...newSt });
       // this.store.changeBackupList[newSt.id] = null;
-      this.store.searchedSceneryName = name;
-      this.store.stationList.unshift(newSt);
+      this.sceneriesStore.searchedSceneryName = name;
+      this.sceneriesStore.stationList.unshift(newSt);
     },
     restoreList() {
-      if (this.store.backupList.length == 0) return;
-      this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
-      this.store.changeList = [];
-      this.store.stationsToRemove = [];
-      this.store.searchedSceneryName = '';
+      if (this.sceneriesStore.backupList.length == 0) return;
+      this.sceneriesStore.stationList = JSON.parse(JSON.stringify(this.sceneriesStore.backupList));
+      this.sceneriesStore.changeList = [];
+      this.sceneriesStore.stationsToRemove = [];
+      this.sceneriesStore.searchedSceneryName = '';
     },
     clearInput() {
-      this.store.searchedSceneryName = '';
+      this.sceneriesStore.searchedSceneryName = '';
     },
   },
   components: { Changelog },

src/components/UpdateCard.vue

@@ -21,18 +21,15 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-
+import { useSceneriesStore } from '../stores/sceneries.store';
 export default defineComponent({
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
+  data: () => ({
+    sceneriesStore: useSceneriesStore(),
+  }),
 
   computed: {
     changesResponseComp() {
-      return this.store.changesResponse.map((ch) => ({
+      return this.sceneriesStore.changesResponse.map((ch) => ({
         resolved: ch.split(' ')[0] == 'v',
         message: ch.replace(/^[v|x] /, ''),
       }));
@@ -41,7 +38,7 @@ export default defineComponent({
 
   methods: {
     closeCard() {
-      this.store.changesResponse.length = 0;
+      this.sceneriesStore.changesResponse.length = 0;
     },
   },
 });

src/main.ts

@@ -4,26 +4,14 @@ import App from './App.vue';
 import router from './router';
 
 import { createPinia } from 'pinia';
-import { useStore } from './store';
+import { createRouteGuard } from './routeGuard';
 
 const pinia = createPinia();
 const app = createApp(App);
 
-app.use(pinia).use(router);
+app.use(pinia);
+app.use(router);
 app.mount('#app');
 
-router.beforeEach((to, from, next) => {
-  const store = useStore();
-
-  if (to.meta.protected && !store.user && !window.localStorage.getItem('user')) {
-    next('/login');
-    return;
-  }
-
-  if (to.meta.loginPage && window.localStorage.getItem('user')) {
-    next('/');
-    return;
-  }
-
-  next();
-});
+// Route guard
+createRouteGuard(router);

src/mixins/changeMixin.ts

@@ -1,13 +1,11 @@
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import { ChangeProp, SceneryRowItem } from '../types/types';
+import { useSceneriesStore } from '../stores/sceneries.store';
+import { ChangeProp, SceneryRowItem } from '../types/sceneries.types';
 
 export default defineComponent({
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
+  data: () => ({
+    sceneriesStore: useSceneriesStore(),
+  }),
 
   methods: {
     addChange(sceneryData: SceneryRowItem, propName: string, oldValue: any, newValue: any) {
@@ -17,22 +15,22 @@ export default defineComponent({
 
       const sceneryId = sceneryData.id;
 
-      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
+      let changeItem = this.sceneriesStore.changeList.find((item) => item.id == sceneryId);
 
       if (!changeItem) {
         changeItem = { id: sceneryId, name: sceneryData.name };
-        this.store.changeList.push(changeItem);
+        this.sceneriesStore.changeList.push(changeItem);
       }
 
       changeItem[changePropName] = newValue;
 
-      const sceneryBackup = this.store.backupList.find((scenery) => scenery.id == sceneryId);
+      const sceneryBackup = this.sceneriesStore.backupList.find((scenery) => scenery.id == sceneryId);
       if (!sceneryBackup) return;
 
       if (sceneryBackup && sceneryBackup[changePropName] == changeItem[changePropName]) delete changeItem[changePropName];
 
       if (Object.keys(changeItem).length == 2 && changeItem.id)
-        this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
+        this.sceneriesStore.changeList = this.sceneriesStore.changeList.filter((item) => changeItem?.id != item.id);
     },
 
     addRemovalChange(sceneryData: SceneryRowItem) {
@@ -40,13 +38,13 @@ export default defineComponent({
 
       // Sceneria niewpisana do bazy danych (id stworzone przez stronę)
       if (sceneryId.toString().startsWith('#')) {
-        this.store.changeList = this.store.changeList.filter((item) => item.id != sceneryId);
+        this.sceneriesStore.changeList = this.sceneriesStore.changeList.filter((item) => item.id != sceneryId);
         return;
       }
 
-      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
+      let changeItem = this.sceneriesStore.changeList.find((item) => item.id == sceneryId);
 
-      if (!changeItem) this.store.changeList.push({ id: sceneryId, name: sceneryData.name, toRemove: true });
+      if (!changeItem) this.sceneriesStore.changeList.push({ id: sceneryId, name: sceneryData.name, toRemove: true });
       else changeItem['toRemove'] = true;
     },
   },

src/mixins/routesMixin.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { SceneryRowItem } from '../types/types';
+import { SceneryRowItem } from '../types/sceneries.types';
 
 export default defineComponent({
   methods: {

src/mixins/useLocalStorage.ts

@@ -1,16 +1,16 @@
 import { computed, watch } from 'vue';
-import { useStore } from '../store';
+import { useSceneriesStore } from '../stores/sceneries.store';
 
 export default () => {
-  const store = useStore();
+  const sceneriesStore = useSceneriesStore();
 
   const setupStorage = () => {
     // On mounted
-    store.maxVisibleResults = Number(window.localStorage.getItem('maxVisibleResults')) || 30;
+    sceneriesStore.maxVisibleResults = Number(window.localStorage.getItem('maxVisibleResults')) || 30;
 
     // Max vis. results
     watch(
-      computed(() => store.maxVisibleResults),
+      computed(() => sceneriesStore.maxVisibleResults),
       (v) => {
         window.localStorage.setItem('maxVisibleResults', v.toString());
       }
@@ -21,4 +21,3 @@ export default () => {
     setupStorage,
   };
 };
-

src/routeGuard.ts

@@ -0,0 +1,23 @@
+import { Router } from 'vue-router';
+import { useAuthStore } from './stores/auth.store';
+
+export function createRouteGuard(router: Router) {
+  router.beforeEach((to, from, next) => {
+    const authStore = useAuthStore();
+
+    console.log(to);
+    
+
+    if (to.meta.protected && !authStore.user && !window.localStorage.getItem('user')) {
+      next('/login');
+      return;
+    }
+
+    if (to.meta.loginPage && window.localStorage.getItem('user')) {
+      next('/');
+      return;
+    }
+
+    next();
+  });
+}

src/router.ts

@@ -17,6 +17,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     component: () => import('./views/LoginView.vue'),
   },
+  {
+    path: '/vehicles',
+    name: 'VehiclesManagerView',
+    meta: {
+      protected: true,
+    },
+    component: () => import('./views/VehiclesManagerView.vue'),
+  },
 ];
 
 const router = createRouter({

src/store.ts

@@ -1,86 +0,0 @@
-import { defineStore } from 'pinia';
-import { AuthState, IStore, IUser, SceneryRowItem } from './types/types';
-import client from './common/http';
-
-export const useStore = defineStore('store', {
-  state: () =>
-    ({
-      dataState: 'LOADING',
-      authState: AuthState.LOADING,
-
-      stationList: [],
-      backupList: [],
-      stationsToRemove: [],
-      changeList: [],
-      newStationsCount: 0,
-      routesModalVisible: true,
-      currentStation: null,
-      searchedSceneryName: '',
-      selectedStationName: '',
-
-      user: null,
-      notifyDiscord: true,
-
-      alertMessage: '',
-      confirmMessage: '',
-
-      maxVisibleResults: 15,
-
-      changesResponse: [],
-    } as IStore),
-
-  actions: {
-    async fetchSceneriesData() {
-      this.dataState = 'LOADING';
-
-      try {
-        const data = (await client.get<SceneryRowItem[]>(`api/getSceneries?t=${Date.now()}`)).data;
-        this.dataState = 'LOADED';
-        this.backupList = JSON.parse(JSON.stringify(data));
-        this.stationList = data;
-        this.changeList = [];
-      } catch (error: any) {
-        this.dataState = 'ERROR';
-        console.error('Błąd podczas ładowania danych: ', error?.response || error);
-      }
-    },
-
-    async updateSceneriesData(mappedChangeList: any[]) {
-      try {
-        const response = await client.post('manager/updateSceneryList', {
-          changeList: mappedChangeList,
-          notify: this.notifyDiscord,
-        });
-
-        return response;
-      } catch (error) {
-        throw error;
-      }
-    },
-
-    setUserData(responseData: IUser) {
-      this.authState = AuthState.AUTHORIZED;
-      this.user = responseData;
-      window.localStorage.setItem('user', JSON.stringify(responseData));
-    },
-
-    removeUserData() {
-      this.authState = AuthState.UNAUTHORIZED;
-      this.user = null;
-      window.localStorage.removeItem('user');
-    },
-  },
-
-  getters: {
-    sortedStationList(state) {
-      return state.stationList
-        .filter((station) => station.name.toLowerCase().startsWith(state.searchedSceneryName.toLowerCase()))
-        .sort((a, b) => (a.name > b.name ? 1 : -1))
-        .filter((_, i) => i < state.maxVisibleResults);
-    },
-
-    unsavedChanges(state) {
-      return Object.keys(state.changeList).length != 0;
-    },
-  },
-});

src/stores/auth.store.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia';
+import { AuthState, IUser } from '../types/auth.types';
+
+export const useAuthStore = defineStore('authStore', {
+  state: () => ({
+    authState: AuthState.LOADING,
+    user: null as IUser | null,
+  }),
+
+  actions: {
+    setUserData(responseData: IUser) {
+      this.authState = AuthState.AUTHORIZED;
+      this.user = responseData;
+      window.localStorage.setItem('user', JSON.stringify(responseData));
+    },
+
+    removeUserData() {
+      this.authState = AuthState.UNAUTHORIZED;
+      this.user = null;
+      window.localStorage.removeItem('user');
+    },
+  },
+});

src/stores/global.store.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia';
+
+export const useGlobalStore = defineStore('globalStore', {
+  state: () => ({
+    alertMessage: '',
+    confirmMessage: '',
+  }),
+});

src/stores/sceneries.store.ts

@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia';
+import client from '../common/http';
+import { ChangeItem, SceneryRowItem } from '../types/sceneries.types';
+import { LoadingState } from '../types/common.types';
+
+export const useSceneriesStore = defineStore('sceneriesStore', {
+  state: () => ({
+    dataState: LoadingState.INIT,
+
+    stationList: [] as SceneryRowItem[],
+    backupList: [] as SceneryRowItem[],
+    changeList: [] as ChangeItem[],
+    stationsToRemove: [] as string[],
+
+    newStationsCount: 0,
+    routesModalVisible: true,
+
+    currentStation: null as SceneryRowItem | null,
+    searchedSceneryName: '',
+    selectedStationName: '',
+
+    notifyDiscord: true,
+
+
+
+    maxVisibleResults: 15,
+
+    changesResponse: [] as string[],
+  }),
+
+  actions: {
+    async fetchSceneriesData() {
+      this.dataState = LoadingState.LOADING;
+
+      try {
+        const data = (await client.get<SceneryRowItem[]>(`api/getSceneries?t=${Date.now()}`)).data;
+        this.dataState = LoadingState.SUCCESS;
+        this.backupList = JSON.parse(JSON.stringify(data));
+        this.stationList = data;
+        this.changeList = [];
+      } catch (error: any) {
+        this.dataState = LoadingState.ERROR;
+        console.error('Błąd podczas ładowania danych: ', error?.response || error);
+      }
+    },
+
+    async updateSceneriesData(mappedChangeList: any[]) {
+      try {
+        const response = await client.post('manager/updateSceneryList', {
+          changeList: mappedChangeList,
+          notify: this.notifyDiscord,
+        });
+
+        return response;
+      } catch (error) {
+        throw error;
+      }
+    },
+  },
+
+  getters: {
+    sortedStationList(state) {
+      return state.stationList
+        .filter((station) => station.name.toLowerCase().startsWith(state.searchedSceneryName.toLowerCase()))
+        .sort((a, b) => (a.name > b.name ? 1 : -1))
+        .filter((_, i) => i < state.maxVisibleResults);
+    },
+
+    unsavedChanges(state) {
+      return Object.keys(state.changeList).length != 0;
+    },
+  },
+});

src/stores/vehicles.store.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia';
+import client from '../common/http';
+import { IVehicle, IVehicleTableRow, VehicleAPIResponse } from '../types/vehicles.types';
+import { LoadingState } from '../types/common.types';
+
+export const useVehiclesStore = defineStore('vehiclesStore', {
+  state: () => ({
+    vehicles: [] as IVehicle[],
+    dataState: LoadingState.INIT,
+
+    vehiclesTable: [] as IVehicleTableRow[],
+  }),
+
+  actions: {
+    async fetchVehicles() {
+      try {
+        this.dataState = LoadingState.LOADING;
+
+        const vehiclesResponseData = (await client.get<VehicleAPIResponse>(`api/getVehicles`)).data;
+        this.vehicles = vehiclesResponseData;
+        this.vehiclesTable = vehiclesResponseData.map((v) => ({ vehicleRef: v, pendingChanges: {} }));
+
+        this.dataState = LoadingState.SUCCESS;
+      } catch (error) {
+        console.error('Wystąpił błąd podczas pobierania danych o pojazdach!', error);
+        this.dataState = LoadingState.ERROR;
+      }
+    },
+  },
+});

src/styles/global.scss

@@ -0,0 +1,130 @@
+body,
+html {
+  margin: 0;
+  background-color: #1e2341;
+  color: white;
+  box-sizing: border-box;
+
+  @media screen and (max-width: 700px) {
+    font-size: calc(0.7vw + 0.7rem);
+  }
+
+  font-size: 16px;
+}
+
+#app {
+  padding: 0 0.25em;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:visited {
+  color: rgb(124, 164, 218);
+}
+
+* {
+  font-family: 'Inter', sans-serif;
+  box-sizing: inherit;
+}
+
+button,
+select,
+input {
+  font-size: inherit;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+
+  background-color: #3c5a89;
+  color: white;
+
+  padding: 0.5em 0.5em;
+
+  font-weight: bold;
+  font-size: 0.9em;
+
+  cursor: pointer;
+  transition: all 75ms;
+
+  &:hover:not([data-disabled='true']),
+  &:focus-visible {
+    background-color: lighten($color: #3c5a89, $amount: 10%);
+  }
+
+  &[data-disabled='true'] {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    color: #999;
+  }
+
+  &.btn--icon {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  &:focus-visible {
+    outline: 1px solid gold;
+  }
+}
+
+// Text
+.text {
+  &--accent {
+    color: gold;
+  }
+}
+
+// Card modal
+.g-card {
+  position: fixed;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 90vw;
+  max-width: 550px;
+
+  padding: 0.5em 1em;
+
+  border-radius: 1em;
+
+  background-color: #1d1c33;
+  box-shadow: 0 0 6px 1px #414141;
+}
+
+// Scrollbar
+/* width */
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+/* Corner */
+::-webkit-scrollbar-corner {
+  background: #333;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}

src/types/auth.types.ts

@@ -0,0 +1,16 @@
+export enum AuthState {
+  'LOADING' = 0,
+  'AUTHORIZED' = 1,
+  'UNAUTHORIZED' = 2,
+}
+
+export interface IUser {
+  name: string;
+  id: number;
+  iat?: number;
+}
+
+export interface ILoginResponse {
+  token: string;
+  user: IUser;
+}

src/types/common.types.ts

@@ -0,0 +1,6 @@
+export enum LoadingState {
+  LOADING = 0,
+  SUCCESS = 1,
+  ERROR = 2,
+  INIT = 3,
+}

src/types/sceneries.types.ts

@@ -1,129 +1,114 @@
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-export type ChangeProp =
-  | 'name'
-  | 'hash'
-  | 'url'
-  | 'lines'
-  | 'project'
-  | 'projectUrl'
-  | 'reqLevel'
-  | 'signalType'
-  | 'controlType'
-  | 'SUP'
-  | 'ASDEK'
-  | 'routesInfo'
-  | 'checkpoints'
-  | 'authors'
-  | 'availability'
-  | 'hidden';
-
-export enum HeaderTypes {
-  name = 'Nazwa',
-  abbr = 'Skrót posterunku',
-  url = 'URL',
-  hash = 'Hash',
-  lines = 'Linie',
-  project = 'Projekt',
-  projectUrl = 'URL projektu',
-  reqLevel = 'Wym. poziom',
-  signalType = 'Sygnalizacja',
-  controlType = 'Sterowanie',
-  SUP = 'SUP',
-  ASDEK = 'ASDEK',
-  authors = 'Autorzy',
-  routesInfo = 'Szlaki',
-  checkpoints = 'Posterunki',
-  availability = 'Dostępność',
-  hidden = 'Ukryty',
-  toRemove = 'Usuń',
-}
-
-export enum AvailabilityTypes {
-  'default' = 'w paczce',
-  'nonDefault' = 'poza paczką',
-  'nonPublic' = 'niepubliczna',
-  'abandoned' = 'wycofana',
-  'unavailable' = 'niedostępna',
-}
-
-export interface SceneryRoutesInfo {
-  routeName: string;
-  isElectric: boolean;
-  isRouteSBL: boolean;
-  isInternal: boolean;
-  routeSpeed: number;
-  routeLength: number;
-  routeTracks: number;
-  hidden?: boolean;
-}
-
-export interface SceneryRowItem {
-  id: string | number;
-  hash: string;
-  name: string;
-  abbr: string;
-  url: string;
-  lines: string;
-  project: string | null;
-  projectUrl: string | null;
-  reqLevel: number;
-  signalType: string;
-  controlType: string;
-  SUP: boolean;
-  ASDEK: boolean;
-  hidden: boolean;
-  routesInfo: SceneryRoutesInfo[];
-  checkpoints: string;
-  authors: string;
-  availability: Availability;
-}
-
-export type ChangeItem = {
-  [key in ChangeProp]?: any;
-} & {
-  id: string | number;
-  name: string;
-
-  toRemove?: boolean;
-};
-
-export enum AuthState {
-  'LOADING' = 0,
-  'AUTHORIZED' = 1,
-  'UNAUTHORIZED' = 2,
-}
-
-export interface IUser {
-  name: string;
-  id: number;
-  iat?: number;
-}
-
-export interface IStore {
-  dataState: string;
-  authState: AuthState;
-
-  stationList: SceneryRowItem[];
-  backupList: SceneryRowItem[];
-  stationsToRemove: string[];
-  searchedSceneryName: string;
-  changeList: ChangeItem[];
-  newStationsCount: number;
-  routesModalVisible: boolean;
-  currentStation: SceneryRowItem | null;
-  selectedStationName: string;
-  // token: string | null;
-  user: IUser | null;
-  notifyDiscord: boolean;
-  alertMessage: string;
-  confirmMessage: string;
-
-  maxVisibleResults: number;
-
-  changesResponse: string[];
-}
-
-export interface ILoginResponse {
-  token: string;
-  user: IUser;
-}
+import { AuthState, IUser } from './auth.types';
+
+export interface ISceneriesStore {
+  dataState: string;
+  authState: AuthState;
+
+  stationList: SceneryRowItem[];
+  backupList: SceneryRowItem[];
+  stationsToRemove: string[];
+  searchedSceneryName: string;
+  changeList: ChangeItem[];
+  newStationsCount: number;
+  routesModalVisible: boolean;
+  currentStation: SceneryRowItem | null;
+  selectedStationName: string;
+  // token: string | null;
+  user: IUser | null;
+  notifyDiscord: boolean;
+  alertMessage: string;
+  confirmMessage: string;
+
+  maxVisibleResults: number;
+
+  changesResponse: string[];
+}
+
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type ChangeProp =
+  | 'name'
+  | 'hash'
+  | 'url'
+  | 'lines'
+  | 'project'
+  | 'projectUrl'
+  | 'reqLevel'
+  | 'signalType'
+  | 'controlType'
+  | 'SUP'
+  | 'ASDEK'
+  | 'routesInfo'
+  | 'checkpoints'
+  | 'authors'
+  | 'availability'
+  | 'hidden';
+
+export enum HeaderTypes {
+  name = 'Nazwa',
+  abbr = 'Skrót posterunku',
+  url = 'URL',
+  hash = 'Hash',
+  lines = 'Linie',
+  project = 'Projekt',
+  projectUrl = 'URL projektu',
+  reqLevel = 'Wym. poziom',
+  signalType = 'Sygnalizacja',
+  controlType = 'Sterowanie',
+  SUP = 'SUP',
+  ASDEK = 'ASDEK',
+  authors = 'Autorzy',
+  routesInfo = 'Szlaki',
+  checkpoints = 'Posterunki',
+  availability = 'Dostępność',
+  hidden = 'Ukryty',
+  toRemove = 'Usuń',
+}
+
+export enum AvailabilityTypes {
+  'default' = 'w paczce',
+  'nonDefault' = 'poza paczką',
+  'nonPublic' = 'niepubliczna',
+  'abandoned' = 'wycofana',
+  'unavailable' = 'niedostępna',
+}
+
+export interface SceneryRoutesInfo {
+  routeName: string;
+  isElectric: boolean;
+  isRouteSBL: boolean;
+  isInternal: boolean;
+  routeSpeed: number;
+  routeLength: number;
+  routeTracks: number;
+  hidden?: boolean;
+}
+
+export interface SceneryRowItem {
+  id: string | number;
+  hash: string;
+  name: string;
+  abbr: string;
+  url: string;
+  lines: string;
+  project: string | null;
+  projectUrl: string | null;
+  reqLevel: number;
+  signalType: string;
+  controlType: string;
+  SUP: boolean;
+  ASDEK: boolean;
+  hidden: boolean;
+  routesInfo: SceneryRoutesInfo[];
+  checkpoints: string;
+  authors: string;
+  availability: Availability;
+}
+
+export type ChangeItem = {
+  [key in ChangeProp]?: any;
+} & {
+  id: string | number;
+  name: string;
+
+  toRemove?: boolean;
+};

src/types/typeUitls.ts

@@ -1,5 +0,0 @@
-import { Availability, AvailabilityTypes } from './types';
-
-export function getAvailabilityValue(availability: Availability) {
-  return AvailabilityTypes[availability];
-}

src/types/vehicles.types.ts

@@ -0,0 +1,53 @@
+export type VehicleAPIResponse = IVehicle[];
+
+export interface IVehicle {
+  id: number;
+  name: string;
+  type: string;
+  cabinName?: string;
+  restrictions?: IVehicleRestrictions;
+  vehicleGroupsId: number;
+  group: IVehicleGroup;
+}
+
+export interface IVehicleRestrictions {
+  sponsorOnly?: number;
+  teamOnly?: boolean;
+}
+
+export interface IVehicleGroup {
+  id: number;
+  name: string;
+  speed: number;
+  length: number;
+  weight: number;
+  cargoTypes?: IVehicleCargoType[];
+  locoProps?: IVehicleLocoProps;
+}
+
+export interface IVehicleCargoType {
+  id: string;
+  weight: number;
+}
+
+export interface IVehicleLocoProps {
+  coldStart: boolean;
+  doubleManned: boolean;
+}
+
+export interface IVehicleTableRow {
+  vehicleRef: IVehicle;
+  pendingChanges: Partial<IVehicle>;
+}
+
+export enum VehicleEditRowKey {
+  NAME = 'name',
+  TYPE = 'type',
+  CABIN = 'cabinName',
+
+}
+
+export enum VehicleEditRestrictionKey {
+  SPONSOR_ONLY = "sponsorOnly",
+  TEAM_ONLY = "teamOnly"
+}

src/views/LoginView.vue

@@ -1,73 +1,77 @@
 <template>
-  <div class="login">
-    <div class="login-header">
-      <img src="/icon-logo.svg" alt="logo" />
-      <h1>Stacjownik Station Manager</h1>
-    </div>
+  <div class="login-view">
+    <div class="login-wrapper">
+      <div class="login-header">
+        <img src="/icon-logo.svg" alt="logo" />
+        <h1>
+          Stacjownik Station <br />
+          Manager <sup>v{{ version }}</sup>
+        </h1>
+      </div>
 
-    <form @submit.prevent="signIn">
-      <label for="name">Nick</label>
-      <br />
-      <input type="text" id="name" v-model="name" />
-      <br />
-      <label for="password">Hasło</label>
-      <br />
-      <input type="password" id="password" v-model="password" />
-      <br />
-      <button>{{ isLoading ? 'Logowanie...' : 'Zaloguj się' }}</button>
-    </form>
-    <p style="color: yellow; height: 25px">{{ errorMessage }}</p>
+      <form class="login-form" @submit.prevent="signIn">
+        <div class="login-input-box">
+          <label for="name">Nick</label>
+          <input type="text" id="name" v-model="name" />
+        </div>
+
+        <div class="login-input-box">
+          <label for="password">Hasło</label>
+          <input type="password" id="password" v-model="password" />
+        </div>
+
+        <button class="login-button" :disabled="loginState == LoadingState.LOADING" :data-disabled="loginState == LoadingState.LOADING">
+          {{ loginState == LoadingState.LOADING ? 'Logowanie...' : loginState == LoadingState.SUCCESS ? 'Zalogowano!' : 'Zaloguj się' }}
+        </button>
+      </form>
+
+      <div class="login-warning-box" v-if="errorMessage">{{ errorMessage }}</div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import { AuthState, IUser } from '../types/types';
 import client from '../common/http';
-
-enum LoginState {
-  INITIALIZED = 0,
-  LOADING = 1,
-  LOADED = 2,
-  ERROR = 3,
-}
+import { LoadingState } from '../types/common.types';
+import { AuthState, IUser } from '../types/auth.types';
+import { useAuthStore } from '../stores/auth.store';
+import { version } from '../../package.json';
 
 export default defineComponent({
   data() {
     return {
       errorMessage: '',
-      loginState: LoginState.INITIALIZED,
-      isLoading: false,
+      loginState: LoadingState.INIT,
+      version,
     };
   },
 
   setup() {
     return {
-      LoginState,
+      LoadingState,
       AuthState,
 
       name: '',
       password: '',
-      store: useStore(),
+      authStore: useAuthStore(),
     };
   },
 
   methods: {
     async signIn(e: Event) {
-      this.loginState = LoginState.LOADING;
-      this.isLoading = true;
+      this.loginState = LoadingState.LOADING;
 
       try {
         const response = await client.post<IUser>('auth/login', { username: this.name, password: this.password });
 
         this.$router.push('/');
-        this.store.setUserData(response.data);
+        this.authStore.setUserData(response.data);
 
-        this.loginState = LoginState.LOADED;
+        this.loginState = LoadingState.SUCCESS;
       } catch (e: any) {
-        this.loginState = LoginState.ERROR;
-        this.store.removeUserData();
+        this.loginState = LoadingState.ERROR;
+        this.authStore.removeUserData();
 
         if (!e.response || e.response.status === undefined) {
           this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
@@ -84,8 +88,6 @@ export default defineComponent({
 
         this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
         return false;
-      } finally {
-        this.isLoading = false;
       }
 
       return true;
@@ -95,42 +97,59 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.login {
+.login-view {
+  padding: 0 1em;
+  min-height: 100vh;
+
   display: flex;
   align-items: center;
   justify-content: center;
-
-  flex-direction: column;
-  height: 100vh;
-
-  &-header {
-    text-align: center;
-  }
 }
 
-img {
-  width: 8em;
+.login-wrapper {
+  background-color: #2a304f;
+  border-radius: 0.5em;
+  padding: 2em 0.5em;
 }
 
-input {
-  font-size: 1.2rem;
-  margin: 0.5rem 0;
+.login-header {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
+.login-header img {
+  width: 7em;
+}
+
+.login-header sup {
+  font-size: 0.5em;
+  color: #ccc;
+}
+
+.login-input-box input {
+  font-size: 1.2em;
+  margin: 0.5em 0;
   padding: 0.25em 0.3em;
   color: black;
+  width: 100%;
 }
 
-h2 {
-  text-align: center;
-}
-
-label {
+.login-input-box label {
   text-align: left;
 }
 
-button {
+.login-button {
   width: 100%;
-  margin: 1rem 0;
-  padding: 0.5rem 0;
-  font-size: 1rem;
+  padding: 0.5em 0;
+  font-size: 1em;
+  margin-top: 4em;
+}
+
+.login-warning-box {
+  text-align: center;
+  color: gold;
+  margin-top: 1em;
 }
 </style>

src/views/ManagerView.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="manager" v-if="store.user">
-    <RoutesModal v-if="store.currentStation" />
-    <UpdateCard v-if="store.changesResponse.length > 0" />
+  <div class="manager-view" v-if="authStore.user != null">
+    <RoutesModal v-if="sceneriesStore.currentStation" />
+    <UpdateCard v-if="sceneriesStore.changesResponse.length > 0" />
 
     <hr color="white" />
     <TableActions />
@@ -16,7 +16,7 @@
         </thead>
 
         <tbody>
-          <tr v-for="(station, row) in store.sortedStationList" tabindex="0">
+          <tr v-for="(station, row) in sceneriesStore.sortedStationList" tabindex="0">
             <td v-for="(_, propName) in headerNameList" @click="changeProperty(station, row, propName as string)" :class="propName">
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
               <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>
@@ -39,8 +39,8 @@
               <select
                 name="availability"
                 :id="`select-${row}`"
-                v-model="store.sortedStationList[row]['availability']"
-                @input="(e) => changeAvailability(station, store.sortedStationList[row]['availability'], e)"
+                v-model="sceneriesStore.sortedStationList[row]['availability']"
+                @input="(e) => changeAvailability(station, sceneriesStore.sortedStationList[row]['availability'], e)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -61,18 +61,23 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import changeMixin from '../mixins/changeMixin';
-import { useStore } from '../store';
-import { SceneryRowItem, Availability, AuthState } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
 import UpdateCard from '../components/UpdateCard.vue';
 import RouteList from '../components/RouteList.vue';
+import { AuthState } from '../types/auth.types';
+import { SceneryRowItem, Availability } from '../types/sceneries.types';
+import { useSceneriesStore } from '../stores/sceneries.store';
+import { useAuthStore } from '../stores/auth.store';
 
 export default defineComponent({
   components: { RoutesModal, TableActions, UpdateCard, RouteList },
   mixins: [changeMixin],
 
   data: () => ({
+    sceneriesStore: useSceneriesStore(),
+    authStore: useAuthStore(),
+
     AuthState,
     headerNameList: {
       name: 'Nazwa',
@@ -96,20 +101,13 @@ export default defineComponent({
     },
   }),
 
-  setup() {
-    const store = useStore();
-    return {
-      store,
-    };
-  },
-
   mounted() {
-    this.store.fetchSceneriesData();
+    this.sceneriesStore.fetchSceneriesData();
   },
 
   methods: {
     changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
-      this.store.selectedStationName = station.name;
+      this.sceneriesStore.selectedStationName = station.name;
 
       if (propertyName == 'checkpoints') {
         this.changeCheckpoints(row);
@@ -121,12 +119,12 @@ export default defineComponent({
         return;
       }
 
-      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
-      const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
+      const oldValue = (this.sceneriesStore.stationList[stationListRow] as any)[propertyName];
       if (typeof oldValue === 'boolean') {
-        (this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
+        (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = !oldValue;
         // this.$set(this.stationList[stationListRow], propertyName, !oldValue);
         this.addChange(station, propertyName, oldValue, !oldValue);
         return;
@@ -134,21 +132,21 @@ export default defineComponent({
 
       let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue || '');
       if (newValue == null) return;
-      (this.store.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
+      (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
       // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
       this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue);
     },
 
     changeCheckpoints(row: number) {
-      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
-      const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
+      const oldCheckpoints = this.sceneriesStore.stationList[stationListRow].checkpoints;
       const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
       if (newCheckpoints === null) return;
 
-      this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
-      this.addChange(this.store.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
+      this.sceneriesStore.stationList[stationListRow]['checkpoints'] = newCheckpoints;
+      this.addChange(this.sceneriesStore.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
     },
 
     changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
@@ -161,12 +159,12 @@ export default defineComponent({
 
       if (!confirmRemove) return;
 
-      this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
+      this.sceneriesStore.stationList = this.sceneriesStore.stationList.filter(({ id }) => id != scenery.id);
       this.addRemovalChange(scenery);
     },
 
     showRoutesModal(scenery: SceneryRowItem) {
-      this.store.currentStation = scenery;
+      this.sceneriesStore.currentStation = scenery;
     },
   },
 });

src/views/VehiclesManagerView.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="manager-view">
+    <div class="view-wrapper">
+      <div class="top-bar">
+        <div class="brand">
+          <img class="brand-image" src="/icon-logo.svg" alt="logo" />
+          <h3>Edytor pojazdów</h3>
+        </div>
+
+        <div class="search-box">
+          <input type="text" placeholder="Wyszukaj pojazd..." v-model="vehicleSearchValue" />
+        </div>
+      </div>
+
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 50px">#</th>
+              <th style="width: 300px">Nazwa</th>
+              <th style="width: 200px">Typ</th>
+              <th style="width: 150px">Kabina (lok.)</th>
+              <th style="width: 150px">Grupa</th>
+              <th style="width: 150px">Tylko sponsorzy do</th>
+              <th style="width: 150px">Tylko zespół</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr v-for="row in vehiclesTableComp" :key="row.vehicleRef.id">
+              <td>{{ row.vehicleRef.id }}</td>
+              <td
+                class="editable"
+                :data-pending="row.pendingChanges.name !== undefined && row.pendingChanges.name !== row.vehicleRef.name"
+                @click="editRowPrimitive(row, VehicleEditRowKey.NAME)"
+              >
+                {{ row.pendingChanges.name ?? row.vehicleRef.name }}
+              </td>
+              <td
+                class="editable"
+                :data-pending="row.pendingChanges.type !== undefined && row.pendingChanges.type !== row.vehicleRef.type"
+                @click="editRowPrimitive(row, VehicleEditRowKey.TYPE)"
+              >
+                {{ row.pendingChanges.type ?? row.vehicleRef.type }}
+              </td>
+
+              <td
+                class="editable"
+                :data-pending="row.pendingChanges.cabinName !== undefined && row.pendingChanges.cabinName !== row.vehicleRef.cabinName"
+                @click="editRowPrimitive(row, VehicleEditRowKey.CABIN)"
+              >
+                {{ row.pendingChanges.cabinName ?? row.vehicleRef.cabinName }}
+              </td>
+
+              <td class="editable">{{ row.vehicleRef.group.name }}</td>
+              <td
+                class="editable"
+                :data-pending="
+                  row.pendingChanges.restrictions?.sponsorOnly !== undefined &&
+                  row.pendingChanges.restrictions.sponsorOnly !== row.vehicleRef.restrictions?.sponsorOnly
+                "
+                @click="editRowRestrictions(row, VehicleEditRestrictionKey.SPONSOR_ONLY)"
+              >
+                <span v-if="row.pendingChanges.restrictions?.sponsorOnly !== undefined">
+                  {{ new Date(row.pendingChanges.restrictions.sponsorOnly).toLocaleString() }}
+                </span>
+
+                <span v-else-if="row.vehicleRef.restrictions?.sponsorOnly !== undefined">
+                  {{ new Date(row.vehicleRef.restrictions.sponsorOnly).toLocaleString() }}
+                </span>
+
+                <span v-else>❌</span>
+              </td>
+              <td
+                class="editable"
+                :data-pending="
+                  row.pendingChanges.restrictions?.teamOnly !== undefined &&
+                  row.pendingChanges.restrictions.teamOnly !== row.vehicleRef.restrictions?.teamOnly
+                "
+                @click="editRowRestrictions(row, VehicleEditRestrictionKey.TEAM_ONLY)"
+              >
+                <span v-if="row.pendingChanges.restrictions?.teamOnly !== undefined">
+                  {{ row.pendingChanges.restrictions.teamOnly ? '✔️' : '❌' }}
+                </span>
+
+                <span v-else-if="row.vehicleRef.restrictions?.teamOnly !== undefined">
+                  {{ row.vehicleRef.restrictions.teamOnly ? '✔️' : '❌' }}
+                </span>
+
+                <span v-else>❌</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useVehiclesStore } from '../stores/vehicles.store';
+import { VehicleEditRowKey, IVehicleTableRow, VehicleEditRestrictionKey } from '../types/vehicles.types';
+import { IVehicle } from '../types/vehicles.types';
+
+export default defineComponent({
+  data: () => ({
+    vehiclesStore: useVehiclesStore(),
+    vehicleSearchValue: '',
+    VehicleEditRowKey,
+    VehicleEditRestrictionKey,
+  }),
+
+  mounted() {
+    this.vehiclesStore.fetchVehicles();
+  },
+
+  computed: {
+    vehiclesTableComp() {
+      return this.vehiclesStore.vehiclesTable
+        .filter((row) => row.vehicleRef.name.toLowerCase().startsWith(this.vehicleSearchValue.trim().toLowerCase()))
+        .sort((r1, r2) => {
+          //v1.name.localeCompare(v2.name, 'pl-PL')
+
+          return r1.vehicleRef.id - r2.vehicleRef.id;
+        });
+    },
+  },
+
+  methods: {
+    editRowPrimitive(row: IVehicleTableRow, editKey: VehicleEditRowKey) {
+      if (!(editKey in row.vehicleRef)) return;
+
+      const promptValue = prompt('Zmień wartość:', row.vehicleRef[editKey]);
+      if (promptValue == null) return;
+
+      let changedVehileObj: Partial<IVehicle> = {};
+
+      changedVehileObj[editKey] = promptValue;
+
+      if (row.vehicleRef[editKey] === promptValue) {
+        delete row.pendingChanges[editKey];
+      } else row.pendingChanges = { ...row.pendingChanges, ...changedVehileObj };
+    },
+
+    editRowRestrictions(row: IVehicleTableRow, editKey: VehicleEditRestrictionKey) {
+      let changedVehileObj: Partial<IVehicle> = {};
+
+      if (editKey == VehicleEditRestrictionKey.TEAM_ONLY) {
+        let nextTeamOnly = true;
+
+        if (row.pendingChanges.restrictions?.teamOnly !== undefined) nextTeamOnly = !row.pendingChanges.restrictions.teamOnly;
+        else if (row.vehicleRef.restrictions?.teamOnly !== undefined) nextTeamOnly = !row.vehicleRef.restrictions.teamOnly;
+
+        changedVehileObj['restrictions'] = {
+          teamOnly: nextTeamOnly,
+        };
+
+        if (row.vehicleRef.restrictions?.teamOnly === changedVehileObj.restrictions.teamOnly) delete changedVehileObj['restrictions']['teamOnly'];
+      }
+
+      if (editKey == VehicleEditRestrictionKey.SPONSOR_ONLY) {
+        const promptValue = prompt('Zmień wartość (timestamp):', row.vehicleRef.restrictions?.sponsorOnly?.toString() ?? Date.now().toString());
+
+        if (promptValue == null) return;
+
+        if (promptValue.trim() == '') {
+          changedVehileObj['restrictions'] = { sponsorOnly: undefined };
+        } else if (!isNaN(parseInt(promptValue))) {
+          const timestampPromptValue = parseInt(promptValue);
+
+          changedVehileObj['restrictions'] = { sponsorOnly: timestampPromptValue };
+        }
+      }
+
+      row.pendingChanges = { ...row.pendingChanges, ...changedVehileObj };
+
+      console.log(this.vehiclesStore.vehiclesTable.filter((v) => Object.keys(v.pendingChanges).length > 0));
+    },
+
+    getTableValueHTML(pendingValue: any, originalValue: any) {
+      if (pendingValue === undefined) return `${originalValue ?? '-'}`;
+
+      return `<s>${originalValue ?? '-'}</s> ${pendingValue}`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.view-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-height: 100vh;
+  padding: 0.5em;
+}
+
+.brand {
+  display: flex;
+  gap: 0.5em;
+}
+
+img.brand-image {
+  max-width: 4em;
+}
+
+.search-box {
+  margin-top: 1em;
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin-top: 1em;
+}
+
+table {
+  border-collapse: collapse;
+  text-align: center;
+  table-layout: fixed;
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  th {
+    background-color: #2b2b2b;
+  }
+
+  tr:nth-child(odd) {
+    background-color: #3b3b3b;
+  }
+
+  tr:nth-child(even) {
+    background-color: #4c4c4c;
+  }
+
+  td.editable {
+    cursor: pointer;
+  }
+
+  td[data-pending='true'] {
+    background-color: lightgreen;
+    color: black;
+  }
+
+  th,
+  td {
+    padding: 0.5em;
+  }
+}
+</style>

yarn.lock

@@ -7,6 +7,16 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.18.11.tgz"
   integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
 
+"@esbuild/android-arm@0.15.12":
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.12.tgz#e548b10a5e55b9e10537a049ebf0bc72c453b769"
+  integrity sha512-IC7TqIqiyE0MmvAhWkl/8AEzpOtbhRNDo7aph47We1NbE5w2bt/Q+giAhe0YYeVpYnIhGMcuZY92qDK6dQauvA==
+
+"@esbuild/linux-loong64@0.15.12":
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.12.tgz#475b33a2631a3d8ca8aa95ee127f9a61d95bf9c1"
+  integrity sha512-tZEowDjvU7O7I04GYvWQOS4yyP9E/7YlsB0jjw1Ycukgr2ycEzKyIk5tms5WnLBymaewc6VmRKnn5IJWgK4eFw==
+
 "@vitejs/plugin-vue@^3.2.0":
   version "3.2.0"
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz"
@@ -77,14 +87,6 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@^3.2.40", "@vue/compiler-dom@3.2.41":
-  version "3.2.41"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz"
-  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
-  dependencies:
-    "@vue/compiler-core" "3.2.41"
-    "@vue/shared" "3.2.41"
-
 "@vue/compiler-dom@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
@@ -93,21 +95,13 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-sfc@^3.2.40":
+"@vue/compiler-dom@3.2.41", "@vue/compiler-dom@^3.2.40":
   version "3.2.41"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz"
-  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz"
+  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
   dependencies:
-    "@babel/parser" "^7.16.4"
     "@vue/compiler-core" "3.2.41"
-    "@vue/compiler-dom" "3.2.41"
-    "@vue/compiler-ssr" "3.2.41"
-    "@vue/reactivity-transform" "3.2.41"
     "@vue/shared" "3.2.41"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
 
 "@vue/compiler-sfc@3.2.37":
   version "3.2.37"
@@ -125,6 +119,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz"
+  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/reactivity-transform" "3.2.41"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz"
@@ -168,13 +178,6 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@^3.2.40":
-  version "3.2.41"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz"
-  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
-  dependencies:
-    "@vue/shared" "3.2.41"
-
 "@vue/reactivity@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz"
@@ -182,6 +185,13 @@
   dependencies:
     "@vue/shared" "3.2.37"
 
+"@vue/reactivity@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz"
+  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
+  dependencies:
+    "@vue/shared" "3.2.41"
+
 "@vue/runtime-core@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz"
@@ -207,16 +217,16 @@
     "@vue/compiler-ssr" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/shared@^3.2.40", "@vue/shared@3.2.41":
-  version "3.2.41"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz"
-  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
-
 "@vue/shared@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
+"@vue/shared@3.2.41", "@vue/shared@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
@@ -300,11 +310,106 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+esbuild-android-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.12.tgz#5e8151d5f0a748c71a7fbea8cee844ccf008e6fc"
+  integrity sha512-MJKXwvPY9g0rGps0+U65HlTsM1wUs9lbjt5CU19RESqycGFDRijMDQsh68MtbzkqWSRdEtiKS1mtPzKneaAI0Q==
+
+esbuild-android-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.12.tgz#5ee72a6baa444bc96ffcb472a3ba4aba2cc80666"
+  integrity sha512-Hc9SEcZbIMhhLcvhr1DH+lrrec9SFTiRzfJ7EGSBZiiw994gfkVV6vG0sLWqQQ6DD7V4+OggB+Hn0IRUdDUqvA==
+
+esbuild-darwin-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.12.tgz#70047007e093fa1b3ba7ef86f9b3fa63db51fe25"
+  integrity sha512-qkmqrTVYPFiePt5qFjP8w/S+GIUMbt6k8qmiPraECUWfPptaPJUGkCKrWEfYFRWB7bY23FV95rhvPyh/KARP8Q==
+
+esbuild-darwin-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.12.tgz#41c951f23d9a70539bcca552bae6e5196696ae04"
+  integrity sha512-z4zPX02tQ41kcXMyN3c/GfZpIjKoI/BzHrdKUwhC/Ki5BAhWv59A9M8H+iqaRbwpzYrYidTybBwiZAIWCLJAkw==
+
+esbuild-freebsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.12.tgz#a761b5afd12bbedb7d56c612e9cfa4d2711f33f0"
+  integrity sha512-XFL7gKMCKXLDiAiBjhLG0XECliXaRLTZh6hsyzqUqPUf/PY4C6EJDTKIeqqPKXaVJ8+fzNek88285krSz1QECw==
+
+esbuild-freebsd-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.12.tgz#6b0839d4d58deabc6cbd96276eb8cbf94f7f335e"
+  integrity sha512-jwEIu5UCUk6TjiG1X+KQnCGISI+ILnXzIzt9yDVrhjug2fkYzlLbl0K43q96Q3KB66v6N1UFF0r5Ks4Xo7i72g==
+
+esbuild-linux-32@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.12.tgz#bd50bfe22514d434d97d5150977496e2631345b4"
+  integrity sha512-uSQuSEyF1kVzGzuIr4XM+v7TPKxHjBnLcwv2yPyCz8riV8VUCnO/C4BF3w5dHiVpCd5Z1cebBtZJNlC4anWpwA==
+
 esbuild-linux-64@0.15.12:
   version "0.15.12"
   resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.12.tgz"
   integrity sha512-QcgCKb7zfJxqT9o5z9ZUeGH1k8N6iX1Y7VNsEi5F9+HzN1OIx7ESxtQXDN9jbeUSPiRH1n9cw6gFT3H4qbdvcA==
 
+esbuild-linux-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.12.tgz#3bf789c4396dc032875a122988efd6f3733f28f5"
+  integrity sha512-HtNq5xm8fUpZKwWKS2/YGwSfTF+339L4aIA8yphNKYJckd5hVdhfdl6GM2P3HwLSCORS++++7++//ApEwXEuAQ==
+
+esbuild-linux-arm@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.12.tgz#b91b5a8d470053f6c2c9c8a5e67ec10a71fe4a67"
+  integrity sha512-Wf7T0aNylGcLu7hBnzMvsTfEXdEdJY/hY3u36Vla21aY66xR0MS5I1Hw8nVquXjTN0A6fk/vnr32tkC/C2lb0A==
+
+esbuild-linux-mips64le@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.12.tgz#2fb54099ada3c950a7536dfcba46172c61e580e2"
+  integrity sha512-Qol3+AvivngUZkTVFgLpb0H6DT+N5/zM3V1YgTkryPYFeUvuT5JFNDR3ZiS6LxhyF8EE+fiNtzwlPqMDqVcc6A==
+
+esbuild-linux-ppc64le@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.12.tgz#9e3b8c09825fb27886249dfb3142a750df29a1b7"
+  integrity sha512-4D8qUCo+CFKaR0cGXtGyVsOI7w7k93Qxb3KFXWr75An0DHamYzq8lt7TNZKoOq/Gh8c40/aKaxvcZnTgQ0TJNg==
+
+esbuild-linux-riscv64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.12.tgz#923d0f5b6e12ee0d1fe116b08e4ae4478fe40693"
+  integrity sha512-G9w6NcuuCI6TUUxe6ka0enjZHDnSVK8bO+1qDhMOCtl7Tr78CcZilJj8SGLN00zO5iIlwNRZKHjdMpfFgNn1VA==
+
+esbuild-linux-s390x@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.12.tgz#3b1620220482b96266a0c6d9d471d451a1eab86f"
+  integrity sha512-Lt6BDnuXbXeqSlVuuUM5z18GkJAZf3ERskGZbAWjrQoi9xbEIsj/hEzVnSAFLtkfLuy2DE4RwTcX02tZFunXww==
+
+esbuild-netbsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.12.tgz#276730f80da646859b1af5a740e7802d8cd73e42"
+  integrity sha512-jlUxCiHO1dsqoURZDQts+HK100o0hXfi4t54MNRMCAqKGAV33JCVvMplLAa2FwviSojT/5ZG5HUfG3gstwAG8w==
+
+esbuild-openbsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.12.tgz#bd0eea1dd2ca0722ed489d88c26714034429f8ae"
+  integrity sha512-1o1uAfRTMIWNOmpf8v7iudND0L6zRBYSH45sofCZywrcf7NcZA+c7aFsS1YryU+yN7aRppTqdUK1PgbZVaB1Dw==
+
+esbuild-sunos-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.12.tgz#5e56bf9eef3b2d92360d6d29dcde7722acbecc9e"
+  integrity sha512-nkl251DpoWoBO9Eq9aFdoIt2yYmp4I3kvQjba3jFKlMXuqQ9A4q+JaqdkCouG3DHgAGnzshzaGu6xofGcXyPXg==
+
+esbuild-windows-32@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.12.tgz#a4f1a301c1a2fa7701fcd4b91ef9d2620cf293d0"
+  integrity sha512-WlGeBZHgPC00O08luIp5B2SP4cNCp/PcS+3Pcg31kdcJPopHxLkdCXtadLU9J82LCfw4TVls21A6lilQ9mzHrw==
+
+esbuild-windows-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.12.tgz#bc2b467541744d653be4fe64eaa9b0dbbf8e07f6"
+  integrity sha512-VActO3WnWZSN//xjSfbiGOSyC+wkZtI8I4KlgrTo5oHJM6z3MZZBCuFaZHd8hzf/W9KPhF0lY8OqlmWC9HO5AA==
+
+esbuild-windows-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.12.tgz#9a7266404334a86be800957eaee9aef94c3df328"
+  integrity sha512-Of3MIacva1OK/m4zCNIvBfz8VVROBmQT+gRX6pFTLPngFYcj6TFH/12VveAqq1k9VB2l28EoVMNMUCcmsfwyuA==
+
 esbuild@^0.15.9:
   version "0.15.12"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.12.tgz"
@@ -359,6 +464,11 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -520,7 +630,7 @@ rollup@^2.79.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-sass@*, sass@^1.55.0:
+sass@^1.55.0:
   version "1.55.0"
   resolved "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz"
   integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
@@ -529,7 +639,7 @@ sass@*, sass@^1.55.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -556,12 +666,12 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-typescript@*, typescript@^4.8.4, typescript@>=4.4.4:
+typescript@^4.8.4:
   version "4.8.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-vite@^3.0.0, vite@^3.2.1:
+vite@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz"
   integrity sha512-ADtMkfHuWq4tskJsri2n2FZkORO8ZyhI+zIz7zTrDAgDEtct1jdxOg3YsZBfHhKjmMoWLOSCr+64qrEDGo/DbQ==
@@ -601,7 +711,7 @@ vue-tsc@^1.0.9:
     "@volar/vue-language-core" "1.0.9"
     "@volar/vue-typescript" "1.0.9"
 
-"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.2.37, vue@3.2.37:
+vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz"
   integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==