add search functionality

src/api.js

@@ -160,6 +160,21 @@ const barcodeToVinmonopolet = id => {
   });
 };
 
+const searchForWine = searchString => {
+  const url = new URL("/api/wineinfo/search?query=" + searchString, BASE_URL);
+
+  return fetch(url.href).then(async resp => {
+    if (!resp.ok) {
+      if (resp.status == 404) {
+        throw await resp.json();
+      }
+    } else {
+      return resp.json();
+    }
+  });
+};
+
+
 const handleErrors = async resp => {
   if ([400, 409].includes(resp.status)) {
     throw await resp.json();
@@ -269,6 +284,7 @@ export {
   logWines,
   wineSchema,
   barcodeToVinmonopolet,
+  searchForWine,
   login,
   register,
   addAttendee,

src/components/RequestWine.vue

@@ -0,0 +1,44 @@
+<template>
+  <main>
+    <h1>
+      Anbefal en vin!
+    </h1>
+    <section>
+      <input type="text" v-model="searchString" >
+      <button @click=(fetchWineFromVin())>knapp</button>
+      <div v-for="(wine, index) in this.wines" :key="index">
+        <Wine :wine=wine >
+          <button>Pick</button>
+        </Wine>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import { searchForWine } from "@/api";
+import Wine from "@/ui/Wine";
+
+export default {
+  components: {
+    Wine
+  },
+  data() {
+    return {
+      searchString: undefined,
+      res: undefined,
+      wines: undefined,
+    }
+  },
+  methods: {
+    fetchWineFromVin(){
+      searchForWine(this.searchString)
+        .then(res => this.wines = res)
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

src/routes/vinlottisRouter.js

@@ -12,6 +12,8 @@ import WinnerPage from "@/components/WinnerPage";
 import LotteryPage from "@/components/LotteryPage";
 import HistoryPage from "@/components/HistoryPage";
 
+import RequestWine from "@/components/RequestWine";
+
 const routes = [
   {
     path: "*",
@@ -52,6 +54,10 @@ const routes = [
   {
     path: "/history",
     component: HistoryPage
+  },
+  {
+    path: "/request",
+    component: RequestWine
   }
 ];