save WIP
This commit is contained in:
vabene1111
@ -23,10 +23,36 @@
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && has_ingredients">
|
||||
<div v-for="s in recipe.steps" v-bind:key="s.id">
|
||||
<div v-for="i in s.ingredients" v-bind:key="i.id">
|
||||
<Ingredient v-bind:ingredient="i"></Ingredient>
|
||||
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0">
|
||||
|
||||
<div class="card border-primary">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col col-md-9">
|
||||
<h4 class="card-title">{{ _('Ingredients') }}</h4>
|
||||
</div>
|
||||
<div class="col col-md-3">
|
||||
<div class="input-group d-print-none">
|
||||
<input type="number" value="1" maxlength="3" class="form-control" style="min-width: 2vw"
|
||||
v-model="servings"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text"><i class="fas fa-calculator"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-sm">
|
||||
<div v-for="s in recipe.steps" v-bind:key="s.id">
|
||||
<div v-for="i in s.ingredients" v-bind:key="i.id">
|
||||
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
|
||||
</div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,13 +60,16 @@
|
||||
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
|
||||
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
|
||||
:alt="_( 'Recipe Image')">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="s in recipe.steps" v-bind:key="s.id">
|
||||
<Step v-bind:step="s" v-bind:servings="servings"></Step>
|
||||
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
|
||||
<Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -77,7 +106,7 @@ export default {
|
||||
loading: true,
|
||||
recipe_id: window.RECIPE_ID,
|
||||
recipe: undefined,
|
||||
has_ingredients: false,
|
||||
ingredient_count: 0,
|
||||
servings: 1,
|
||||
}
|
||||
},
|
||||
@ -91,9 +120,8 @@ export default {
|
||||
this.loading = false
|
||||
|
||||
for (let step of this.recipe.steps) {
|
||||
if (step.ingredients.length > 0) {
|
||||
this.has_ingredients = true
|
||||
}
|
||||
this.ingredient_count += step.ingredients.length
|
||||
|
||||
if (step.time !== 0) {
|
||||
this.has_times = true
|
||||
}
|
||||
|
||||
@ -1,20 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="checkbox">
|
||||
{{ingredient.amount}}
|
||||
{{ingredient.unit}}
|
||||
{{ingredient.food}}
|
||||
{{ingredient.note}}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox">
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="ingredient.unit !== null">{{ ingredient.unit.name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="ingredient.food !== null">{{ ingredient.food.name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="ingredient.note">
|
||||
<span v-b-popover.hover="ingredient.note"
|
||||
class="d-print-none"> <i class="far fa-comment"></i>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<div class="d-none d-print-block">
|
||||
<i class="far fa-comment-alt"></i> {{ ingredient.note }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {calculateAmount} from "@/utils/utils";
|
||||
|
||||
export default {
|
||||
name: 'Ingredient',
|
||||
props: {
|
||||
ingredient: Object,
|
||||
servings: Number
|
||||
servings: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calculateAmount: function (x) {
|
||||
return calculateAmount(x, this.servings)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,32 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<div v-for="i in step.ingredients" v-bind:key="i.id">
|
||||
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
|
||||
<h5 class="text-secondary">
|
||||
<template v-if="step.name">{{ step.name }}</template>
|
||||
<template v-else>{{ _('Step') }} {{index + 1}}</template>
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3">
|
||||
<i class="fa fa-stopwatch"></i> {{ step.time }}
|
||||
|
||||
<table>
|
||||
<div v-for="i in step.ingredients" v-bind:key="i.id">
|
||||
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
|
||||
</div>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<i class="fas fa-paragraph text-secondary"></i>
|
||||
{{ step.instruction }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
Servings Step: {{servings}}
|
||||
|
||||
{{ step.instruction }}
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -20,15 +34,20 @@
|
||||
<script>
|
||||
|
||||
import Ingredient from "@/components/Ingredient";
|
||||
import {GettextMixin} from "@/utils/utils";
|
||||
|
||||
export default {
|
||||
name: 'Step',
|
||||
mixins: [
|
||||
GettextMixin,
|
||||
],
|
||||
components: {
|
||||
Ingredient
|
||||
Ingredient,
|
||||
},
|
||||
props: {
|
||||
step: Object,
|
||||
servings: Number,
|
||||
index: Number,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
63
vue/src/utils/fractions.js
Normal file
63
vue/src/utils/fractions.js
Normal file
@ -0,0 +1,63 @@
|
||||
/* frac.js (C) 2012-present SheetJS -- http://sheetjs.com */
|
||||
|
||||
/*https://developer.aliyun.com/mirror/npm/package/frac/v/0.3.0 Apache license*/
|
||||
export function frac(x, D, mixed) {
|
||||
var n1 = Math.floor(x), d1 = 1;
|
||||
var n2 = n1 + 1, d2 = 1;
|
||||
if (x !== n1) while (d1 <= D && d2 <= D) {
|
||||
var m = (n1 + n2) / (d1 + d2);
|
||||
if (x === m) {
|
||||
if (d1 + d2 <= D) {
|
||||
d1 += d2;
|
||||
n1 += n2;
|
||||
d2 = D + 1;
|
||||
} else if (d1 > d2) d2 = D + 1;
|
||||
else d1 = D + 1;
|
||||
break;
|
||||
} else if (x < m) {
|
||||
n2 = n1 + n2;
|
||||
d2 = d1 + d2;
|
||||
} else {
|
||||
n1 = n1 + n2;
|
||||
d1 = d1 + d2;
|
||||
}
|
||||
}
|
||||
if (d1 > D) {
|
||||
d1 = d2;
|
||||
n1 = n2;
|
||||
}
|
||||
if (!mixed) return [0, n1, d1];
|
||||
var q = Math.floor(n1 / d1);
|
||||
return [q, n1 - q * d1, d1];
|
||||
}
|
||||
|
||||
export function cont(x, D, mixed) {
|
||||
var sgn = x < 0 ? -1 : 1;
|
||||
var B = x * sgn;
|
||||
var P_2 = 0, P_1 = 1, P = 0;
|
||||
var Q_2 = 1, Q_1 = 0, Q = 0;
|
||||
var A = Math.floor(B);
|
||||
while (Q_1 < D) {
|
||||
A = Math.floor(B);
|
||||
P = A * P_1 + P_2;
|
||||
Q = A * Q_1 + Q_2;
|
||||
if ((B - A) < 0.00000005) break;
|
||||
B = 1 / (B - A);
|
||||
P_2 = P_1;
|
||||
P_1 = P;
|
||||
Q_2 = Q_1;
|
||||
Q_1 = Q;
|
||||
}
|
||||
if (Q > D) {
|
||||
if (Q_1 > D) {
|
||||
Q = Q_2;
|
||||
P = P_2;
|
||||
} else {
|
||||
Q = Q_1;
|
||||
P = P_1;
|
||||
}
|
||||
}
|
||||
if (!mixed) return [0, sgn * P, Q];
|
||||
var q = Math.floor(sgn * P / Q);
|
||||
return [q, sgn * P - q * Q, Q];
|
||||
}
|
||||
@ -61,4 +61,38 @@ export const ResolveUrlMixin = {
|
||||
|
||||
export function resolveDjangoUrl(url, params) {
|
||||
return window.Urls[url](params)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* other utilities
|
||||
* */
|
||||
|
||||
export function getUserPreference(pref) {
|
||||
return window.USER_PREF[pref]
|
||||
}
|
||||
|
||||
import {frac} from "@/utils/fractions";
|
||||
|
||||
export function calculateAmount(amount, factor) {
|
||||
if (getUserPreference('user_fractions')) {
|
||||
let return_string = ''
|
||||
let fraction = frac.cont((amount * factor), 9, true)
|
||||
|
||||
if (fraction[0] > 0) {
|
||||
return_string += fraction[0]
|
||||
}
|
||||
|
||||
if (fraction[1] > 0) {
|
||||
return_string += ` <sup>${(fraction[1])}</sup>⁄<sub>${(fraction[2])}</sub>`
|
||||
}
|
||||
|
||||
return return_string
|
||||
} else {
|
||||
return roundDecimals(amount * factor)
|
||||
}
|
||||
}
|
||||
|
||||
export function roundDecimals(num) {
|
||||
let decimals = ((getUserPreference('user_fractions')) ? getUserPreference('user_fractions') : 2);
|
||||
return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user