start page taking shape

This commit is contained in:
vabene1111
2024-03-17 09:58:26 +01:00
parent 0c6850d498
commit 7b9d140e74
4 changed files with 102 additions and 13 deletions

View File

@@ -2,8 +2,9 @@
<v-container>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<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>
<horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :title="random_keyword.label" :skeletons="4" :recipes="random_keyword_recipes" icon="fas fa-tags"></horizontal-recipe-scroller>
</v-container>
@@ -11,7 +12,7 @@
<script lang="ts">
import {defineComponent, ref} from 'vue'
import {ApiApi, Recipe, RecipeOverview} from "@/openapi";
import {ApiApi, Keyword, 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";
@@ -30,22 +31,34 @@ export default defineComponent({
new_recipes: [] as RecipeOverview[],
high_rated_recipes: [] as RecipeOverview[],
random_keyword: {} as Keyword,
random_keyword_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
api.apiRecipeList({_new: 'true', pageSize: 16}).then(r => {
if (r.results != undefined) { // TODO openapi generator makes arrays nullable for some reason
this.new_recipes = r.results
}
})
api.apiRecipeList({rating: 4}).then(r => {
if (r.results != undefined) { // TODO why this check, worst case its empty
api.apiRecipeList({rating: 4, pageSize: 16}).then(r => {
if (r.results != undefined) {
this.high_rated_recipes = r.results
}
})
api.apiKeywordList({random: 'true', limit: '1'}).then(r => {
if (r.results != undefined && r.results.length > 0) {
this.random_keyword = r.results[0]
api.apiRecipeList({keywords: r.results[0].id}).then(r => {
if (r.results != undefined) {
this.random_keyword_recipes = r.results
}
})
}
})
},
methods: {}
})