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/Fallbacks/NoRecipe.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <The404>
+      <h1 class="mx-auto">No Recipe Found</h1>
+    </The404>
+  </div>
+</template>
+
+<script>
+import The404 from "./The404.vue";
+export default {
+  components: { The404 },
+};
+</script>
+
+
+

frontend/src/components/Fallbacks/The404.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <v-card-title>
+      <slot>
+        <h1 class="mx-auto">{{ $t("404.page-not-found") }}</h1>
+      </slot>
+    </v-card-title>
+    <div class="d-flex justify-space-around">
+      <div class="d-flex">
+        <p>4</p>
+        <v-icon color="primary" class="mx-auto" size="200">
+          mdi-silverware-variant
+        </v-icon>
+        <p>4</p>
+      </div>
+    </div>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <slot name="actions">
+        <v-btn v-for="(button, index) in buttons" :key="index" :to="button.to" color="primary">
+          <v-icon left> {{ button.icon }} </v-icon>
+          {{ button.text }}
+        </v-btn>
+      </slot>
+      <v-spacer></v-spacer>
+    </v-card-actions>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      buttons: [
+        { icon: "mdi-home", to: "/", text: "Home" },
+        { icon: "mdi-silverware-variant", to: "/recipes/all", text: "All Recipes" },
+        { icon: "mdi-magnify", to: "/search", text: "Search" },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+p {
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+  color: var(--v-primary-base);
+  font-size: 200px;
+}
+</style>