enrecipes/app/components/modals/TimePickerHMS.vue

133 lines
3.3 KiB
Vue
Raw Normal View History

2021-05-22 08:56:31 +00:00
<template>
<Page
@loaded="transparentPage"
backgroundColor="transparent"
2021-06-15 11:04:42 +00:00
:class="theme"
2021-05-22 08:56:31 +00:00
>
<GridLayout rows="auto, auto, auto" class="modal">
2021-06-15 11:04:42 +00:00
<RLabel class="title" :text="title | L" />
2021-05-22 08:56:31 +00:00
<StackLayout row="1">
<StackLayout class="input">
<TextField
2021-06-15 11:04:42 +00:00
@loaded="setGravity"
2021-05-22 08:56:31 +00:00
class="modalInput"
v-model="setLabel"
:hint="label"
autocapitalizationType="words"
2021-06-15 11:04:42 +00:00
autocorrect="true"
2021-05-22 08:56:31 +00:00
/></StackLayout>
2021-06-15 11:04:42 +00:00
<RStackLayout
:rtl="RTL"
orientation="horizontal"
horizontalAlignment="center"
>
2021-05-22 08:56:31 +00:00
<ListPicker
@loaded="onLPLoad"
:items="hrsList"
@selectedIndexChange="setHr"
></ListPicker>
<ListPicker
@loaded="onLPLoad"
:items="minsList"
@selectedIndexChange="setMin"
></ListPicker>
<ListPicker
@loaded="onLPLoad"
:items="secsList"
@selectedIndexChange="setSec"
></ListPicker>
2021-06-15 11:04:42 +00:00
</RStackLayout>
2021-05-22 08:56:31 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
<RGridLayout
:rtl="RTL"
row="2"
columns="auto, *, auto, auto"
class="actions r"
>
2021-05-22 08:56:31 +00:00
<Button
v-if="showPreset"
class="text sm"
:text="'prstBtn' | L"
@tap="$modal.close('presets')"
/>
<Button
col="2"
class="text sm"
:text="'cBtn' | L"
2021-06-15 11:04:42 +00:00
@tap="$modal.close(0)"
2021-05-22 08:56:31 +00:00
/>
<Button col="3" class="text sm" :text="action | L" @tap="sendRespose" />
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-05-22 08:56:31 +00:00
</GridLayout>
</Page>
</template>
<script>
import { Utils } from "@nativescript/core";
import { localize } from "@nativescript/localize";
import { mapState } from "vuex";
export default {
props: ["title", "label", "action", "showPreset"],
data() {
return {
hrs: [],
mins: [],
secs: [],
selectedHrs: "00",
selectedMins: "00",
selectedSecs: "00",
setLabel: null,
};
},
computed: {
2021-06-15 11:04:42 +00:00
...mapState(["icon", "theme", "RTL"]),
2021-05-22 08:56:31 +00:00
hrsList() {
let h = [...Array(24).keys()];
this.hrs = h;
return h.map((e) => `${e} ${localize("hr")}`);
},
minsList() {
let m = [...Array(60).keys()];
this.mins = m;
return m.map((e) => `${e} ${localize("min")}`);
},
secsList() {
let s = [...Array(60).keys()];
this.secs = s;
return s.map((e) => `${e} ${localize("sec")}`);
},
selectedTime() {
return `${this.selectedHrs}:${this.selectedMins}:${this.selectedSecs}`;
},
},
methods: {
onLPLoad({ object }) {
object.android.setWrapSelectorWheel(true);
},
setHr(args) {
let hr = "0" + this.hrs[args.object.selectedIndex];
this.selectedHrs = hr.slice(-2);
},
setMin(args) {
let min = "0" + this.mins[args.object.selectedIndex];
this.selectedMins = min.slice(-2);
},
setSec(args) {
let sec = "0" + this.secs[args.object.selectedIndex];
this.selectedSecs = sec.slice(-2);
},
focusField({ object }) {
object.focus();
setTimeout(() => Utils.ad.showSoftInput(object.android), 100);
},
sendRespose() {
this.$modal.close({
label: this.setLabel ? this.setLabel : this.label,
time: this.selectedTime,
});
},
},
};
</script>