added back try later, adding meal planner

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%;

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",
+          title: "Try Later",
-        //   component: "Try Later",
+          component: "Try Later",
-        //   icon: "trylater",
+          icon: "trylater",
-        // },
+        },
       ],
       bottommenu: [
         {

app/components/EditRecipe.vue

@@ -22,10 +22,9 @@
         <MDActivityIndicator col="2" v-if="imageLoading" :busy="imageLoading" />
       </GridLayout>
     </ActionBar>
-    <GridLayout rows="*" columns="*">
     <ScrollView
-        row="0"
+      width="100%"
-        col="0"
+      height="100%"
       @scroll="onScroll"
       scrollBarIndicatorVisible="false"
     >
@@ -288,7 +287,6 @@
         </StackLayout>
       </StackLayout>
     </ScrollView>
-    </GridLayout>
   </Page>
 </template>
 
@@ -760,9 +758,7 @@ export default {
     removeInstruction(index) {
       if (this.recipeContent.instructions[index].length) {
         this.fieldDeletionConfirm("instruction").then((res) => {
-          if (res) {
+          res && this.recipeContent.instructions.splice(index, 1)
-            this.recipeContent.instructions.splice(index, 1)
-          }
         })
       } else this.recipeContent.instructions.splice(index, 1)
     },

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) {
+    viewRecipe(recipeID) {
-      let index = this.recipes.indexOf(item)
       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,
         },

app/components/MealPlanner.vue

@@ -13,77 +13,49 @@
         <Label class="title orkm" text="Meal Planner" col="1" />
       </GridLayout>
     </ActionBar>
-    <AbsoluteLayout>
+    <ScrollView
-      <TabView width="100%" height="100%">
+      width="100%"
-        <TabViewItem title="Today">
+      height="100%"
-          <ScrollView>
+      scrollBarIndicatorVisible="false"
-            <StackLayout>
+      @scroll="onScroll"
-              <Label text="Today" textWrap="true" />
+    >
-            </StackLayout>
+      <StackLayout class="mealPlanner">
-          </ScrollView>
+        <RadCalendar ref="calendar" @dateSelected="onDateSelected">
-        </TabViewItem>
+        </RadCalendar>
-        <TabViewItem title="Tomorrow">
+        <StackLayout
-          <ScrollView>
+          v-for="(meal, indexB) in mealTimes"
-            <StackLayout>
+          :key="'meal' + indexB"
-              <Label text="Today" textWrap="true" />
+          class="dayContainer"
-            </StackLayout>
+          :class="meal"
-          </ScrollView>
+        >
-        </TabViewItem>
+          <GridLayout columns="*, auto" class="header">
-        <TabViewItem title="In 2 days">
+            <Label col="0" class="periodLabel orkm" :text="meal" />
-          <ScrollView>
+            <MDButton
-            <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"
+              variant="text"
-          @tap="recipeTried"
+              class="bx addMeal"
-          v-if="filterTrylater"
+              :text="icon.plus"
             />
-        <transition name="dolly" appear>
-          <MDFloatingActionButton
-            row="1"
-            col="1"
-            src="res://share"
-            @tap="shareHandler"
-            v-if="!filterTrylater && showFab"
-          />
-        </transition>
           </GridLayout>
-    </AbsoluteLayout>
+          <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")

app/components/ViewRecipe.vue

@@ -39,16 +39,16 @@
             :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
             @tap="toggleFavorite"
           />
-          <!-- <MDButton
+          <MDButton
-            variant="text"
             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()
     },
 

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

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)
     },

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",

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",