migracja http clienta do apiStore

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="i + station.name"
+            :key="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 }">
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+            <td class="station-users" :class="{ inactive: !station.onlineInfo }">
+              <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 {
-  &_name {
-    font-weight: bold;
+.station-name {
+  font-weight: bold;
+  max-width: 200px;
 
-    &.default {
-      color: $accentCol;
-    }
-
-    &.nonPublic {
-      color: #bebebe;
-    }
-
-    &.unavailable {
-      font-weight: 500;
-      color: #bebebe;
-    }
+  &.default {
+    color: $accentCol;
   }
 
-  &_level,
-  &_dispatcher-exp {
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-
-    img {
-      width: 2em;
-      border-radius: 50%;
-    }
+  &.nonPublic {
+    color: #bebebe;
   }
 
-  // &_dispatcher-name {
-  //   position: relative;
-  // }
+  &.unavailable {
+    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>