feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -12,6 +12,26 @@
           ></v-file-input>
         </v-col>
         <v-col cols="3"></v-col>
+        <v-row>
+          <v-col>
+            <v-text-field
+              label="Total Time"
+              v-model="value.totalTime"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            ><v-text-field
+              label="Prep Time"
+              v-model="value.prepTime"
+            ></v-text-field
+          ></v-col>
+          <v-col
+            ><v-text-field
+              label="Cook Time / Perform Time"
+              v-model="value.performTime"
+            ></v-text-field
+          ></v-col>
+        </v-row>
       </v-row>
       <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name">
       </v-text-field>

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-card color="accent" class="transparent" tile :width="`${timeCardWidth}`">
+    <v-card-text
+      class="text-caption white--text"
+      v-if="totalTime || prepTime || performTime"
+    >
+      <v-row align="center" dense>
+        <v-col :cols="iconColumn">
+          <v-icon large color="white"> mdi-clock-outline </v-icon>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="totalTime"
+        ></v-divider>
+        <v-col v-if="totalTime">
+          <div><strong> Total Time </strong></div>
+          <div>{{ totalTime }}</div>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="prepTime"
+        ></v-divider>
+        <v-col v-if="prepTime">
+          <div><strong> Prep Time </strong></div>
+          <div>{{ prepTime }}</div>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="performTime"
+        ></v-divider>
+        <v-col v-if="performTime">
+          <div><strong> Cook Time </strong></div>
+          <div>{{ performTime }}</div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    prepTime: String,
+    totalTime: String,
+    performTime: String,
+  },
+  computed: {
+    timeLength() {
+      let times = [];
+      let timeArray = [this.totalTime, this.prepTime, this.performTime];
+      timeArray.forEach((element) => {
+        if (element) {
+          times.push(element);
+        }
+      });
+
+      return times.length;
+    },
+    iconColumn() {
+      switch (this.timeLength) {
+        case 0:
+          return null;
+        case 1:
+          return 4;
+        case 2:
+          return 3;
+        case 3:
+          return 2;
+        default:
+          return 1;
+      }
+    },
+    timeCardWidth() {
+      let timeArray = [this.totalTime, this.prepTime, this.performTime];
+      let width = 120;
+      timeArray.forEach((element) => {
+        if (element) {
+          width += 70;
+        }
+      });
+
+      if (this.$vuetify.breakpoint.name === "xs") {
+        return "100%";
+      }
+
+      return `${width}px`;
+    },
+  },
+};
+</script>
+
+<style>
+.transparent {
+  opacity: 70% !important;
+}
+</style>

frontend/src/pages/RecipePage.vue

@@ -6,6 +6,12 @@
       class="d-print-none"
       :key="imageKey"
     >
+      <RecipeTimeCard
+        class="force-bottom"
+        :prepTime="recipeDetails.prepTime"
+        :totalTime="recipeDetails.totalTime"
+        :performTime="recipeDetails.performTime"
+      />
     </v-img>
     <ButtonRow
       :open="showIcons"
@@ -49,6 +55,7 @@ import utils from "../utils";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "../components/Recipe/RecipeViewer";
 import RecipeEditor from "../components/Recipe/RecipeEditor";
+import RecipeTimeCard from "../components/Recipe/RecipeTimeCard.vue";
 import ButtonRow from "../components/UI/ButtonRow";
 
 export default {
@@ -57,10 +64,11 @@ export default {
     RecipeViewer,
     RecipeEditor,
     ButtonRow,
+    RecipeTimeCard,
   },
   data() {
     return {
-      // CurrentRecipe: this.$route.params.recipe,
+      // currentRecipe: this.$route.params.recipe,
       form: false,
       jsonEditor: false,
       jsonEditorOptions: {
@@ -99,7 +107,7 @@ export default {
   },
 
   computed: {
-    CurrentRecipe() {
+    currentRecipe() {
       return this.$route.params.recipe;
     },
     showIcons() {
@@ -118,7 +126,7 @@ export default {
       this.fileObject = fileObject;
     },
     async getRecipeDetails() {
-      this.recipeDetails = await api.recipes.requestDetails(this.CurrentRecipe);
+      this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
       this.form = false;
     },
     getImage(image) {
@@ -155,4 +163,10 @@ export default {
 .disabled-card {
   opacity: 0.5;
 }
+
+.force-bottom {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
 </style>