enrecipes/app/components/settings/Options.vue
2021-06-20 23:24:47 +05:30

118 lines
2.8 KiB
Vue

<template>
<Page @loaded="pgLoad" actionBarHidden="true">
<RGridLayout :rtl="RTL" rows="*, auto" columns="auto, *">
<OptionsList title="opts" :items="items" />
<GridLayout
:hidden="toast"
@loaded="abLoad"
row="1"
class="appbar rtl"
rows="*"
columns="auto, *"
>
<Button class="ico end" :text="icon.back" @tap="$navigateBack()" />
</GridLayout>
<Toast :onload="tbLoad" :toast="toast" :action="hideBar" />
<Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
<Label
rowSpan="2"
colSpan="2"
class="edge har rtl f"
@swipe="swipeBack"
/>
</RGridLayout>
</Page>
</template>
<script>
import { Observable } from "@nativescript/core";
import { mapState, mapActions } from "vuex";
import { localize } from "@nativescript/localize";
import OptionsList from "../sub/OptionsList";
import Toast from "../sub/Toast";
import * as utils from "~/shared/utils";
export default {
components: { OptionsList, Toast },
data() {
return {
appbar: null,
toastbar: null,
toast: null,
};
},
computed: {
...mapState(["icon", "shake", "RTL", "edgeS", "awakeV"]),
items() {
return [
{},
{
type: "switch",
icon: "shuf",
title: "sVw",
subTitle: localize("sVwInfo"),
checked: !!this.shake,
action: this.toggleShake,
},
{
type: "switch",
icon: "awake",
title: "ksavr",
subTitle: localize("ksavrInfo"),
checked: !!this.awakeV,
action: this.toggleAwake,
},
{
type: "switch",
icon: "edge",
title: "esgb",
subTitle: localize("esgbInfo"),
checked: !!this.edgeS,
action: this.toggleSwipe,
},
{},
];
},
},
methods: {
...mapActions(["setS", "toggleEdgeS", "toggleAwakeV"]),
pgLoad({ object }) {
object.bindingContext = new Observable();
},
abLoad({ object }) {
this.appbar = object;
},
tbLoad({ object }) {
this.toastbar = object;
},
toggleShake() {
let checked = this.shake;
if (checked && !utils.hasAccelerometer())
this.showToast(localize("noAccSensor"));
else this.setS(+!checked);
},
toggleSwipe() {
this.toggleEdgeS(+!this.edgeS);
},
toggleAwake() {
this.toggleAwakeV(+!this.awakeV);
},
showToast(data) {
this.animateBar(this.appbar, 0).then(() => {
this.toast = data;
this.animateBar(this.toastbar, 1, 1);
utils.timer(5, (val) => !val && this.hideBar());
});
},
hideBar() {
this.animateBar(this.toastbar, 0).then(() => {
this.toast = null;
this.animateBar(this.appbar, 1);
});
},
},
};
</script>