Add styling, thumbnail and armory link to character column

client/src/components/Character.vue

@@ -72,7 +72,9 @@ export default {
     addCharacter: function () {
       this.$http.get([this.apiEndpoint, 'character', this.region.value, this.realm.value, this.name].join('/'))
         .then(response => {
-          this.$emit('add-character', response.body)
+          var character = response.body
+          character.region = this.region.value
+          this.$emit('add-character', character)
         }, response => {
           console.error(response)
         })

client/src/components/ProgressTable.vue

@@ -12,8 +12,11 @@
     </thead>
     <tbody>
       <tr v-for="character in characters">
-        <td>
-          {{character.name}}
+        <td style="font-weight: bold;" :style="{ color: classColors[character.class] }">
+          <a target="_blank" :href="'https://worldofwarcraft.com/' + languages[character.region] + '/character/' + character.realm + '/' + character.name">
+            <img height="18" width="18" :src="'http://render-api-' + character.region + '.worldofwarcraft.com/static-render/' + character.region + '/' + character.thumbnail" />
+            {{character.name}}
+          </a>
         </td>
         <td v-for="achievement in achievements">
           <progressbar now=10 label type="success"></progressbar>
@@ -28,6 +31,30 @@ import { progressbar } from 'vue-strap'
 
 export default {
   name: 'progress-table',
+  data () {
+    return {
+      classColors: {
+        1: '#C79C6E',
+        2: '#F58CBA',
+        3: '#ABD473',
+        4: '#FFF569',
+        5: '#000000',
+        6: '#C41F3B',
+        7: '#0070DE',
+        8: '#69CCF0',
+        9: '#9482C9',
+        10: '#00FF96',
+        11: '#FF7D0A',
+        12: '#A330C9'
+      },
+      languages: {
+        'us': 'en-us',
+        'eu': 'en-gb',
+        'kr': 'ko-kr',
+        'tw': 'zh-tw'
+      }
+    }
+  },
   props: ['characters', 'achievements'],
   components: {
     progressbar