Proof-of-concept Decklisting

frontend/src/components/Deck.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-expansion-panel-content>
+    <template v-slot:header>
+      <div>{{ deck.name }}</div>
+    </template>
+
+    <v-card>
+      <v-card-text>
+        {{ deck.note }} <br />
+        Forwards:
+        <ul>
+          <li v-for="card in forwards" :key="card.ffdecks.serial_number">
+            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
+          </li>
+        </ul>
+        Backups:
+        <ul>
+          <li v-for="card in backups" :key="card.ffdecks.serial_number">
+            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
+          </li>
+        </ul>
+        Summons/Monsters:
+        <ul>
+          <li v-for="card in rest" :key="card.ffdecks.serial_number">
+            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
+          </li>
+        </ul>
+      </v-card-text>
+    </v-card>
+  </v-expansion-panel-content>
+</template>
+
+<script>
+
+export default {
+  name: 'Deck',
+
+  props: {
+    deck: Object
+  },
+
+  computed: {
+    forwards() {
+      return this.deck.cards.filter((card) => card.ffdecks.type === 'Forward')
+    },
+    backups() {
+      return this.deck.cards.filter((card) => card.ffdecks.type === 'Backup')
+    },
+    rest() {
+      return this.deck.cards.filter((card) => (card.ffdecks.type != 'Forward') && (card.ffdecks.type != 'Backup'))
+    }
+  }
+}
+</script>

frontend/src/components/DeckList.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-expansion-panel v-if="value">
+    <Deck v-for="deck in decks" :deck="deck" :key="deck.id"/>
+  </v-expansion-panel>
+</template>
+
+<script>
+import CardsDB from '@/plugins/ffdecks'
+
+import Deck from '@/components/Deck.vue'
+
+export default {
+  name: 'DeckList',
+
+  props: {
+    value: Array
+  },
+
+  components: {
+    Deck
+  },
+
+  computed: {
+    decks() {
+      let result = []
+
+      for (let i = 0; i < this.value.length; i++) {
+        let elem = this.value[i]
+        let cards = []
+
+        for (let j = 0; j < elem.content.cards.length; j++) {
+          let card = elem.content.cards[j]
+
+          cards.push({
+            count: card.count,
+            ffdecks: CardsDB[card.serial]
+          })
+        }
+
+        result.push({
+          id: elem.id,
+          name: elem.content.name,
+          note: elem.content.note,
+          cards: cards
+        })
+      }
+
+      return result
+    }
+  }
+}
+</script>

frontend/src/views/UserCP.vue

@@ -5,25 +5,7 @@
     <template v-if="user">
       <p>user logged in: {{ user.login }}</p>
 
-      <template v-if="decks">
+      <DeckList v-model="decks" />
-        <v-expansion-panel>
-          <v-expansion-panel-content v-for="deck in decks" :key="deck.id">
-            <template v-slot:header>
-              <div>{{ deck.content.name }}</div>
-            </template>
-            <v-card>
-              <v-card-text>
-                {{ deck.content.note }}
-                <ul>
-                  <li v-for="card in deck.content.cards" :key="card.serial">
-                    {{ card.serial }}: {{ cardsdb[card.serial].name }}
-                  </li>
-                </ul>
-              </v-card-text>
-            </v-card>
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </template>
 
       <v-btn @click.native="logout">Logout</v-btn>
     </template>
@@ -33,15 +15,16 @@
 <script>
 import * as Cookies from 'js-cookie'
 import axios from '@/plugins/axios'
-import CardsDB from '@/plugins/ffdecks'
 
 import Header from '@/components/Header.vue'
+import DeckList from '@/components/DeckList.vue'
 
 export default {
   name: 'UserCP',
 
   components: {
-    Header
+    Header,
+    DeckList
   },
 
   methods: {
@@ -64,8 +47,7 @@ export default {
   },
 
   computed: {
-    session: () => Cookies.get('session'),
+    session: () => Cookies.get('session')
-    cardsdb: () => CardsDB
   },
 
   asyncComputed: {