commit

vue/src/components/Step.vue

@@ -4,7 +4,7 @@
 
     <h5 class="text-secondary">
       <template v-if="step.name">{{ step.name }}</template>
-      <template v-else>{{ _('Step') }} {{index + 1}}</template>
+      <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
     </h5>
 
     <div class="row">
@@ -16,25 +16,32 @@
           <div v-for="i in step.ingredients" v-bind:key="i.id">
             <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
           </div>
-
         </table>
       </div>
 
       <div class="col-md-9">
         <i class="fas fa-paragraph text-secondary"></i>
-        {{ step.instruction }}
+        <span v-html="step.ingredients_markdown">
+
+        </span>
+
+         <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
       </div>
     </div>
 
-
   </div>
 
 </template>
 
 <script>
 
+import {calculateAmount} from "@/utils/utils";
+
 import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
+import ScalableNumber from "@/components/ScalableNumber";
+
+import CompileComponent from "@/components/CompileComponent";
 
 export default {
   name: 'Step',
@@ -43,11 +50,22 @@ export default {
   ],
   components: {
     Ingredient,
+    CompileComponent, //eslint-disable-line
+    ScalableNumber, // eslint-disable-line
   },
   props: {
     step: Object,
     servings: Number,
     index: Number,
+  },
+  mounted() {
+
+  },
+  methods: {
+    calculateAmount: function (x) {
+      // used by the jinja2 template
+      return calculateAmount(x, this.servings)
+    }
   }
 }
 </script>