gamebrary/src/components/Game/GameProgress.vue

126 lines
3 KiB
Vue
Raw Normal View History

2020-08-22 12:21:15 +00:00
<template lang="html">
<b-button
v-b-modal.progress
2020-09-24 04:15:31 +00:00
v-b-tooltip.hover
2020-08-22 12:21:15 +00:00
variant="info"
2020-09-24 04:15:31 +00:00
title="Set game progress"
2020-08-22 12:21:15 +00:00
>
2020-10-08 17:55:26 +00:00
<icon name="clock" white />
2020-08-22 12:21:15 +00:00
<b-modal
id="progress"
title="Set game progress"
2020-10-14 00:08:56 +00:00
:header-bg-variant="nightMode ? 'dark' : null"
:header-text-variant="nightMode ? 'white' : null"
:body-bg-variant="nightMode ? 'dark' : null"
:body-text-variant="nightMode ? 'white' : null"
:footer-bg-variant="nightMode ? 'dark' : null"
:footer-text-variant="nightMode ? 'white' : null"
2020-08-22 12:21:15 +00:00
@show="show"
>
<b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">
<b-form-input
size="lg"
v-model="localProgress"
type="range"
max="100"
step="5"
/>
</b-input-group>
<template v-slot:modal-footer>
<b-button
variant="danger"
:disabled="deleting"
@click="deleteProgress"
>
<b-spinner small v-if="deleting" />
<span v-else>{{ $t('progresses.deleteProgress') }}</span>
</b-button>
<b-button
variant="primary"
:disabled="saving"
@click="saveProgress"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('progresses.save') }}</span>
</b-button>
</template>
</b-modal>
</b-button>
</template>
<script>
2020-10-14 00:08:56 +00:00
import { mapState, mapGetters } from 'vuex';
2020-08-22 12:21:15 +00:00
export default {
props: {
game: Object,
},
data() {
return {
localProgress: '0',
saving: false,
deleting: false,
};
},
computed: {
...mapState(['progresses']),
2020-10-14 00:08:56 +00:00
...mapGetters(['nightMode']),
2020-08-22 12:21:15 +00:00
},
methods: {
show() {
const { id } = this.game;
this.localProgress = this.progresses[id]
? JSON.parse(JSON.stringify(this.progresses[id]))
: '0';
this.saving = false;
this.deleting = false;
},
async deleteProgress() {
const { id, name } = this.game;
this.deleting = true;
this.$store.commit('REMOVE_GAME_PROGRESS', id);
await this.$store.dispatch('SAVE_PROGRESSES_NO_MERGE')
.catch(() => {
this.$bvToast.toast('There was an error deleting your progress', { title: `${name} progress`, variant: 'error' });
this.deleting = false;
});
this.$bvToast.toast('Progress deleted', { title: `${name} progress`, variant: 'success' });
this.$bvModal.hide('progress');
},
async saveProgress() {
const { id, name } = this.game;
this.saving = true;
this.$store.commit('SET_GAME_PROGRESS', {
progress: this.localProgress,
gameId: id,
});
await this.$store.dispatch('SAVE_PROGRESSES')
.catch(() => {
this.saving = false;
this.$bvToast.toast('There was an error saving your progress', { title: 'Error', variant: 'error' });
});
this.$bvToast.toast('Progress updated', { title: `${name} progress`, variant: 'success' });
this.$bvModal.hide('progress');
},
},
};
</script>