Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-02 21:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(profile): improper image loading when switching between users

Browse Source
This commit is contained in:
Spythere
2026-02-25 21:38:43 +01:00
parent 0d495ede2d
commit 0276e0754b
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerProfileView/ProfilePlayerAvatar.vue
+15 -12
View File
@@ -1,9 +1,8 @@
<template> <template>
<div class="player-avatar"> <div class="player-avatar">
<img <img
v-if="avatarId" v-if="props.playerTD2Info && props.playerTD2Info.avatar"
v-show="avatarLoadingStatus == Status.Data.Loaded" :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
:src="avatarSrc"
class="player-avatar-image" class="player-avatar-image"
ref="avatarImageRef" ref="avatarImageRef"
alt="player image" alt="player image"
@@ -12,32 +11,36 @@
/> />
<img <img
v-if="avatarLoadingStatus == Status.Data.Error || avatarId == 0" v-if="
avatarLoadingStatus == Status.Data.Error ||
(props.playerTD2Info && !props.playerTD2Info.avatar)
"
class="img-placeholder" class="img-placeholder"
height="100" height="100"
src="/images/default-avatar.jpg" src="/images/default-avatar.jpg"
/> />
<Loading v-else-if="avatarLoadingStatus == Status.Data.Loading || avatarId === undefined" /> <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import { computed, onMounted, PropType, ref, useTemplateRef } from 'vue';
import { Status } from '../../typings/common'; import { Status } from '../../typings/common';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
import { Td2API } from '../../typings/api';
const props = defineProps({ const props = defineProps({
avatarId: { playerTD2Info: {
type: Number type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
} }
}); });
const avatarSrc = computed( onMounted(() => {
() => `https://td2.info.pl/index.php?action=dlattach;attach=${props.avatarId};type=avatar` console.log(avatarImageRef.value);
); });
const avatarImageRef = ref<HTMLImageElement | null>(null); const avatarImageRef = useTemplateRef('avatarImageRef');
const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading); const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
function onAvatarLoadSuccess() { function onAvatarLoadSuccess() {
src/components/PlayerProfileView/ProfileSummary.vue
+3 -5
View File
@@ -2,7 +2,7 @@
<section class="profile-summary"> <section class="profile-summary">
<div class="player-info"> <div class="player-info">
<div class="info-main"> <div class="info-main">
<ProfilePlayerAvatar :avatarId="playerTD2Info?.avatar" /> <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
<div> <div>
<h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }"> <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
@@ -69,9 +69,9 @@
</a> </a>
</div> </div>
<!-- Current activity --> <!-- Current activities -->
<div <div
class="player-activity" class="player-activities-box"
v-if="activeDispatches.length > 0 || activeTrains.length > 0" v-if="activeDispatches.length > 0 || activeTrains.length > 0"
> >
<div class="info-activity" v-if="activeDispatches.length > 0"> <div class="info-activity" v-if="activeDispatches.length > 0">
@@ -348,8 +348,6 @@ const activeTrains = computed(() => {
gap: 0.25em; gap: 0.25em;
font-weight: bold; font-weight: bold;
padding: 0.25em 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
} }
} }
src/views/PlayerProfileView.vue
+1
View File
@@ -105,6 +105,7 @@ async function fetchPlayerData() {
playerJournalStatus.value = Status.Data.Loading; playerJournalStatus.value = Status.Data.Loading;
playerInfo.value = undefined; playerInfo.value = undefined;
playerTD2Info.value = undefined;
playerJournal.value = undefined; playerJournal.value = undefined;
} }