FridgeView.vue

<template>
    <main>
        <h1>Kjøleskap</h1><br><br>
      <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 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-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>
        </div>

        <div id="addItemBtn-container">
          <button @click="addItemToFridge" id="addItemBtn">
            <span class="plus">+</span>
          </button>
        </div>



    </main>

</template>

<script>
import FridgeItem from "@/components/FridgeItem.vue";
import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
import {API} from "@/util/API";
import {mapState, mapStores} from "pinia";
import {useAuthStore} from "@/stores/authStore";
import {useFridgeStore} from "@/stores/fridgeStore";

export default {
    name: "FridgeView",
    components: {EatFridgeItemModal, FridgeItem},
    computed:{
      ...mapState(useAuthStore, ['account']),
      ...mapStores(useFridgeStore),
    },
  data() {
      return {
        visible: false,
        selectedItem: null,
        fridgeItems: [],
      }
  },
  methods: {
      showModal(itemName){
        this.visible =true;
        this.selectedItem=itemName;
        //alert(itemName)
      },
    hideModal(){
        this.visible=false;
    },
    addItemToFridge() {
        alert("Denne knappen legger en ny vare i kjøleskapet")
    }
  },
  mounted(){
      this.fridgeItems = API.getFridgeItems();
  }
}
</script>

<style scoped lang="scss">
main {
    padding-top: 4em;
    color:black;
    background-color: base.$white;
}

h1 {
  width:100%;
  padding-left: 1em;
  font-weight: bold;
}

#itemContainer {
    background-color: base.$grey;
  padding-bottom: 5em;
}

#addItemBtn {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  font-size: 30px;
  border:none;
  background-color: base.$green;
  color: white;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

#addItemBtn-container {

  padding-bottom: 9em;

  z-index: 9999;
  position: fixed;
  bottom: 15px;
  right: 1em;
}

</style>