Views: Updated for (async) computed properties

frontend/package.json

@@ -34,6 +34,7 @@
     "js-cookie": "^2.2.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "vue-async-computed": "^3.6.1",
     "vue-cli-plugin-coffeescript": "^0.0.3",
     "vue-cli-plugin-vuetify": "^0.5.0",
     "vue-template-compiler": "^2.5.21",

frontend/src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import './plugins/vuetify'
+import './plugins/vue-async-computed'
 import App from './App.vue'
 import router from './router'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'

frontend/src/plugins/vue-async-computed.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import AsyncComputed from 'vue-async-computed'
+
+Vue.use(AsyncComputed)

frontend/src/views/Home.vue

@@ -24,18 +24,22 @@ export default {
     RegisterForm
   },
 
+  computed: {
+    session: () => Cookies.get('session')
+  },
+
   mounted() {
-    if (Cookies.get('session')) {
+    this.$nextTick(() => {
       axios
         .post('/user/login', {
-          session: Cookies.get('session')
+          session: this.session
         })
         .then(response => {
           if (response.data.success) {
             this.$router.push({ name: 'usercp' })
           }
         })
-    }
+    })
   }
 }
 </script>

frontend/src/views/UserCP.vue

@@ -2,27 +2,31 @@
   <v-container>
     <Header />
 
-    <p>user logged in: {{ user.login }}</p>
+    <template v-if="user">
+      <p>user logged in: {{ user.login }}</p>
 
-    <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-if="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>
+      <v-btn @click.native="logout">Logout</v-btn>
+    </template>
   </v-container>
 </template>
 
@@ -40,12 +44,6 @@ export default {
     Header
   },
 
-  data: () => ({
-    user: '',
-    decks: '',
-    cardsdb: null
-  }),
-
   methods: {
     goHome() {
       Cookies.remove('session')
@@ -65,29 +63,129 @@ export default {
     }
   },
 
-  mounted() {
-    this.cardsdb = CardsDB
+  computed: {
+    session: () => Cookies.get('session'),
+    cardsdb: () => CardsDB
+  },
 
-    axios
-      .post('/user/info', {
-        session: Cookies.get('session')
-      })
-      .then(response => {
-        if (response.data.success) {
-          this.user = response.data.user
-        } else {
-          this.goHome()
-        }
-      })
-    axios
-      .post('/decks/list', {
-        session: Cookies.get('session')
-      })
-      .then(response => {
-        if (response.data.success) {
-          this.decks = response.data.decks
+  asyncComputed: {
+    user() {
+      return axios
+        .post('/user/info', {
+          session: this.session
+        })
+        .then(response => {
+          if (response.data.success) {
+            return response.data.user
+          } else {
+            this.goHome()
+            return null
+          }
+        })
+    },
+
+    decks() {
+      return axios
+        .post('/decks/list', {
+          session: this.session
+        })
+        .then(response => {
+          if (response.data.success) {
+            return response.data.decks
+          }
+        })
+    }
+  },
+
+  mounted() {
+    let fileContent = `--Generated By FF Decks (www.ffdecks.com)--
+Deck Name: Ashe turbo
+Created by: hawks1997
+
+
+Forward(26):
+3 Garland (6-002)
+3 Rain (8-134)
+3 Garnet (3-129)
+2 Zidane (8-115)
+3 Ashe (2-121)
+3 Basch (2-014)
+3 Steiner (4-129)
+3 Vivi (3-017)
+3 Cecil (2-129)
+
+Summon(8):
+2 Cuchulainn, the Impure (2-133)
+2 Bahamut (4-016)
+1 Phoenix (5-019)
+3 Leviathan (6-125)
+
+Backup(16):
+2 Sage (2-005)
+2 Vermilion Bird l'Cie Caetuna (6-010)
+2 Yotsuyu (8-020)
+2 Rasler (5-166)
+2 Red Mage (1-003)
+3 Hilda (6-122)
+3 Astrologian (2-130)
+
+Monster(0):`
+
+    // select the line containing 'deck name:'
+    // and its successor
+    let metaRE = /^deck name: (.+)$[\s]*?^(.+)$/im
+    let metaData = metaRE.exec(fileContent)
+
+    // extract matches
+    let deckData = {
+      name: metaData[1],
+      note: metaData[2],
+      cards: []
+    }
+
+    // select all lines containing card serial numbers
+    let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
+    let cardLines = fileContent.match(cardLinesRE)
+
+    cardLines.forEach(cardLine => {
+      // extract serial (guaranteed to be in here!)
+      let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
+      let serial = serialRE.exec(cardLine)[1]
+
+      // strip out serial number
+      cardLine = cardLine.replace(serialRE, '')
+
+      let countREs = [
+        // prioritize a count with "times" symbol *, x, ×
+        /\b([1-3])(?:[*×]|[x]\b)/,
+        /(?:[*×]|\b[x])([1-3])\b/,
+        // next priority: with whitespace
+        /\s+([1-3])\s+/,
+        /\s+([1-3])\b/,
+        /\b([1-3])\s+/,
+        // least priority: any single digit
+        /\b([1-3])\b/
+      ]
+
+      // fallback value
+      let count = '0'
+      for (let i = 0; i < countREs.length; i++) {
+        let data = countREs[i].exec(cardLine)
+
+        if (data) {
+          count = data[1]
+          break
         }
+      }
+
+      // push card data into deck
+      deckData.cards.push({
+        serial: serial,
+        count: count
       })
+    })
+
+    console.log(deckData)
   }
 }
 </script>

frontend/yarn.lock

@@ -9891,6 +9891,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-async-computed@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/vue-async-computed/-/vue-async-computed-3.6.1.tgz#6b790e2125347c678d1b82b10a5b03b41d7b86d0"
+  integrity sha512-8FFDTqfdvKrzK5Fr7nNHZgP6sQ2hTUELTrLn25i8VW/g06MztD+FOe1gs0RYVpRkPlcrykf2hbJxNYra1c4OGg==
+
 vue-cli-plugin-coffeescript@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-coffeescript/-/vue-cli-plugin-coffeescript-0.0.3.tgz#717b608395a2bafc31c0d568159e014a16fbb6bc"