added back try later, adding meal planner

This commit is contained in:
Vishnu Raghav B 2020-11-18 02:51:08 +05:30
parent bb54dd67c9
commit 4621821597
10 changed files with 465 additions and 354 deletions

View file

@ -14,6 +14,11 @@ $gray9: #212529;
$orange: #ff5200; $orange: #ff5200;
$fabRipple: #ff864d; $fabRipple: #ff864d;
$red: #c92a2a; $red: #c92a2a;
$breakfast: #ffb180;
$lunch: #ceff80;
$dinner: #80ceff;
$snacks: #b180ff;
// Global SCSS styling // Global SCSS styling
// @see https://docs.nativescript.org/ui/styling // @see https://docs.nativescript.org/ui/styling
@ -79,11 +84,13 @@ Page,
color: $gray4; color: $gray4;
background: $gray3; background: $gray3;
} }
.count { .count,
.marker {
color: $gray1; color: $gray1;
background: $gray9; background: $gray9;
} }
.instruction { .instruction,
.dayContainer {
border-color: $gray9; border-color: $gray9;
} }
MDProgress { MDProgress {
@ -142,11 +149,13 @@ Page,
color: $gray8; color: $gray8;
background: #111; background: #111;
} }
.count { .count,
.marker {
color: $gray9; color: $gray9;
background: $gray1; background: $gray1;
} }
.instruction { .instruction,
.dayContainer {
border-color: $gray1; border-color: $gray1;
} }
MDProgress { MDProgress {
@ -362,6 +371,7 @@ RadListView {
// ----------------------------- // -----------------------------
// SETTINGS // SETTINGS
.group-header { .group-header {
text-transform: uppercase;
padding: 8; padding: 8;
} }
.main-container { .main-container {
@ -533,6 +543,52 @@ TextField.combinationToken {
border-width: 0; 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 // DIALOGS
.dialogContainer { .dialogContainer {
width: 100%; width: 100%;

View file

@ -32,7 +32,7 @@
<Label col="0" row="0" class="bx" :text="icon[item.icon]" /> <Label col="0" row="0" class="bx" :text="icon[item.icon]" />
<Label col="2" row="0" :text="item.title" /> <Label col="2" row="0" :text="item.title" />
</GridLayout> </GridLayout>
<!-- <StackLayout class="hr m-8"></StackLayout> --> <StackLayout class="hr m-8"></StackLayout>
<GridLayout <GridLayout
rows="48" rows="48"
columns="auto, 24, *" columns="auto, 24, *"
@ -180,11 +180,11 @@ export default {
component: "Favorites", component: "Favorites",
icon: "heart", icon: "heart",
}, },
// { {
// title: "Try Later", title: "Try Later",
// component: "Try Later", component: "Try Later",
// icon: "trylater", icon: "trylater",
// }, },
], ],
bottommenu: [ bottommenu: [
{ {

View file

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

View file

@ -71,7 +71,7 @@
columns="112, *" columns="112, *"
androidElevation="1" androidElevation="1"
> >
<MDRipple colSpan="2" @tap="viewRecipe(recipe)" /> <MDRipple colSpan="2" @tap="viewRecipe(recipe.id)" />
<GridLayout class="imageHolder card" rows="112" columns="112"> <GridLayout class="imageHolder card" rows="112" columns="112">
<Image <Image
row="0" row="0"
@ -361,11 +361,6 @@ export default {
this.showFAB = false this.showFAB = false
this.releaseGlobalBackEvent() this.releaseGlobalBackEvent()
this.$navigateTo(EditRecipe, { this.$navigateTo(EditRecipe, {
// transition: {
// name: "fade",
// duration: 200,
// curve: "easeOut",
// },
props: { props: {
selectedCategory: this.selectedCategory, selectedCategory: this.selectedCategory,
openAppSettingsPage: this.openAppSettingsPage, openAppSettingsPage: this.openAppSettingsPage,
@ -373,8 +368,7 @@ export default {
}, },
}) })
}, },
viewRecipe(item) { viewRecipe(recipeID) {
let index = this.recipes.indexOf(item)
this.showFAB = false this.showFAB = false
this.$navigateTo(ViewRecipe, { this.$navigateTo(ViewRecipe, {
// transition: { // transition: {
@ -384,7 +378,7 @@ export default {
// }, // },
props: { props: {
filterTrylater: this.filterTrylater, filterTrylater: this.filterTrylater,
recipeID: item.id, recipeID,
hijackGlobalBackEvent: this.hijackGlobalBackEvent, hijackGlobalBackEvent: this.hijackGlobalBackEvent,
releaseGlobalBackEvent: this.releaseGlobalBackEvent, releaseGlobalBackEvent: this.releaseGlobalBackEvent,
}, },

View file

@ -13,77 +13,49 @@
<Label class="title orkm" text="Meal Planner" col="1" /> <Label class="title orkm" text="Meal Planner" col="1" />
</GridLayout> </GridLayout>
</ActionBar> </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" 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> </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"> <!-- <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
<StackLayout row="1" class="emptyState"> <StackLayout row="1" class="emptyState">
<Label class="title orkm" text="Coming soon!" textWrap="true" /> <Label class="title orkm" text="Coming soon!" textWrap="true" />
@ -95,12 +67,19 @@
<script> <script>
import { ApplicationSettings, Color } from "@nativescript/core" import { ApplicationSettings, Color } from "@nativescript/core"
import { mapState, mapActions } from "vuex" import { mapState, mapActions } from "vuex"
import ViewRecipe from "./ViewRecipe.vue"
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
export default { export default {
props: ["showDrawer", "releaseGlobalBackEvent"], props: ["showDrawer", "hijackGlobalBackEvent", "releaseGlobalBackEvent"],
data() { data() {
return { return {
viewIsScrolled: false, viewIsScrolled: false,
appTheme: "Light", appTheme: "Light",
mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
} }
}, },
computed: { computed: {
@ -119,8 +98,66 @@ export default {
? (this.viewIsScrolled = true) ? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false) : (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() { created() {
this.appTheme = ApplicationSettings.getString("appTheme", "Light") this.appTheme = ApplicationSettings.getString("appTheme", "Light")

View file

@ -39,16 +39,16 @@
:text="recipe.isFavorite ? icon.heart : icon.heartOutline" :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
@tap="toggleFavorite" @tap="toggleFavorite"
/> />
<!-- <MDButton <MDButton
variant="text"
v-if="!filterTrylater" v-if="!filterTrylater"
variant="text"
class="bx" class="bx"
:text="recipe.tried ? icon.trylaterOutline : icon.trylater" :text="recipe.tried ? icon.trylaterOutline : icon.trylater"
@tap="toggleTrylater" @tap="toggleTrylater"
/> --> />
<MDButton <MDButton
v-else
variant="text" variant="text"
v-if="filterTrylater"
class="bx" class="bx"
:text="icon.share" :text="icon.share"
@tap="shareHandler" @tap="shareHandler"
@ -557,6 +557,7 @@ export default {
"toggleStateAction", "toggleStateAction",
"setCurrentComponentAction", "setCurrentComponentAction",
"overwriteRecipeAction", "overwriteRecipeAction",
"setRecipeAsTriedAction",
]), ]),
onPageLoad() { onPageLoad() {
this.releaseGlobalBackEvent() this.releaseGlobalBackEvent()
@ -781,7 +782,10 @@ export default {
this.toggle("tried") this.toggle("tried")
}, },
recipeTried() { recipeTried() {
this.toggle("tried", true) this.setRecipeAsTriedAction({
id: this.currentRecipeID,
recipe: this.recipe,
})
this.$navigateBack() this.$navigateBack()
}, },

View file

@ -20,6 +20,9 @@ Vue.use(FloatingActionButtonPlugin)
import ProgressPlugin from "@nativescript-community/ui-material-progress/vue" import ProgressPlugin from "@nativescript-community/ui-material-progress/vue"
Vue.use(ProgressPlugin) Vue.use(ProgressPlugin)
import CalendarView from "nativescript-ui-calendar/vue"
Vue.use(CalendarView)
Vue.registerElement( Vue.registerElement(
"RadSideDrawer", "RadSideDrawer",
() => require("nativescript-ui-sidedrawer").RadSideDrawer () => require("nativescript-ui-sidedrawer").RadSideDrawer

View file

@ -334,6 +334,14 @@ export default new Vuex.Store({
if (setDate) state.recipes[index].lastTried = new Date() if (setDate) state.recipes[index].lastTried = new Date()
EnRecipesDB.updateDocument(id, recipe) 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) { setLastTriedDate(state, index) {
state.recipes[index].lastTried = new Date() state.recipes[index].lastTried = new Date()
EnRecipesDB.updateDocument(state.recipes[index].id, state.recipes[index]) EnRecipesDB.updateDocument(state.recipes[index].id, state.recipes[index])
@ -406,6 +414,9 @@ export default new Vuex.Store({
toggleStateAction({ commit }, toggledRecipe) { toggleStateAction({ commit }, toggledRecipe) {
commit("toggleState", toggledRecipe) commit("toggleState", toggledRecipe)
}, },
setRecipeAsTriedAction({ commit }, recipe) {
commit("setRecipeAsTried", recipe)
},
setLastTriedDateAction({ commit }, index) { setLastTriedDateAction({ commit }, index) {
commit("setLastTriedDate", index) commit("setLastTriedDate", index)
}, },

9
package-lock.json generated
View file

@ -5893,6 +5893,15 @@
"resolved": "https://registry.npmjs.org/nativescript-toast/-/nativescript-toast-2.0.0.tgz", "resolved": "https://registry.npmjs.org/nativescript-toast/-/nativescript-toast-2.0.0.tgz",
"integrity": "sha512-xqyNfFS894oGfrEVO7CjpioAQLiLNNcd77Euq9XIUTf1U3W0PsIgAJbLP7+kkVGIJxdLtlBkbcQ4wDmf2DCi1w==" "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": { "nativescript-ui-core": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz", "resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",

View file

@ -24,6 +24,7 @@
"nativescript-imagecropper": "^4.0.1", "nativescript-imagecropper": "^4.0.1",
"nativescript-plugin-filepicker": "^1.0.0", "nativescript-plugin-filepicker": "^1.0.0",
"nativescript-toast": "^2.0.0", "nativescript-toast": "^2.0.0",
"nativescript-ui-calendar": "^7.0.2",
"nativescript-ui-listview": "^9.0.4", "nativescript-ui-listview": "^9.0.4",
"nativescript-ui-sidedrawer": "^9.0.3", "nativescript-ui-sidedrawer": "^9.0.3",
"nativescript-vue": "^2.6.1", "nativescript-vue": "^2.6.1",