Merge remote-tracking branch 'origin/main' into main

app/components/MealPlanner.vue

@@ -1,8 +1,8 @@
 <template>
-  <Page @loaded="onPageLoad" actionBarHidden="true">
+  <Page @loaded="pgLoad" actionBarHidden="true">
     <GridLayout rows="*, auto" columns="*">
       <ScrollView
-        @scroll="!edit && onScroll($event)"
+        @scroll="!edit && svLoad($event)"
         rowSpan="2"
         scrollBarIndicatorVisible="false"
       >
@@ -24,6 +24,7 @@
             <Button class="ico navBtn" :text="icon.left" @tap="prevMonth" />
             <Label
               class="monthName"
+              @touch="touchMonthYearPicker"
               col="1"
               colSpan="5"
               :text="$options.filters.L(mNames[month]) + ' ' + year"
@@ -91,7 +92,7 @@
                   col="1"
                   class="ico x"
                   :text="icon.x"
-                  @tap="removeRecipe(recipeID, mealType)"
+                  @tap="removeRecipe(mealType, recipeID)"
                 />
               </GridLayout>
             </StackLayout>
@@ -100,7 +101,7 @@
       </ScrollView>
       <GridLayout
         row="1"
-        @loaded="onAppBarLoad"
+        @loaded="abLoad"
         class="appbar"
         :hidden="showUndo"
         columns="auto, *, auto, auto"
@@ -125,7 +126,8 @@
         :count="countdown"
         :msg="snackMsg"
         :undo="undoDel"
-        :action="hideUndoBar"
+        :action="hideBar"
+        :onload="sbLoad"
       />
     </GridLayout>
   </Page>
@@ -137,8 +139,9 @@ import { mapState, mapActions } from "vuex";
 import ViewRecipe from "./ViewRecipe";
 import MPSettings from "./settings/MPSettings";
 import ActionWithSearch from "./modals/ActionWithSearch";
+import MonthYearPicker from "./modals/MonthYearPicker";
 import SnackBar from "./sub/SnackBar";
