added styling options to several components

vue/src/apps/RecipeView/RecipeView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div id="app">
+    <div id="app" v-if="recipe_id !== undefined">
-        <recipe-view-component></recipe-view-component>
+        <recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
 
         <bottom-navigation-bar></bottom-navigation-bar>
     </div>
@@ -12,6 +12,7 @@ import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import RecipeViewComponent from "@/components/RecipeViewComponent.vue";
+import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 
 Vue.use(BootstrapVue)
 
@@ -19,13 +20,15 @@ export default {
     name: "RecipeView",
     mixins: [],
     components: {
-        RecipeViewComponent
+        RecipeViewComponent,
+        BottomNavigationBar
     },
     computed: {},
     data() {
-        return {}
+        return {
+            recipe_id: window.RECIPE_ID
+        }
     },
-
     mounted() {
         this.$i18n.locale = window.CUSTOM_LOCALE
     },

vue/src/components/KeywordsComponent.vue

@@ -1,8 +1,14 @@
 <template>
     <div v-if="recipe.keywords.length > 0">
       <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
-          <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
+          <template v-if="enable_keyword_links">
-                                                                                   class="font-weight-normal">{{ k.label }}</b-badge></a>
+              <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`">
+                  <b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge>
+              </a>
+          </template>
+          <template v-else>
+             <b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge>
+          </template>
 
       </span>
     </div>
@@ -18,10 +24,11 @@ export default {
     props: {
         recipe: Object,
         limit: Number,
+        enable_keyword_links: {type: Boolean, default: true}
     },
     computed: {
-        keyword_splice: function (){
+        keyword_splice: function () {
-            if(this.limit){
+            if (this.limit) {
                 return this.limit
             }
             return this.recipe.keywords.lenght

vue/src/components/RecipeCard.vue

@@ -21,7 +21,7 @@
         <template v-else>
             <b-card no-body v-hover v-if="recipe" style="height: 100%">
 
-                <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
+                <a :href="recipe_link">
                     <div class="content">
                         <div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div>
                         <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image"
@@ -50,7 +50,7 @@
                 <b-card-body class="p-2 pl-3 pr-3">
                     <div class="d-flex flex-row">
                         <div class="flex-grow-1">
-                            <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body font-weight-bold two-row-text">
+                            <a :href="recipe_link" class="text-body font-weight-bold two-row-text">
                             <template v-if="recipe !== null">{{ recipe.name }}</template>
                             <template v-else>{{ meal_plan.title }}</template>
                         </a>
@@ -71,7 +71,7 @@
 
                             <p class="mt-1 mb-1">
                                 <last-cooked :recipe="recipe"></last-cooked>
-                                <keywords-component :recipe="recipe" :limit="3"
+                                <keywords-component :recipe="recipe" :limit="3" :enable_keyword_links="enable_keyword_links"
                                                     style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
                             </p>
                             <transition name="fade" mode="in-out">
@@ -152,6 +152,8 @@ export default {
         detailed: {type: Boolean, default: true},
         show_context_menu: {type: Boolean, default: true},
         context_disabled_options: Object,
+        open_recipe_on_click: {type: Boolean, default: true},
+        enable_keyword_links: {type: Boolean, default: true},
     },
     data() {
         return {
@@ -178,6 +180,13 @@ export default {
         waiting_time: function () {
             return calculateHourMinuteSplit(this.recipe.waiting_time)
         },
+        recipe_link: function (){
+            if(this.open_recipe_on_click){
+                return this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null
+            } else {
+                return "#"
+            }
+        }
     },
     methods: {},
     directives: {

vue/src/components/RecipeViewComponent.vue

@@ -6,7 +6,7 @@
         </template>
 
         <div v-if="!loading" style="padding-bottom: 60px">
-            <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)"/>
+            <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" v-if="show_recipe_switcher"/>
             <div class="row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
@@ -27,7 +27,7 @@
             </div>
 
             <div style="text-align: center">
-                <keywords-component :recipe="recipe"></keywords-component>
+                <keywords-component :recipe="recipe" :enable_keyword_links="enable_keyword_links"></keywords-component>
             </div>
 
             <hr/>
@@ -77,7 +77,7 @@
 
                 <div class="col col-md-2 col-2 mt-2 mt-md-0 text-right">
                     <recipe-context-menu v-bind:recipe="recipe" :servings="servings"
-                                         :disabled_options="{print:false}"></recipe-context-menu>
+                                         :disabled_options="{print:false}" v-if="show_context_menu"></recipe-context-menu>
                 </div>
             </div>
             <hr/>
@@ -234,13 +234,20 @@ export default {
             ingredient_height: '250',
         }
     },
+    props: {
+        recipe_id: Number,
+        show_context_menu: {type: Boolean, default: true},
+        enable_keyword_links: {type: Boolean, default: true},
+        show_recipe_switcher: {type: Boolean, default: true},
+        //show_comments: {type: Boolean, default: true},
+    },
     watch: {
         servings(newVal, oldVal) {
             this.servings_cache[this.recipe.id] = this.servings
         },
     },
     mounted() {
-        this.loadRecipe(window.RECIPE_ID)
+        this.loadRecipe(this.recipe_id)
         this.$i18n.locale = window.CUSTOM_LOCALE
         this.requestWakeLock()
         window.addEventListener('resize', this.handleResize);