FridgeView.vue

<template><h1>Kjøleskap</h1>
    <main>
        <ItemSearch v-if="searchVisible" @itemsAdded="updateFridge"></ItemSearch>

        <div id = "fridgeMsg"><p v-if="this.fridgeMsg != ''">Melding fra kjøleskapet:</p><span>{{this.fridgeMsg}}</span></div>
        <eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>

        <div id = "itemContainer" >
            <FridgeItem v-for="item in fridgeItems" :actualItem = "item"  @appleBtnPressed="showModal"></FridgeItem>
        </div>

        <div id="addItemBtn-container">
          <button :class="{ rotate: this.searchVisible }" @click="showItemSearch" class="add-button">
            <span class="plus-sign"></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";
import ItemSearch from "@/components/ItemSearch.vue";
import fridgeItem from "@/components/FridgeItem.vue";

export default {
    name: "FridgeView",
    components: {ItemSearch, EatFridgeItemModal, FridgeItem},
    computed:{
      ...mapState(useAuthStore, ['account']),
      ...mapStores(useFridgeStore),
    },
  data() {
      return {
          visible: false, //is the useitemModal visible
          selectedItem: null,
          fridgeItems: [],
          searchVisible: false,
          fridgeMsg: ""
      }
  },
  methods: {
      showModal(item){
        this.visible = true;
        this.selectedItem = item;
      },
      hideModal(){
        this.visible=false;
        },
      showItemSearch() {
        this.searchVisible=!this.searchVisible;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      },
      hideItemSearch() {
          this.searchVisible=false;
      },
      updateFridgeMessage(msg){
          this.fridgeMsg=msg;
      },
      async updateFridge(addedItem) {
          this.fridgeItems = await API.getFridgeItems();
          this.fridgeItems = await API.getFridgeItems();
          this.hideItemSearch();
          this.updateFridgeMessage(addedItem.name + " ble lagt i kjøleskapet.")
      },

  },
  async mounted() {
      this.fridgeItems = await API.getFridgeItems();
      if(this.fridgeItems.length===0){
          this.fridgeMsg="Kjøleskapet ditt er tomt."
      }
  }
}
</script>

<style scoped lang="scss">
main {

    color:black;
    //background-color: base.$grey;
    padding: 1em 1em;
    min-height: 600px;
}

h1 {
  width:100%;
  padding-left: 0.5em;
  padding-top: 2em;
}

#itemContainer {
    padding-bottom: 170px;

}

.rotate {
    -webkit-transform: rotate(45deg);
}

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

#addItemBtn:hover {
  background-color: base.$light-green-hover;
  color: white;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  cursor: pointer;
}

#addItemBtn-container {
  position: fixed;
  bottom: 75px;
  right: 10px;
  float: right;
}

#fridgeMsg {
  background-color: base.$light-green;
  padding: 1em;
  min-height: 3em;
}

#fridgeMsg span, #fridgeMsg p{

  font-weight: bolder;
  font-size: 1.2em;
}

p, span {
  color: white;
}
</style>