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>