display of external recipes

vue/src/apps/RecipeView/RecipeView.vue

@@ -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">
         <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
-             :alt="_( 'Recipe Image')">
-
-        <div>
-
-        </div>
-
+             :alt="_( 'Recipe Image')" v-if="recipe.image !== null">
       </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 -->
     <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>
@@ -93,6 +95,8 @@ import {GettextMixin, ToastMixin} from "@/utils/utils";
 import Ingredient from "@/components/Ingredient";
 
 import ScalableNumber from "@/components/ScalableNumber";
+import PdfViewer from "@/components/PdfViewer";
+import ImageViewer from "@/components/ImageViewer";
 
 Vue.use(BootstrapVue)
 
@@ -103,6 +107,8 @@ export default {
     ToastMixin,
   ],
   components: {
+    PdfViewer,
+    ImageViewer,
     Ingredient,
     Step,
     RecipeContextMenu,

vue/src/components/ImageViewer.vue

@@ -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>

vue/src/components/PdfViewer.vue

@@ -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>

vue/webpack-stats.json

@@ -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"}