-let undoTimer;
+let barTimer;
 
 export default {
   components: {
@@ -164,21 +167,23 @@ export default {
         "December",
       ],
       month: 0,
-      today: null,
+      date: null,
       edit: false,
       scrollPos: 1,
       appbar: null,
+      snackbar: null,
       countdown: 5,
       snackMsg: null,
       showUndo: false,
       undo: false,
       MPSettings: MPSettings,
+      temp: 0,
     };
   },
   computed: {
     ...mapState(["icon", "recipes", "mealPlans", "mondayFirst"]),
     todaysTime() {
-      return new Date(this.year, this.month, this.today, 0).getTime();
+      return new Date(this.year, this.month, this.date, 0).getTime();
     },
     getRecipes() {
       if (this.mealPlans.length) {
@@ -200,11 +205,16 @@ export default {
       let m = this.month;
       let ds = new Date(y, m + 1, 0).getDate();
       let fd = new Date(y, m, 1).getDay();
+      let ld = new Date(y, m, ds).getDay();
       if (this.mondayFirst) fd -= 1;
       let days = new Array(fd).fill(0);
-      for (let i = 1; i <= ds; i++) {
+      // let prevDays = Array.from(
-        days.push(i);
+      //   { length: fd },
-      }
+      //   (e, k) => k + new Date(!m ? y - 1 : y, m, 0).getDate() - fd + 1
+      // );
+      // let days = prevDays;
+      for (let i = 1; i <= ds; i++) days.push(i);
+      // for (let i = 1; i <= 6 - ld; i++) days.push(i);
       return days;
     },
     isExactlyToday() {
@@ -212,7 +222,7 @@ export default {
       return (
         this.year == d.getFullYear() &&
         this.month == d.getMonth() &&
-        this.today == d.getDate()
+        this.date == d.getDate()
       );
     },
     mealTimesWithRecipes() {
@@ -227,15 +237,18 @@ export default {
       "addMealPlanAction",
       "deleteMealPlanAction",
     ]),
-    onPageLoad({ object }) {
+    pgLoad({ object }) {
       object.bindingContext = new Observable();
       this.setComponent("MealPlanner");
-      if (!this.today || this.today === new Date().getDate()) this.goToToday();
+      if (!this.date || this.date === new Date().getDate()) this.goToToday();
     },
-    onAppBarLoad({ object }) {
+    abLoad({ object }) {
       this.appbar = object;
     },
-    onScroll(args) {
+    sbLoad({ object }) {
+      this.snackbar = object;
+    },
+    svLoad(args) {
       let scrollUp;
       let y = args.scrollY;
       if (y) {
@@ -286,6 +299,7 @@ export default {
         });
       }
     },
+
     // CALENDAR
     prevMonth() {
       if (this.month == 0) {
@@ -305,7 +319,7 @@ export default {
       let d = new Date();
       this.year = d.getFullYear();
       this.month = d.getMonth();
-      this.today = d.getDate();
+      this.date = d.getDate();
       this.showAppBar();
     },
     isToday(date) {
@@ -317,26 +331,44 @@ export default {
       );
     },
     isActive(date) {
-      return this.today == date;
+      return this.date == date;
     },
     hasPlans(date) {
       let d = new Date(this.year, this.month, date, 0).getTime();
       return this.mealPlans.filter((e) => e.date == d).length;
     },
     setToday(date) {
-      if (date) this.today = date;
+      if (date) this.date = date;
-    },
-    newMealPlan(date, type, title) {
-      this.addMealPlanAction({
-        date: date ? date : this.todaysTime,
-        type,
-        title,
-      });
     },
     toggleEditMode() {
       this.edit = !this.edit;
     },
+    openMonthYearPicker() {
+      this.$showModal(MonthYearPicker, {
+        props: {
+          title: "gtD",
+          monthNames: this.mNames,
+          currentM: this.month,
+          currentY: this.year,
+        },
+      }).then((res) => {
+        if (res) {
+          this.month = res.month;
+          this.year = res.year;
+        }
+      });
+    },
+
     // DATA HANDLERS
+    newMealPlan({ date, type, title, index, inDB }) {
+      this.addMealPlanAction({
+        date: date ? date : this.todaysTime,
+        type,
+        title,
+        index,
+        inDB,
+      });
+    },
     addRecipe(type) {
       let filteredRecipes = this.recipes.filter((e) =>
         this.getRecipes[type] ? !this.getRecipes[type].includes(e.id) : true
@@ -346,64 +378,84 @@ export default {
           title: "selRec",
           recipes: filteredRecipes,
         },
-      }).then((title) => title && this.newMealPlan(null, type, title));
+      }).then(
+        (title) =>
+          title &&
+          this.newMealPlan({ date: 0, type, title, index: null, inDB: true })
+      );
     },
-    removeRecipe(title, type) {
+    deleteTempFromDB() {
+      if (this.temp) {
+        this.temp.inDB = 1;
+        this.deleteMealPlanAction(this.temp);
+        this.temp = 0;
+      }
+    },
+    removeRecipe(type, title) {
+      this.deleteTempFromDB();
       let date = this.todaysTime;
+      let index = this.mealPlans.findIndex(
+        (e) => e.date == date && e.type == type && e.title == title
+      );
       let mealPlan = {
         date,
         type,
         title,
+        index,
       };
+      let temp;
+      this.temp = temp = mealPlan;
       this.deleteMealPlanAction(mealPlan);
-      this.showUndoBar("recRm").then(() => this.newMealPlan(date, type, title));
+      this.showUndoBar("recRm")
+        .then(() => this.newMealPlan({ date, type, title, index }))
+        .catch(() => {
+          temp.inDB = 1;
+          console.log("deleting inDB after catch: ", temp);
+          this.deleteMealPlanAction(temp);
+        });
     },
     showUndoBar(message) {
       return new Promise((resolve, reject) => {
-        clearTimeout(undoTimer);
+        this.animateBar(this.appbar, 0).then(() => {
-        this.showUndo = true;
+          this.showUndo = true;
-        this.snackMsg = message;
+          this.snackMsg = message;
-        this.countdown = 5;
+          this.countdown = 5;
-        let a = 5;
+          this.animateBar(this.snackbar, 1).then(() => {
-        undoTimer = setInterval(() => {
+            let a = 5;
-          if (this.undo) {
+            clearInterval(barTimer);
-            this.showUndo = this.undo = false;
+            barTimer = setInterval(() => {
-            clearTimeout(undoTimer);
+              if (this.undo) {
-            resolve(true);
+                this.hideBar();
-          }
+                resolve(true);
-          this.countdown = Math.round((a -= 0.1));
+              }
-          if (this.countdown < 1) {
+              this.countdown = Math.round((a -= 0.1));
-            this.showUndo = false;
+              if (this.countdown < 1) {
-            clearTimeout(undoTimer);
+                this.hideBar();
-            reject(true);
+                reject(true);
-          }
+              }
-        }, 100);
+            }, 100);
+          });
+        });
       });
     },
-    hideUndoBar({ object }) {
+    hideBar() {
-      object
+      clearInterval(barTimer);
-        .animate({
+      this.animateBar(this.snackbar, 0).then(() => {
-          opacity: 0,
+        this.showUndo = this.undo = false;
-          translate: { x: 0, y: 64 },
+        this.animateBar(this.appbar, 1);
-          duration: 250,
+      });
-          curve: CoreTypes.AnimationCurve.ease,
-        })
-        .then(() => {
-          this.showUndo = false;
-          this.appbar.translateY = 64;
-          this.appbar.animate({
-            translate: { x: 0, y: 0 },
-            duration: 250,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-          object.opacity = 1;
-          object.translateY = 0;
-          clearTimeout(undoTimer);
-        });
     },
     undoDel() {
       this.undo = true;
     },
+
+    //HELPERS
+    touchMonthYearPicker({ object, action }) {
+      object.className = action.match(/down|move/)
+        ? "monthName fade"
+        : "monthName";
+      if (action == "up") this.openMonthYearPicker();
+    },
   },
 };
 </script>

app/i18n/en-GB.default.json

@@ -311,5 +311,14 @@
   "hours": "hours",
   "seconds": "seconds",
   "tmrRm": "Timer removed",
-  "notifSetg": "Notification settings"
+  "notifSetg": "Notification settings",
+  "random": "Random",
+  "gtD": "Go to date",
+  "cwewt": "Cook with ease with timers!",
+  "prstTU": "Preset time updated",
+  "wDBy": "%1$s was delayed by %2$s",
+  "texp": "%s timers expired",
+  "dismiss": "Dismiss",
+  "dismissAll": "Dismiss all timers",
+  "ttv": "Tap to view"
 }