nicer deck template

frontend/src/components/Deck.vue

@@ -1,32 +1,37 @@
 <template>
   <v-expansion-panel-content>
     <template v-slot:header>
-      <div>{{ deck.name }}</div>
+      <span class="subheading">{{ deck.name }}</span>
     </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-alert :value="deck.note" type="info">
+      {{ deck.note }}
+    </v-alert>
+
+    <v-container grid-list-md fluid>
+      <v-layout row wrap>
+        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm4>
+          <v-card>
+            <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
+            <v-list dense subheader>
+              <v-list-tile v-for="card in part.cards" :key="card.serial" avatar>
+                <v-list-tile-avatar color="yellow">
+                  <span>{{ card.dbentry.cost }}</span>
+                </v-list-tile-avatar>
+
+                <v-list-tile-content>
+                  <v-list-tile-title>{{ card.dbentry.name }}</v-list-tile-title>
+                </v-list-tile-content>
+
+                <v-list-tile-avatar>
+                  <span>{{ card.count }}</span>
+                </v-list-tile-avatar>
+              </v-list-tile>
+            </v-list>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
   </v-expansion-panel-content>
 </template>
 
@@ -39,16 +44,37 @@ export default {
   },
 
   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'
-      )
+    deck_parts() {
+      let retval = {
+        forwards: {
+          heading: 'Forwards',
+          cards: this.deck.cards.filter(card => card.dbentry.type === 'Forward')
+        },
+        backups: {
+          heading: 'Backups',
+          cards: this.deck.cards.filter(card => card.dbentry.type === 'Backup')
+        },
+        rest: {
+          heading: 'Summons, Monsters & more',
+          cards: this.deck.cards.filter(
+            card =>
+              card.dbentry.type != 'Forward' && card.dbentry.type != 'Backup'
+          )
+        }
+      }
+
+      for (let i = 0; i < Object.keys(retval).length; i++) {
+        let key = Object.keys(retval)[i]
+        retval[key].count = retval[key].cards.reduce(
+          (result, card) => result + card.count,
+          0
+        )
+        retval[key].cards.sort(
+          (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
+        )
+      }
+
+      return retval
     }
   }
 }

frontend/src/components/DeckList.vue

@@ -33,7 +33,8 @@ export default {
 
           cards.push({
             count: card.count,
-            ffdecks: CardsDB[card.serial]
+            serial: card.serial,
+            dbentry: CardsDB[card.serial]
           })
         }