michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

formatted

Browse source
This commit is contained in:
Vishnu Raghav B 2020-09-15 23:34:33 +05:30
parent 85e0fcbe7f
commit fe6d6d1d60
8 changed files with 134 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/components/App.vue
View file

@ -55,7 +55,9 @@
:key="index"
orientation="horizontal"
class="drawer-item orkm"
:class="{ 'selected-drawer-item': selectedCategory == item }"
:class="{
'selected-drawer-item': selectedCategory == item,
}"
>
<Label class="bx" :text="icon.label" margin="0 24 0 0" />
<Label :text="item" />
@ -71,7 +73,9 @@
:key="index"
orientation="horizontal"
class="drawer-item orkm"
:class="{ 'selected-drawer-item': currentComponent == item.title }"
:class="{
'selected-drawer-item': currentComponent == item.title,
}"
>
<Label class="bx" :text="item.icon" margin="0 24 0 0" />
<Label :text="item.title" />
@ -127,7 +131,7 @@
col="1"
/>
<Label
v-if="!filterFavorites && currentComponent == 'EnRecipes'"
v-if="currentComponent == 'EnRecipes'"
color="#000000"
class="bx"
:text="icon.search"
@ -156,6 +160,7 @@
:selectedCategory="selectedCategory"
:searchQuery="searchQuery"
:filterFavorites="filterFavorites"
:highlight="highlight"
/>
</GridLayout>
</Page>
@ -288,6 +293,14 @@ export default {
},
},
methods: {
highlight(args) {
console.log(args.object.className)
let temp = args.object.className
args.object.className = `${temp} option-highlight`
setTimeout(() => {
args.object.className = temp
}, 100)
},
setSelectedCategory(e) {
this.selectedCategory = e.item
console.log(e)

72
app/components/EnRecipes.vue
View file

@ -1,7 +1,50 @@
<template>
<AbsoluteLayout>
<ScrollView scrollBarIndicatorVisible="false" width="100%" height="100%">
<StackLayout>
<StackLayout v-if="filteredRecipes.length">
<!-- <RadListView
ref="listView"
for="item in filteredRecipes"
swipeActions="true"
@itemSwipeProgressStarted="onSwipeStarted"
>
<v-template>
<StackLayout class="item p-t-10" orientation="vertical">
<Label :text="item.name" class="nameLabel"></Label>
<Label :text="item.description" class="descriptionLabel"></Label>
</StackLayout>
</v-template>
<v-template name="itemswipe">
<GridLayout columns="auto, *, auto" backgroundColor="White">
<StackLayout
id="mark-view"
col="0"
class="swipe-item left"
orientation="horizontal"
@tap="onLeftSwipeClick"
>
<Label
text="mark"
verticalAlignment="center"
horizontalAlignment="center"
/>
</StackLayout>
<StackLayout
id="delete-view"
col="2"
class="swipe-item right"
orientation="horizontal"
@tap="onRightSwipeClick"
>
<Label
text="delete"
verticalAlignment="center"
horizontalAlignment="center"
/>
</StackLayout>
</GridLayout>
</v-template>
</RadListView>-->
<GridLayout
v-for="recipe in filteredRecipes"
:key="recipe.id"
@ -24,6 +67,16 @@
</GridLayout>
<StackLayout height="128"></StackLayout>
</StackLayout>
<Label
v-else
class="recipe-list-item"
horizontalAlignment="center"
:text="
`Your search '${searchQuery}' did not match any recipes in this category.`
"
textAlignment="center"
textWrap="true"
/>
</ScrollView>
<GridLayout id="btnFabContainer" rows="*,88" columns="*,88">
<Label
@ -58,16 +111,21 @@ export default {
}, {})
},
filteredRecipes() {
if (this.selectedCategory)
return this.recipesByCategory[this.selectedCategory]
else {
if (this.selectedCategory) {
return this.recipesByCategory[this.selectedCategory].filter((e) => {
if (e.title.toLowerCase().includes(this.searchQuery)) return e
})
} else if (this.filterFavorites) {
console.log("fav")
return this.recipes.filter((e) => {
if (this.filterFavorites) {
if (e.isFavorite) return e
} else {
if (e.isFavorite) {
if (e.title.toLowerCase().includes(this.searchQuery)) return e
}
})
} else {
return this.recipes.filter((e) => {
if (e.title.toLowerCase().includes(this.searchQuery)) return e
})
}
},
},

12
app/components/Favorites.vue
View file

@ -1,12 +0,0 @@
<template>
<AbsoluteLayout>
<Label text="Favorites" textWrap="true" />
</AbsoluteLayout>
</template>
<script>
export default {};
</script>
<style>
</style>

8
app/components/Settings.vue
View file

@ -35,6 +35,7 @@
import { Menu } from "nativescript-menu"
import * as permissions from "nativescript-permissions"
export default {
props: ["highlight"],
data() {
return {
icon: {
@ -75,6 +76,7 @@ export default {
},
methods: {
selectThemes(args) {
this.highlight(args)
let btn = args.object
Menu.popup({
view: btn,
@ -89,6 +91,7 @@ export default {
.catch(console.log)
},
selectBackupDir(args) {
this.highlight(args)
let btn = args.object
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
@ -101,6 +104,7 @@ export default {
},
backupData(args) {
let btn = args.object
this.highlight(args)
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
.then(() => {
@ -112,6 +116,7 @@ export default {
},
restoreData(args) {
let btn = args.object
this.highlight(args)
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
.then(() => {
@ -125,6 +130,9 @@ export default {
}
</script>
<style lang="scss">
.option-highlight {
background-color: #eeeeee;
}
.group-header {
padding: 12;
color: #ff7043;

2
app/main.js
View file

@ -1,5 +1,6 @@
import Vue from "nativescript-vue"
import App from "./components/App"
// import RadListView from "nativescript-ui-listview/vue"
Vue.registerElement(
"CheckBox",
@ -11,6 +12,7 @@ Vue.registerElement(
},
}
)
// Vue.use('RadListView')
// import VueDevtools from 'nativescript-vue-devtools'
// import { TNSFontIcon, fonticon } from 'nativescript-fonticon'

50
package-lock.json generated
View file

@ -1515,6 +1515,11 @@
"readable-stream": "^2.0.6"
}
},
"arg": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"arity-n": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
@ -2079,8 +2084,7 @@
"buffer-from": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
"dev": true
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
},
"buffer-xor": {
"version": "1.0.3",
@ -2919,6 +2923,11 @@
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
"dev": true
},
"diff": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@ -4638,6 +4647,11 @@
}
}
},
"make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"map-age-cleaner": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@ -5191,11 +5205,6 @@
"mkdirp": "^0.5.1"
}
},
"nativescript-material-icons": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/nativescript-material-icons/-/nativescript-material-icons-1.0.3.tgz",
"integrity": "sha1-d/qP23jsCR3EpqeFTnaF6iiVAIw="
},
"nativescript-menu": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/nativescript-menu/-/nativescript-menu-1.1.6.tgz",
@ -5216,6 +5225,15 @@
"resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",
"integrity": "sha512-YbGZApyI84RGSevCmXVD18yGov7/RJyLcIXXx6p2y4WM41hL+uRxyUak/9qLP2vwSSy0bCZKXFoyYwsIcf8EoA=="
},
"nativescript-ui-listview": {
"version": "9.0.2",
"resolved": "https://registry.npmjs.org/nativescript-ui-listview/-/nativescript-ui-listview-9.0.2.tgz",
"integrity": "sha512-FoybUHhD+cHsxQKf9EVyY1f/UWBkqb/B77+aSR6dwyPvRGSYymiEKRemsjBosWwgbOH3oy6gBaHOioYhxHE0AA==",
"requires": {
"nativescript-ui-core": "~4.0.0",
"ts-node": "^8.10.2"
}
},
"nativescript-ui-sidedrawer": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/nativescript-ui-sidedrawer/-/nativescript-ui-sidedrawer-8.0.1.tgz",
@ -7182,7 +7200,6 @@
"version": "0.5.19",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
"dev": true,
"requires": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
@ -7755,6 +7772,18 @@
}
}
},
"ts-node": {
"version": "8.10.2",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
"integrity": "sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==",
"requires": {
"arg": "^4.1.0",
"diff": "^4.0.1",
"make-error": "^1.1.1",
"source-map-support": "^0.5.17",
"yn": "3.1.1"
}
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@ -8484,6 +8513,11 @@
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
},
"yn": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
}
}
}

2
package.json
View file

@ -18,10 +18,10 @@
"@nativescript/theme": "^2.2.1",
"@nstudio/nativescript-checkbox": "^1.0.0",
"nativescript-fonticon": "^2.0.2",
"nativescript-material-icons": "^1.0.3",
"nativescript-menu": "^1.1.6",
"nativescript-permissions": "^1.3.9",
"nativescript-popup": "^1.5.0",
"nativescript-ui-listview": "^9.0.2",
"nativescript-ui-sidedrawer": "^8.0.1",
"nativescript-vue": "^2.6.1",
"tns-core-modules": "^6.5.1",

39
tsconfig.json
View file

@ -1,39 +0,0 @@
{
"compilerOptions": {
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": [
"dom", "es2015"
], /* Specify library files to be included in the compilation. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"noEmitHelpers": true,
"importHelpers": true, /* Import emit helpers from 'tslib'. */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": ".", /* Base directory to resolve non-absolute module names. */
"paths": {
"@/*": [
"app/*"
]
}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"typeRoots": [
"types"
], /* List of folders to include type definitions from. */
"types": [
"node"
], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
"emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"skipLibCheck": true
},
"include": [
"app",
"types"
],
"exclude": [
"node_modules",
"platforms"
]
}