start page

vue3/src/pages/RecipeSearchPage.vue

@@ -1,42 +1,54 @@
 <template>
+    <v-container>
 
 
+       <horizontal-recipe-scroller title="New Recipes" :recipes="new_recipes"></horizontal-recipe-scroller>
+       <horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_recipes"></horizontal-recipe-scroller>
+
+
+    </v-container>
 
 
     <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
 
-    <!--    <v-row>-->
-    <!--        <v-col cols="12" sm="3" md="4" v-for="r in recipes" :key="r.id">-->
-    <!--            <RecipeCardComponent :recipe="r"></RecipeCardComponent>-->
-    <!--        </v-col>-->
-    <!--    </v-row>-->
-
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-import {ApiApi, Recipe} from "@/openapi";
+import {defineComponent, ref} from 'vue'
+import {ApiApi, Recipe, RecipeOverview} from "@/openapi";
 import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import RecipeCardComponent from "@/components/display/RecipeCard.vue";
 import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue";
+import RecipeCard from "@/components/display/RecipeCard.vue";
+import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeScroller.vue";
 
 
 export default defineComponent({
     name: "RecipeSearchPage",
-    components: {GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
-    computed: {
-
-    },
+    components: {HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
+    computed: {},
     data() {
         return {
             recipes: [] as Recipe[],
+            items: Array.from({length: 50}, (k, v) => v + 1),
 
-
+            new_recipes: [] as RecipeOverview[],
+            high_rated_recipes: [] as RecipeOverview[],
         }
     },
     mounted() {
+        const api = new ApiApi()
+        api.apiRecipeList({_new: 'true'}).then(r => {
+            if (r.results != undefined) { // TODO why this check, worst case its empty
+                this.new_recipes = r.results
+            }
+        })
 
-
+        api.apiRecipeList({rating: 4}).then(r => {
+            if (r.results != undefined) { // TODO why this check, worst case its empty
+                this.high_rated_recipes = r.results
+            }
+        })
 
     },
     methods: {