49 lines
1.7 KiB
Vue
49 lines
1.7 KiB
Vue
<template>
|
|
<div id="character-friends">
|
|
<div v-show="loading" class="alert alert-info">Loading friends.</div>
|
|
<template v-if="!loading">
|
|
<div class="character-friend" v-for="friend in friends" :key="friend.id">
|
|
<a :href="characterUrl(friend.name)"><img class="character-avatar" :src="avatarUrl(friend.name)" :title="friend.name"></a>
|
|
</div>
|
|
</template>
|
|
<div v-if="!loading && !friends.length" class="alert alert-info">No friends to display.</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Prop} from '@f-list/vue-ts';
|
|
import Vue from 'vue';
|
|
import * as Utils from '../utils';
|
|
import {methods} from './data_store';
|
|
import {Character} from './interfaces';
|
|
import {SimpleCharacter} from '../../interfaces';
|
|
|
|
@Component
|
|
export default class FriendsView extends Vue {
|
|
@Prop({required: true})
|
|
private readonly character!: Character;
|
|
private shown = false;
|
|
friends: SimpleCharacter[] = [];
|
|
loading = true;
|
|
error = '';
|
|
|
|
avatarUrl = Utils.avatarURL;
|
|
characterUrl = Utils.characterURL;
|
|
|
|
async show(): Promise<void> {
|
|
if(this.shown) return;
|
|
try {
|
|
this.error = '';
|
|
this.shown = true;
|
|
this.loading = true;
|
|
this.friends = await methods.friendsGet(this.character.character.id);
|
|
} catch(e) {
|
|
this.shown = false;
|
|
if(Utils.isJSONError(e))
|
|
this.error = <string>e.response.data.error;
|
|
Utils.ajaxError(e, 'Unable to load friends.');
|
|
}
|
|
this.loading = false;
|
|
}
|
|
}
|
|
</script> |