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

display external recipes

Browse Source
This commit is contained in:
vabene1111
2024-12-28 14:15:44 +01:00
parent 275c879e62
commit 38c8e1b84f
5 changed files with 91 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
vue3/src/components/display/ExternalRecipeViewer.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<v-card class="mt-1 h-100">
<iframe width="100%" height="700px" :src="`${getDjangoUrl('/api/get_recipe_file/')}${props.recipe.id}/`" v-if="isPdf"></iframe>
<v-img :src="`${getDjangoUrl('/api/get_recipe_file/')}${props.recipe.id}/`" v-if="isImage"></v-img>
</v-card>
</template>
<script setup lang="ts">
import {computed, PropType} from "vue";
import {Recipe} from "@/openapi";
import {useDjangoUrls} from "@/composables/useDjangoUrls";
const props = defineProps({
recipe: {type: {} as PropType<Recipe>, required: true}
})
const {getDjangoUrl} = useDjangoUrls()
/**
* determines if the file is a PDF based on the path
*/
const isPdf = computed(() => {
let filePath = props.recipe.filePath
if (filePath) {
return filePath.includes('.pdf')
}
return false
})
/**
* determines if the file is an image based on the path
*/
const isImage = computed(() => {
let filePath = props.recipe.filePath
if (filePath) {
return filePath.includes('.png') || filePath.includes('.jpg') || filePath.includes('.jpeg') || filePath.includes('.gif')
}
return false
})
</script>
<style scoped>
</style>

66
vue3/src/components/display/RecipeView.vue
View File

@@ -14,6 +14,7 @@
<recipe-image
max-height="25vh"
:recipe="props.recipe"
v-if="recipe.internal"
>
<template #overlay>
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy.displayName }}</v-chip>
@@ -32,39 +33,45 @@
</v-card>
</v-card>
<v-card class="mt-1">
<v-container>
<v-row class="text-center text-body-2">
<v-col class="pt-1 pb-1">
<i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
<div class="text-grey">{{$t('WorkingTime')}}</div>
</v-col>
<v-col class="pt-1 pb-1">
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
<div class="text-grey">{{$t('WaitingTime')}}</div>
</v-col>
<v-col class="pt-1 pb-1">
<template v-if="!recipe.internal">
<external-recipe-viewer :recipe="recipe"></external-recipe-viewer>
</template>
<div class="cursor-pointer">
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
<number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
</number-scaler-dialog>
</div>
<template v-else>
<v-card class="mt-1">
<v-container>
<v-row class="text-center text-body-2">
<v-col class="pt-1 pb-1">
<i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
<div class="text-grey">{{ $t('WorkingTime') }}</div>
</v-col>
<v-col class="pt-1 pb-1">
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
<div class="text-grey">{{ $t('WaitingTime') }}</div>
</v-col>
<v-col class="pt-1 pb-1">
<div class="cursor-pointer">
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
<number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
</number-scaler-dialog>
</div>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
<v-card class="mt-1" v-if="props.recipe.steps.length > 1">
<steps-overview :steps="props.recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
</v-card>
<v-card class="mt-1" v-if="props.recipe.steps.length > 1">
<steps-overview :steps="props.recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
</v-card>
<v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
<step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
</v-card>
<v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
<step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
</v-card>
</template>
<recipe-activity :recipe="recipe"></recipe-activity>
</template>
@@ -83,6 +90,9 @@ import RecipeActivity from "@/components/display/RecipeActivity.vue";
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
import KeywordsComponent from "@/components/display/KeywordsBar.vue";
import RecipeImage from "@/components/display/RecipeImage.vue";
import PdfViewer from "../../../../vue/src/components/PdfViewer.vue";
import ImageViewer from "../../../../vue/src/components/ImageViewer.vue";
import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
const props = defineProps({
recipe: {