add token and some styling

.gitignore

@@ -4,6 +4,7 @@ public/index.html
 public/sw/
 config/env/lottery.config.js
 config/env/push.config.js
+config/env/vinmonopolet.config.js
 
 # Logs
 logs

api/wineinfo.js

@@ -2,6 +2,7 @@ const express = require("express");
 const path = require("path");
 const router = express.Router();
 const fetch = require('node-fetch')
+const config = require(path.join(__dirname + "/../config/env/vinmonopolet.config"));
 
 const mustBeAuthenticated = require(path.join(__dirname + "/../middleware/mustBeAuthenticated"))
 
@@ -10,7 +11,7 @@ router.use((req, res, next) => {
 });
 
 const convertToOurWineObject = wine => {
-  console.log("traff her", wine)
+  if(wine.basic.ageLimit === "18"){
     return {
       name: wine.basic.productShortName,
       image: `https://bilder.vinmonopolet.no/cache/300x300-0/${wine.basic.productId}-1.jpg`,
@@ -20,23 +21,21 @@ const convertToOurWineObject = wine => {
       vivinoLink: undefined
     }
   }
+}
 
 router.route("/wineinfo/search").get(async (req, res) => {
-  console.log("h")
-  console.log(req)
   const {query} = req.query
   let url = new URL(`https://apis.vinmonopolet.no/products/v0/details-normal?productShortNameContains=test&maxResults=5`)
   url.searchParams.set('productShortNameContains', query)
 
   const vinmonopoletResponse = await fetch(url, {
     headers: {
-      "Ocp-Apim-Subscription-Key": ""
+      "Ocp-Apim-Subscription-Key": `${config.gatewayToken}`
     }
   })
     .then(resp => resp.json())
 
-  const winesConverted = vinmonopoletResponse.map(convertToOurWineObject)
-  console.log(winesConverted)
+  const winesConverted = vinmonopoletResponse.map(convertToOurWineObject).filter(Boolean)
 
   if (vinmonopoletResponse.errors != null) {
     return vinmonopoletResponse.errors.map(error => {

src/components/RequestWine.vue

@@ -1,16 +1,30 @@
 <template>
   <main>
     <h1>
-      Anbefal en vin!
+      Foreslå 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>
+      <button @click=(fetchWineFromVin()) class="vin-button">Søk</button>
+      <section v-for="(wine, index) in this.wines" :key="index" class="search-results-container">
+        <img
+          v-if="wine.image"
+          :src="wine.image"
+          class="wine-image"
+          :class="{ 'fullscreen': fullscreen }"
+        />
+        <img v-else class="wine-placeholder" alt="Wine image" />
+        <section class="wine-info">
+          <h2 v-if="wine.name">{{ wine.name }}</h2>
+          <h2 v-else>(no name)</h2>
+          <span v-if="wine.price">{{ wine.price }} NOK</span>
+          <span v-if="wine.country">{{ wine.country }}</span>
+        </section>
+        <section class="buttons">
+          <button class="vin-button">Send inn denne som ønske</button>
+          <button class="vin-button">Les mer på polet</button>
+        </section>
+      </section>
     </section>
   </main>
 </template>
@@ -39,6 +53,48 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+@import "./src/styles/media-queries";
+@import "./src/styles/global";
+@import "./src/styles/variables";
+
+main{
+  margin: auto;
+  width: 80%;
+}
+
+input[type="text"] {
+  width: 100%;
+  color: black;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  border: 1px solid black;
+  max-width: 200px;
+}
+
+.search-results-container{
+  display: flex;
+  border: 1px solid black;
+
+  .buttons{
+    margin-left: auto;
+    order: 2;
+  }
+}
+
+.wine-image {
+  height: 100px;
+}
+
+.wine-placeholder {
+  height: 100px;
+  width: 70px;
+}
+
+.wine-info{
+  display: flex;
+  flex-direction: column;
+}
+
 
 </style>