playing with calendars

vue3/src/components/display/RecipeCard.vue

@@ -21,6 +21,8 @@
                                 class="float-start ms-1 mt-1" v-if="recipe.waitingTime != undefined && recipe.waitingTime > 0">
                             {{ recipe.waitingTime }}
                         </v-chip>
+
+                        <keywords-component variant="flat" :keywords="recipe.keywords"></keywords-component>
                     </v-img>
                     <v-divider class="p-0" v-if="recipe.image == null"></v-divider>
 
@@ -34,22 +36,22 @@
                 <v-card-title>
                              {{ recipe.name }}
                             <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
-
                 </v-card-title>
+                <v-card-subtitle>by {{ recipe.createdBy}}</v-card-subtitle>
 
 
-                <v-card-subtitle v-if="show_keywords">
-                    <KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
-                </v-card-subtitle>
-                <v-rating
-                    v-if="recipe.rating != null"
-                    v-model="recipe.rating"
-                    color="amber"
-                    density="comfortable"
-                    half-increments
-                    readonly
-                    size="x-small"
-                ></v-rating>
+<!--                <v-card-subtitle v-if="show_keywords">-->
+<!--                    <keywords-component :keywords="recipe.keywords"></keywords-component>-->
+<!--                </v-card-subtitle>-->
+<!--                <v-rating-->
+<!--                    v-if="recipe.rating != null"-->
+<!--                    v-model="recipe.rating"-->
+<!--                    color="amber"-->
+<!--                    density="comfortable"-->
+<!--                    half-increments-->
+<!--                    readonly-->
+<!--                    size="x-small"-->
+<!--                ></v-rating>-->
 
             </v-card-item>
 

vue3/src/pages/MealPlanPage.vue

@@ -1,41 +1,42 @@
 <template>
-    <v-container>
-        <v-btn @click="testApi">Test API</v-btn>
-    </v-container>
 
+    <v-calendar view-mode="month" :events="calendarEvents" show-adjacent-months>
+
+    </v-calendar>
 
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import ModelSelect from "@/components/inputs/ModelSelect.vue";
-import RecipeCard from "@/components/display/RecipeCard.vue";
-import {ApiApi, Recipe, RecipeOverview} from "@/openapi";
+
+import {VCalendar} from 'vuetify/labs/VCalendar'
+import {ApiApi, MealPlan} from "@/openapi";
 
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {ModelSelect, RecipeCard},
+    components: {VCalendar},
+    computed: {
+        calendarEvents: function(){
+            let events = []
+            this.mealPlans.forEach(mp => {
+                events.push({start: mp.fromDate, end: mp.toDate, title: (mp.recipe != undefined) ? mp.recipe.name : mp.title})
+            })
+            return events
+        }
+    },
     data() {
         return {
-            test: {
-                text: String,
-            },
+            mealPlans: [] as MealPlan[]
         }
     },
     mounted() {
-
+        let api = new ApiApi()
+        api.apiMealPlanList().then(r => {
+            this.mealPlans = r
+        })
     },
-    methods: {
-        testApi: function () {
-            const api = new ApiApi()
-            api.apiMealPlanList().then(r => {
-                if (r.length > 0 && r[0].id != undefined) {
-                    api.apiMealPlanUpdate({id: r[0].id, mealPlanRequest: r[0]})
-                }
-            })
-        }
-    }
+    methods: {}
 
 })
 </script>

vue3/src/pages/SearchPage.vue

@@ -1,5 +1,8 @@
 <template>
 
+    <v-container>
+        <v-btn @click="testApi">Test API</v-btn>
+    </v-container>
 
 </template>
 
@@ -24,7 +27,14 @@ export default defineComponent({
 
     },
     methods: {
-
+        testApi: function () {
+            const api = new ApiApi()
+            api.apiMealPlanList().then(r => {
+                if (r.length > 0 && r[0].id != undefined) {
+                    api.apiMealPlanUpdate({id: r[0].id, mealPlanRequest: r[0]})
+                }
+            })
+        }
     }
 
 })