Yavook.de/node-fftcg
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

decklist editor form layout

Browse source
This commit is contained in:
Jörn-Michael Miehe 2019-05-17 15:24:52 +02:00
parent 4f5522ff77
commit 417c8cdd75
2 changed files with 57 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/Deck.vue
View file

@ -8,8 +8,8 @@
{{ deck.note }} {{ deck.note }}
</v-alert> </v-alert>
<v-container style="position: relative" grid-list-md fluid> <v-container v-if="!editing" style="position: relative" grid-list-md fluid>
<v-layout v-if="!editing" row wrap> <v-layout row wrap>
<v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4> <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
<v-card> <v-card>
<v-card-title>{{ part.count }} {{ part.heading }}</v-card-title> <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
@ -29,8 +29,8 @@
<v-icon>edit</v-icon> <v-icon>edit</v-icon>
</v-btn> </v-btn>
</v-layout> </v-layout>
<DeckEditor v-if="editing" :deck_list="deck_list" />
</v-container> </v-container>
<DeckEditor v-model="editing" :id="deck.id" :list="deck_list" />
</v-expansion-panel-content> </v-expansion-panel-content>
</template> </template>

84
frontend/src/components/forms/DeckEditor.vue
View file

@ -1,27 +1,44 @@
<template> <template>
<v-form lazy-validation> <v-container v-if="value">
<v-alert v-model="deck.count !== 50" type="warning"> <v-card flat>
{{ deck.count }} cards detected! (Decks should have 50) <v-alert :value="count !== 50" type="warning">
</v-alert> {{ count }} cards detected! (Decks should have exactly 50 cards)
<v-alert v-model="deck.maximum > 3" type="warning"> </v-alert>
Card with {{ deck.maximum }} copies detected! (Cards should not have more than 3 copies) <v-alert :value="maximum > 3" type="warning">
</v-alert> Card with {{ maximum }} copies detected! (Cards should not have more
than 3 copies)
</v-alert>
<v-textarea <v-textarea
ref="textarea" ref="textarea"
label="Edit Deck" label="Edit Deck"
:value="deck_list" :value="list"
rows="35" rows="35"
hint="Change card counts and/or serial numbers. Names will be updated automatically." hint="Change card counts and/or serial numbers. Names will be updated automatically."
style="font-family: monospace" style="font-family: monospace"
> >
</v-textarea> </v-textarea>
<v-spacer></v-spacer> <v-card-actions>
<v-btn color="success" @click.native="check"> <v-btn color="error" @click.native="$emit('input', false)">
Check Deck <v-icon>cancel</v-icon>
</v-btn> cancel
</v-form> </v-btn>
<v-spacer></v-spacer>
<v-btn color="info" @click.native="check">
<v-icon>check</v-icon>
validate
</v-btn>
<v-btn color="success" @click.native="save" :disabled="!checked">
<v-icon>save</v-icon>
save
</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template> </template>
<script> <script>
@ -29,14 +46,15 @@ export default {
name: 'DeckEditor', name: 'DeckEditor',
props: { props: {
deck_list: String id: Number,
list: String,
value: Boolean
}, },
data: () => ({ data: () => ({
deck: { count: 50,
count: 50, maximum: 0,
maximum: 0 checked: false
}
}), }),
methods: { methods: {
@ -136,15 +154,21 @@ export default {
let new_deck = this.parse_deck(this.$refs.textarea.lazyValue) let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
// count number of cards // count number of cards
this.deck.count = new_deck.count this.count = new_deck.count
// find most frequent card // find most frequent card
this.deck.maximum = 0 this.maximum = 0
new_deck.cards.forEach(card => { new_deck.cards.forEach(card => {
if(card.count > this.deck.maximum) if (card.count > this.maximum) this.maximum = card.count
this.deck.maximum = card.count
}) })
// deck has now been checked
this.checked = true
} }
},
activated() {
console.log('Frosch')
} }
} }
</script> </script>