Merge pull request #155 from Spythere/development

v1.32.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "private": true,
   "type": "module",
   "scripts": {

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -14,7 +14,7 @@
     </div>
 
     <div class="history-list-box">
-      <Loading v-if="journalDataStatus == Status.Data.Loading" />
+      <Loading v-if="journalStatus == Status.Data.Loading" />
 
       <div v-else-if="combinedJournal.length == 0" class="no-recent-history">
         {{ t('profile.list.no-recent-history') }}
@@ -107,12 +107,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  PropType,
+  reactive,
+  ref
+} from 'vue';
 import { dateToLocaleString, humanizeDuration } from '../../composables/time';
 import { API } from '../../typings/api';
 import { useI18n } from 'vue-i18n';
 import { useApiStore } from '../../store/apiStore';
-import { useRoute } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
 
@@ -127,18 +136,19 @@ interface JournalEntry {
 const props = defineProps({
   playerName: {
     type: String
+  },
+
+  playerJournal: {
+    type: Object as PropType<API.PlayerJournal.Data>,
+  },
+
+  journalStatus: {
+    type: Number as PropType<Status.Data>,
+    required: true
   }
 });
 
 const { t } = useI18n();
-const apiStore = useApiStore();
-const route = useRoute();
-
-const playerId = ref(-1);
-const playerJournal = ref<API.PlayerJournal.Data | null>(null);
-const journalDataStatus = ref(Status.Data.Initialized);
-
-const intervalId = ref(-1);
 
 const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   Timetable: true,
@@ -146,23 +156,13 @@ const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   IssuedTimetable: true
 });
 
