migracja http clienta do apiStore

src/App.vue

@@ -87,6 +87,8 @@ export default defineComponent({
       this.setupOfflineHandling();
 
       this.apiStore.setupAPIData();
+
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
     },
 
     setupOfflineHandling() {
@@ -108,7 +110,7 @@ export default defineComponent({
     handleOnlineMode() {
       this.store.isOffline = false;
 
-      this.apiStore.setupAPIData();
+      this.apiStore.connectToAPI();
     },
 
     changeLang(lang: string) {

src/components/JournalView/JournalDailyStats.vue

@@ -172,7 +172,7 @@ import dateMixin from '../../mixins/dateMixin';
 
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'journal-daily-stats',
@@ -186,7 +186,8 @@ export default defineComponent({
       statsStatus: Status.Data.Loading,
       intervalId: -1,
 
-      stats: {} as API.DailyStats.Response
+      stats: {} as API.DailyStats.Response,
+      apiStore: useApiStore()
     };
   },
 
@@ -211,7 +212,9 @@ export default defineComponent({
   methods: {
     async fetchDailyTimetableStats() {
       try {
-        const res: API.DailyStats.Response = await (await http.get('api/getDailyStats')).data;
+        const res: API.DailyStats.Response = await (
+          await this.apiStore.client!.get('api/getDailyStats')
+        ).data;
 
         this.stats = res;
 

src/components/JournalView/JournalOptions.vue

@@ -116,7 +116,7 @@ import keyMixin from '../../mixins/keyMixin';
 import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
@@ -158,6 +158,7 @@ export default defineComponent({
 
       searchTimeout: 0,
       store: useMainStore(),
+      apiStore: useApiStore(),
 
       JournalFilterSection: Journal.FilterSection
     };
@@ -241,7 +242,7 @@ export default defineComponent({
       this.searchTimeout = window.setTimeout(async () => {
         try {
           const suggestions: string[] = await (
-            await http.get(`api/get${type}Suggestions?name=${value}`)
+            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
           ).data;
 
           this[`${type}Suggestions`] = suggestions;

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -79,7 +79,7 @@ import listObserverMixin from '../../mixins/listObserverMixin';
 import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
@@ -98,7 +98,8 @@ export default defineComponent({
     return {
       historyList: [] as API.DispatcherHistory.Response,
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+      apiStore: useApiStore()
     };
   },
 
@@ -127,7 +128,7 @@ export default defineComponent({
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
         const historyAPIData: API.DispatcherHistory.Response = await (
-          await http.get(requestString)
+          await this.apiStore.client!.get(requestString)
         ).data;
 
         this.dataStatus = Status.Data.Loaded;

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -77,7 +77,7 @@ import listObserverMixin from '../../mixins/listObserverMixin';
 import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
@@ -94,6 +94,7 @@ export default defineComponent({
   data() {
     return {
       historyList: [] as API.TimetableHistory.Response,
+      apiStore: useApiStore(),
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data
     };
@@ -112,7 +113,7 @@ export default defineComponent({
 
       try {
         const response: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: {
               issuedFrom: this.station?.name || this.onlineScenery?.name
             }

src/components/StationsView/StationTable.vue

@@ -27,6 +27,7 @@
               :key="headerName"
               @click="changeSorter(headerName)"
               class="header-image"
+              :class="headerName"
             >
               <span class="header_wrapper">
                 <img
@@ -48,24 +49,23 @@
 
         <tbody>
           <tr
-            class="station"
+            v-for="station in stations"
             :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            v-for="(station, i) in stations"
+            :key="station.name"
-            :key="i + station.name"
             @click.left="setScenery(station.name)"
             @click.right="openForumSite($event, station.generalInfo?.url)"
             @keydown.enter="setScenery(station.name)"
             @keydown.space="openForumSite($event, station.generalInfo?.url)"
             tabindex="0"
           >
-            <td class="station_name" :class="station.generalInfo?.availability">
+            <td class="station-name" :class="station.generalInfo?.availability">
               <b v-if="station.generalInfo?.project" style="color: salmon">{{
                 station.generalInfo.project
               }}</b>
               {{ station.name }}
             </td>
 
-            <td class="station_level">
+            <td class="station-level">
               <span v-if="station.generalInfo">
                 <span
                   v-if="
@@ -106,14 +106,14 @@
               <span v-else> ? </span>
             </td>
 
-            <td class="station_status">
+            <td class="station-status">
               <StationStatusBadge
                 :isOnline="station.onlineInfo ? true : false"
                 :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
               />
             </td>
 
-            <td class="station_dispatcher-name">
+            <td class="station-dispatcher-name">
               <span v-if="station.onlineInfo?.dispatcherName">
                 <b
                   v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
@@ -130,7 +130,7 @@
               </span>
             </td>
 
-            <td class="station_dispatcher-exp">
+            <td class="station-dispatcher-exp">
               <span
                 v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
                 :style="
@@ -144,7 +144,7 @@
               </span>
             </td>
 
-            <td class="station_tracks twoway">
+            <td class="station-tracks twoway">
               <span
                 v-if="
                   station.generalInfo &&
@@ -220,19 +220,9 @@
                   :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                 />
               </span>
-
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  src="/images/icon-SBL.svg"
-                  alt="SBL"
-                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
-                />
-              </span>
             </td>
 
-            <td class="station_info" v-else>
+            <td class="station-info" v-else>
               <img
                 class="icon-info"
                 src="/images/icon-unknown.svg"
@@ -241,10 +231,10 @@
               />
             </td>
 
-            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+            <td class="station-users" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+              <span class="text--primary">{{ station.onlineInfo?.currentUsers || 0 }}</span>
               /
-              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+              <span class="text--primary">{{ station.onlineInfo?.maxUsers || 0 }}</span>
             </td>
 
             <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
@@ -252,7 +242,7 @@
             </td>
 
             <td
-              class="station_schedules all"
+              class="station-schedules all"
               style="width: 30px"
               :class="{ inactive: !station.onlineInfo }"
             >
@@ -260,7 +250,7 @@
             </td>
 
             <td
-              class="station_schedules unconfirmed"
+              class="station-schedules unconfirmed"
               style="width: 30px"
               :class="{ inactive: !station.onlineInfo }"
             >
@@ -268,7 +258,7 @@
             </td>
 
             <td
-              class="station_schedules confirmed"
+              class="station-schedules confirmed"
               style="width: 30px"
               :class="{ inactive: !station.onlineInfo }"
             >
@@ -399,10 +389,18 @@ $rowCol: #424242;
   font-weight: 500;
 }
 
+.no-stations {
+  text-align: center;
+  font-size: 1.5em;
+
+  padding: 1em;
+  margin: 1em 0;
+
+  background: #333;
+}
+
 table {
-  white-space: nowrap;
   border-collapse: collapse;
-  // min-width: 1350px;
   width: 100%;
 
   @include smallScreen() {
@@ -418,11 +416,15 @@ table {
     top: 0;
 
     &.header-text {
-      min-width: 140px;
+      min-width: 10em;
     }
 
     &.header-image {
-      min-width: 60px;
+      min-width: 65px;
+
+      &.user {
+        min-width: 80px;
+      }
     }
 
     padding: 0.5em 0.25em;
@@ -447,7 +449,7 @@ table {
   }
 }
 
-tr.station {
+tr {
   background-color: $rowCol;
 
   &:nth-child(even) {
@@ -466,6 +468,10 @@ tr.station {
 
     cursor: pointer;
 
+    &.inactive {
+      opacity: 0.2;
+    }
+
     @include smallScreen() {
       margin: 0;
       padding: 0.3em 0.5em;
@@ -474,118 +480,105 @@ tr.station {
   }
 }
 
-td.station {
+.station-name {
-  &_name {
+  font-weight: bold;
-    font-weight: bold;
+  max-width: 200px;
 
-    &.default {
+  &.default {
-      color: $accentCol;
+    color: $accentCol;
-    }
-
-    &.nonPublic {
-      color: #bebebe;
-    }
-
-    &.unavailable {
-      font-weight: 500;
-      color: #bebebe;
-    }
   }
 
-  &_level,
+  &.nonPublic {
-  &_dispatcher-exp {
+    color: #bebebe;
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-
-    img {
-      width: 2em;
-      border-radius: 50%;
-    }
   }
 
-  // &_dispatcher-name {
+  &.unavailable {
-  //   position: relative;
+    font-weight: 500;
-  // }
+    color: #bebebe;
+  }
+}
 
-  &_dispatcher-name img {
+.station-level,
+.station-dispatcher-exp {
+  span {
+    display: block;
+
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    margin: 0 auto;
+  }
+
+  img {
+    width: 2em;
+    border-radius: 50%;
+  }
+}
+
+.station-dispatcher-name {
+  img {
     max-width: 1.35em;
     vertical-align: text-bottom;
   }
-
-  &_level {
-    span {
-      background-color: #888;
-      border-radius: 50%;
-    }
-  }
-
-  &_info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    /* Images */
-    .icon-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-
-      margin: 0 0.2em;
-
-      outline: 2px solid #444;
-      border-radius: 0.5em;
-
-      @include smallScreen() {
-        width: 24px;
-        height: 24px;
-        font-size: 10px;
-      }
-    }
-  }
-
-  &_tracks {
-    .no-catenary {
-      background-color: #939393;
-    }
-
-    .catenary {
-      background-color: #009dce;
-    }
-
-    .track {
-      margin: 0 0.35em;
-      padding: 0.35em;
-      font-size: 1.05em;
-      white-space: pre-wrap;
-    }
-  }
-
-  &_users,
-  &_spawns,
-  &_schedules {
-    &.inactive {
-      opacity: 0.2;
-    }
-  }
 }
 
-.station_users {
+.station-level {
   span {
-    color: gold;
+    background-color: #888;
+    border-radius: 50%;
   }
 }
 
-.station_schedules {
+.station-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Images */
+  .icon-info {
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+
+    margin: 0 0.2em;
+
+    outline: 2px solid #444;
+    border-radius: 0.5em;
+
+    @include smallScreen() {
+      width: 24px;
+      height: 24px;
+      font-size: 10px;
+    }
+  }
+}
+
+.station-tracks {
+  .no-catenary {
+    background-color: #939393;
+  }
+
+  .catenary {
+    background-color: #009dce;
+  }
+
+  .separator {
+    border-left: 3px solid #b3b3b3;
+  }
+
+  .track {
+    margin: 0 0.35em;
+    padding: 0.35em;
+    font-size: 1.05em;
+    white-space: pre-wrap;
+  }
+}
+
+.station-schedules {
   &.all {
     color: gold;
   }
@@ -598,18 +591,4 @@ td.station {
     color: lime;
   }
 }
-
-.separator {
-  border-left: 3px solid #b3b3b3;
-}
-
-.no-stations {
-  text-align: center;
-  font-size: 1.5em;
-
-  padding: 1em;
-  margin: 1em 0;
-
-  background: #333;
-}
 </style>

src/http.ts

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-const http = axios.create({
-  baseURL:
-    import.meta.env.VITE_API_MODE === 'development'
-      ? 'http://localhost:3001'
-      : 'https://stacjownik.spythere.eu'
-});
-
-export default http;

src/store/apiStore.ts

@@ -1,12 +1,18 @@
 import { defineStore } from 'pinia';
-import http from '../http';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
+import axios, { AxiosInstance } from 'axios';
 
 // Update seconds cron for active data scheduler
 const UPDATE_SECONDS = [3, 23, 43];
 
+export enum APIMode {
+  PRODUCTION = 0,
+  DEV = 1,
+  MOCK = 2
+}
+
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
     dataStatuses: {
@@ -18,11 +24,34 @@ export const useApiStore = defineStore('apiStore', {
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
+    client: undefined as AxiosInstance | undefined,
+
     activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
     async setupAPIData() {
+      let baseURL = 'https://stacjownik.spythere.eu';
+
+      switch (import.meta.env.VITE_API_MODE) {
+        case 'development':
+          baseURL = 'http://localhost:3001';
+          break;
+        case 'mocking':
+          baseURL = 'http://localhost:3123';
+          break;
+        default:
+          break;
+      }
+
+      this.client = axios.create({
+        baseURL
+      });
+
+      this.connectToAPI();
+    },
+
+    async connectToAPI() {
       // Static data
       this.fetchDonatorsData();
       this.fetchStationsGeneralInfo();
@@ -46,7 +75,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchActiveData() {
       try {
-        const response = await http.get<API.ActiveData.Response>('api/getActiveData');
+        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
 
         this.activeData = response.data;
         this.dataStatuses.connection = Status.Data.Loaded;
@@ -60,7 +89,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDonatorsData() {
       try {
-        const response = await http.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
 
         this.donatorsData = response.data;
       } catch (error) {
@@ -69,8 +98,9 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = (await http.get<StationJSONData[]>('api/getSceneries'))
+      const sceneryData: StationJSONData[] = (
-        .data;
+        await this.client!.get<StationJSONData[]>('api/getSceneries')
+      ).data;
 
       if (!sceneryData) {
         this.dataStatuses.sceneries = Status.Data.Error;

src/views/JournalDispatchers.vue

@@ -37,7 +37,6 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import http from '../http';
 import { useMainStore } from '../store/mainStore';
 import { LocationQuery } from 'vue-router';
 import { Journal } from '../components/JournalView/typings';
@@ -48,6 +47,7 @@ import JournalDispatchersList from '../components/JournalView/JournalDispatchers
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
+import { useApiStore } from '../store/apiStore';
 
 const statsButtons: Journal.StatsButton[] = [
   {
@@ -120,6 +120,7 @@ export default defineComponent({
 
     return {
       mainStore: useMainStore(),
+      apiStore: useApiStore(),
 
       sorterActive,
       searchersValues,
@@ -201,7 +202,7 @@ export default defineComponent({
 
       try {
         const statsData: API.DispatcherStats.Response = await (
-          await http.get('api/getDispatcherStats', {
+          await this.apiStore.client!.get('api/getDispatcherStats', {
             params: {
               name: this.mainStore.dispatcherStatsName
             }
@@ -236,7 +237,9 @@ export default defineComponent({
       this.countFromIndex = this.historyList.length;
 
       const responseData: API.DispatcherHistory.Response = await (
-        await http.get(`api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`)
+        await this.apiStore.client!.get(
+          `api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
+        )
       ).data;
 
       if (!responseData) return;
@@ -283,7 +286,7 @@ export default defineComponent({
         if (reset) this.dataStatus = Status.Data.Loading;
 
         const responseData: API.DispatcherHistory.Response = await (
-          await http.get(`api/getDispatchers?${this.currentQuery}`)
+          await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`)
         ).data;
 
         if (!responseData) {

src/views/JournalTimetables.vue

@@ -53,7 +53,7 @@ import JournalTimetablesList from '../components/JournalView/JournalTimetables/J
 import { Journal } from '../components/JournalView/typings';
 import { Status } from '../typings/common';
 import { API } from '../typings/api';
-import http from '../http';
+import { useApiStore } from '../store/apiStore';
 
 export const journalTimetableFilters: Journal.TimetableFilter[] = [
   {
@@ -158,6 +158,7 @@ export default defineComponent({
   data: () => ({
     journalTimetableFilters,
     mainStore: useMainStore(),
+    apiStore: useApiStore(),
 
     statsButtons: [
       {
@@ -282,7 +283,9 @@ export default defineComponent({
         this.mainStore.driverStatsStatus = Status.Data.Loading;
 
         const statsData: API.DriverStats.Response = await (
-          await http.get(`api/getDriverInfo?name=${this.mainStore.driverStatsName}`)
+          await this.apiStore.client!.get(
+            `api/getDriverInfo?name=${this.mainStore.driverStatsName}`
+          )
         ).data;
 
         this.mainStore.driverStatsData = statsData;
@@ -321,7 +324,7 @@ export default defineComponent({
       this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
       const responseData: API.TimetableHistory.Response = await (
-        await http.get('api/getTimetables', {
+        await this.apiStore.client!.get('api/getTimetables', {
           params: { ...this.currentQueryParams }
         })
       ).data;
@@ -425,7 +428,7 @@ export default defineComponent({
 
       try {
         const responseData: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: this.currentQueryParams
           })
         ).data;

src/views/StationsView.vue

@@ -99,6 +99,7 @@ export default defineComponent({
 
 .wrapper {
   max-width: 100%;
+  width: 1700px;
 }
 
 .stations-options {