mirror of
https://github.com/romancm/gamebrary
synced 2024-12-19 15:53:06 +00:00
314 lines
8.5 KiB
Vue
314 lines
8.5 KiB
Vue
<template lang="html">
|
|
<div>
|
|
<!-- TODO: allow board settings to be accessed here -->
|
|
<!-- TODO: allow to override backdrop using search -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5>Boards</h5>
|
|
|
|
<div>
|
|
<b-button>Change backdrop</b-button>
|
|
<create-board />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right" v-if="!loading && !boards.length">
|
|
<b-img src="/static/img/empty-state.png" fluid class="mr-5" />
|
|
</div>
|
|
|
|
<b-overlay :show="loading" rounded="sm" variant="transparent">
|
|
<b-card
|
|
v-for="board in sortedBoards"
|
|
:key="board.id"
|
|
no-body
|
|
class="overflow-hidden clickable mt-3"
|
|
@click="viewBoard(board.id)"
|
|
>
|
|
<b-row no-gutters>
|
|
<b-col md="3" v-if="board.wallpaper">
|
|
<b-card-img
|
|
:src="getWallpaper(board)"
|
|
:alt="board.name"
|
|
/>
|
|
</b-col>
|
|
|
|
<b-col md="9" >
|
|
<b-card-body :title="board.name" title-tag="h5">
|
|
<b-card-text v-if="board.description">
|
|
{{ board.description }}
|
|
</b-card-text>
|
|
|
|
<b-avatar-group
|
|
v-if="Object.keys(platformNames).length"
|
|
size="lg"
|
|
variant="dark"
|
|
>
|
|
<b-avatar :src="getPlatformImage(id)"
|
|
v-for="id in board.platforms"
|
|
v-b-tooltip.hover
|
|
:title="platformNames[id].name"
|
|
:key="id"
|
|
/>
|
|
</b-avatar-group>
|
|
</b-card-body>
|
|
</b-col>
|
|
</b-row>
|
|
</b-card>
|
|
|
|
<b-card
|
|
no-body
|
|
border-variant="warning"
|
|
class="clickable mt-3"
|
|
v-for="platform in ownedPlatforms"
|
|
:key="platform.id"
|
|
@click="openDeprecationWarning(platform)"
|
|
>
|
|
<b-card-body>
|
|
<h4 class="mb-2">
|
|
{{ platform.name }}
|
|
<b-badge variant="warning">Deprecated</b-badge>
|
|
</h4>
|
|
|
|
<b-avatar
|
|
:src="`/static/img/platforms/logos/${platform.code}.svg`"
|
|
variant="light"
|
|
size="lg"
|
|
square
|
|
/>
|
|
</b-card-body>
|
|
</b-card>
|
|
|
|
<b-modal
|
|
id="deprecation-warning"
|
|
:title="tempPlatform && tempPlatform.name ? tempPlatform.name : 'Migration warning'"
|
|
hide-footer
|
|
@hidden="resetLegacyPlatform"
|
|
>
|
|
<b-alert show variant="warning">
|
|
<h4>Deprecation warning</h4>
|
|
<p>Platform-based boards will be phased out soon</p>
|
|
<p>Please click the button below to convert this platform into a board.</p>
|
|
<p>If you have any questions or need help feel free to email
|
|
<strong>contact@gamebrary.com</strong> and/or open defects in
|
|
<a href="https://github.com/romancm/gamebrary/issues" target="_blank">GitHub</a></p>
|
|
</b-alert>
|
|
|
|
<b-button
|
|
variant="success"
|
|
@click="convertLegacyBoard({ tempPlatform, migratePlatform })"
|
|
:disabled="saving"
|
|
>
|
|
<b-spinner small v-if="saving" />
|
|
<span v-else>Convert to board</span>
|
|
</b-button>
|
|
|
|
<b-button
|
|
variant="danger"
|
|
@click="deleteLegacyPlatform(tempPlatform)"
|
|
>
|
|
Delete legacy board
|
|
</b-button>
|
|
</b-modal>
|
|
</b-overlay>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CreateBoard from '@/components/Board/CreateBoard';
|
|
import legacyPlatforms from '@/platforms';
|
|
|
|
import { mapState, mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
components: {
|
|
CreateBoard,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
tempPlatform: null,
|
|
migratePlatform: null,
|
|
saving: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['boards', 'platforms', 'platformNames', 'wallpapers', 'gameLists', 'settings']),
|
|
...mapGetters(['platformNames', 'sortedBoards']),
|
|
|
|
hasLists() {
|
|
return Object.keys(this.gameLists).length > 0;
|
|
},
|
|
|
|
ownedPlatforms() {
|
|
return legacyPlatforms.filter(({ code }) => this.gameLists[code]);
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.load();
|
|
},
|
|
|
|
methods: {
|
|
load() {
|
|
this.loadBoards();
|
|
this.loadPlatforms();
|
|
},
|
|
|
|
async convertLegacyBoard({ tempPlatform, migratePlatform }) {
|
|
this.saving = true;
|
|
|
|
const lists = migratePlatform.map(({ games, name }) => {
|
|
const list = {
|
|
name,
|
|
games,
|
|
settings: {},
|
|
};
|
|
|
|
return list;
|
|
});
|
|
|
|
const { id } = tempPlatform;
|
|
|
|
const parsedPlatforms = isNaN(id) && id.includes(',')
|
|
? id.split(',').map(platformId => Number(platformId))
|
|
: [id];
|
|
|
|
const newBoard = {
|
|
description: '',
|
|
lists,
|
|
name: tempPlatform.name,
|
|
platforms: parsedPlatforms,
|
|
theme: null,
|
|
wallpaper: null,
|
|
};
|
|
|
|
await this.$store.dispatch('CREATE_BOARD', newBoard)
|
|
.catch(() => {
|
|
this.saving = false;
|
|
this.$bvToast.toast('There was an error creating board', { title: 'Error', variant: 'error' });
|
|
});
|
|
|
|
this.saving = false;
|
|
this.$bvToast.toast('Board converted', { title: 'Success', variant: 'success' });
|
|
this.$bvModal.hide('deprecation-warning');
|
|
this.showDeleteLegacyPlatform(tempPlatform);
|
|
},
|
|
|
|
showDeleteLegacyPlatform(tempPlatform) {
|
|
this.$bvModal.msgBoxConfirm('You can now safely delete your legacy platform', {
|
|
title: 'Board converted',
|
|
okVariant: 'danger',
|
|
cancelTitle: 'Dismiss',
|
|
okTitle: 'Delete legacy board',
|
|
})
|
|
.then((value) => {
|
|
if (value) {
|
|
this.deleteLegacyPlatform(tempPlatform);
|
|
}
|
|
});
|
|
},
|
|
|
|
openDeprecationWarning(platform) {
|
|
this.migratePlatform = this.gameLists[platform.code];
|
|
this.tempPlatform = platform;
|
|
this.$bvModal.show('deprecation-warning');
|
|
},
|
|
|
|
resetLegacyPlatform() {
|
|
this.tempPlatform = null;
|
|
this.migratePlatform = null;
|
|
},
|
|
|
|
deleteLegacyPlatform(platform) {
|
|
this.$store.commit('SET_ACTIVE_PLATFORM_LEGACY', platform);
|
|
|
|
this.$store.commit('REMOVE_PLATFORM_LEGACY');
|
|
|
|
this.$store.dispatch('SAVE_LEGACY_LISTS', this.gameLists)
|
|
.then(() => {
|
|
this.$bvModal.hide('deprecation-warning');
|
|
this.$bvToast.toast('Legacy board deleted', { title: 'Success', variant: 'success' });
|
|
})
|
|
.catch(() => {
|
|
this.$store.commit('SET_SESSION_EXPIRED', true);
|
|
});
|
|
},
|
|
|
|
getWallpaper({ wallpaper, name }) {
|
|
const boardWallpaper = this.wallpapers.find(({ fullPath }) => fullPath === wallpaper);
|
|
|
|
return this.wallpapers.length && boardWallpaper && boardWallpaper.url
|
|
? boardWallpaper.url
|
|
: `https://via.placeholder.com/300x100?text=${name}`;
|
|
},
|
|
|
|
getPlatformImage(id) {
|
|
const { platformNames } = this;
|
|
|
|
return id && platformNames && platformNames[id] && platformNames[id].logoFormat
|
|
? `/static/platform-logos/${platformNames[id].slug}.${platformNames[id].logoFormat}`
|
|
: '';
|
|
},
|
|
|
|
async loadPlatforms() {
|
|
await this.$store.dispatch('LOAD_IGDB_PLATFORMS')
|
|
.catch(() => {
|
|
this.$bvToast.toast('There was an error loading platforms', { title: 'Error', variant: 'error' });
|
|
});
|
|
},
|
|
|
|
async loadBoards() {
|
|
this.loading = true;
|
|
|
|
await this.$store.dispatch('LOAD_BOARDS')
|
|
.catch(() => {
|
|
this.loading = false;
|
|
this.$store.commit('SET_SESSION_EXPIRED', true);
|
|
});
|
|
|
|
this.loading = false;
|
|
},
|
|
|
|
viewBoard(id) {
|
|
this.$router.push({ name: 'board', params: { id } });
|
|
},
|
|
|
|
confirmDelete(id) {
|
|
this.$bvModal.msgBoxConfirm('Are you sure you want to delete this board?', {
|
|
title: 'Delete board',
|
|
okVariant: 'danger',
|
|
okTitle: 'Yes, delete board',
|
|
})
|
|
.then((value) => {
|
|
if (value) {
|
|
this.deleteBoard(id);
|
|
}
|
|
});
|
|
},
|
|
|
|
async deleteBoard(id) {
|
|
this.loading = true;
|
|
|
|
await this.$store.dispatch('DELETE_BOARD', id)
|
|
.catch(() => {
|
|
this.loading = false;
|
|
|
|
this.$bvToast.toast('There was an error deleting board', { title: 'Error', variant: 'error' });
|
|
});
|
|
|
|
this.loading = false;
|
|
this.$bvToast.toast('Board removed', { title: 'Success', variant: 'success' });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" rel="stylesheet/scss">
|
|
.b-avatar .b-avatar-img img {
|
|
width: 40px !important;
|
|
height: auto !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
}
|
|
</style>
|