display of external recipes
This commit is contained in:
parent
1bb412e007
commit
bb43ed203a
@ -191,7 +191,7 @@ class RecipeSerializer(WritableNestedModelSerializer):
|
|||||||
fields = (
|
fields = (
|
||||||
'id', 'name', 'image', 'keywords', 'steps', 'working_time',
|
'id', 'name', 'image', 'keywords', 'steps', 'working_time',
|
||||||
'waiting_time', 'created_by', 'created_at', 'updated_at',
|
'waiting_time', 'created_by', 'created_at', 'updated_at',
|
||||||
'internal', 'nutrition', 'servings'
|
'internal', 'nutrition', 'servings', 'file_path'
|
||||||
)
|
)
|
||||||
read_only_fields = ['image', 'created_by', 'created_at']
|
read_only_fields = ['image', 'created_by', 'created_at']
|
||||||
|
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
window.RECIPE_ID = 6;
|
window.RECIPE_ID = {{pk}};
|
||||||
window.USER_PREF = {
|
window.USER_PREF = {
|
||||||
'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
|
'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
|
||||||
'ingredient_decimals': {{ request.user.userpreference.ingredient_decimals }},
|
'ingredient_decimals': {{ request.user.userpreference.ingredient_decimals }},
|
||||||
|
@ -56,7 +56,7 @@ urlpatterns = [
|
|||||||
),
|
),
|
||||||
name='service_worker'
|
name='service_worker'
|
||||||
),
|
),
|
||||||
path('test/', views.test, name='view_test'),
|
path('test/<int:pk>', views.test, name='view_test'),
|
||||||
|
|
||||||
path('import/', import_export.import_recipe, name='view_import'),
|
path('import/', import_export.import_recipe, name='view_import'),
|
||||||
path('export/', import_export.export_recipe, name='view_export'),
|
path('export/', import_export.export_recipe, name='view_export'),
|
||||||
|
@ -493,8 +493,8 @@ def offline(request):
|
|||||||
return render(request, 'offline.html', {})
|
return render(request, 'offline.html', {})
|
||||||
|
|
||||||
|
|
||||||
def test(request):
|
def test(request, pk):
|
||||||
if not settings.DEBUG:
|
if not settings.DEBUG:
|
||||||
return HttpResponseRedirect(reverse('index'))
|
return HttpResponseRedirect(reverse('index'))
|
||||||
|
|
||||||
return render(request, 'test.html', {'test': None})
|
return render(request, 'test.html', {'pk': pk})
|
||||||
|
@ -32,12 +32,8 @@ urlpatterns = [
|
|||||||
JavaScriptCatalog.as_view(domain='django'),
|
JavaScriptCatalog.as_view(domain='django'),
|
||||||
name='javascript-catalog'
|
name='javascript-catalog'
|
||||||
),
|
),
|
||||||
url(r'^jsreverse.json$', reverse_views.urls_js, name='js_reverse'),
|
|
||||||
]
|
]
|
||||||
|
|
||||||
if settings.GUNICORN_MEDIA or settings.DEBUG:
|
if settings.GUNICORN_MEDIA or settings.DEBUG:
|
||||||
urlpatterns += url(
|
urlpatterns += url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
|
||||||
r'^media/(?P<path>.*)$',
|
urlpatterns += url(r'^jsreverse.json$', reverse_views.urls_js, name='js_reverse'),
|
||||||
serve,
|
|
||||||
{'document_root': settings.MEDIA_ROOT}
|
|
||||||
),
|
|
||||||
|
@ -59,15 +59,17 @@
|
|||||||
|
|
||||||
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
|
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
|
||||||
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
|
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
|
||||||
:alt="_( 'Recipe Image')">
|
:alt="_( 'Recipe Image')" v-if="recipe.image !== null">
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="recipe.file_path.includes('.pdf')">
|
||||||
|
<PdfViewer :recipe="recipe"></PdfViewer>
|
||||||
|
</div>
|
||||||
|
<div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg')">
|
||||||
|
<ImageViewer :recipe="recipe"></ImageViewer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--TODO timers -->
|
<!--TODO timers -->
|
||||||
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
|
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
|
||||||
<Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
|
<Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
|
||||||
@ -93,6 +95,8 @@ import {GettextMixin, ToastMixin} from "@/utils/utils";
|
|||||||
import Ingredient from "@/components/Ingredient";
|
import Ingredient from "@/components/Ingredient";
|
||||||
|
|
||||||
import ScalableNumber from "@/components/ScalableNumber";
|
import ScalableNumber from "@/components/ScalableNumber";
|
||||||
|
import PdfViewer from "@/components/PdfViewer";
|
||||||
|
import ImageViewer from "@/components/ImageViewer";
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
|
|
||||||
@ -103,6 +107,8 @@ export default {
|
|||||||
ToastMixin,
|
ToastMixin,
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
|
PdfViewer,
|
||||||
|
ImageViewer,
|
||||||
Ingredient,
|
Ingredient,
|
||||||
Step,
|
Step,
|
||||||
RecipeContextMenu,
|
RecipeContextMenu,
|
||||||
|
28
vue/src/components/ImageViewer.vue
Normal file
28
vue/src/components/ImageViewer.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<img :src="pdfUrl" width="100%" height="700px" :alt="_('External Recipe Image')">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {GettextMixin, resolveDjangoUrl} from "@/utils/utils";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ImageViewer',
|
||||||
|
mixins: [
|
||||||
|
GettextMixin,
|
||||||
|
],
|
||||||
|
props: {
|
||||||
|
recipe: Object,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pdfUrl: function() {
|
||||||
|
return resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
28
vue/src/components/PdfViewer.vue
Normal file
28
vue/src/components/PdfViewer.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<iframe :src="pdfUrl" width="100%" height="700px" style="border: none;"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PdfViewer',
|
||||||
|
mixins: [
|
||||||
|
ResolveUrlMixin
|
||||||
|
],
|
||||||
|
props: {
|
||||||
|
recipe: Object,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pdfUrl: function() {
|
||||||
|
return '/static/pdfjs/viewer.html?file=' + resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
@ -1 +1 @@
|
|||||||
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]}}
|
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.c7f91f91728c11ba84da.hot-update.js","publicPath":"http://localhost:8080/recipe_view.c7f91f91728c11ba84da.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.c7f91f91728c11ba84da.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\ImageViewer.vue\n 25:50 error 'resolveDjangoUrl' is not defined no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}
|
Loading…
Reference in New Issue
Block a user