-onMounted(() => {
-  fetchPlayerJournal();
-  intervalId.value = setInterval(fetchPlayerJournal, 30000);
-});
-
-onDeactivated(() => {
-  clearInterval(intervalId.value);
-  intervalId.value = -1;
-});
-
 const combinedJournal = computed<JournalEntry[]>(() => {
-  if (!playerJournal.value || !props.playerName) return [];
+  if (!props.playerJournal || !props.playerName) return [];
 
   const list = [
-    ...playerJournal.value.timetables,
-    ...playerJournal.value.duties,
-    ...playerJournal.value.issuedTimetables
+    ...props.playerJournal.timetables,
+    ...props.playerJournal.duties,
+    ...props.playerJournal.issuedTimetables
   ]
     .reduce<JournalEntry[]>((acc, v) => {
       // Timetable or dispatcher type
@@ -209,35 +209,6 @@ function toggleFilter(filterType: JournalEntryType) {
 
   activeFilterTypes[filterType] = toggledState;
 }
-
-async function fetchPlayerJournal() {
-  const queryPlayerId = Number(route.query.playerId) || -1;
-
-  if (!apiStore.client || !queryPlayerId) return;
-
-  if (queryPlayerId != playerId.value) {
-    journalDataStatus.value = Status.Data.Loading;
-  }
-
-  playerId.value = queryPlayerId;
-
-  try {
-    const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
-      params: {
-        playerId: queryPlayerId,
-        dateScope: '30d'
-      }
-    });
-
-    playerJournal.value = response.data;
-    journalDataStatus.value = Status.Data.Loaded;
-  } catch (error) {
-    console.error(error);
-    journalDataStatus.value = Status.Data.Error;
-  }
-
-  return null;
-}
 </script>
 
 <style lang="scss" scoped>

src/components/PlayerProfileView/ProfilePlayerAvatar.vue

@@ -1,38 +1,46 @@
 <template>
   <div class="player-avatar">
     <img
-      v-if="avatarId"
+      v-if="props.playerTD2Info && props.playerTD2Info.avatar"
+      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
       class="player-avatar-image"
       ref="avatarImageRef"
-      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${avatarId};type=avatar`"
       alt="player image"
       @load="onAvatarLoadSuccess"
       @error="onAvatarLoadError"
     />
 
     <img
-      v-if="avatarLoadingStatus == Status.Data.Error || avatarId == 0"
+      v-if="
+        avatarLoadingStatus == Status.Data.Error ||
+        (props.playerTD2Info && !props.playerTD2Info.avatar)
+      "
       class="img-placeholder"
       height="100"
       src="/images/default-avatar.jpg"
     />
 
-    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading || avatarId === undefined" />
+    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, onMounted, PropType, ref, useTemplateRef } from 'vue';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
+import { Td2API } from '../../typings/api';
 
-defineProps({
-  avatarId: {
-    type: Number
+const props = defineProps({
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
   }
 });
 
-const avatarImageRef = ref<HTMLImageElement | null>(null);
+onMounted(() => {
+  console.log(avatarImageRef.value);
+});
+
+const avatarImageRef = useTemplateRef('avatarImageRef');
 const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
 
 function onAvatarLoadSuccess() {

src/components/PlayerProfileView/ProfileSummary.vue

@@ -2,7 +2,7 @@
   <section class="profile-summary">
     <div class="player-info">
       <div class="info-main">
-        <ProfilePlayerAvatar :avatarId="playerTD2Info?.avatar" />
+        <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
 
         <div>
           <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
@@ -69,16 +69,16 @@
             </a>
           </div>
 
-          <!-- Current activity -->
+          <!-- Current activities -->
           <div
-            class="player-activity"
+            class="player-activities-box"
             v-if="activeDispatches.length > 0 || activeTrains.length > 0"
           >
             <div class="info-activity" v-if="activeDispatches.length > 0">
               <router-link
                 v-for="d in activeDispatches"
                 class="dispatcher-badge"
-                :to="`/scenery?station=${d.stationName}`"
+                :to="`/scenery?station=${d.stationName}&region=${d.region}`"
               >
                 <img src="/images/icon-user.svg" width="25" alt="user icon" />
                 <b>{{ d.stationName }} ({{ getRegionNameById(d.region) }})</b>
@@ -88,17 +88,17 @@
 
             <div class="info-activity" v-if="activeTrains.length > 0">
               <router-link
-                v-for="d in activeTrains"
-                :to="`/driver?trainId=${d.id}`"
+                v-for="t in activeTrains"
+                :to="`/driver?trainId=${t.id}`"
                 class="driver-badge"
               >
                 <img src="/images/icon-train.svg" width="25" alt="train icon" />
-                <span v-if="d.timetable" class="text--primary">{{ d.timetable.category }}</span>
-                <span>{{ d.trainNo }}</span>
+                <span v-if="t.timetable" class="text--primary">{{ t.timetable.category }}</span>
+                <span>{{ t.trainNo }}</span>
                 &bull;
-                <span>{{ d.currentStationName }} ({{ getRegionNameById(d.region) }})</span>
+                <span>{{ t.currentStationName }} ({{ getRegionNameById(t.region) }})</span>
                 &bull;
-                <span class="text--grayed">{{ d.stockString.split(';')[0] }}</span>
+                <span class="text--grayed">{{ t.stockString.split(';')[0] }}</span>
               </router-link>
             </div>
           </div>
@@ -221,7 +221,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, ref } from 'vue';
+import { computed, onActivated, onMounted, PropType, ref, watch } from 'vue';
 import { API, Td2API } from '../../typings/api';
 import { calculateExpStyles } from '../../composables/badge';
 import { getCountPercentage } from '../../utils/calcUtils';
@@ -230,7 +230,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useApiStore } from '../../store/apiStore';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
-import axios from 'axios';
 import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
 import { getRegionNameById } from '../../utils/regionUtils';
 
@@ -245,21 +244,19 @@ const props = defineProps({
     required: true
   },
 
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
+  },
+
   playerName: {
     type: String
   }
 });
 
-const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | null>(null);
-
 const isPlayerDonator = computed(() =>
   props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
 );
 
-onMounted(() => {
-  fetchTD2Data();
-});
-
 const activeDispatches = computed(() => {
   if (!props.playerName) return [];
   if (!apiStore.activeData || !apiStore.activeData.activeSceneries) return [];
@@ -278,27 +275,6 @@ const activeTrains = computed(() => {
     (t) => t.driverName == props.playerName && (t.lastSeen >= Date.now() - 60000 || t.online)
   );
 });
-
-async function fetchTD2Data() {
-  if (!props.playerName) return;
-
-  try {
-    const response = await axios.get<Td2API.UsersInfoByName.Response>('https://api.td2.info.pl', {
-      params: {
-        method: 'getUsersInfoByName',
-        name: props.playerName
-      }
-    });
-
-    if (response.data.success && response.data.message.length == 1) {
-      playerTD2Info.value = response.data.message[0];
-    }
-  } catch (error) {
-    console.error(error);
-  }
-
-  return;
-}
 </script>
 
 <style lang="scss" scoped>
@@ -372,8 +348,6 @@ async function fetchTD2Data() {
 
     gap: 0.25em;
     font-weight: bold;
-
-    padding: 0.25em 0.5em;
     border-radius: 0.5em;
   }
 }

src/router/index.ts

@@ -74,7 +74,6 @@ const routes: Array<RouteRecordRaw> = [
 
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
-    console.log(to.name);
     if (
       (to.name == 'SceneryView' || to.name == 'DriverView' || to.name == 'PlayerProfileView') &&
       from.name !== to.name &&

src/store/apiStore.ts

@@ -68,7 +68,7 @@ export const useApiStore = defineStore('apiStore', {
       // Active data fefresh
       if (t >= this.nextUpdateTime) {
         this.fetchActiveData();
-        this.nextUpdateTime = t + 20000;
+        this.nextUpdateTime = t + 31000;
       }
 
       window.requestAnimationFrame(this.updateTick);

src/views/PlayerProfileView.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="profile-view">
-    <div class="profile-wrapper" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
-      <ProfileSummary :playerInfo="playerInfo" :playerName="playerName" />
+    <div class="profile-wrapper" v-if="playerInfo && playerInfoStatus == Status.Data.Loaded">
+      <ProfileSummary
+        :playerInfo="playerInfo"
+        :playerTD2Info="playerTD2Info"
+        :playerName="playerName"
+      />
 
       <div class="profile-side">
         <ProfileRecentStats :playerInfo="playerInfo" />
-        <ProfileHistoryList :playerName="playerName" />
+        <ProfileHistoryList
+          :playerName="playerName"
+          :playerJournal="playerJournal"
+          :journalStatus="playerJournalStatus"
+        />
       </div>
     </div>
 
-    <Loading v-else-if="playerDataStatus == Status.Data.Loading" />
+    <Loading v-else-if="playerInfoStatus == Status.Data.Loading" />
 
     <div class="no-data-found" v-else>
       <div>
@@ -22,9 +30,9 @@
 
 <script lang="ts" setup>
 import { onActivated, onDeactivated, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useApiStore } from '../store/apiStore';
-import { API } from '../typings/api';
+import { API, Td2API } from '../typings/api';
 import { useI18n } from 'vue-i18n';
 import { Status } from '../typings/common';
 
@@ -32,8 +40,10 @@ import Loading from '../components/Global/Loading.vue';
 import ProfileSummary from '../components/PlayerProfileView/ProfileSummary.vue';
 import ProfileRecentStats from '../components/PlayerProfileView/ProfileRecentStats.vue';
 import ProfileHistoryList from '../components/PlayerProfileView/ProfileHistoryList.vue';
+import axios from 'axios';
 
 const { t } = useI18n();
+const router = useRouter();
 
 const apiStore = useApiStore();
 const route = useRoute();
@@ -41,15 +51,18 @@ const route = useRoute();
 const playerId = ref(-1);
 const playerName = ref('');
 
-const playerInfo = ref<API.PlayerInfo.Data | null>(null);
-const playerDataStatus = ref(Status.Data.Initialized);
+const playerInfo = ref<API.PlayerInfo.Data | undefined>(undefined);
+const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | undefined>(undefined);
+const playerJournal = ref<API.PlayerJournal.Data | undefined>(undefined);
+
+const playerInfoStatus = ref(Status.Data.Initialized);
+const playerJournalStatus = ref(Status.Data.Initialized);
 
 const intervalId = ref(-1);
 
 onActivated(() => {
   fetchPlayerData();
-
-  intervalId.value = setInterval(fetchPlayerData, 30000);
+  intervalId.value = setInterval(fetchPlayerData, 32000);
 });
 
 onDeactivated(() => {
@@ -57,32 +70,85 @@ onDeactivated(() => {
   intervalId.value = -1;
 });
 
+async function fetchPlayerInfo(playerId: number) {
+  return apiStore.client!.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
+    params: {
+      playerId
+    }
+  });
+}
+
+async function fetchPlayerJournal(playerId: number) {
+  return apiStore.client!.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
+    params: {
+      playerId,
+      dateScope: '30d'
+    }
+  });
+}
+
+async function fetchPlayerTd2Info(playerName: string) {
+  return axios.get<Td2API.UsersInfoByName.Response>('https://api.td2.info.pl', {
+    params: {
+      method: 'getUsersInfoByName',
+      name: playerName
+    }
+  });
+}
+
 async function fetchPlayerData() {
   const queryPlayerId = Number(route.query.playerId) || -1;
 
   if (!apiStore.client || !queryPlayerId) return;
 
   if (queryPlayerId != playerId.value) {
-    playerDataStatus.value = Status.Data.Loading;
+    playerInfoStatus.value = Status.Data.Loading;
+    playerJournalStatus.value = Status.Data.Loading;
+
+    playerInfo.value = undefined;
+    playerTD2Info.value = undefined;
+    playerJournal.value = undefined;
   }
 
   playerId.value = queryPlayerId;
 
   try {
-    const response = await apiStore.client.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
-      params: {
-        playerId: queryPlayerId
-      }
-    });
+    const playerInfoResp = await fetchPlayerInfo(playerId.value);
 
     playerName.value =
-      response.data.driverStats.driverName || response.data.dispatcherStats.dispatcherName || '';
+      playerInfoResp.data.driverStats.driverName ||
+      playerInfoResp.data.dispatcherStats.dispatcherName ||
+      '';
 
-    playerInfo.value = response.data || null;
-    playerDataStatus.value = Status.Data.Loaded;
+    if (!playerName.value) {
+      router.push('/');
+      return;
+    }
+
+    playerInfo.value = playerName.value ? playerInfoResp.data : undefined;
+    playerInfoStatus.value = Status.Data.Loaded;
+
+    if (playerName.value) {
+      const playerTD2InfoResp = await fetchPlayerTd2Info(playerName.value);
+
+      if (playerTD2InfoResp.data.success && playerTD2InfoResp.data.message.length == 1) {
+        playerTD2Info.value = playerTD2InfoResp.data.message[0];
+      }
+    }
   } catch (error) {
-    console.error(error);
-    playerDataStatus.value = Status.Data.Error;
+    playerInfo.value = undefined;
+    playerTD2Info.value = undefined;
+    playerInfoStatus.value = Status.Data.Error;
+  }
+
+  try {
+    const playerJournalResp = await fetchPlayerJournal(playerId.value);
+
+    playerJournal.value = playerJournalResp.data;
+    playerJournalStatus.value = Status.Data.Loaded;
+  } catch (error) {
+    playerJournal.value = undefined;
+    playerJournalStatus.value = Status.Data.Error;
   }
 }
 </script>
@@ -100,7 +166,12 @@ async function fetchPlayerData() {
 }
 
 .no-data-found {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   text-align: center;
+  font-size: 1.35em;
 
   max-width: var(--max-container-width);
   width: 100%;