From 46218215972984be8f12bd79b10c43c9f7832ea6 Mon Sep 17 00:00:00 2001
From: Vishnu Raghav B <design@vishnuraghav.com>
Date: Wed, 18 Nov 2020 02:51:08 +0530
Subject: [PATCH] added back try later, adding meal planner

---
 app/app.scss                   |  64 ++++-
 app/components/App.vue         |  12 +-
 app/components/EditRecipe.vue  | 510 ++++++++++++++++-----------------
 app/components/EnRecipes.vue   |  12 +-
 app/components/MealPlanner.vue | 183 +++++++-----
 app/components/ViewRecipe.vue  |  14 +-
 app/main.js                    |   3 +
 app/store.js                   |  11 +
 package-lock.json              |   9 +
 package.json                   |   1 +
 10 files changed, 465 insertions(+), 354 deletions(-)

diff --git a/app/app.scss b/app/app.scss
index 1c0dec23..ed3edea0 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -14,6 +14,11 @@ $gray9: #212529;
 $orange: #ff5200;
 $fabRipple: #ff864d;
 $red: #c92a2a;
+$breakfast: #ffb180;
+$lunch: #ceff80;
+$dinner: #80ceff;
+$snacks: #b180ff;
+
 // Global SCSS styling
 // @see https://docs.nativescript.org/ui/styling
 
@@ -79,11 +84,13 @@ Page,
     color: $gray4;
     background: $gray3;
   }
