added back try later, adding meal planner
This commit is contained in:
Vishnu Raghav B
parent
bb54dd67c9
commit
4621821597
10 changed files with 465 additions and 354 deletions
64
app/app.scss
64
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%;
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -22,10 +22,9 @@
|
|||
<MDActivityIndicator col="2" v-if="imageLoading" :busy="imageLoading" />
|
||||
</GridLayout>
|
||||
</ActionBar>
|
||||
<GridLayout rows="*" columns="*">
|
||||
<ScrollView
|
||||
row="0"
|
||||
col="0"
|
||||
width="100%"
|
||||
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) {
|
||||
this.recipeContent.instructions.splice(index, 1)
|
||||
}
|
||||
res && this.recipeContent.instructions.splice(index, 1)
|
||||
})
|
||||
} else this.recipeContent.instructions.splice(index, 1)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
<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"
|
||||
src="res://check"
|
||||
@tap="recipeTried"
|
||||
v-if="filterTrylater"
|
||||
variant="text"
|
||||
class="bx addMeal"
|
||||
: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")
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
11
app/store.js
11
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)
|
||||
},
|
||||
|
|
|
|||
9
package-lock.json
generated
9
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue