refactor: code organization

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;
     },
   },
 });