96 lines
2.3 KiB
Vue
96 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar-title>
|
|
Available Prizes
|
|
</v-toolbar-title>
|
|
<div
|
|
:style="{
|
|
'max-height': '400px',
|
|
'overflow-y': 'auto',
|
|
}"
|
|
>
|
|
<media-card
|
|
v-if="!prizes.length"
|
|
:style="{ 'font-style': 'italic' }"
|
|
>
|
|
No prizes available from the tracker.
|
|
</media-card>
|
|
<!-- All Prizes -->
|
|
<draggable
|
|
v-else
|
|
:list="prizes"
|
|
:group="{ name: 'media', pull: 'clone', put: false }"
|
|
:sort="false"
|
|
:clone="clone"
|
|
>
|
|
<media-card
|
|
v-for="prize in prizes"
|
|
:key="prize.id"
|
|
class="d-flex"
|
|
>
|
|
<applicable-icon :is-applicable="isPrizeApplicable(prize)" />
|
|
<div
|
|
class="flex-grow-1"
|
|
:title="prize.name"
|
|
>
|
|
{{ prize.name }}
|
|
</div>
|
|
</media-card>
|
|
</draggable>
|
|
|
|
<!-- Generic Prize Slide -->
|
|
<draggable
|
|
:list="['generic_prize']"
|
|
:group="{ name: 'media', pull: 'clone', put: false }"
|
|
:sort="false"
|
|
:clone="cloneGeneric"
|
|
>
|
|
<media-card
|
|
key="generic_prize"
|
|
class="d-flex"
|
|
:style="{ 'font-weight': '500' }"
|
|
>
|
|
<applicable-icon :is-applicable="!!prizes.filter((p) => isPrizeApplicable(p)).length" />
|
|
<div
|
|
class="flex-grow-1"
|
|
title="Generic Prize Slide"
|
|
>
|
|
Generic Prize Slide
|
|
</div>
|
|
</media-card>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'vue-property-decorator';
|
|
import { State } from 'vuex-class';
|
|
import Draggable from 'vuedraggable';
|
|
import { Tracker, MediaBox } from '../../../types';
|
|
import { Prizes } from '../../../types/schemas';
|
|
import { clone, isPrizeApplicable } from './shared';
|
|
import MediaCard from './MediaCard.vue';
|
|
import ApplicableIcon from './ApplicableIcon.vue';
|
|
|
|
@Component({
|
|
components: {
|
|
Draggable,
|
|
MediaCard,
|
|
ApplicableIcon,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
@State prizes!: Prizes;
|
|
isPrizeApplicable = isPrizeApplicable;
|
|
|
|
clone(original: Tracker.FormattedPrize): MediaBox.RotationElem {
|
|
return clone('prize', original.id.toString());
|
|
}
|
|
|
|
cloneGeneric(): MediaBox.RotationElem {
|
|
return clone('prize_generic');
|
|
}
|
|
}
|
|
</script>
|