mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-04 05:39:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

improving the start page layout

Browse Source
This commit is contained in:
vabene1111
2024-07-31 18:56:43 +02:00
parent abff1136f9
commit 65b451b465
6 changed files with 96 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
vue3/src/pages/StartPage.vue
View File

@@ -1,79 +1,86 @@
<template>
<v-container>
<v-container>
<horizontal-meal-plan-window></horizontal-meal-plan-window>
<v-row >
<v-col class="pb-0" cols="6" offset="3">
<v-text-field variant="solo" :placeholder="$t('Search') + ' (CTRL + K)'" ></v-text-field>
</v-col>
</v-row>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
<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"
v-if="random_keyword.label"
></horizontal-recipe-scroller>
</v-container>
<horizontal-meal-plan-window></horizontal-meal-plan-window>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
<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"
v-if="random_keyword.label"
></horizontal-recipe-scroller>
</v-container>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue"
import { ApiApi, Keyword, Recipe, RecipeOverview } from "@/openapi"
import {defineComponent, ref} from "vue"
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"
import RecipeCard from "@/components/display/RecipeCard.vue"
import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindow.vue"
import { DateTime } from "luxon"
import { useMealPlanStore } from "@/stores/MealPlanStore"
import {DateTime} from "luxon"
import {useMealPlanStore} from "@/stores/MealPlanStore"
import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue"
import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue"
import ModelSelect from "@/components/inputs/ModelSelect.vue"
export default defineComponent({
name: "StartPage",
components: { ModelSelect, MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent },
computed: {},
data() {
return {
recipes: [] as Recipe[],
items: Array.from({ length: 50 }, (k, v) => v + 1),
name: "StartPage",
components: {ModelSelect, MealPlanDialog, HorizontalMealPlanWindow, 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[],
random_keyword: {} as Keyword,
random_keyword_recipes: [] as RecipeOverview[],
}
},
mounted() {
const api = new ApiApi()
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", 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, 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
}
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
}
})
}
})
},
methods: {},
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: {},
})
</script>