enrecipes/app/components/sub/Timer.vue
2021-06-15 16:34:42 +05:30

283 lines
7.4 KiB
Vue

<template>
<RGridLayout
:rtl="RTL"
rows="auto, auto"
columns="auto, *, auto, auto, auto"
class="timer"
>
<Button
class="ico min rtl"
:text="done ? icon.ring : timer.isPaused ? icon.start : icon.pause"
@tap="!done && toggleProgress()"
/>
<StackLayout
col="1"
class="info"
:colSpan="timer.isPaused || !timer.preset ? 1 : 2"
>
<RLabel :text="timer.label" class="tb title tw a" />
<RLabel
:hidden="!timer.recipeID && done"
@touch="!done && touch($event)"
:text="getRecipeTitle"
class="a"
:class="timer.recipeID ? 'sub' : 'accent'"
/>
<RLabel
:text="
progress == 0
? countUp
? getCount
: formattedTime(timer.time)
: getCount
"
/>
</StackLayout>
<Button
col="2"
class="ico rtl"
:hidden="(!timer.isPaused && timer.preset) || done || countUp"
:text="isReset || timer.preset ? icon.reset : icon.addTo"
@tap="isReset || timer.preset ? resetTimer() : addPreset()"
/>
<Button
col="3"
class="ico"
@tap="countUp ? addPreset() : addDelay()"
:text="countUp ? icon.addTo : icon.delay"
/>
<Button
col="4"
class="ico min"
:text="icon.x"
@tap="removeTimer(timer.id, done)"
/>
<Progress @loaded="pLoaded" row="1" colSpan="5" />
</RGridLayout>
</template>
<script>
import { ApplicationSettings } from "@nativescript/core";
import { localize } from "@nativescript/localize";
import { mapState, mapActions } from "vuex";
import ActionWithSearch from "../modals/ActionWithSearch";
import ViewRecipe from "../ViewRecipe";
import * as utils from "~/shared/utils";
import { EvtBus } from "~/main";
export default {
props: [
"timer",
"formattedTime",
"removeTimer",
"togglePause",
"timerAlert",
"showToast",
],
data() {
return {
pBar: 0,
count: 0,
delay: 0,
progress: 0,
};
},
computed: {
...mapState(["icon", "recipes", "timerDelay", "timerPresets", "RTL"]),
getRecipeTitle() {
let { recipeID } = this.timer;
if (recipeID) {
let recipe = this.recipes.filter((e) => e.id == this.timer.recipeID)[0];
if (recipe) return recipe.title;
else {
this.timer.recipeID = null;
return localize("fwr");
}
} else return localize("fwr");
},
done() {
return this.timer.done;
},
countUp() {
return this.timer.mode == 0;
},
isReset() {
return this.timer.isPaused && this.progress != 0;
},
getTotalTime() {
return this.delay + this.actualTime;
},
actualTime() {
let t = this.timer.time.split(":");
return +t[0] * 60 * 60 + +t[1] * 60 + +t[2];
},
getCount() {
let c = this.count;
let s = Math.abs(c);
return (
(c < 0 ? "-" : "") +
new Date(s * 1000)
.toISOString()
.slice(
s < 10
? 18
: s < 60
? 17
: s < 600
? 15
: s < 3600
? 14
: s < 36000
? 12
: s < 86400
? 11
: 0,
19
)
);
},
},
methods: {
...mapActions([
"removeActiveTimer",
"addTimerPreset",
"deleteTimerPreset",
"sortActiveTimers",
]),
pLoaded({ object }) {
this.pBar = object.android;
this.pBar.setRotation(
this.RTL && utils.sysRTL() ? 0 : this.RTL || utils.sysRTL() ? 180 : 0
);
this.initTimer();
},
viewRecipe(recipeID) {
this.$navigateTo(ViewRecipe, {
props: {
recipeID,
},
});
},
attachRecipe() {
this.$showModal(ActionWithSearch, {
props: {
title: "selRec",
recipes: this.recipes,
action: "aNBtn",
},
}).then((res) => {
if (res == "aNBtn") {
this.$navigateTo(EditRecipe, {
animated: false,
});
} else if (res) {
let timer = this.timer;
timer.recipeID = res;
this.sortActiveTimers();
}
});
},
setNum(type, val) {
ApplicationSettings.setNumber(`${this.timer.id}${type}`, val);
},
setProgress() {
this.progress = 100 - (this.count / this.getTotalTime) * 100;
this.pBar.setProgress(this.progress, true);
},
initTimer() {
this.resetInterval();
this.setProgress();
!this.timer.isPaused && this.pBar.setIndeterminate(this.countUp);
if (this.progress < 100 || !this.timer.timerInt) {
this.timer.timerInt = setInterval(() => {
if (!this.timer.isPaused) {
this.setNum("c", this.countUp ? this.count++ : --this.count);
this.setProgress();
} else this.resetInterval();
if (this.progress >= 100 && this.count >= 0) {
this.timer.done = 1;
this.timerAlert();
}
}, 1000);
}
},
resetInterval() {
clearInterval(this.timer.timerInt);
this.timer.timerInt = 0;
this.pBar.setIndeterminate(false);
},
resetTimer() {
this.count = this.actualTime;
this.progress = this.delay = this.timer.done = 0;
ApplicationSettings.remove(`${this.timer.id}d`);
this.setNum("c", this.count);
this.toggleProgress(1);
this.pBar.setProgress(0, true);
},
toggleProgress(n) {
this.togglePause(this.timer, n);
this.timer.isPaused ? this.resetInterval() : this.initTimer();
},
addPreset() {
let exist = this.timerPresets.some((e) => e.id == this.timer.id);
this.timer.preset = 1;
if (this.countUp) {
this.timer.time = new Date(this.count * 1000)
.toISOString()
.substr(11, 8);
}
let timer = JSON.parse(JSON.stringify(this.timer));
let { recipeID, timerInt, isPaused, preset, done, mode, ...presetTimer } =
timer;
this.addTimerPreset(presetTimer);
exist ? this.showToast("prstTU") : this.showToast("aTPrst");
},
addDelay() {
this.timer.done = 0;
let td = this.timerDelay;
let delayDur =
this.getLocaleN(td) + " " + localize(td > 1 ? "minutes" : "minute");
this.showToast(localize("wDBy", this.timer.label, delayDur));
let delay = td * 60;
if (this.done) this.delay = delay;
else this.delay += delay;
if (this.count >= 0) this.count += delay;
else this.count = this.delay;
this.setNum("d", this.delay);
this.setNum("c", this.count);
this.resetInterval();
this.initTimer();
this.timerAlert();
},
// HELPERS
touch({ object, action }) {
let classes = object.className;
classes = action.match(/down|move/)
? !classes.includes("fade")
? classes + " fade"
: classes
: classes.replace(/ fade/g, "");
if (action == "up") this.attachRecipe();
},
},
created() {
this.delay = ApplicationSettings.getNumber(`${this.timer.id}d`, 0);
this.count = ApplicationSettings.getNumber(
`${this.timer.id}c`,
this.actualTime
);
let bID = "timer" + this.timer.id;
EvtBus.$off(bID);
EvtBus.$on(bID, (e) => {
switch (e) {
case "delay":
this.addDelay();
break;
case "dismiss":
this.removeTimer(this.timer.id, 1);
break;
}
});
},
};
</script>