la inn søkeboks

src/components/EatFridgeItemModal.vue

 <template>
   <div v-if="visible" id="popup">
       <div id="exitBtn" @click="close"><Icon  icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
-      <h2>{{ fridgeItem }}</h2>
-      <p>{{sliderValue}} %</p>
+      <h2>{{ this.fridgeItem.itemName }}</h2>
+      <p>{{sliderValue}} {{this.fridgeItem.quantityUnit}}</p>
 
       <label for="slider">Mengde tatt av varen:</label>
-      <input type = "range" id = "slider" name = "slider" min="0" max="70" v-model="sliderValue">
+      <input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
 
       <div id="buttons">
           <button @click="close">Ble kastet 🗑️ </button>
@@ -16,20 +16,21 @@
 
 <script>
 import {Icon} from "@iconify/vue";
+import fridgeItem from "@/components/FridgeItem.vue";
 
 export default {
     name: "EatFridgeItemModal",
   components: {Icon},
   props: {
       fridgeItem: {
-        type: String,
+        type: Object,
         required: false
       },
   },
   data() {
      return {
        visible:true,
-       sliderValue: 0
+       sliderValue: 0,
      }
   },
   methods:{
@@ -45,6 +46,9 @@ export default {
     redIconSize() {
       return '40px';
     },
+      maxValue(){
+        return this.fridgeItem.quantity*10;
+      }
   }
 }
 </script>

src/components/FridgeItem.vue

@@ -2,7 +2,7 @@
 <div id ="item">
     <img src="src/components/icons/logo.png" alt="">
     <div id="itemInfo">
-        <p id="fridgeItemName">{{ itemName }} {{ quantity }}{{quantityUnit}}</p>
+        <p id="fridgeItemName">{{ this.item.itemName }} {{ this.item.quantity }}{{this.item.quantityUnit}}</p>
         <p :style="{color:expirationTextColor}">{{expirationText}}</p>
     </div>
     <div @click="appleBtnPressed">
@@ -39,12 +39,12 @@ export default {
             const expirationDays = this.getDateDifference();
 
             if(expirationDays<0) {
-                return "Utgikk " + this.expiration
+                return "Utgikk " + this.item.expiration
             }
 
             switch (expirationDays){
                 case expirationDays < -1:
-                    return "Utgikk " + this.expiration
+                    return "Utgikk " + this.item.expiration
                 case 0:
                     return "Utgår i dag"
                 case -0:
@@ -56,12 +56,12 @@ export default {
                 case 3:
                     return "Utgår om tre dager"
                 default:
-                    return "Utgår " + this.expiration
+                    return "Utgår " + this.item.expiration
             }
         }
     },
     props: {
-        fridgeItem: {
+        item: {
           type:Object,
           required: false,
         },
@@ -73,7 +73,7 @@ export default {
     },
     methods: {
         getDateDifference(){ //returns the difference between two dates
-            const date = this.expiration.split('.');
+            const date = this.item.expiration.split('.');
             const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
             const expDate = new Date(dateFormat);
             const today = new Date();
@@ -83,7 +83,7 @@ export default {
             return numOfDays;
         },
       appleBtnPressed(){
-          this.$emit('appleBtnPressed', this.itemName); /*TODO: change to item Object*/
+          this.$emit('appleBtnPressed', this.item); /*TODO: change to item Object*/
           //console.log("hai " + this.itemName)
       }
 
@@ -95,7 +95,7 @@ export default {
 #item {
     background-color: base.$white;
     color: black;
-    border-radius: 10px;
+    qborder-radius: 10px;
     padding: 1em;
     padding-left: 2em;
     padding-right:2em;

src/components/ItemSearch.vue

+<template>
+    <div id="wrapper">
+        <h1>SØK ETTER VARE</h1>
+        <input type="text" id="searchBox" v-model="itemSearch">
+        <button @click="search">Søk</button>
+        <p>Resultater:</p>
+        <select name="searchResult" id="searchResult">
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+        </select>
+        <p>Antall:</p>
+        <input type="number">
+
+        <button>Legg i kjøleskap</button>
+
+    </div>
+</template>
+
+<script>
+import {API} from "@/util/API";
+
+export default {
+    name: "itemSearch",
+    data(){
+        return{
+            itemSearch:'',
+        }
+
+    },
+    methods: {
+        search() {
+            const results = API.searchItems(this.itemSearch);
+            console.log(results)
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+select {
+    width:100%;
+}
+
+#wrapper{
+    background-color: #04be80;
+}
+</style>
\ No newline at end of file

src/util/API.js

@@ -169,12 +169,15 @@ export const API = {
 
     /**
      * Removes x amount of item from fridge
-     * @param id id of fridgeItem
-     * @param request ... amount
+     * @param searchPhrase
      */
-    removeFromFridge(id, request){
-        //TODO
+    searchItems: async(searchPhrase)=> {
+        return axios.get(`${import.meta.env.VITE_BACKEND_URL}/item/search?name=${searchPhrase}`, {
+        }).then((response) => {
+            return response.data;
+        }).catch(()=> {
+            throw new Error("Error when searching for item ");
+        })
     }
 
-
 }

src/views/FridgeView.vue

 <template>
     <main>
         <h1>Kjøleskap</h1><br><br>
+        <ItemSearch></ItemSearch>
       <eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
         <div id = "itemContainer">
-          <FridgeItem v-for="item in fridgeStore.items"></FridgeItem>
+          <!--<FridgeItem v-for="item in fridgeStore.items"></FridgeItem>-->
             <!--<FridgeItem v-for="item in fridgeItems" :key="item.id" fridgeItem="item"></FridgeItem>-->
-            <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
-            <FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+
+            <!--<FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="30.02.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="28.04.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="29.04.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
-            <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="30.04.26"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="30.04.26"></FridgeItem>-->
         </div>
 
         <div id="addItemBtn-container">
@@ -35,25 +40,32 @@ import {API} from "@/util/API";
 import {mapState, mapStores} from "pinia";
 import {useAuthStore} from "@/stores/authStore";
 import {useFridgeStore} from "@/stores/fridgeStore";
+import ItemSearch from "@/components/ItemSearch.vue";
 
 export default {
     name: "FridgeView",
-    components: {EatFridgeItemModal, FridgeItem},
+    components: {ItemSearch, EatFridgeItemModal, FridgeItem},
     computed:{
       ...mapState(useAuthStore, ['account']),
       ...mapStores(useFridgeStore),
     },
   data() {
       return {
-        visible: false,
+        visible: false, //is the useitemModal visible
         selectedItem: null,
         fridgeItems: [],
+          testItem: {
+              itemName:'Rar saus',
+              quantity:'0.5',
+              quantityUnit:' stk',
+              expiration:'20.03.23'
+          }
       }
   },
   methods: {
-      showModal(itemName){
-        this.visible =true;
-        this.selectedItem=itemName;
+      showModal(item){
+        this.visible = true;
+        this.selectedItem = item;
         //alert(itemName)
       },
     hideModal(){