enrecipes/app/components/CookingTimer.vue

474 lines
13 KiB
Vue
Raw Normal View History

2021-05-22 08:56:31 +00:00
<template>
2021-06-15 11:04:42 +00:00
<Page @loaded="pgLoad" @unloaded="pgUnload" actionBarHidden="true">
2021-05-22 08:56:31 +00:00
<GridLayout rows="*, auto" columns="*">
<ScrollView
2021-06-15 11:04:42 +00:00
@scroll="svScroll($event)"
2021-05-22 08:56:31 +00:00
rowSpan="2"
scrollBarIndicatorVisible="false"
>
<StackLayout>
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" rows="auto" columns="*, auto, 12">
<RLabel class="pageTitle" :text="'timer' | L" />
<Button col="1" class="ico" :text="icon.cog" @tap="navigateTo" />
</RGridLayout>
2021-05-25 14:32:53 +00:00
<Timer
2021-06-15 11:04:42 +00:00
v-for="timer in activeTimers"
:key="timer.id + key"
2021-05-22 08:56:31 +00:00
:timer="timer"
:formattedTime="formattedTime"
:removeTimer="removeTimer"
:togglePause="togglePause"
2021-06-15 11:04:42 +00:00
:timerAlert="timerAlert"
:showToast="showToast"
2021-05-22 08:56:31 +00:00
/>
<StackLayout class="listSpace"> </StackLayout>
</StackLayout>
</ScrollView>
2021-06-15 11:04:42 +00:00
<GridLayout v-if="!activeTimers.length" rows="*, auto">
<StackLayout row="1" class="emptyState">
<RLabel class="title" :text="'ccwt' | L" />
<RLabel :text="'plsAdd' | L" />
</StackLayout>
</GridLayout>
<RGridLayout
:rtl="RTL"
2021-05-22 08:56:31 +00:00
row="1"
2021-06-15 11:04:42 +00:00
@loaded="abLoad"
2021-05-22 08:56:31 +00:00
class="appbar"
:hidden="showUndo"
columns="auto, *, auto"
>
2021-06-15 11:04:42 +00:00
<Button class="ico rtl" :text="icon.back" @tap="navigateBack" />
2021-05-22 08:56:31 +00:00
<Button class="ico fab" :text="icon.plus" @tap="addTimer" col="2" />
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-05-25 14:32:53 +00:00
<SnackBar
:hidden="!showUndo || toast"
:count="countdown"
:msg="snackMsg"
:undo="undoDel"
:action="hideBar"
2021-06-15 11:04:42 +00:00
:onload="sbLoad"
2021-05-25 14:32:53 +00:00
/>
2021-06-15 11:04:42 +00:00
<Toast :onload="tbLoad" :toast="toast" :action="hideBar" />
2021-05-22 08:56:31 +00:00
</GridLayout>
</Page>
</template>
2021-05-25 14:32:53 +00:00
<script lang="ts">
2021-05-22 08:56:31 +00:00
import { localize } from "@nativescript/localize";
import {
Observable,
CoreTypes,
Application,
2021-05-25 14:32:53 +00:00
Utils,
Device,
2021-06-15 11:04:42 +00:00
Frame,
2021-05-22 08:56:31 +00:00
} from "@nativescript/core";
2021-06-15 11:04:42 +00:00
import {
getNumber,
setNumber,
remove,
} from "@nativescript/core/application-settings";
2021-05-22 08:56:31 +00:00
import { mapState, mapActions } from "vuex";
2021-06-15 11:04:42 +00:00
import EnRecipes from "./EnRecipes.vue";
2021-05-25 14:32:53 +00:00
import Action from "./modals/Action.vue";
import CTSettings from "./settings/CTSettings.vue";
import TimePickerHMS from "./modals/TimePickerHMS.vue";
import TimerReminder from "./modals/TimerReminder.vue";
2021-05-25 14:32:53 +00:00
import Timer from "./sub/Timer.vue";
import Toast from "./sub/Toast.vue";
import SnackBar from "./sub/SnackBar.vue";
import * as utils from "~/shared/utils";
2021-06-15 11:04:42 +00:00
import { EvtBus } from "~/main";
let barTimer;
declare const com, android: any;
2021-05-22 08:56:31 +00:00
export default {
2021-05-25 14:32:53 +00:00
components: { Timer, Toast, SnackBar },
2021-05-22 08:56:31 +00:00
props: ["recipeID"],
data() {
return {
scrollPos: 1,
appbar: null,
2021-06-15 11:04:42 +00:00
toastbar: null,
snackbar: null,
scrollView: null,
2021-05-22 08:56:31 +00:00
countdown: 5,
snackMsg: null,
2021-06-15 11:04:42 +00:00
showUndo: 0,
undo: 0,
2021-05-25 14:32:53 +00:00
toast: null,
2021-06-15 11:04:42 +00:00
key: 99,
2021-05-22 08:56:31 +00:00
};
},
computed: {
...mapState([
"icon",
"recipes",
"timerSound",
"timerVibrate",
"timerPresets",
"activeTimers",
2021-06-15 11:04:42 +00:00
"FGService",
"RTL",
2021-05-22 08:56:31 +00:00
]),
2021-06-15 11:04:42 +00:00
hasBackStack() {
return Frame.topmost().backStack.length;
},
2021-05-22 08:56:31 +00:00
},
methods: {
...mapActions([
"addActiveTimer",
"removeActiveTimer",
"clearTimerInterval",
"addTimerPreset",
"updateActiveTimer",
2021-06-15 11:04:42 +00:00
"setFGService",
2021-05-22 08:56:31 +00:00
]),
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
if (this.activeTimers.filter((e: any) => e.done).length)
this.openReminder();
this.keepScreenOnCountUp();
setNumber("isTimer", 1);
2021-05-22 08:56:31 +00:00
},
2021-06-15 11:04:42 +00:00
pgUnload() {
utils.keepScreenOn(0);
},
abLoad({ object }) {
2021-05-22 08:56:31 +00:00
this.appbar = object;
},
2021-06-15 11:04:42 +00:00
tbLoad({ object }) {
this.toastbar = object;
},
sbLoad({ object }) {
this.snackbar = object;
},
svScroll(args) {
this.scrollView = args.object;
2021-05-22 08:56:31 +00:00
let scrollUp;
let y = args.scrollY;
if (y) {
scrollUp = y < this.scrollPos;
this.scrollPos = Math.abs(y);
let ab = this.appbar.translateY;
if (!scrollUp && ab == 0) {
this.appbar.animate({
translate: { x: 0, y: 64 },
2021-06-15 11:04:42 +00:00
duration: 200,
2021-05-22 08:56:31 +00:00
curve: CoreTypes.AnimationCurve.ease,
});
} else if (scrollUp && ab == 64) {
this.appbar.animate({
translate: { x: 0, y: 0 },
2021-06-15 11:04:42 +00:00
duration: 200,
2021-05-22 08:56:31 +00:00
curve: CoreTypes.AnimationCurve.ease,
});
}
}
},
2021-06-15 11:04:42 +00:00
2021-05-22 08:56:31 +00:00
// HELPERS
getRecipeTitle(id) {
let recipe = this.recipes.filter((e) => e.id === id)[0];
return recipe ? recipe.title : `[ ${localize("resNF")} ]`;
},
formattedTime(time) {
let hr = localize("hr");
let min = localize("min");
let sec = localize("sec");
let t = time.split(":");
let h = parseInt(t[0]);
let m = parseInt(t[1]);
let s = parseInt(t[2]);
let hasHrs = h ? `${h} ${hr}` : "";
let hasMins = m ? `${h ? " " : ""}${m} ${min}` : "";
let hasSecs = s ? `${h || m ? " " : ""}${s} ${sec}` : "";
return hasHrs + hasMins + hasSecs;
},
// NOTIFICATION HANDLERS
2021-06-15 11:04:42 +00:00
timerInfo() {
2021-05-22 08:56:31 +00:00
let activeCount = this.activeTimers.length;
let pausedCount = this.activeTimers.filter((e) => e.isPaused).length;
let ongoingCount = activeCount - pausedCount;
2021-06-15 11:04:42 +00:00
this.foregroundService(activeCount);
function show() {
utils.TimerNotif.show({
bID: "info",
cID: "cti",
cName: "Cooking Timer info",
description: localize("oAP", ongoingCount + "", pausedCount),
nID: 6,
priority: -2,
sound: null,
title: localize("timer"),
});
}
if (this.FGService)
setTimeout(() => this.activeTimers.length && show(), 250);
this.keepScreenOnCountUp();
utils.wakeLock(ongoingCount);
2021-05-22 08:56:31 +00:00
},
2021-06-15 11:04:42 +00:00
timerAlert() {
let title, description, bID;
let firedTimers = this.activeTimers.filter((e) => e.done);
let timer = firedTimers[0];
if (firedTimers.length > 1) {
title = localize("texp", firedTimers.length);
description = localize("ttv");
bID = "alerts";
} else if (firedTimers.length == 1) {
title =
timer.label +
(timer.recipeID ? " - " + this.getRecipeTitle(timer.recipeID) : "");
description = this.formattedTime(timer.time);
bID = "timer" + timer.id;
} else {
utils.TimerNotif.clear(7);
return;
}
2021-05-25 14:32:53 +00:00
utils.TimerNotif.show({
2021-06-15 11:04:42 +00:00
actions: 1,
2021-05-22 08:56:31 +00:00
bID,
2021-05-25 14:32:53 +00:00
cID: "cta",
cName: "Cooking Timer alerts",
2021-06-15 11:04:42 +00:00
description,
multi: firedTimers.length > 1,
nID: 7,
2021-05-22 08:56:31 +00:00
priority: 1,
sound: this.timerSound.uri,
2021-06-15 11:04:42 +00:00
title,
2021-05-22 08:56:31 +00:00
vibrate: this.timerVibrate,
});
2021-06-15 11:04:42 +00:00
if (firedTimers.length == 1) {
Application.android.registerBroadcastReceiver(bID, (ctx, intent) => {
EvtBus.$emit(bID, intent.getStringExtra("action"));
Application.android.unregisterBroadcastReceiver(bID);
});
} else {
Application.android.unregisterBroadcastReceiver(bID);
Application.android.registerBroadcastReceiver(bID, (ctx, intent) => {
if (intent.getStringExtra("action") == "dismissAll") {
firedTimers.forEach((t) => this.removeTimer(t.id, 1));
Application.android.unregisterBroadcastReceiver(bID);
}
});
}
},
2021-06-15 11:04:42 +00:00
openReminder() {
this.clearTimerInterval();
this.$showModal(TimerReminder, {
fullscreen: true,
props: {
formattedTime: this.formattedTime,
removeTimer: this.removeTimer,
togglePause: this.togglePause,
timerAlert: this.timerAlert,
showToast: this.showToast,
},
}).then(() => {
this.clearTimerInterval();
this.key = Math.floor(Math.random() * 900) + 100;
});
2021-05-22 08:56:31 +00:00
},
2021-06-15 11:04:42 +00:00
foregroundService(n) {
2021-05-25 14:32:53 +00:00
const ctx = Utils.ad.getApplicationContext();
const intent = new android.content.Intent(
ctx,
com.tns.ForegroundService.class
);
2021-06-15 11:04:42 +00:00
if (n && !this.FGService) {
parseInt(Device.sdkVersion) < 26
? ctx.startService(intent)
: ctx.startForegroundService(intent);
2021-06-15 11:04:42 +00:00
this.setFGService(1);
setNumber("FGService", 1);
} else if (!this.activeTimers.length) {
ctx.stopService(intent);
this.setFGService(0);
setNumber("FGService", 0);
}
2021-05-25 14:32:53 +00:00
},
2021-05-22 08:56:31 +00:00
// DATA HANDLERS
addTimer() {
2021-05-25 14:32:53 +00:00
this.$showModal(TimePickerHMS, {
2021-05-22 08:56:31 +00:00
props: {
title: "ntmr",
label: `${localize("tmr", this.activeTimers.length + 1)}`,
action: "strtBtn",
showPreset: this.timerPresets.length,
},
}).then((res) => {
if (res) {
if (res == "presets") {
let list = this.timerPresets.map(
(e) => `${e.label} - ${this.formattedTime(e.time)}`
);
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2021-05-22 08:56:31 +00:00
props: {
2021-06-15 11:04:42 +00:00
title: "prsts",
2021-05-22 08:56:31 +00:00
list,
},
}).then((preset) => {
if (preset) {
let timer = JSON.parse(
JSON.stringify(this.timerPresets[list.indexOf(preset)])
);
2021-06-15 11:04:42 +00:00
timer.id = utils.getRandomID(1);
timer.recipeID = this.recipeID;
timer.timerInt = timer.isPaused = 0;
timer.preset = timer.mode = 1;
2021-05-22 08:56:31 +00:00
this.addActiveTimer({
timer,
2021-06-15 11:04:42 +00:00
i: this.activeTimers.length,
2021-05-22 08:56:31 +00:00
});
2021-06-15 11:04:42 +00:00
this.timerInfo();
2021-05-22 08:56:31 +00:00
}
});
} else {
2021-06-15 11:04:42 +00:00
let mode = res.time != "00:00:00" ? 1 : 0;
this.addActiveTimer({
timer: {
id: utils.getRandomID(1),
label: res.label,
recipeID: this.recipeID,
time: res.time,
timerInt: 0,
isPaused: 0,
preset: 0,
done: 0,
mode,
},
i: this.activeTimers.length,
});
this.timerInfo();
2021-05-22 08:56:31 +00:00
}
}
});
},
2021-06-15 11:04:42 +00:00
removeTimer(id, noUndo) {
let i = this.activeTimers.findIndex((e) => e.id == id);
let temp = this.activeTimers[i];
clearInterval(temp.timerInt);
temp.timerInt = 0;
this.removeActiveTimer(i);
let secs = [getNumber(`${temp.id}c`, 0), getNumber(`${temp.id}d`, 0)];
function removeSettings() {
remove(`${temp.id}c`);
remove(`${temp.id}d`);
}
removeSettings();
2021-05-22 08:56:31 +00:00
if (!noUndo) {
2021-06-15 11:04:42 +00:00
this.showUndoBar("tmrRm")
2021-05-22 08:56:31 +00:00
.then(() => {
2021-06-15 11:04:42 +00:00
setNumber(`${temp.id}c`, secs[0]),
setNumber(`${temp.id}d`, secs[1]),
this.addActiveTimer({
timer: temp,
i,
});
this.timerInfo();
2021-05-22 08:56:31 +00:00
})
2021-06-15 11:04:42 +00:00
.catch(() => removeSettings());
2021-05-22 08:56:31 +00:00
}
2021-06-15 11:04:42 +00:00
this.timerAlert();
this.timerInfo();
2021-05-22 08:56:31 +00:00
},
2021-06-15 11:04:42 +00:00
togglePause(timer, n) {
timer.isPaused =
typeof n === "number" ? n : (!timer.isPaused as boolean | 0);
2021-05-22 08:56:31 +00:00
this.updateActiveTimer(timer);
2021-06-15 11:04:42 +00:00
n ? 0 : this.timerInfo();
2021-05-22 08:56:31 +00:00
},
2021-05-25 14:32:53 +00:00
showToast(data) {
2021-06-15 11:04:42 +00:00
this.animateBar(this.snackbar, 0);
this.animateBar(this.appbar, 0).then(() => {
this.showUndo = 0;
this.toast = localize(data);
this.animateBar(this.toastbar, 1);
let a = 5;
clearInterval(barTimer);
barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
2021-05-25 14:32:53 +00:00
});
},
2021-05-22 08:56:31 +00:00
showUndoBar(message) {
return new Promise((resolve, reject) => {
2021-06-15 11:04:42 +00:00
this.animateBar(this.toastbar, 0);
this.animateBar(this.appbar, 0).then(() => {
2021-05-25 14:32:53 +00:00
this.toast = null;
2021-06-15 11:04:42 +00:00
this.showUndo = 1;
this.snackMsg = message;
this.countdown = 5;
this.animateBar(this.snackbar, 1).then(() => {
let a = 5;
clearInterval(barTimer);
barTimer = setInterval(() => {
if (this.undo) {
this.hideBar();
resolve(1);
}
this.countdown = Math.round((a -= 0.1));
if (this.countdown < 1) {
this.hideBar();
reject(1);
}
}, 100);
2021-05-22 08:56:31 +00:00
});
});
2021-06-15 11:04:42 +00:00
});
},
hideBar() {
clearInterval(barTimer);
this.animateBar(this.toast ? this.toastbar : this.snackbar, 0).then(
() => {
this.showUndo = this.undo = 0;
this.toast = null;
this.animateBar(this.appbar, 1);
}
);
2021-05-22 08:56:31 +00:00
},
undoDel() {
2021-06-15 11:04:42 +00:00
this.undo = 1;
},
//NAVIGATION HANDLERS
navigateTo() {
this.$navigateTo(CTSettings, {
transition: {
name: this.RTL ? "slideRight" : "slide",
duration: 200,
curve: "easeOut",
},
});
},
navigateBack() {
setNumber("isTimer", 0);
this.hasBackStack
? this.$navigateBack()
: this.$navigateTo(EnRecipes, {
clearHistory: true,
});
2021-05-22 08:56:31 +00:00
},
// HELPERS
2021-06-15 11:04:42 +00:00
keepScreenOnCountUp() {
utils.keepScreenOn(
this.activeTimers.filter((e: any) => !e.isPaused).length
);
2021-05-22 08:56:31 +00:00
},
},
created() {
this.clearTimerInterval();
2021-06-15 11:04:42 +00:00
this.recipeID && this.addTimer();
},
destroyed() {
setNumber("isTimer", 0);
2021-05-22 08:56:31 +00:00
},
};
</script>