save WIP

vue/src/components/Ingredient.vue

@@ -1,20 +1,52 @@
 <template>
   <div>
-    <input type="checkbox">
-    {{ingredient.amount}}
-    {{ingredient.unit}}
-    {{ingredient.food}}
-    {{ingredient.note}}
+    <tr>
+      <td>
+        <input type="checkbox">
+      </td>
+      <td>
+        <span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
+      </td>
+      <td>
+        <span v-if="ingredient.unit !== null">{{ ingredient.unit.name }}</span>
+      </td>
+      <td>
+        <span v-if="ingredient.food !== null">{{ ingredient.food.name }}</span>
+      </td>
+      <td>
+        <div v-if="ingredient.note">
+          <span v-b-popover.hover="ingredient.note"
+                    class="d-print-none"> <i class="far fa-comment"></i>
+          </span>
+
+
+
+          <div class="d-none d-print-block">
+            <i class="far fa-comment-alt"></i> {{ ingredient.note }}
+          </div>
+        </div>
+      </td>
+    </tr>
   </div>
 </template>
 
 <script>
 
+import {calculateAmount} from "@/utils/utils";
+
 export default {
   name: 'Ingredient',
   props: {
     ingredient: Object,
-    servings: Number
+    servings: {
+      type: Number,
+      default: 1,
+    }
+  },
+  methods: {
+    calculateAmount: function (x) {
+      return calculateAmount(x, this.servings)
+    }
   }
 }
 </script>

vue/src/components/Step.vue

@@ -1,18 +1,32 @@
 <template>
+
   <div>
 
-    <div v-for="i in step.ingredients" v-bind:key="i.id">
-      <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
+    <h5 class="text-secondary">
+      <template v-if="step.name">{{ step.name }}</template>
+      <template v-else>{{ _('Step') }} {{index + 1}}</template>
+    </h5>
+
+    <div class="row">
+
+      <div class="col-md-3">
+        <i class="fa fa-stopwatch"></i> {{ step.time }}
+
+        <table>
+          <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 }}
+      </div>
     </div>
 
-    <br/>
 
-    Servings Step: {{servings}}
-
-    {{ step.instruction }}
-
-    <br/>
-    <br/>
   </div>
 
 </template>
@@ -20,15 +34,20 @@
 <script>
 
 import Ingredient from "@/components/Ingredient";
+import {GettextMixin} from "@/utils/utils";
 
 export default {
   name: 'Step',
+  mixins: [
+    GettextMixin,
+  ],
   components: {
-    Ingredient
+    Ingredient,
   },
   props: {
     step: Object,
     servings: Number,
+    index: Number,
   }
 }
 </script>