Connect frontend to server

client/package.json

@@ -22,6 +22,7 @@
     "less-loader": "^4.0.5",
     "style-loader": "^0.18.2",
     "vue": "^2.3.3",
+    "vue-resource": "^1.3.4",
     "vue-router": "^2.6.0",
     "vue-strap": "git://github.com/wffranco/vue-strap"
   },

client/src/components/Achievement.vue

@@ -7,13 +7,11 @@
       <form role="form" id="achievement">
         <div class="form-group">
           <div class="btn-group btn-group-justified">
-            <v-select placeholder="Nothing selected"
-                      v-model="select.value"
-                      :options="select.options"
-                      options-value="id"
-                      search justified required
-                      close-on-select>
-            </v-select>
+            <typeahead placeholder="Search achievement..."
+                      :async="apiEndpoint + '/search/'"
+                      :template="template"
+                      :on-hit="callback">
+            </typeahead>
           </div>
         </div>
         <button class="btn btn-block btn-primary">Add</button>
@@ -23,22 +21,27 @@
 </template>
 
 <script>
-import vSelect from 'vue-strap/src/Select.vue'
+import { typeahead } from 'vue-strap'
 
 export default {
   name: 'achievement',
   data () {
     return {
-      select: {
-        value: '',
-        options: [
-          {id: 2, label: 'Explore...'}
-        ]
-      }
+      achievements: [],
+      asynchronous: '{{item.title}}',
+      template: '<img :src=\'"http://media.blizzard.com/wow/icons/18/" + item.icon + ".jpg"\' /> <span>{{item.title}}</span>'
     }
   },
+  methods: {
+    callback: function (item) {
+      return item.title
+    }
+  },
+  mounted: function () {
+    this.getAchievements()
+  },
   components: {
-    vSelect
+    typeahead
   }
 }
 </script>

client/src/components/Character.vue

@@ -5,6 +5,17 @@
     </div>
     <div class="panel-body">
       <form role="form" id="character">
+        <div class="form-group">
+          <div class="btn-group btn-group-justified">
+            <v-select placeholder="No region selected"
+                      v-model="region.value"
+                      :options="region.options"
+                      value="value"
+                      search justified required
+                      close-on-select>
+            </v-select>
+          </div>
+        </div>
         <div class="form-group">
           <div class="btn-group btn-group-justified">
             <v-select placeholder="No realm selected"
@@ -31,17 +42,42 @@ export default {
   name: 'character',
   data () {
     return {
+      region: {
+        value: 'eu',
+        options: [
+          {value: 'eu', label: 'Europe'},
+          {value: 'us', label: 'United States'},
+          {value: 'kr', label: 'Korea'},
+          {value: 'tw', label: 'Taiwan'}
+        ]
+      },
       realm: {
-        value: 'Neptulon',
+        value: '',
         options: [
-          'Neptulon',
-          'Darksorrow',
-          'Darkspear'
         ]
       },
       name: ''
     }
   },
+  methods: {
+    getData: function () {
+      this.$http.get(this.apiEndpoint + '/realms/' + this.region.value)
+        .then(response => {
+          console.log(response)
+          this.realm.options = response.body
+        }, response => {
+          console.error(response)
+        })
+    }
+  },
+  watch: {
+    'region.value': function (oldVal, newVal) {
+      this.getData()
+    }
+  },
+  mounted: function () {
+    this.getData()
+  },
   components: {
     vSelect
   }

client/src/router/index.js

@@ -1,8 +1,20 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import VueResource from 'vue-resource'
 import Main from '@/components/Main'
 
 Vue.use(Router)
+Vue.use(VueResource)
+
+Vue.mixin({
+  data: function () {
+    return {
+      get apiEndpoint () {
+        return 'http://localhost:5000'
+      }
+    }
+  }
+})
 
 export default new Router({
   routes: [

server/wac/rest.py

@@ -18,7 +18,7 @@ ix = index.open_dir("data")
 @cross_origin()
 def search(query):
     with ix.searcher() as searcher:
-        query = MultifieldParser(["title", "description"], ix.schema).parse(query)
+        query = MultifieldParser(["title", "description"], ix.schema).parse("*{}*".format(query))
         results = searcher.search(query, limit=10)
         return jsonify([dict(r) for r in results])