ingredient unit scaling and fraction support
This commit is contained in:
vishnuraghavb
parent
1ed4082af2
commit
fdbc66bbe5
3 changed files with 368 additions and 220 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Page @loaded="pgLoad" @unloaded="onPageUnload" actionBarHidden="true">
|
||||
<Page @loaded="pageL" @unloaded="pageUL" actionBarHidden="true">
|
||||
<GridLayout rows="*, auto, auto" columns="auto, *, auto">
|
||||
<DockLayout stretchLastChild="true" rowSpan="3" colSpan="3">
|
||||
<RGridLayout
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
dock="bottom"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@loaded="onScrollLoad"
|
||||
@scroll="svScroll($event)"
|
||||
@loaded="scrollvL"
|
||||
@scroll="scrollvS($event)"
|
||||
>
|
||||
<StackLayout>
|
||||
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
||||
<StackLayout class="attrT" :hidden="!hasTime(recipe.prepTime)">
|
||||
<RLabel class="sub" :text="'prepT' | L" />
|
||||
<RLabel class="v" :text="formattedTime(recipe.prepTime)" />
|
||||
<RLabel class="v" :text="niceTime(recipe.prepTime)" />
|
||||
</StackLayout>
|
||||
<StackLayout
|
||||
:col="hasTime(recipe.prepTime) ? 1 : 0"
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
:hidden="!hasTime(recipe.cookTime)"
|
||||
>
|
||||
<RLabel class="title sub" :text="'cookT' | L" />
|
||||
<RLabel class="v" :text="formattedTime(recipe.cookTime)" />
|
||||
<RLabel class="v" :text="niceTime(recipe.cookTime)" />
|
||||
</StackLayout>
|
||||
</RGridLayout>
|
||||
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<RLabel class="v" :text="recipe.difficulty | L" />
|
||||
</StackLayout>
|
||||
</RGridLayout>
|
||||
<StackLayout @loaded="onIngsLoad">
|
||||
<StackLayout @loaded="ingCL">
|
||||
<RLabel
|
||||
class="section t2 tb tw"
|
||||
:hidden="!recipe.ingredients.length"
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
/>
|
||||
</RStackLayout>
|
||||
</StackLayout>
|
||||
<StackLayout @loaded="onInsLoad">
|
||||
<StackLayout @loaded="insCL">
|
||||
<RLabel
|
||||
:hidden="!recipe.instructions.length"
|
||||
class="section t2 tb tw"
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
<Button
|
||||
:hidden="!item.type"
|
||||
class="tb t3 ico si"
|
||||
:text="getInsPos(i)"
|
||||
:text="localeN(getInsPos[i])"
|
||||
/>
|
||||
<RLabel
|
||||
class="v tw"
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
</RStackLayout>
|
||||
</StackLayout>
|
||||
<RLabel
|
||||
@loaded="onCmbLoad"
|
||||
@loaded="cmbCL"
|
||||
:hidden="!recipe.combinations.length"
|
||||
class="section t2 tb tw"
|
||||
:text="getTitleCount('cmbs', 'combinations')"
|
||||
|
|
@ -165,16 +165,16 @@
|
|||
@tap="viewCombination(combination)"
|
||||
/>
|
||||
<RLabel
|
||||
@loaded="onNosTLoad"
|
||||
@loaded="notesCTL"
|
||||
:hidden="!recipe.notes.length"
|
||||
class="section t2 tb tw"
|
||||
:text="getTitleCount('nos', 'notes')"
|
||||
/>
|
||||
<StackLayout @loaded="onNosLoad"> </StackLayout>
|
||||
<StackLayout @loaded="notesCL"> </StackLayout>
|
||||
<Label
|
||||
padding="32 16 16"
|
||||
class="lh4 t5 sub tw"
|
||||
:text="getDates().uc"
|
||||
:text="getDates.uc"
|
||||
/>
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
</DockLayout>
|
||||
<GridLayout
|
||||
row="1"
|
||||
@loaded="sbload"
|
||||
@loaded="sidebarL"
|
||||
class="appbar toolbar"
|
||||
:col="RTL ? 0 : 2"
|
||||
rows="auto, auto, auto, auto"
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
:rtl="RTL"
|
||||
row="2"
|
||||
colSpan="3"
|
||||
@loaded="abLoad"
|
||||
@loaded="appbarL"
|
||||
class="appbar"
|
||||
:hidden="toast"
|
||||
columns="auto, *, auto, auto, auto, auto"
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
<Toast
|
||||
row="2"
|
||||
colSpan="3"
|
||||
:onload="tbLoad"
|
||||
:onload="toastL"
|
||||
:toast="toast"
|
||||
:action="hideBar"
|
||||
/>
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
@tap="closePhoto"
|
||||
backgroundColor="black"
|
||||
stretch="aspectFit"
|
||||
@loaded="onImgViewLoad"
|
||||
@loaded="imgVLoad"
|
||||
:src="recipe.image"
|
||||
class="imgV"
|
||||
/>
|
||||
|
|
@ -352,7 +352,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["icon", "recipes", "RTL", "awakeV"]),
|
||||
...mapState(["icon", "recipes", "RTL", "awakeV", "mSystem"]),
|
||||
tempYieldQuantity() {
|
||||
return Math.abs(this.yieldMultiplier) > 0
|
||||
? Math.abs(parseFloat(this.yieldMultiplier))
|
||||
|
|
@ -382,10 +382,32 @@ export default {
|
|||
getTags() {
|
||||
return this.recipe.tags.join(" · ");
|
||||
},
|
||||
getDates() {
|
||||
let r = this.recipe;
|
||||
let u = `${localize("Last updated")}: ${this.intlDate(r.lastModified)}`;
|
||||
let c = `${localize("Created")}: ${this.intlDate(r.created)}`;
|
||||
return {
|
||||
u,
|
||||
c,
|
||||
uc: u + "\n" + c,
|
||||
};
|
||||
},
|
||||
getInsPos() {
|
||||
let a = 1;
|
||||
let b = 1;
|
||||
let ins = this.recipe.instructions;
|
||||
return ins.reduce((acc, e) => {
|
||||
if (!e.type) {
|
||||
a = 1;
|
||||
acc.push(b++);
|
||||
} else acc.push(a++);
|
||||
return acc;
|
||||
}, []);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["toggleState", "setR"]),
|
||||
pgLoad({ object }) {
|
||||
pageL({ object }) {
|
||||
this.busyDup = this.busyEdit = this.photoOpen = 0;
|
||||
object.bindingContext = new Observable();
|
||||
if (this.yieldMultiplier == this.recipe.yieldQuantity)
|
||||
|
|
@ -394,50 +416,56 @@ export default {
|
|||
this.syncCombinations();
|
||||
this.view = object.page.getViewById("printview");
|
||||
},
|
||||
onPageUnload() {
|
||||
pageUL() {
|
||||
utils.keepScreenOn(0);
|
||||
if (this.recipeTried) this.markTried();
|
||||
},
|
||||
sbload({ object }) {
|
||||
sidebarL({ object }) {
|
||||
this.sidebar = object;
|
||||
},
|
||||
abLoad({ object }) {
|
||||
appbarL({ object }) {
|
||||
this.appbar = object;
|
||||
},
|
||||
tbLoad({ object }) {
|
||||
toastL({ object }) {
|
||||
this.toastbar = object;
|
||||
this.recipe.lastTried && this.showLastTried();
|
||||
},
|
||||
wvLoad({ object }) {
|
||||
this.wv = object;
|
||||
utils.updateLocale();
|
||||
},
|
||||
onIngsLoad({ object }) {
|
||||
ingCL({ object }) {
|
||||
this.ingcon = object;
|
||||
},
|
||||
onInsLoad({ object }) {
|
||||
insCL({ object }) {
|
||||
this.inscon = object;
|
||||
},
|
||||
onCmbLoad({ object }) {
|
||||
cmbCL({ object }) {
|
||||
this.cmbcon = object;
|
||||
},
|
||||
onNosTLoad({ object }) {
|
||||
this.notesT = object;
|
||||
},
|
||||
onNosLoad({ object }) {
|
||||
notesCL({ object }) {
|
||||
this.notescon = object;
|
||||
this.createNotes();
|
||||
},
|
||||
onScrollLoad(args) {
|
||||
notesCTL({ object }) {
|
||||
this.notesT = object;
|
||||
},
|
||||
|
||||
// ScrollView
|
||||
scrollvL(args) {
|
||||
this.scrollview = args.object;
|
||||
},
|
||||
onImgViewLoad({ object }) {
|
||||
this.imgView = object;
|
||||
this.imgView.visibility = "collapsed";
|
||||
this.imgView.top = 24;
|
||||
this.imgView.left = this.RTL ? 16 : Screen.mainScreen.widthDIPs - 112;
|
||||
scrollvS({ object, scrollY }) {
|
||||
let swipeUp: boolean;
|
||||
let y = scrollY;
|
||||
if (y) {
|
||||
swipeUp = y > this.scrollPos;
|
||||
this.scrollPos = Math.abs(y);
|
||||
this.fixTitle(object, swipeUp);
|
||||
if (!this.toast) {
|
||||
let ab = this.appbar.translateY;
|
||||
if (swipeUp && ab == 0) this.hideBars();
|
||||
else if (!swipeUp && ab == 64) this.showBars();
|
||||
}
|
||||
}
|
||||
},
|
||||
fixTitle(object, swipeUp: boolean): void {
|
||||
fixTitle(object, swipeUp: boolean) {
|
||||
let ingL = this.recipe.ingredients.length;
|
||||
let insL = this.recipe.instructions.length;
|
||||
let cmbL = this.recipe.combinations.length;
|
||||
|
|
@ -475,39 +503,35 @@ export default {
|
|||
setVisibleTitle(0);
|
||||
}
|
||||
},
|
||||
svScroll({ object, scrollY }) {
|
||||
let swipeUp: boolean;
|
||||
let y = scrollY;
|
||||
if (y) {
|
||||
swipeUp = y > this.scrollPos;
|
||||
this.scrollPos = Math.abs(y);
|
||||
this.fixTitle(object, swipeUp);
|
||||
if (!this.toast) {
|
||||
let ab = this.appbar.translateY;
|
||||
if (swipeUp && ab == 0) this.hideBars();
|
||||
else if (!swipeUp && ab == 64) this.showBars();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// AppBars
|
||||
showBars() {
|
||||
this.animateBar(this.appbar, 1);
|
||||
},
|
||||
hideBar() {
|
||||
clearInterval(barTimer);
|
||||
this.animateBar(this.toastbar, 0).then(() => {
|
||||
this.toast = null;
|
||||
this.photoOpen
|
||||
? (this.appbar.opacity = 1)
|
||||
: this.animateBar(this.appbar, 1);
|
||||
});
|
||||
},
|
||||
hideBars() {
|
||||
this.showTools && this.toggleTools();
|
||||
this.animateBar(this.appbar, 0);
|
||||
},
|
||||
getInsPos(n) {
|
||||
let a = 1;
|
||||
let b = 1;
|
||||
let ins = this.recipe.instructions;
|
||||
let group = ins.reduce((acc, e) => {
|
||||
if (!e.type) {
|
||||
a = 1;
|
||||
acc.push(b++);
|
||||
} else acc.push(a++);
|
||||
return acc;
|
||||
}, []);
|
||||
return this.localeN(group[n]);
|
||||
showLastTried() {
|
||||
this.animateBar(this.appbar, 0).then(() => {
|
||||
this.toast = localize(
|
||||
"triedInfo",
|
||||
this.niceDate(this.recipe.lastTried)
|
||||
);
|
||||
this.animateBar(this.toastbar, 1, 1);
|
||||
let a = 10;
|
||||
clearInterval(barTimer);
|
||||
barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
|
||||
});
|
||||
},
|
||||
|
||||
// Helpers
|
||||
|
|
@ -533,13 +557,144 @@ export default {
|
|||
return localize(title) + text;
|
||||
},
|
||||
getIng(o) {
|
||||
return `${
|
||||
this.roundedQuantity(o.quantity)
|
||||
? this.roundedQuantity(o.quantity) + " "
|
||||
: ""
|
||||
}${this.roundedQuantity(o.quantity) ? localize(o.unit) + " " : ""}${
|
||||
o.value
|
||||
}`;
|
||||
let q = o.quantity;
|
||||
return `${q ? this.scaleUnit(q, o.unit) : ""}${o.value}`;
|
||||
},
|
||||
roundQ(q: number) {
|
||||
return Math.abs(
|
||||
Math.round(
|
||||
(q / this.recipe.yieldQuantity) * this.tempYieldQuantity * 100
|
||||
) / 100
|
||||
);
|
||||
},
|
||||
metric(q, u) {
|
||||
switch (u) {
|
||||
case "mg":
|
||||
if (q / 1000 >= 1) {
|
||||
q = q / 1000;
|
||||
u = "g";
|
||||
}
|
||||
case "g":
|
||||
if (q / 1000 >= 1) {
|
||||
q = q / 1000;
|
||||
u = "kg";
|
||||
}
|
||||
break;
|
||||
case "ml":
|
||||
if (q / 1000 >= 1) {
|
||||
q = q / 1000;
|
||||
u = "l";
|
||||
}
|
||||
break;
|
||||
case "pinch":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "tsp";
|
||||
}
|
||||
case "tsp":
|
||||
if (q / 3 >= 1) {
|
||||
q = q / 3;
|
||||
u = "tbsp";
|
||||
}
|
||||
case "tbsp":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "cup";
|
||||
}
|
||||
break;
|
||||
case "cup":
|
||||
if (q / 4.16 >= 1) {
|
||||
q = q / 4.16;
|
||||
u = "l";
|
||||
}
|
||||
break;
|
||||
}
|
||||
return { q, u };
|
||||
},
|
||||
imperial(q, u) {
|
||||
switch (u) {
|
||||
case "pinch":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "tsp";
|
||||
}
|
||||
case "tsp":
|
||||
if (q / 3 >= 1) {
|
||||
q = q / 3;
|
||||
u = "tbsp";
|
||||
} else if (q / 2 >= 1) {
|
||||
q = q / 2;
|
||||
u = "dsp";
|
||||
}
|
||||
case "dsp":
|
||||
if (q / 1.5 >= 1) {
|
||||
q = q / 1.5;
|
||||
u = "tbsp";
|
||||
}
|
||||
case "tbsp":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "cup";
|
||||
}
|
||||
break;
|
||||
case "fl oz":
|
||||
if (q / 8 >= 1) {
|
||||
q = q / 8;
|
||||
u = "cup";
|
||||
}
|
||||
break;
|
||||
case "cup":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "gal";
|
||||
} else if (q / 4 >= 1) {
|
||||
q = q / 4;
|
||||
u = "qt";
|
||||
} else if (q / 2 >= 1) {
|
||||
q = q / 2;
|
||||
u = "pt";
|
||||
}
|
||||
case "oz":
|
||||
if (q / 16 >= 1) {
|
||||
q = q / 16;
|
||||
u = "lb";
|
||||
}
|
||||
case "pt":
|
||||
if (q / 2 >= 1) {
|
||||
q = q / 2;
|
||||
u = "qt";
|
||||
}
|
||||
case "qt":
|
||||
if (q / 4 >= 1) {
|
||||
q = q / 4;
|
||||
u = "gal";
|
||||
}
|
||||
}
|
||||
return { q, u };
|
||||
},
|
||||
fraction(num) {
|
||||
let arr = [0, 0.125, 0.25, 0.333, 0.375, 0.5, 0.666, 0.75, 0.875, 1];
|
||||
let brr = [0, "⅛", "¼", "⅓", "⅜", "½", "⅔", "¾", "⅞", 1];
|
||||
let dec = Math.trunc(num);
|
||||
let n = Number((num - Math.floor(num)).toFixed(2));
|
||||
let closest = arr.reduce((acc, e) =>
|
||||
Math.abs(e - n) < Math.abs(acc - n) ? e : acc
|
||||
);
|
||||
let f = brr[arr.indexOf(closest)];
|
||||
return f == 0 ? num : f == 1 ? dec + 1 : (dec ? dec + " " : "") + f;
|
||||
},
|
||||
scaleUnit(quantity, unit) {
|
||||
quantity =
|
||||
(quantity / this.recipe.yieldQuantity) * this.tempYieldQuantity;
|
||||
let { q, u } =
|
||||
this.mSystem == "mtrc"
|
||||
? this.metric(quantity, unit)
|
||||
: this.imperial(quantity, unit);
|
||||
let rounded = Math.abs(Math.round(q * 100) / 100);
|
||||
if (true) {
|
||||
rounded = this.fraction(rounded);
|
||||
}
|
||||
return `${rounded} ${localize(u)} `;
|
||||
},
|
||||
changeYield() {
|
||||
this.$showModal(Prompt, {
|
||||
|
|
@ -555,6 +710,14 @@ export default {
|
|||
hasTime(time) {
|
||||
return time != "00:00";
|
||||
},
|
||||
niceTime(time) {
|
||||
let t = time.split(":");
|
||||
let h = parseInt(t[0]);
|
||||
let m = parseInt(t[1]);
|
||||
let hr = localize("hr");
|
||||
let min = localize("min");
|
||||
return h ? (m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}`) : `${m} ${min}`;
|
||||
},
|
||||
niceDate(lastTried) {
|
||||
let now = new Date().getTime();
|
||||
let midnight = new Date().setHours(0, 0, 0, 0);
|
||||
|
|
@ -574,43 +737,7 @@ export default {
|
|||
(dayDiff > 365 && duration("ltAgo"))
|
||||
);
|
||||
},
|
||||
showLastTried() {
|
||||
this.animateBar(this.appbar, 0).then(() => {
|
||||
this.toast = localize(
|
||||
"triedInfo",
|
||||
this.niceDate(this.recipe.lastTried)
|
||||
);
|
||||
this.animateBar(this.toastbar, 1, 1);
|
||||
let a = 10;
|
||||
clearInterval(barTimer);
|
||||
barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
|
||||
});
|
||||
},
|
||||
hideBar() {
|
||||
clearInterval(barTimer);
|
||||
this.animateBar(this.toastbar, 0).then(() => {
|
||||
this.toast = null;
|
||||
this.photoOpen
|
||||
? (this.appbar.opacity = 1)
|
||||
: this.animateBar(this.appbar, 1);
|
||||
});
|
||||
},
|
||||
roundedQuantity(quantity: number) {
|
||||
return Math.abs(
|
||||
Math.round(
|
||||
(quantity / this.recipe.yieldQuantity) * this.tempYieldQuantity * 100
|
||||
) / 100
|
||||
);
|
||||
},
|
||||
formattedTime(time) {
|
||||
let t = time.split(":");
|
||||
let h = parseInt(t[0]);
|
||||
let m = parseInt(t[1]);
|
||||
let hr = localize("hr");
|
||||
let min = localize("min");
|
||||
return h ? (m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}`) : `${m} ${min}`;
|
||||
},
|
||||
formattedDate(date) {
|
||||
intlDate(date) {
|
||||
return new Intl.DateTimeFormat(null, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
|
|
@ -619,78 +746,6 @@ export default {
|
|||
minute: "numeric",
|
||||
}).format(new Date(date));
|
||||
},
|
||||
getCombinationTitle(id) {
|
||||
return this.recipes.filter((e) => e.id === id)[0].title;
|
||||
},
|
||||
syncCombinations() {
|
||||
let combinationForOtherRecipes = this.recipes
|
||||
.filter(
|
||||
(e) =>
|
||||
e.combinations.indexOf(this.currentRecipeID) >= 0 ||
|
||||
this.recipe.combinations.includes(e.id)
|
||||
)
|
||||
.map((e) => e.id);
|
||||
this.recipe.combinations = combinationForOtherRecipes;
|
||||
// this.overwriteRecipeAction({
|
||||
// id: this.currentRecipeID,
|
||||
// recipe: this.recipe,
|
||||
// });
|
||||
},
|
||||
touchIngredient({ object, action }, index) {
|
||||
this.touchFade(object, action);
|
||||
if (action == "up") this.checkChange(object, index);
|
||||
},
|
||||
checkChange(obj, index) {
|
||||
this.checks[index] = !this.checks[index];
|
||||
if (this.checks[index]) {
|
||||
this.checked++;
|
||||
obj.getChildAt(0).text = this.icon.check;
|
||||
} else {
|
||||
this.checked--;
|
||||
obj.getChildAt(0).text = this.icon.uncheck;
|
||||
}
|
||||
},
|
||||
clearChecks() {
|
||||
this.checked = 0;
|
||||
this.checks = [];
|
||||
for (let i = 1; i < this.ingcon.getChildrenCount(); i++) {
|
||||
this.ingcon.getChildAt(i).getChildAt(0).text = this.icon.uncheck;
|
||||
}
|
||||
},
|
||||
touchInstruction({ object, action }) {
|
||||
let hasDone = object.className.includes("done");
|
||||
if (!hasDone) this.touchFade(object, action);
|
||||
if (action == "up") this.stepDone(object);
|
||||
},
|
||||
stepDone(object) {
|
||||
let a = object;
|
||||
if (a.className.includes("done")) {
|
||||
a.className = "check";
|
||||
this.stepsDid--;
|
||||
} else {
|
||||
a.className = "check done";
|
||||
this.stepsDid++;
|
||||
}
|
||||
},
|
||||
clearSteps() {
|
||||
this.stepsDid = 0;
|
||||
for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
|
||||
this.inscon.getChildAt(i).className = "check";
|
||||
}
|
||||
},
|
||||
getDates() {
|
||||
let u = `${localize("Last updated")}: ${this.formattedDate(
|
||||
this.recipe.lastModified
|
||||
)}`;
|
||||
let c = `${localize("Created")}: ${this.formattedDate(
|
||||
this.recipe.created
|
||||
)}`;
|
||||
return {
|
||||
u,
|
||||
c,
|
||||
uc: u + "\n" + c,
|
||||
};
|
||||
},
|
||||
|
||||
// NavigationHandlers
|
||||
hijackBackEvent() {
|
||||
|
|
@ -719,6 +774,20 @@ export default {
|
|||
animated: false,
|
||||
});
|
||||
},
|
||||
|
||||
// Combinations
|
||||
getCombinationTitle(id) {
|
||||
return this.recipes.filter((e) => e.id === id)[0].title;
|
||||
},
|
||||
syncCombinations() {
|
||||
this.recipe.combinations = this.recipes
|
||||
.filter(
|
||||
(e) =>
|
||||
e.combinations.indexOf(this.currentRecipeID) >= 0 ||
|
||||
this.recipe.combinations.includes(e.id)
|
||||
)
|
||||
.map((e) => e.id);
|
||||
},
|
||||
viewCombination(combination) {
|
||||
this.hideBar();
|
||||
this.scrollview.scrollToVerticalOffset(0, true);
|
||||
|
|
@ -793,9 +862,9 @@ export default {
|
|||
if (r.tags.length)
|
||||
overview += `${localize("ts")}: ${r.tags.join(", ")}\n`;
|
||||
if (r.prepTime != "00:00")
|
||||
overview += `${localize("prepT")}: ${this.formattedTime(r.prepTime)}\n`;
|
||||
overview += `${localize("prepT")}: ${this.niceTime(r.prepTime)}\n`;
|
||||
if (r.cookTime != "00:00")
|
||||
overview += `${localize("cookT")}: ${this.formattedTime(r.cookTime)}\n`;
|
||||
overview += `${localize("cookT")}: ${this.niceTime(r.cookTime)}\n`;
|
||||
overview += `${localize("yld")}: ${this.tempYieldQuantity} ${localize(
|
||||
r.yieldUnit
|
||||
)}\n${localize("Difficulty level")}: ${localize(r.difficulty)}\n`;
|
||||
|
|
@ -807,19 +876,13 @@ export default {
|
|||
if (e.type) {
|
||||
ingredients += `- ${
|
||||
e.quantity
|
||||
? this.roundedQuantity(e.quantity) +
|
||||
" " +
|
||||
localize(e.unit) +
|
||||
" "
|
||||
? this.roundQ(e.quantity) + " " + localize(e.unit) + " "
|
||||
: ""
|
||||
}${e.value}\n`;
|
||||
} else {
|
||||
ingredients += `\n${
|
||||
e.quantity
|
||||
? this.roundedQuantity(e.quantity) +
|
||||
" " +
|
||||
localize(e.unit) +
|
||||
" "
|
||||
? this.roundQ(e.quantity) + " " + localize(e.unit) + " "
|
||||
: ""
|
||||
}${e.value}\n\n`;
|
||||
}
|
||||
|
|
@ -863,7 +926,7 @@ export default {
|
|||
utils.shareText(shareContent, localize("sru"));
|
||||
},
|
||||
|
||||
// DataHandlers
|
||||
// Toggles
|
||||
toggle(key: string, setDate: number) {
|
||||
console.log(setDate);
|
||||
if (setDate) {
|
||||
|
|
@ -891,6 +954,39 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
toggleCheck(obj, index) {
|
||||
this.checks[index] = !this.checks[index];
|
||||
if (this.checks[index]) {
|
||||
this.checked++;
|
||||
obj.getChildAt(0).text = this.icon.check;
|
||||
} else {
|
||||
this.checked--;
|
||||
obj.getChildAt(0).text = this.icon.uncheck;
|
||||
}
|
||||
},
|
||||
clearChecks() {
|
||||
this.checked = 0;
|
||||
this.checks = [];
|
||||
for (let i = 1; i < this.ingcon.getChildrenCount(); i++) {
|
||||
this.ingcon.getChildAt(i).getChildAt(0).text = this.icon.uncheck;
|
||||
}
|
||||
},
|
||||
toggleStep(object) {
|
||||
let a = object;
|
||||
if (a.className.includes("done")) {
|
||||
a.className = "check";
|
||||
this.stepsDid--;
|
||||
} else {
|
||||
a.className = "check done";
|
||||
this.stepsDid++;
|
||||
}
|
||||
},
|
||||
clearSteps() {
|
||||
this.stepsDid = 0;
|
||||
for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
|
||||
this.inscon.getChildAt(i).className = "check";
|
||||
}
|
||||
},
|
||||
|
||||
// Notes
|
||||
createNote(note) {
|
||||
|
|
@ -930,6 +1026,12 @@ export default {
|
|||
},
|
||||
|
||||
// PhotoViewer
|
||||
imgVLoad({ object }) {
|
||||
this.imgView = object;
|
||||
this.imgView.visibility = "collapsed";
|
||||
this.imgView.top = 24;
|
||||
this.imgView.left = this.RTL ? 16 : Screen.mainScreen.widthDIPs - 112;
|
||||
},
|
||||
viewPhoto() {
|
||||
this.hideBars();
|
||||
this.photoOpen = 1;
|
||||
|
|
@ -1015,6 +1117,10 @@ export default {
|
|||
},
|
||||
|
||||
// Print
|
||||
wvLoad({ object }) {
|
||||
this.wv = object;
|
||||
utils.updateLocale(); // required to set local RTL and language in webview
|
||||
},
|
||||
prepareHTML() {
|
||||
let r = this.recipe;
|
||||
const head = `<head><meta charset=UTF-8><meta content="IE=edge"http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1"name=viewport><title>EnRecipes - Recipe for Print</title><style>a,body,div,html,img,ol,p,span,ul{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}@font-face{font-family:Inter-Medium;src:url(../app/fonts/Inter-Medium.otf)}@font-face{font-family:Inter-Bold;src:url(../app/fonts/Inter-Bold.otf)}body{font-family:Inter-Medium,sans-serif;line-height:1.5;max-width:45rem;padding:1.5rem}body>p{padding:.5rem 0}.attr>div>p:last-child,h1,h2,h3{font-family:Inter-Bold,sans-serif}#header{display:grid;grid-column-gap:2rem;grid-template-columns:1fr auto;margin-bottom:2.5rem;width:100%}img{border-radius:1rem;height:8rem;object-fit:cover;width:8rem}h1{font-size:2.25rem;line-height:1.25;margin:0;padding-bottom:1rem}svg{width:2rem;height:2rem;padding:0 .5rem 0 0}h2{margin:2rem 0 1rem}.attr{display:grid;grid-column-gap:2rem;grid-template-columns:1fr 1fr;margin-top:1rem}.attr>div>p:first-child{font-size:.9rem;opacity:.5}ol,ul{padding:0 1.5rem}li{padding:.5rem}a{color:inherit}.sub{font-size:.9rem;margin-top:2rem;opacity:.5}</style></head>`;
|
||||
|
|
@ -1097,13 +1203,13 @@ export default {
|
|||
this.hasTime(r.prepTime) || this.hasTime(r.cookTime)
|
||||
? `<div class=attr>${
|
||||
this.hasTime(r.prepTime)
|
||||
? `<div><p>${localize("prepT")}<p>${this.formattedTime(
|
||||
? `<div><p>${localize("prepT")}<p>${this.niceTime(
|
||||
r.prepTime
|
||||
)}</div>`
|
||||
: ""
|
||||
} ${
|
||||
this.hasTime(r.cookTime)
|
||||
? `<div><p>${localize("cookT")}<p>${this.formattedTime(
|
||||
? `<div><p>${localize("cookT")}<p>${this.niceTime(
|
||||
r.cookTime
|
||||
)}</div>`
|
||||
: ""
|
||||
|
|
@ -1129,9 +1235,9 @@ export default {
|
|||
r.notes.length
|
||||
? `<h2>${this.getTitleCount("nos", "notes", 1)}</h2>`
|
||||
: ""
|
||||
} ${getNotes()}<div class=sub><p>${this.getDates().u}<p>${
|
||||
this.getDates().c
|
||||
}</div>
|
||||
} ${getNotes()}<div class=sub><p>${this.getDates.u}</p><p>${
|
||||
this.getDates.c
|
||||
}</p></div>
|
||||
</body>
|
||||
</html>`;
|
||||
},
|
||||
|
|
@ -1144,7 +1250,7 @@ export default {
|
|||
);
|
||||
},
|
||||
|
||||
// Helpers
|
||||
// FeedBack
|
||||
touchRate({ object, action }, r) {
|
||||
this.touchFade(object, action);
|
||||
if (action == "up") this.rate(r);
|
||||
|
|
@ -1154,6 +1260,15 @@ export default {
|
|||
|
||||
if (action == "up") this.changeYield();
|
||||
},
|
||||
touchIngredient({ object, action }, index) {
|
||||
this.touchFade(object, action);
|
||||
if (action == "up") this.toggleCheck(object, index);
|
||||
},
|
||||
touchInstruction({ object, action }) {
|
||||
let hasDone = object.className.includes("done");
|
||||
if (!hasDone) this.touchFade(object, action);
|
||||
if (action == "up") this.toggleStep(object);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Page @loaded="pgLoad" actionBarHidden="true">
|
||||
<Page @loaded="pageL" actionBarHidden="true">
|
||||
<RGridLayout :rtl="RTL" rows="*, auto" columns="auto, *">
|
||||
<OptionsList title="intf" :items="items" />
|
||||
<GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
|
||||
|
|
@ -32,7 +32,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["icon", "langs", "theme", "layout", "RTL"]),
|
||||
...mapState(["icon", "langs", "theme", "layout", "RTL", "mSystem"]),
|
||||
items() {
|
||||
return [
|
||||
{},
|
||||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
rtl: 0,
|
||||
title: "Theme",
|
||||
subTitle: localize(ApplicationSettings.getString("theme", "sysDef")),
|
||||
action: this.selectThemes,
|
||||
action: this.setTheme,
|
||||
},
|
||||
{
|
||||
type: "list",
|
||||
|
|
@ -60,15 +60,24 @@ export default {
|
|||
subTitle: localize(this.layout),
|
||||
action: this.setLayoutMode,
|
||||
},
|
||||
{
|
||||
type: "list",
|
||||
icon: "layout",
|
||||
rtl: 0,
|
||||
title: "mSystem",
|
||||
subTitle: localize(this.mSystem),
|
||||
action: this.setMSystem,
|
||||
},
|
||||
{},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setT", "setL", "setRTL"]),
|
||||
pgLoad({ object }) {
|
||||
...mapActions(["setT", "setL", "setRTL", "setMS"]),
|
||||
pageL({ object }) {
|
||||
object.bindingContext = new Observable();
|
||||
},
|
||||
|
||||
// LanguageSelection
|
||||
setAppLang() {
|
||||
let languages = this.langs.map((e) => e.title);
|
||||
|
|
@ -96,8 +105,9 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
// ThemeSelection
|
||||
selectThemes() {
|
||||
setTheme() {
|
||||
this.$showModal(Action, {
|
||||
props: {
|
||||
title: "Theme",
|
||||
|
|
@ -116,6 +126,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
// LayoutMode
|
||||
setLayoutMode() {
|
||||
this.$showModal(Action, {
|
||||
|
|
@ -128,6 +139,19 @@ export default {
|
|||
if (mode && this.layout !== mode) this.setL(mode.toLowerCase());
|
||||
});
|
||||
},
|
||||
|
||||
// MeasuringSystem
|
||||
setMSystem() {
|
||||
this.$showModal(Action, {
|
||||
props: {
|
||||
title: "mSystem",
|
||||
list: ["mtrc", "imprl"],
|
||||
selected: this.mSystem,
|
||||
},
|
||||
}).then((sys) => {
|
||||
if (sys && this.mSystem !== sys) this.setMS(sys);
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.applang = ApplicationSettings.getString("applang", "sysDef");
|
||||
|
|
|
|||
39
app/store.ts
39
app/store.ts
|
|
@ -409,8 +409,14 @@ export default new Vuex.Store({
|
|||
planDel: getString('planDel', 'nvr'), // PlanDeletionCriteria
|
||||
edgeS: getNumber('edgeS', 1), // EdgeSwipe
|
||||
awakeV: getNumber('awakeV', 1), // AwakeViewer
|
||||
mSystem: getString('mSystem', 'mtrc'), //MeasuringSystem
|
||||
},
|
||||
mutations: {
|
||||
//SetMeasuringSystem
|
||||
setMS(state, s) {
|
||||
state.mSystem = s
|
||||
setNumber('mSystem', s)
|
||||
},
|
||||
// ToggleKeepAwakeOnRecipeViewer
|
||||
toggleAwakeV(state) {
|
||||
state.awakeV = +!state.awakeV
|
||||
|
|
@ -422,12 +428,12 @@ export default new Vuex.Store({
|
|||
setNumber('edgeS', state.edgeS)
|
||||
},
|
||||
// SetPlanDeletionCriteria
|
||||
setPlanDel(state, s: string) {
|
||||
setPlanDel(state, s) {
|
||||
state.planDel = s
|
||||
setString('planDel', s)
|
||||
},
|
||||
// SetPlannerViewMode
|
||||
setPlannerV(state, s: string) {
|
||||
setPlannerV(state, s) {
|
||||
state.plannerV = s
|
||||
setString('plannerV', s)
|
||||
},
|
||||
|
|
@ -436,7 +442,7 @@ export default new Vuex.Store({
|
|||
state.RTL = getNumber('RTL', 0)
|
||||
},
|
||||
// SetForegroundService
|
||||
setFgS(state, n: number) {
|
||||
setFgS(state, n) {
|
||||
state.FGS = n
|
||||
},
|
||||
// AddTimerPreset
|
||||
|
|
@ -451,7 +457,7 @@ export default new Vuex.Store({
|
|||
)
|
||||
},
|
||||
// DeleteTimerPreset
|
||||
deleteTP(state, n: number) {
|
||||
deleteTP(state, n) {
|
||||
let id = state.timerPs[n]
|
||||
state.timerPs.splice(n, 1)
|
||||
db.execute(`DELETE FROM timerPresets WHERE id = ${id}`)
|
||||
|
|
@ -508,21 +514,21 @@ export default new Vuex.Store({
|
|||
state.activeTs.splice(i, 1, o)
|
||||
},
|
||||
// RemoveActiveTimer
|
||||
removeAT(state, n: number) {
|
||||
removeAT(state, n) {
|
||||
state.activeTs.splice(n, 1)
|
||||
},
|
||||
// SetTimerDelay
|
||||
setTD(state, n: number) {
|
||||
setTD(state, n) {
|
||||
state.timerD = n
|
||||
setNumber('timerD', n)
|
||||
},
|
||||
// SetTimerSound
|
||||
setTS(state, s: string) {
|
||||
setTS(state, s) {
|
||||
state.timerS = s
|
||||
setString('timerS', JSON.stringify(s))
|
||||
},
|
||||
// SetTimerVibrate
|
||||
setTV(state, n: number) {
|
||||
setTV(state, n) {
|
||||
state.timerV = n
|
||||
setNumber('timerV', n)
|
||||
},
|
||||
|
|
@ -531,12 +537,12 @@ export default new Vuex.Store({
|
|||
for (const key in state.impSum) state.impSum[key] = 0
|
||||
},
|
||||
// SetFirstDayMonday
|
||||
setFD(state, n: number) {
|
||||
setFD(state, n) {
|
||||
state.startMon = n
|
||||
setNumber('startMon', n)
|
||||
},
|
||||
// SetTheme
|
||||
setT(state, s: string) {
|
||||
setT(state, s) {
|
||||
switch (s) {
|
||||
case 'sysDef':
|
||||
state.theme =
|
||||
|
|
@ -557,12 +563,12 @@ export default new Vuex.Store({
|
|||
state.selCuisine = state.selCategory = state.selTag = null
|
||||
},
|
||||
// SetLayout
|
||||
setL(state, s: string) {
|
||||
setL(state, s) {
|
||||
state.layout = s
|
||||
setString('layout', s)
|
||||
},
|
||||
// SetSortType
|
||||
setST(state, s: string) {
|
||||
setST(state, s) {
|
||||
state.sortT = s
|
||||
},
|
||||
// InitialiseRecipes
|
||||
|
|
@ -1213,17 +1219,20 @@ export default new Vuex.Store({
|
|||
}
|
||||
})
|
||||
},
|
||||
setCuisine(state, s: string) {
|
||||
setCuisine(state, s) {
|
||||
state.selCuisine = s
|
||||
},
|
||||
setCategory(state, s: string) {
|
||||
setCategory(state, s) {
|
||||
state.selCategory = s
|
||||
},
|
||||
setTag(state, s: string) {
|
||||
setTag(state, s) {
|
||||
state.selTag = s
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setMS({ commit }, s: string) {
|
||||
commit('setMS', s)
|
||||
},
|
||||
toggleAwakeV({ commit }) {
|
||||
commit('toggleAwakeV')
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue