155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<template>
|
|
<v-expansion-panel-content>
|
|
<template v-slot:header>
|
|
<v-layout align-center row>
|
|
<v-flex text-xs-center xs4 sm3 md2>
|
|
<Crystal
|
|
v-for="element in deck.elements()"
|
|
:size="40"
|
|
:cost="element.count"
|
|
:element="element.name"
|
|
:key="element.name"
|
|
/>
|
|
</v-flex>
|
|
<v-flex class="subheading">
|
|
<v-card flat>
|
|
<v-card-text>
|
|
{{ deck.name }}
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<template v-if="!editing">
|
|
<v-alert :value="deck.note" type="info">
|
|
{{ deck.note }}
|
|
</v-alert>
|
|
|
|
<v-container style="position: relative" grid-list-md fluid>
|
|
<v-layout row wrap>
|
|
<v-flex v-for="part in deck.parts()" :key="part.heading" xs12 sm6 md4>
|
|
<v-card>
|
|
<v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
|
|
<v-list dense subheader>
|
|
<Card
|
|
v-for="card in part.cards"
|
|
:key="card.serial"
|
|
:count="card.count"
|
|
:serial="card.serial"
|
|
:dbentry="card.dbentry"
|
|
></Card>
|
|
</v-list>
|
|
</v-card>
|
|
</v-flex>
|
|
|
|
<v-btn fab absolute bottom right @click.native="editing = true">
|
|
<v-icon>edit</v-icon>
|
|
</v-btn>
|
|
|
|
<v-dialog v-model="deleting">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn fab absolute bottom left v-on="on">
|
|
<v-icon>delete</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-card>
|
|
<v-card-title class="headline">
|
|
Really delete this deck?
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
Are you sure you want to delete your deck "{{ deck.name }}"?
|
|
This cannot be undone.
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn color="error" @click.native="deleting = false">
|
|
Cancel
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
color="success"
|
|
@click.native="
|
|
deleting = false
|
|
delete_deck()
|
|
"
|
|
>
|
|
Confirm
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</v-container>
|
|
</template>
|
|
|
|
<DeckEditor v-if="editing" :deck="deck" @save="save_deck">
|
|
<v-btn color="error" @click.native="editing = false">
|
|
<v-icon>cancel</v-icon>
|
|
cancel
|
|
</v-btn>
|
|
</DeckEditor>
|
|
</v-expansion-panel-content>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from '@/plugins/axios'
|
|
|
|
import Card from './Card.vue'
|
|
import Crystal from './Crystal.vue'
|
|
import DeckEditor from './forms/DeckEditor.vue'
|
|
|
|
export default {
|
|
name: 'Deck',
|
|
|
|
props: {
|
|
session: String,
|
|
deck: Object
|
|
},
|
|
|
|
components: {
|
|
Card,
|
|
Crystal,
|
|
DeckEditor
|
|
},
|
|
|
|
data: () => ({
|
|
editing: false,
|
|
deleting: false
|
|
}),
|
|
|
|
methods: {
|
|
save_deck(new_deck) {
|
|
axios
|
|
.post('/decks/modify', {
|
|
session: this.session,
|
|
deckID: this.deck.id,
|
|
deckCards: new_deck.plainObject()
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.editing = false
|
|
this.$emit('change')
|
|
}
|
|
})
|
|
},
|
|
|
|
delete_deck() {
|
|
axios
|
|
.post('/decks/delete', {
|
|
session: this.session,
|
|
deckID: this.deck.id
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.$emit('change')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|