corrected servings factor

vue/src/apps/RecipeView/RecipeView.vue

@@ -87,7 +87,7 @@
                     <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                     <template v-for="s in recipe.steps">
                       <template v-for="i in s.ingredients">
-                        <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"
+                        <Ingredient :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
                                     @checked-state-changed="updateIngredientCheckedState"></Ingredient>
                       </template>
                     </template>
@@ -110,7 +110,7 @@
 
           <div class="row" style="margin-top: 2vh">
             <div class="col-12">
-              <Nutrition :recipe="recipe" :servings="servings"></Nutrition>
+              <Nutrition :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition>
             </div>
           </div>
         </div>
@@ -127,7 +127,7 @@
       </div>
 
       <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-        <Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
+        <Step :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
               @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
       </div>
     </div>
@@ -175,6 +175,11 @@ export default {
     Keywords,
     LoadingSpinner,
   },
+  computed: {
+    ingredient_factor: function () {
+      return this.servings / this.recipe.servings
+    },
+  },
   data() {
     return {
       loading: true,
@@ -192,6 +197,11 @@ export default {
     loadRecipe: function (recipe_id) {
       apiLoadRecipe(recipe_id).then(recipe => {
 
+        if (window.USER_SERVINGS !== 0) {
+          recipe.servings = window.USER_SERVINGS
+        }
+        this.servings = recipe.servings
+
         let total_time = 0
         for (let step of recipe.steps) {
           this.ingredient_count += step.ingredients.length

vue/src/components/CompileComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <component :is="compiled" :servings="servings" :code="code"></component>
+    <component :is="compiled" :ingredient_factor="ingredient_factor" :code="code"></component>
   </div>
 </template>
 
@@ -18,7 +18,7 @@ obviously only run trusted code this way ...
 
 export default {
   name: 'CompileComponent',
-  props: ['code', 'servings'],
+  props: ['code', 'ingredient_factor'],
   data() {
     return {
       compiled: null,
@@ -26,7 +26,7 @@ export default {
   },
   mounted() {
     this.compiled = Vue.component('compiled-component', {
-      props: ['servings', 'code'],
+      props: ['ingredient_factor', 'code'],
       components: {
         ScalableNumber, // eslint-disable-line
       },

vue/src/components/Ingredient.vue

@@ -35,7 +35,7 @@ export default {
   name: 'Ingredient',
   props: {
     ingredient: Object,
-    servings: {
+    ingredient_factor: {
       type: Number,
       default: 1,
     }
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     calculateAmount: function (x) {
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     }
   }
 }

vue/src/components/Nutrition.vue

@@ -65,11 +65,11 @@ export default {
   ],
   props: {
     recipe: Object,
-    servings: Number,
+    ingredient_factor: Number,
   },
   methods: {
     calculateAmount: function (x) {
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     }
   }
 }

vue/src/components/Step.vue

@@ -34,13 +34,13 @@
             <table class="table table-sm">
               <!-- eslint-disable vue/no-v-for-template-key-on-child -->
               <template v-for="i in step.ingredients">
-                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
+                <Ingredient v-bind:ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
               </template>
               <!-- eslint-enable vue/no-v-for-template-key-on-child -->
             </table>
           </div>
           <div class="col" :class="{ 'col-md-8':  recipe.steps.length > 1, 'col-md-12':  recipe.steps.length <= 1,}">
-            <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
+            <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
           </div>
         </div>
       </b-collapse>
@@ -71,7 +71,7 @@
       <b-collapse id="collapse-1" v-model="details_visible">
         <div class="row" v-if="step.instruction !== ''">
           <div class="col col-md-12" style="text-align: center">
-            <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
+            <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
           </div>
         </div>
       </b-collapse>
@@ -134,7 +134,7 @@ export default {
   },
   props: {
     step: Object,
-    servings: Number,
+    ingredient_factor: Number,
     index: Number,
     recipe: Object,
     start_time: String,
@@ -151,7 +151,7 @@ export default {
   methods: {
     calculateAmount: function (x) {
       // used by the jinja2 template
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     },
     updateTime: function () {
       this.$emit('update-start-time', moment(this.set_time_input).add(this.time_offset * -1, 'minutes').format('yyyy-MM-DDTHH:mm'))