enrecipes/app/components/settings/Options.vue

118 lines
2.8 KiB
Vue
Raw Normal View History

2021-05-25 14:32:53 +00:00
<template>
2021-06-15 11:04:42 +00:00
<Page @loaded="pgLoad" actionBarHidden="true">
<RGridLayout :rtl="RTL" rows="*, auto" columns="auto, *">
2021-05-25 14:32:53 +00:00
<OptionsList title="opts" :items="items" />
<GridLayout
2021-06-15 11:04:42 +00:00
:hidden="toast"
@loaded="abLoad"
2021-05-25 14:32:53 +00:00
row="1"
2021-06-15 11:04:42 +00:00
class="appbar rtl"
2021-05-25 14:32:53 +00:00
rows="*"
columns="auto, *"
>
2021-06-20 17:54:47 +00:00
<Button class="ico end" :text="icon.back" @tap="$navigateBack()" />
2021-05-25 14:32:53 +00:00
</GridLayout>
2021-06-15 11:04:42 +00:00
<Toast :onload="tbLoad" :toast="toast" :action="hideBar" />
2021-06-18 12:52:03 +00:00
<Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
<Label
rowSpan="2"
colSpan="2"
class="edge har rtl f"
@swipe="swipeBack"
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-05-25 14:32:53 +00:00
</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 {
2021-06-15 11:04:42 +00:00
appbar: null,
toastbar: null,
2021-05-25 14:32:53 +00:00
toast: null,
};
},
computed: {
2021-06-18 18:37:01 +00:00
...mapState(["icon", "shake", "RTL", "edgeS", "awakeV"]),
2021-05-25 14:32:53 +00:00
items() {
return [
{},
{
type: "switch",
icon: "shuf",
title: "sVw",
2021-06-15 11:04:42 +00:00
subTitle: localize("sVwInfo"),
checked: !!this.shake,
2021-05-25 14:32:53 +00:00
action: this.toggleShake,
},
2021-06-18 12:52:03 +00:00
{
type: "switch",
icon: "awake",
title: "ksavr",
subTitle: localize("ksavrInfo"),
2021-06-18 18:37:01 +00:00
checked: !!this.awakeV,
2021-06-18 12:52:03 +00:00
action: this.toggleAwake,
},
{
type: "switch",
icon: "edge",
title: "esgb",
subTitle: localize("esgbInfo"),
2021-06-18 18:37:01 +00:00
checked: !!this.edgeS,
2021-06-18 12:52:03 +00:00
action: this.toggleSwipe,
},
2021-05-25 14:32:53 +00:00
{},
];
},
},
methods: {
2021-06-18 18:37:01 +00:00
...mapActions(["setS", "toggleEdgeS", "toggleAwakeV"]),
2021-06-15 11:04:42 +00:00
pgLoad({ object }) {
2021-05-25 14:32:53 +00:00
object.bindingContext = new Observable();
},
2021-06-15 11:04:42 +00:00
abLoad({ object }) {
this.appbar = object;
},
tbLoad({ object }) {
this.toastbar = object;
},
2021-05-25 14:32:53 +00:00
toggleShake() {
2021-06-15 11:04:42 +00:00
let checked = this.shake;
if (checked && !utils.hasAccelerometer())
this.showToast(localize("noAccSensor"));
2021-06-18 18:37:01 +00:00
else this.setS(+!checked);
2021-06-18 12:52:03 +00:00
},
toggleSwipe() {
2021-06-18 18:37:01 +00:00
this.toggleEdgeS(+!this.edgeS);
2021-06-15 11:04:42 +00:00
},
2021-06-18 12:52:03 +00:00
toggleAwake() {
2021-06-18 18:37:01 +00:00
this.toggleAwakeV(+!this.awakeV);
2021-06-18 12:52:03 +00:00
},
2021-06-15 11:04:42 +00:00
showToast(data) {
this.animateBar(this.appbar, 0).then(() => {
this.toast = data;
2021-06-18 12:52:03 +00:00
this.animateBar(this.toastbar, 1, 1);
2021-06-15 11:04:42 +00:00
utils.timer(5, (val) => !val && this.hideBar());
});
},
hideBar() {
this.animateBar(this.toastbar, 0).then(() => {
this.toast = null;
this.animateBar(this.appbar, 1);
});
2021-05-25 14:32:53 +00:00
},
},
};
</script>