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

source url added

Browse Source
This commit is contained in:
Kaibu
2022-04-22 18:53:23 +02:00
parent 2ddb0c719a
commit 42dfc9d126
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
vue/src/apps/RecipeView/RecipeView.vue
View File

@@ -5,7 +5,7 @@
</template> </template>
<div v-if="!loading"> <div v-if="!loading">
<RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" /> <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)"/>
<div class="row"> <div class="row">
<div class="col-12" style="text-align: center"> <div class="col-12" style="text-align: center">
<h3>{{ recipe.name }}</h3> <h3>{{ recipe.name }}</h3>
@@ -29,7 +29,7 @@
<keywords-component :recipe="recipe"></keywords-component> <keywords-component :recipe="recipe"></keywords-component>
</div> </div>
<hr /> <hr/>
<div class="row"> <div class="row">
<div class="col col-md-3"> <div class="col col-md-3">
<div class="row d-flex" style="padding-left: 16px"> <div class="row d-flex" style="padding-left: 16px">
@@ -38,8 +38,8 @@
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto" style="padding-right: 4px">
<span class="text-primary" <span class="text-primary"
><b>{{ $t("Preparation") }}</b></span ><b>{{ $t("Preparation") }}</b></span
><br /> ><br/>
{{ recipe.working_time }} {{ $t("min") }} {{ recipe.working_time }} {{ $t("min") }}
</div> </div>
</div> </div>
@@ -52,8 +52,8 @@
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto" style="padding-right: 4px">
<span class="text-primary" <span class="text-primary"
><b>{{ $t("Waiting") }}</b></span ><b>{{ $t("Waiting") }}</b></span
><br /> ><br/>
{{ recipe.waiting_time }} {{ $t("min") }} {{ recipe.waiting_time }} {{ $t("min") }}
</div> </div>
</div> </div>
@@ -65,7 +65,7 @@
<i class="fas fa-pizza-slice fa-2x text-primary"></i> <i class="fas fa-pizza-slice fa-2x text-primary"></i>
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto" style="padding-right: 4px">
<CustomInputSpinButton v-model.number="servings" /> <CustomInputSpinButton v-model.number="servings"/>
</div> </div>
<div class="my-auto"> <div class="my-auto">
<span class="text-primary"> <span class="text-primary">
@@ -82,10 +82,11 @@
<recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu> <recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu>
</div> </div>
</div> </div>
<hr /> <hr/>
<div class="row"> <div class="row">
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0"> <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2"
v-if="recipe && ingredient_count > 0">
<ingredients-card <ingredients-card
:recipe="recipe.id" :recipe="recipe.id"
:steps="recipe.steps" :steps="recipe.steps"
@@ -100,13 +101,15 @@
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2"> <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh" :alt="$t('Recipe_Image')" v-if="recipe.image !== null" @load="onImgLoad" /> <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh"
:alt="$t('Recipe_Image')" v-if="recipe.image !== null" @load="onImgLoad"/>
</div> </div>
</div> </div>
<div class="row" style="margin-top: 2vh; margin-bottom: 2vh"> <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
<div class="col-12"> <div class="col-12">
<Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component> <Nutrition-component :recipe="recipe"
:ingredient_factor="ingredient_factor"></Nutrition-component>
</div> </div>
</div> </div>
</div> </div>
@@ -116,7 +119,8 @@
<div v-if="recipe.file_path.includes('.pdf')"> <div v-if="recipe.file_path.includes('.pdf')">
<PdfViewer :recipe="recipe"></PdfViewer> <PdfViewer :recipe="recipe"></PdfViewer>
</div> </div>
<div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')"> <div
v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
<ImageViewer :recipe="recipe"></ImageViewer> <ImageViewer :recipe="recipe"></ImageViewer>
</div> </div>
</template> </template>
@@ -132,11 +136,15 @@
@checked-state-changed="updateIngredientCheckedState" @checked-state-changed="updateIngredientCheckedState"
></step-component> ></step-component>
</div> </div>
<h5 class="d-print-none"><i class="fas fa-file-import"></i> {{ $t("Imported_From") }}</h5>
<span class="text-muted mt-1"><a :href="recipe.source_url">{{ recipe.source_url }}</a></span>
</div> </div>
<add-recipe-to-book :recipe="recipe"></add-recipe-to-book> <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
<div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'"> <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh"
v-if="share_uid !== 'None'">
<div class="col col-md-12"> <div class="col col-md-12">
<a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a> <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
</div> </div>
@@ -146,13 +154,13 @@
<script> <script>
import Vue from "vue" import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue" import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css" import "bootstrap-vue/dist/bootstrap-vue.css"
import { apiLoadRecipe } from "@/utils/api" import {apiLoadRecipe} from "@/utils/api"
import RecipeContextMenu from "@/components/RecipeContextMenu" import RecipeContextMenu from "@/components/RecipeContextMenu"
import { ResolveUrlMixin, ToastMixin } from "@/utils/utils" import {ResolveUrlMixin, ToastMixin} from "@/utils/utils"
import PdfViewer from "@/components/PdfViewer" import PdfViewer from "@/components/PdfViewer"
import ImageViewer from "@/components/ImageViewer" import ImageViewer from "@/components/ImageViewer"
@@ -225,7 +233,7 @@ export default {
this.destroyWakeLock() this.destroyWakeLock()
}, },
methods: { methods: {
requestWakeLock: async function() { requestWakeLock: async function () {
if ('wakeLock' in navigator) { if ('wakeLock' in navigator) {
try { try {
this.wake_lock = await navigator.wakeLock.request('screen') this.wake_lock = await navigator.wakeLock.request('screen')
@@ -235,7 +243,7 @@ export default {
} }
} }
}, },
destroyWakeLock: function() { destroyWakeLock: function () {
if (this.wake_lock != null) { if (this.wake_lock != null) {
this.wake_lock.release() this.wake_lock.release()
.then(() => { .then(() => {
@@ -245,7 +253,7 @@ export default {
document.removeEventListener('visibilitychange', this.visibilityChange) document.removeEventListener('visibilitychange', this.visibilityChange)
}, },
visibilityChange: async function() { visibilityChange: async function () {
if (this.wake_lock != null && document.visibilityState === 'visible') { if (this.wake_lock != null && document.visibilityState === 'visible') {
await this.requestWakeLock() await this.requestWakeLock()
} }
@@ -272,7 +280,7 @@ export default {
} }
if(recipe.image === null) this.printReady() if (recipe.image === null) this.printReady()
this.recipe = this.rootrecipe = recipe this.recipe = this.rootrecipe = recipe
this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
@@ -300,12 +308,12 @@ export default {
this.servings = this.servings_cache?.[e.id] ?? e.servings this.servings = this.servings_cache?.[e.id] ?? e.servings
} }
}, },
printReady: function(){ printReady: function () {
const template = document.createElement("template"); const template = document.createElement("template");
template.id = "printReady"; template.id = "printReady";
document.body.appendChild(template); document.body.appendChild(template);
}, },
onImgLoad: function(){ onImgLoad: function () {
this.printReady() this.printReady()
}, },
}, },