feature/mealplanner-rewrite (#417)

* multiple recipes per day

* fix update

* meal-planner rewrite

* disable meal-tests

* spacing

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/CardImage.vue

@@ -0,0 +1,99 @@
+<template>
+  <div @click="$emit('click')">
+    <v-img
+      :height="height"
+      v-if="!fallBackImage"
+      :src="getImage(slug)"
+      @load="fallBackImage = false"
+      @error="fallBackImage = true"
+    >
+      <slot> </slot>
+    </v-img>
+    <div class="icon-slot" v-else>
+      <div>
+        <slot> </slot>
+      </div>
+      <v-icon color="primary" class="icon-position" :size="iconSize">
+        mdi-silverware-variant
+      </v-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+export default {
+  props: {
+    tiny: {
+      type: Boolean,
+      default: null,
+    },
+    small: {
+      type: Boolean,
+      default: null,
+    },
+    large: {
+      type: Boolean,
+      default: null,
+    },
+    iconSize: {
+      default: 100,
+    },
+    slug: {
+      default: null,
+    },
+    height: {
+      default: 200,
+    },
+  },
+  computed: {
+    imageSize() {
+      if (this.tiny) return "tiny";
+      if (this.small) return "small";
+      if (this.large) return "large";
+      return "large";
+    },
+  },
+  watch: {
+    slug() {
+      this.fallBackImage = false;
+    },
+  },
+  data() {
+    return {
+      fallBackImage: false,
+    };
+  },
+  methods: {
+    getImage(image) {
+      switch (this.imageSize) {
+        case "tiny":
+          return api.recipes.recipeTinyImage(image);
+        case "small":
+          return api.recipes.recipeSmallImage(image);
+        case "large":
+          return api.recipes.recipeImage(image);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-slot {
+  position: relative;
+}
+
+.icon-slot > div {
+  position: absolute;
+  z-index: 1;
+}
+
+.icon-position {
+  opacity: 0.8;
+  display: flex !important;
+  position: relative;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+</style>

frontend/src/components/Recipe/RecipeCard.vue

@@ -7,10 +7,7 @@
       @click="$emit('click')"
       min-height="275"
     >
-      <v-img height="200" class="d-flex" :src="getImage(slug)" @error="fallBackImage = true">
-        <v-icon v-if="fallBackImage" color="primary" class="icon-position" size="200">
-          mdi-silverware-variant
-        </v-icon>
+      <CardImage icon-size="200" :slug="slug">
         <v-expand-transition v-if="description">
           <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal  " style="height: 100%;">
             <v-card-text class="v-card--text-show white--text">
@@ -18,7 +15,7 @@
             </v-card-text>
           </div>
         </v-expand-transition>
-      </v-img>
+      </CardImage>
       <v-card-title class="my-n3 mb-n6 ">
         <div class="headerClass">
           {{ name }}
@@ -38,6 +35,7 @@
 <script>
 import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import ContextMenu from "@/components/Recipe/ContextMenu";
+import CardImage from "@/components/Recipe/CardImage";
 import Rating from "@/components/Recipe/Parts/Rating";
 import { api } from "@/api";
 export default {
@@ -45,6 +43,7 @@ export default {
     RecipeChips,
     ContextMenu,
     Rating,
+    CardImage,
   },
   props: {
     name: String,
@@ -91,12 +90,4 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.icon-position {
-  opacity: 0.8;
-  display: flex !important;
-  position: relative;
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
 </style>