-  .count {
+  .count,
+  .marker {
     color: $gray1;
     background: $gray9;
   }
-  .instruction {
+  .instruction,
+  .dayContainer {
     border-color: $gray9;
   }
   MDProgress {
@@ -142,11 +149,13 @@ Page,
     color: $gray8;
     background: #111;
   }
-  .count {
+  .count,
+  .marker {
     color: $gray9;
     background: $gray1;
   }
-  .instruction {
+  .instruction,
+  .dayContainer {
     border-color: $gray1;
   }
   MDProgress {
@@ -362,6 +371,7 @@ RadListView {
 // -----------------------------
 // SETTINGS
 .group-header {
+  text-transform: uppercase;
   padding: 8;
 }
 .main-container {
@@ -533,6 +543,52 @@ TextField.combinationToken {
   border-width: 0;
 }
 // -----------------------------
+// MEAL PLANNER
+.mealPlanner {
+  padding: 16 16 128;
+  width: 100%;
+  .dayContainer {
+    padding: 8 0;
+    color: $gray9;
+    &.breakfast {
+      border-radius: 4 4 0 0;
+      background: $breakfast;
+    }
+    &.lunch {
+      background: $lunch;
+    }
+    &.dinner {
+      background: $dinner;
+    }
+    &.snacks {
+      border-radius: 0 0 4 4;
+      background: $snacks;
+    }
+    .periodLabel {
+      text-transform: uppercase;
+      vertical-alignment: center;
+      font-size: 16;
+      padding: 0 0 0 16;
+    }
+    .recipes {
+      margin: 8 8 0;
+      .recipeTitle {
+        font-size: 14;
+        padding: 6 8;
+        line-height: 4;
+      }
+      .closeBtn {
+        margin: 0 8;
+        vertical-alignment: top;
+      }
+    }
+    MDRipple,
+    MDButton {
+      ripple-color: rgba($gray6, 0.2);
+    }
+  }
+}
+// -----------------------------
 // DIALOGS
 .dialogContainer {
   width: 100%;
diff --git a/app/components/App.vue b/app/components/App.vue
index c3216d88..de0edc22 100644
--- a/app/components/App.vue
+++ b/app/components/App.vue
@@ -32,7 +32,7 @@
             <Label col="0" row="0" class="bx" :text="icon[item.icon]" />
             <Label col="2" row="0" :text="item.title" />
           </GridLayout>
-          <!-- <StackLayout class="hr m-8"></StackLayout> -->
+          <StackLayout class="hr m-8"></StackLayout>
           <GridLayout
             rows="48"
             columns="auto, 24, *"
@@ -180,11 +180,11 @@ export default {
           component: "Favorites",
           icon: "heart",
         },
-        // {
-        //   title: "Try Later",
-        //   component: "Try Later",
-        //   icon: "trylater",
-        // },
+        {
+          title: "Try Later",
+          component: "Try Later",
+          icon: "trylater",
+        },
       ],
       bottommenu: [
         {
diff --git a/app/components/EditRecipe.vue b/app/components/EditRecipe.vue
index 5c74d507..5db988ff 100644
--- a/app/components/EditRecipe.vue
+++ b/app/components/EditRecipe.vue
@@ -22,273 +22,271 @@
         <MDActivityIndicator col="2" v-if="imageLoading" :busy="imageLoading" />
       </GridLayout>
     </ActionBar>
-    <GridLayout rows="*" columns="*">
-      <ScrollView
-        row="0"
-        col="0"
-        @scroll="onScroll"
-        scrollBarIndicatorVisible="false"
-      >
-        <StackLayout width="100%" padding="0 0 128">
-          <AbsoluteLayout>
-            <StackLayout
+    <ScrollView
+      width="100%"
+      height="100%"
+      @scroll="onScroll"
+      scrollBarIndicatorVisible="false"
+    >
+      <StackLayout width="100%" padding="0 0 128">
+        <AbsoluteLayout>
+          <StackLayout
+            width="100%"
+            :height="screenWidth"
+            class="imageHolder"
+            verticalAlignment="center"
+          >
+            <Image
+              v-if="recipeContent.imageSrc"
+              :src="recipeContent.imageSrc"
+              stretch="aspectFill"
               width="100%"
               :height="screenWidth"
-              class="imageHolder"
-              verticalAlignment="center"
-            >
-              <Image
-                v-if="recipeContent.imageSrc"
-                :src="recipeContent.imageSrc"
-                stretch="aspectFill"
-                width="100%"
-                :height="screenWidth"
-              />
-              <Label
-                v-else
-                horizontalAlignment="center"
-                class="bx"
-                fontSize="160"
-                :text="icon.image"
-              />
-            </StackLayout>
-            <transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
-              <MDFloatingActionButton
-                v-if="showFab"
-                :top="screenWidth - 44"
-                :left="screenWidth - 88"
-                class="bx"
-                src="res://camera"
-                @tap="imageHandler"
-              />
-            </transition>
+            />
+            <Label
+              v-else
+              horizontalAlignment="center"
+              class="bx"
+              fontSize="160"
+              :text="icon.image"
+            />
+          </StackLayout>
+          <transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
+            <MDFloatingActionButton
+              v-if="showFab"
+              :top="screenWidth - 44"
+              :left="screenWidth - 88"
+              class="bx"
+              src="res://camera"
+              @tap="imageHandler"
+            />
+          </transition>
+        </AbsoluteLayout>
+
+        <StackLayout margin="0 16">
+          <AbsoluteLayout class="inputField">
+            <TextField
+              hint="My Healthy Recipe"
+              v-model="recipeContent.title"
+              @loaded="setInputTypeText($event, 'words')"
+            />
+            <Label top="0" class="fieldLabel" text="Title" />
           </AbsoluteLayout>
-
-          <StackLayout margin="0 16">
-            <AbsoluteLayout class="inputField">
+          <AbsoluteLayout class="inputField">
+            <TextField
+              :text="recipeContent.category"
+              editable="false"
+              @focus="modalOpen === false && showCategories(true)"
+              @tap="showCategories(false)"
+            />
+            <Label top="0" class="fieldLabel" text="Category" />
+          </AbsoluteLayout>
+          <GridLayout columns="*, 8, *">
+            <AbsoluteLayout class="inputField" col="0">
               <TextField
-                hint="My Healthy Recipe"
-                v-model="recipeContent.title"
-                @loaded="setInputTypeText($event, 'words')"
-              />
-              <Label top="0" class="fieldLabel" text="Title" />
-            </AbsoluteLayout>
-            <AbsoluteLayout class="inputField">
-              <TextField
-                :text="recipeContent.category"
-                editable="false"
-                @focus="modalOpen === false && showCategories(true)"
-                @tap="showCategories(false)"
-              />
-              <Label top="0" class="fieldLabel" text="Category" />
-            </AbsoluteLayout>
-            <GridLayout columns="*, 8, *">
-              <AbsoluteLayout class="inputField" col="0">
-                <TextField
-                  ref="yieldQuantity"
-                  v-model="recipeContent.yield.quantity"
-                  hint="1"
-                  keyboardType="number"
-                />
-                <Label top="0" class="fieldLabel" text="Yield quantity" />
-              </AbsoluteLayout>
-              <AbsoluteLayout class="inputField" col="2">
-                <TextField
-                  :text="recipeContent.yield.unit"
-                  editable="false"
-                  @focus="modalOpen === false && showYieldUnits(true)"
-                  @tap="showYieldUnits(false)"
-                />
-                <Label top="0" class="fieldLabel" text="Yield measured in" />
-              </AbsoluteLayout>
-            </GridLayout>
-            <GridLayout columns="*, 8, *">
-              <AbsoluteLayout class="inputField" col="0">
-                <TextField
-                  ref="timeRequired"
-                  :text="timeRequired"
-                  editable="false"
-                  @focus="modalOpen === false && setTimeRequired(true)"
-                  @tap="setTimeRequired(false)"
-                />
-                <Label top="0" class="fieldLabel" text="Time required" />
-              </AbsoluteLayout>
-            </GridLayout>
-
-            <StackLayout class="hr" margin="24 16"></StackLayout>
-          </StackLayout>
-
-          <StackLayout margin="0 16">
-            <Label text="Ingredients" class="sectionTitle" />
-            <GridLayout
-              columns="*,8,auto,8,auto,8,auto"
-              v-for="(ingredient, index) in recipeContent.ingredients"
-              :key="index"
-            >
-              <TextField
-                ref="ingredient"
-                @loaded="focusField($event, 'sentence')"
-                col="0"
-                v-model="recipeContent.ingredients[index].item"
-                :hint="`Item ${index + 1}`"
-                returnKeyType="next"
-              />
-              <TextField
-                width="68"
-                col="2"
-                v-model="recipeContent.ingredients[index].quantity"
-                hint="1.00"
+                ref="yieldQuantity"
+                v-model="recipeContent.yield.quantity"
+                hint="1"
                 keyboardType="number"
-                returnKeyType="next"
               />
+              <Label top="0" class="fieldLabel" text="Yield quantity" />
+            </AbsoluteLayout>
+            <AbsoluteLayout class="inputField" col="2">
               <TextField
-                width="68"
-                col="4"
-                v-model="recipeContent.ingredients[index].unit"
-                hint="Unit"
+                :text="recipeContent.yield.unit"
                 editable="false"
-                @focus="modalOpen === false && showUnits($event, true, index)"
-                @tap="showUnits($event, false, index)"
+                @focus="modalOpen === false && showYieldUnits(true)"
+                @tap="showYieldUnits(false)"
               />
-              <MDButton
-                variant="text"
-                col="6"
-                class="bx closeBtn"
-                :text="icon.close"
-                @tap="removeIngredient(index)"
-              />
-            </GridLayout>
-            <MDButton
-              variant="text"
-              class="text-btn orkm"
-              text="+ ADD INGREDIENT"
-              @tap="addIngredient()"
-            />
-
-            <StackLayout class="hr" margin="24 16"></StackLayout>
-          </StackLayout>
-
-          <StackLayout margin="0 16">
-            <Label text="Instructions" class="sectionTitle" />
-            <GridLayout
-              columns="*,8,auto"
-              v-for="(instruction, index) in recipeContent.instructions"
-              :key="index"
-            >
-              <TextView
-                @loaded="focusField($event, 'multiLine')"
-                col="0"
-                :hint="`Step ${index + 1}`"
-                v-model="recipeContent.instructions[index]"
-              />
-              <MDButton
-                variant="text"
-                col="2"
-                class="bx closeBtn"
-                :text="icon.close"
-                @tap="removeInstruction(index)"
-              />
-            </GridLayout>
-            <MDButton
-              variant="text"
-              class="text-btn orkm"
-              text="+ ADD STEP"
-              @tap="addInstruction"
-            />
-            <StackLayout class="hr" margin="24 16"></StackLayout>
-          </StackLayout>
-
-          <StackLayout margin="0 16">
-            <Label text="Notes" class="sectionTitle" />
-            <GridLayout
-              columns="*,8,auto"
-              v-for="(note, index) in recipeContent.notes"
-              :key="index"
-            >
-              <TextView
-                @loaded="focusField($event, 'multiLine')"
-                col="0"
-                :hint="`Note ${index + 1}`"
-                v-model="recipeContent.notes[index]"
-              />
-              <MDButton
-                variant="text"
-                col="2"
-                class="bx closeBtn"
-                :text="icon.close"
-                @tap="removeNote(index)"
-              />
-            </GridLayout>
-            <MDButton
-              variant="text"
-              class="text-btn orkm"
-              text="+ ADD NOTE"
-              @tap="addNote"
-            />
-            <StackLayout class="hr" margin="24 16"></StackLayout>
-          </StackLayout>
-
-          <StackLayout margin="0 16">
-            <Label text="References" class="sectionTitle" />
-            <GridLayout
-              columns="*,8,auto"
-              v-for="(reference, index) in recipeContent.references"
-              :key="index"
-            >
-              <TextView
-                @loaded="focusField($event, 'multiLine')"
-                col="0"
-                v-model="recipeContent.references[index]"
-                hint="Text or Website/Video URL"
-              />
-              <MDButton
-                variant="text"
-                col="2"
-                class="bx closeBtn"
-                :text="icon.close"
-                @tap="removeReference(index)"
-              />
-            </GridLayout>
-            <MDButton
-              variant="text"
-              class="text-btn orkm"
-              text="+ ADD REFERENCE"
-              @tap="addReference"
-            />
-            <StackLayout class="hr" margin="24 16"></StackLayout>
-          </StackLayout>
-
-          <StackLayout margin="0 16 24" v-if="recipes.length">
-            <Label text="Combinations" class="sectionTitle" />
-            <GridLayout
-              columns="*,8,auto"
-              v-for="(combination, index) in recipeContent.combinations"
-              :key="index"
-            >
+              <Label top="0" class="fieldLabel" text="Yield measured in" />
+            </AbsoluteLayout>
+          </GridLayout>
+          <GridLayout columns="*, 8, *">
+            <AbsoluteLayout class="inputField" col="0">
               <TextField
-                class="combinationToken"
-                col="0"
-                :text="getCombinationTitle(combination)"
+                ref="timeRequired"
+                :text="timeRequired"
                 editable="false"
+                @focus="modalOpen === false && setTimeRequired(true)"
+                @tap="setTimeRequired(false)"
               />
-              <MDButton
-                variant="text"
-                col="2"
-                class="bx closeBtn"
-                :text="icon.close"
-                @tap="removeCombination(combination)"
-              />
-            </GridLayout>
-            <MDButton
-              variant="text"
-              class="text-btn orkm"
-              text="+ ADD COMBINATION"
-              @tap="showCombinations"
-            />
-          </StackLayout>
+              <Label top="0" class="fieldLabel" text="Time required" />
+            </AbsoluteLayout>
+          </GridLayout>
+
+          <StackLayout class="hr" margin="24 16"></StackLayout>
         </StackLayout>
-      </ScrollView>
-    </GridLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="Ingredients" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto,8,auto,8,auto"
+            v-for="(ingredient, index) in recipeContent.ingredients"
+            :key="index"
+          >
+            <TextField
+              ref="ingredient"
+              @loaded="focusField($event, 'sentence')"
+              col="0"
+              v-model="recipeContent.ingredients[index].item"
+              :hint="`Item ${index + 1}`"
+              returnKeyType="next"
+            />
+            <TextField
+              width="68"
+              col="2"
+              v-model="recipeContent.ingredients[index].quantity"
+              hint="1.00"
+              keyboardType="number"
+              returnKeyType="next"
+            />
+            <TextField
+              width="68"
+              col="4"
+              v-model="recipeContent.ingredients[index].unit"
+              hint="Unit"
+              editable="false"
+              @focus="modalOpen === false && showUnits($event, true, index)"
+              @tap="showUnits($event, false, index)"
+            />
+            <MDButton
+              variant="text"
+              col="6"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeIngredient(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD INGREDIENT"
+            @tap="addIngredient()"
+          />
+
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="Instructions" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(instruction, index) in recipeContent.instructions"
+            :key="index"
+          >
+            <TextView
+              @loaded="focusField($event, 'multiLine')"
+              col="0"
+              :hint="`Step ${index + 1}`"
+              v-model="recipeContent.instructions[index]"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeInstruction(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD STEP"
+            @tap="addInstruction"
+          />
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="Notes" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(note, index) in recipeContent.notes"
+            :key="index"
+          >
+            <TextView
+              @loaded="focusField($event, 'multiLine')"
+              col="0"
+              :hint="`Note ${index + 1}`"
+              v-model="recipeContent.notes[index]"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeNote(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD NOTE"
+            @tap="addNote"
+          />
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="References" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(reference, index) in recipeContent.references"
+            :key="index"
+          >
+            <TextView
+              @loaded="focusField($event, 'multiLine')"
+              col="0"
+              v-model="recipeContent.references[index]"
+              hint="Text or Website/Video URL"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeReference(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD REFERENCE"
+            @tap="addReference"
+          />
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16 24" v-if="recipes.length">
+          <Label text="Combinations" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(combination, index) in recipeContent.combinations"
+            :key="index"
+          >
+            <TextField
+              class="combinationToken"
+              col="0"
+              :text="getCombinationTitle(combination)"
+              editable="false"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeCombination(combination)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD COMBINATION"
+            @tap="showCombinations"
+          />
+        </StackLayout>
+      </StackLayout>
+    </ScrollView>
   </Page>
 </template>
 
@@ -760,9 +758,7 @@ export default {
     removeInstruction(index) {
       if (this.recipeContent.instructions[index].length) {
         this.fieldDeletionConfirm("instruction").then((res) => {
-          if (res) {
-            this.recipeContent.instructions.splice(index, 1)
-          }
+          res && this.recipeContent.instructions.splice(index, 1)
         })
       } else this.recipeContent.instructions.splice(index, 1)
     },
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 6f613db2..65ef3c79 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -71,7 +71,7 @@
             columns="112, *"
             androidElevation="1"
           >
-            <MDRipple colSpan="2" @tap="viewRecipe(recipe)" />
+            <MDRipple colSpan="2" @tap="viewRecipe(recipe.id)" />
             <GridLayout class="imageHolder card" rows="112" columns="112">
               <Image
                 row="0"
@@ -361,11 +361,6 @@ export default {
       this.showFAB = false
       this.releaseGlobalBackEvent()
       this.$navigateTo(EditRecipe, {
-        // transition: {
-        //   name: "fade",
-        //   duration: 200,
-        //   curve: "easeOut",
-        // },
         props: {
           selectedCategory: this.selectedCategory,
           openAppSettingsPage: this.openAppSettingsPage,
@@ -373,8 +368,7 @@ export default {
         },
       })
     },
-    viewRecipe(item) {
-      let index = this.recipes.indexOf(item)
+    viewRecipe(recipeID) {
       this.showFAB = false
       this.$navigateTo(ViewRecipe, {
         // transition: {
@@ -384,7 +378,7 @@ export default {
         // },
         props: {
           filterTrylater: this.filterTrylater,
-          recipeID: item.id,
+          recipeID,
           hijackGlobalBackEvent: this.hijackGlobalBackEvent,
           releaseGlobalBackEvent: this.releaseGlobalBackEvent,
         },
diff --git a/app/components/MealPlanner.vue b/app/components/MealPlanner.vue
index 76961d6f..53f54446 100644
--- a/app/components/MealPlanner.vue
+++ b/app/components/MealPlanner.vue
@@ -13,77 +13,49 @@
         <Label class="title orkm" text="Meal Planner" col="1" />
       </GridLayout>
     </ActionBar>
-    <AbsoluteLayout>
-      <TabView width="100%" height="100%">
-        <TabViewItem title="Today">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Tomorrow">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="In 2 days">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="In 3 days">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="In 4 days">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="In 5 days">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="In 6 days">
-          <ScrollView>
-            <StackLayout>
-              <Label text="Today" textWrap="true" />
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-      </TabView>
-      <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
-        <MDFloatingActionButton
-          row="1"
-          col="1"
-          src="res://check"
-          @tap="recipeTried"
-          v-if="filterTrylater"
-        />
-        <transition name="dolly" appear>
-          <MDFloatingActionButton
-            row="1"
-            col="1"
-            src="res://share"
-            @tap="shareHandler"
-            v-if="!filterTrylater && showFab"
-          />
-        </transition>
-      </GridLayout>
-    </AbsoluteLayout>
+    <ScrollView
+      width="100%"
+      height="100%"
+      scrollBarIndicatorVisible="false"
+      @scroll="onScroll"
+    >
+      <StackLayout class="mealPlanner">
+        <RadCalendar ref="calendar" @dateSelected="onDateSelected">
+        </RadCalendar>
+        <StackLayout
+          v-for="(meal, indexB) in mealTimes"
+          :key="'meal' + indexB"
+          class="dayContainer"
+          :class="meal"
+        >
+          <GridLayout columns="*, auto" class="header">
+            <Label col="0" class="periodLabel orkm" :text="meal" />
+            <MDButton
+              col="1"
+              variant="text"
+              class="bx addMeal"
+              :text="icon.plus"
+            />
+          </GridLayout>
+          <GridLayout class="recipes" columns="*, auto">
+            <MDRipple />
+            <Label
+              verticalAlignment="center"
+              class="recipeTitle"
+              col="0"
+              text="getRecipeTitle(recipeID, indexA, meal)"
+              textWrap="true"
+            />
+            <MDButton
+              variant="text"
+              col="1"
+              class="bx closeBtn"
+              :text="icon.close"
+            />
+          </GridLayout>
+        </StackLayout>
+      </StackLayout>
+    </ScrollView>
     <!-- <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
       <StackLayout row="1" class="emptyState">
         <Label class="title orkm" text="Coming soon!" textWrap="true" />
@@ -95,12 +67,19 @@
 <script>
 import { ApplicationSettings, Color } from "@nativescript/core"
 import { mapState, mapActions } from "vuex"
+
+import ViewRecipe from "./ViewRecipe.vue"
+
+import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
+import ConfirmDialog from "./modal/ConfirmDialog.vue"
+
 export default {
-  props: ["showDrawer", "releaseGlobalBackEvent"],
+  props: ["showDrawer", "hijackGlobalBackEvent", "releaseGlobalBackEvent"],
   data() {
     return {
       viewIsScrolled: false,
       appTheme: "Light",
+      mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
     }
   },
   computed: {
@@ -119,8 +98,66 @@ export default {
         ? (this.viewIsScrolled = true)
         : (this.viewIsScrolled = false)
     },
+    getDate(index) {
+      let date = new Date()
+      date.setDate(date.getDate() + index)
+      return date.getTime()
+    },
+    getDateString(days) {
+      let date = new Date()
+      date.setDate(date.getDate() + days)
+      return date.toDateString().slice(0, -5)
+    },
+    getRecipeTitle(id) {
+      return this.recipes.filter((e) => e.id === id)[0].title
+    },
 
-    // CALENDAR EVENTS
+    // NAVIGATION HANDLERS
+    viewRecipe(recipeID) {
+      this.$navigateTo(ViewRecipe, {
+        props: {
+          filterTrylater: true,
+          recipeID,
+          hijackGlobalBackEvent: this.hijackGlobalBackEvent,
+          releaseGlobalBackEvent: this.releaseGlobalBackEvent,
+        },
+      })
+    },
+
+    // DATA HANDLERS
+    addRecipe(indexA, meal) {
+      let existingRecipes = [...this.meals[indexA][meal]]
+      let filteredRecipes = this.recipes.filter(
+        (e) => !existingRecipes.includes(e.id)
+      )
+      this.$showModal(ActionDialogWithSearch, {
+        props: {
+          title: "Select a recipe",
+          recipes: filteredRecipes,
+        },
+      }).then((res) => {
+        res && this.meals[indexA][meal].push(res)
+      })
+    },
+    removeRecipeConfirm() {
+      return this.$showModal(ConfirmDialog, {
+        props: {
+          title: `Remove recipe`,
+          cancelButtonText: "CANCEL",
+          okButtonText: "REMOVE",
+        },
+      })
+    },
+    removeRecipe(indexA, meal, indexC) {
+      this.removeRecipeConfirm().then((res) => {
+        res && this.meals[indexA][meal].splice(indexC, 1)
+      })
+    },
+
+    // CALENDAR
+    onDateSelected() {
+      console.log("hello")
+    },
   },
   created() {
     this.appTheme = ApplicationSettings.getString("appTheme", "Light")
diff --git a/app/components/ViewRecipe.vue b/app/components/ViewRecipe.vue
index 37960044..96f1c3b0 100644
--- a/app/components/ViewRecipe.vue
+++ b/app/components/ViewRecipe.vue
@@ -39,16 +39,16 @@
             :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
             @tap="toggleFavorite"
           />
-          <!-- <MDButton
-            variant="text"
+          <MDButton
             v-if="!filterTrylater"
+            variant="text"
             class="bx"
             :text="recipe.tried ? icon.trylaterOutline : icon.trylater"
             @tap="toggleTrylater"
-          /> -->
+          />
           <MDButton
+            v-else
             variant="text"
-            v-if="filterTrylater"
             class="bx"
             :text="icon.share"
             @tap="shareHandler"
@@ -557,6 +557,7 @@ export default {
       "toggleStateAction",
       "setCurrentComponentAction",
       "overwriteRecipeAction",
+      "setRecipeAsTriedAction",
     ]),
     onPageLoad() {
       this.releaseGlobalBackEvent()
@@ -781,7 +782,10 @@ export default {
       this.toggle("tried")
     },
     recipeTried() {
-      this.toggle("tried", true)
+      this.setRecipeAsTriedAction({
+        id: this.currentRecipeID,
+        recipe: this.recipe,
+      })
       this.$navigateBack()
     },
 
diff --git a/app/main.js b/app/main.js
index 11018eae..5765e464 100644
--- a/app/main.js
+++ b/app/main.js
@@ -20,6 +20,9 @@ Vue.use(FloatingActionButtonPlugin)
 import ProgressPlugin from "@nativescript-community/ui-material-progress/vue"
 Vue.use(ProgressPlugin)
 
+import CalendarView from "nativescript-ui-calendar/vue"
+Vue.use(CalendarView)
+
 Vue.registerElement(
   "RadSideDrawer",
   () => require("nativescript-ui-sidedrawer").RadSideDrawer
diff --git a/app/store.js b/app/store.js
index 34defbca..552bd0b6 100644
--- a/app/store.js
+++ b/app/store.js
@@ -334,6 +334,14 @@ export default new Vuex.Store({
       if (setDate) state.recipes[index].lastTried = new Date()
       EnRecipesDB.updateDocument(id, recipe)
     },
+    setRecipeAsTried(state, { id, recipe }) {
+      let index = state.recipes.indexOf(
+        state.recipes.filter((e) => e.id === id)[0]
+      )
+      state.recipes[index].tried = true
+      state.recipes[index].lastTried = new Date()
+      EnRecipesDB.updateDocument(id, recipe)
+    },
     setLastTriedDate(state, index) {
       state.recipes[index].lastTried = new Date()
       EnRecipesDB.updateDocument(state.recipes[index].id, state.recipes[index])
@@ -406,6 +414,9 @@ export default new Vuex.Store({
     toggleStateAction({ commit }, toggledRecipe) {
       commit("toggleState", toggledRecipe)
     },
+    setRecipeAsTriedAction({ commit }, recipe) {
+      commit("setRecipeAsTried", recipe)
+    },
     setLastTriedDateAction({ commit }, index) {
       commit("setLastTriedDate", index)
     },
diff --git a/package-lock.json b/package-lock.json
index 7de80d77..120f6c27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5893,6 +5893,15 @@
       "resolved": "https://registry.npmjs.org/nativescript-toast/-/nativescript-toast-2.0.0.tgz",
       "integrity": "sha512-xqyNfFS894oGfrEVO7CjpioAQLiLNNcd77Euq9XIUTf1U3W0PsIgAJbLP7+kkVGIJxdLtlBkbcQ4wDmf2DCi1w=="
     },
+    "nativescript-ui-calendar": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/nativescript-ui-calendar/-/nativescript-ui-calendar-7.0.2.tgz",
+      "integrity": "sha512-yzSZPLFsboYj73BnVG0IYsiKHpPtmL/35QcXd7hC7kWdfjoaiE1eZgtqIRiTsNJaGAp9MeSrBdvuOCe7hI9rEA==",
+      "requires": {
+        "nativescript-ui-core": "~4.0.0",
+        "ts-node": "^8.10.2"
+      }
+    },
     "nativescript-ui-core": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",
diff --git a/package.json b/package.json
index ef4efee4..9d767853 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "nativescript-imagecropper": "^4.0.1",
     "nativescript-plugin-filepicker": "^1.0.0",
     "nativescript-toast": "^2.0.0",
+    "nativescript-ui-calendar": "^7.0.2",
     "nativescript-ui-listview": "^9.0.4",
     "nativescript-ui-sidedrawer": "^9.0.3",
     "nativescript-vue": "^2.6.1",