enrecipes/app/components/Settings.vue

107 lines
2.6 KiB
Vue
Raw Normal View History

2020-09-15 11:10:16 +00:00
<template>
2021-04-01 10:55:35 +00:00
<Page @loaded="onPageLoad" actionBarHidden="true">
<GridLayout rows="*, auto" columns="auto, *">
<ListView
colSpan="2"
rowSpan="2"
class="options-list"
for="item in items"
>
<v-template if="$index == 0">
<Label class="pageTitle" :text="'Settings' | L" />
</v-template>
2021-04-12 18:09:48 +00:00
<v-template if="$index == 6">
2021-04-01 10:55:35 +00:00
<StackLayout class="listSpace"> </StackLayout>
</v-template>
2021-03-21 17:02:04 +00:00
<v-template>
<GridLayout
columns="auto, *"
2021-04-01 10:55:35 +00:00
class="option"
@touch="touch($event, item.view)"
2021-03-21 17:02:04 +00:00
>
2021-02-28 15:10:26 +00:00
<Label
2021-03-21 17:02:04 +00:00
verticalAlignment="center"
2021-04-01 10:55:35 +00:00
class="ico"
2021-03-21 17:02:04 +00:00
:text="icon[item.icon]"
2021-02-28 15:10:26 +00:00
/>
2021-03-21 17:02:04 +00:00
<Label verticalAlignment="center" col="1" :text="item.title | L" />
</GridLayout>
</v-template>
</ListView>
2021-04-01 10:55:35 +00:00
<GridLayout row="1" class="appbar" rows="*" columns="auto, *">
2021-04-12 18:09:48 +00:00
<Button class="ico" :text="icon.back" @tap="$navigateBack()" />
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-03-21 17:02:04 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
</Page>
2020-09-15 11:10:16 +00:00
</template>
<script>
2021-03-21 17:02:04 +00:00
import { Observable } from "@nativescript/core";
2021-02-28 15:10:26 +00:00
import { mapState, mapActions } from "vuex";
2021-03-21 17:02:04 +00:00
import Interface from "./Settings/Interface.vue";
import Options from "./Settings/Options.vue";
import Database from "./Settings/Database.vue";
import Reset from "./Settings/Reset.vue";
import About from "./Settings/About.vue";
2020-09-15 11:10:16 +00:00
export default {
data() {
return {
2021-03-21 17:02:04 +00:00
items: [
2021-04-01 10:55:35 +00:00
{},
2021-03-21 17:02:04 +00:00
{
2021-04-12 18:09:48 +00:00
icon: "interface",
2021-03-21 17:02:04 +00:00
title: "intf",
view: Interface,
},
{
2021-04-12 18:09:48 +00:00
icon: "opts",
2021-03-21 17:02:04 +00:00
title: "opts",
view: Options,
},
{
2021-04-12 18:09:48 +00:00
icon: "db",
2021-03-21 17:02:04 +00:00
title: "db",
view: Database,
},
{
icon: "reset",
title: "rest",
view: Reset,
},
{
icon: "info",
title: "About",
view: About,
},
2021-04-01 10:55:35 +00:00
{},
2021-03-21 17:02:04 +00:00
],
2021-02-28 15:10:26 +00:00
};
2020-09-15 11:10:16 +00:00
},
2020-10-14 19:32:32 +00:00
computed: {
2021-03-21 17:02:04 +00:00
...mapState(["icon"]),
2020-10-14 19:32:32 +00:00
},
2020-09-15 11:10:16 +00:00
methods: {
2021-04-01 10:55:35 +00:00
...mapActions(["setComponent"]),
2021-02-28 15:10:26 +00:00
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
2021-04-01 10:55:35 +00:00
this.setComponent("Settings");
2020-09-15 11:10:16 +00:00
},
2021-03-21 17:02:04 +00:00
// HELPERS
navigateTo(view) {
2021-04-01 10:55:35 +00:00
this.$navigateTo(view, {
transition: {
name: "slide",
duration: 200,
curve: "easeOut",
},
});
},
touch({ object, action }, view) {
object.className = action.match(/down|move/) ? "option fade" : "option";
if (action == "up") this.navigateTo(view);
2021-02-28 15:10:26 +00:00
},
2020-09-15 11:10:16 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-09-15 11:10:16 +00:00
</script>