step display tweaks

vue3/src/apps/tandoor/Tandoor.vue

@@ -16,7 +16,7 @@
         </v-main>
 
         <v-bottom-navigation grow>
-            <v-btn value="recent" to="/search">
+            <v-btn value="recent" to="/">
                 <v-icon icon="fas fa-book"/>
                 <span>Recipes</span>
             </v-btn>
@@ -33,9 +33,9 @@
                 <span>Shopping</span>
             </v-btn>
             <v-btn value="nearby" to="/books">
-                <v-icon icon="fas fa-book-open"></v-icon>
+                <v-icon icon="fas fa-bars"></v-icon>
 
-                <span>Books</span>
+                <span>More</span>
             </v-btn>
         </v-bottom-navigation>
 

vue3/src/components/display/IngredientsTableRow.vue

@@ -8,7 +8,7 @@
             <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 v-if="showNotes">
-                <v-icon class="far fa-comment float-right" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
+                <v-icon class="far fa-comment float-right" v-if="ingredient.note != '' && ingredient.note != undefined" @click="show_tooltip = !show_tooltip">
                     <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
                 </v-icon>
             </td>

vue3/src/components/display/RecipeView.vue

@@ -44,8 +44,8 @@
             <StepsOverview :steps="recipe.steps"></StepsOverview>
         </v-card>
 
-        <v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
-            <Step :step="s" :ingredient_factor="ingredient_factor"></Step>
+        <v-card class="mt-1" v-for="(step, index)  in recipe.steps" :key="step.id">
+            <Step :step="step" :step-number="index+1" :ingredient_factor="ingredient_factor"></Step>
         </v-card>
 
         <!--    <RecipeActivity :recipe="recipe"></RecipeActivity>-->

vue3/src/components/display/Step.vue

@@ -2,23 +2,25 @@
     <v-card>
         <v-card-title>
             <v-row>
-                <v-col>{{ step.name }}</v-col>
+                <v-col><span v-if="step.name">{{ step.name }}</span><span v-else>Step {{ stepNumber}}</span></v-col>
                 <v-col class="text-right">
                     <v-btn-group density="compact" variant="tonal">
-                        <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1"></i> {{ step.time }}</v-btn>
-                        <v-btn size="small" color="success"><i class="fas fa-check"></i></v-btn>
+                        <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}</v-btn>
+                        <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
                     </v-btn-group>
                 </v-col>
             </v-row>
         </v-card-title>
+        <template v-if="!stepChecked">
+            <timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
 
-        <timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
+            <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
 
-        <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
+            <v-card-text v-if="step.instructionsMarkdown.length > 0">
+                <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
+            </v-card-text>
+        </template>
 
-        <v-card-text v-if="step.instructionsMarkdown.length > 0">
-            <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
-        </v-card-text>
     </v-card>
 </template>
 
@@ -33,31 +35,37 @@ import Timer from "@/components/display/Timer.vue";
 
 export default defineComponent({
     name: "Step",
-    computed: {
-
-    },
     components: {Timer, Instructions, IngredientsTable},
     props: {
         step: {
             type: {} as PropType<Step>,
             required: true,
         },
+        stepNumber: {
+            type: Number,
+            required: false,
+            default: 1
+        },
         ingredient_factor: {
             type: Number,
             required: true,
         },
     },
+    computed: {
+        hasDetails: function () {
+            return this.step.ingredients.length > 0 || (this.step.instruction != undefined && this.step.instruction.length > 0) || this.step.stepRecipeData != undefined || this.step.file != undefined
+        }
+    },
     data() {
         return {
             timerRunning: false,
+            stepChecked: false,
         }
     },
     mounted() {
 
     },
-    methods: {
-
-    }
+    methods: {}
 })
 </script>