basic vue in recipe view
This commit is contained in:
parent
80423da16d
commit
1e2d7f77af
@ -32,16 +32,17 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
let modal = $('#id_modal_cook_log')
|
|
||||||
let rating = $('#id_log_rating')
|
|
||||||
|
|
||||||
function openCookLogModal(id) {
|
function openCookLogModal(id) {
|
||||||
|
let modal = $('#id_modal_cook_log')
|
||||||
modal.data('recipe_id', id)
|
modal.data('recipe_id', id)
|
||||||
modal.modal('show')
|
modal.modal('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
//TODO there is definitely a nicer way to do this than this ugly shit
|
//TODO there is definitely a nicer way to do this than this ugly shit
|
||||||
function logCook() {
|
function logCook() {
|
||||||
|
let modal = $('#id_modal_cook_log')
|
||||||
|
let rating = $('#id_log_rating')
|
||||||
let id = modal.data('recipe_id');
|
let id = modal.data('recipe_id');
|
||||||
|
|
||||||
let url = "{% url 'api_log_cooking' recipe_id=12345 %}".replace(/12345/, id);
|
let url = "{% url 'api_log_cooking' recipe_id=12345 %}".replace(/12345/, id);
|
||||||
@ -55,7 +56,7 @@
|
|||||||
if (val_rating !== '' && val_rating !== 0) {
|
if (val_rating !== '' && val_rating !== 0) {
|
||||||
if (val_servings !== '' && val_servings !== 0) {
|
if (val_servings !== '' && val_servings !== 0) {
|
||||||
url += '&'
|
url += '&'
|
||||||
}else {
|
} else {
|
||||||
url += '?'
|
url += '?'
|
||||||
}
|
}
|
||||||
url += 'r=' + val_rating
|
url += 'r=' + val_rating
|
||||||
@ -71,7 +72,7 @@
|
|||||||
modal.modal('hide')
|
modal.modal('hide')
|
||||||
}
|
}
|
||||||
|
|
||||||
rating.on("input", () => {
|
$('#id_log_rating').on("input", () => {
|
||||||
$('#id_rating_show').html(rating.val() + '/5')
|
$('#id_rating_show').html(rating.val() + '/5')
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8,8 +8,11 @@
|
|||||||
{% block title %}{{ recipe.name }}{% endblock %}
|
{% block title %}{{ recipe.name }}{% endblock %}
|
||||||
|
|
||||||
{% block extra_head %}
|
{% block extra_head %}
|
||||||
<link rel="stylesheet" href="{% static 'css/pretty-checkbox.min.css' %}">
|
|
||||||
|
|
||||||
|
{% include 'include/vue_base.html' %}
|
||||||
|
<script src="{% static 'js/moment-with-locales.min.js' %}"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{% static 'css/pretty-checkbox.min.css' %}">
|
||||||
<link rel="stylesheet" href="{% static 'custom/css/markdown_blockquote.css' %}">
|
<link rel="stylesheet" href="{% static 'custom/css/markdown_blockquote.css' %}">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -102,8 +105,7 @@
|
|||||||
<br/>
|
<br/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="row">
|
<div class="row" v-if="recipe">
|
||||||
{% if recipe.steps %}
|
|
||||||
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2">
|
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@ -114,8 +116,7 @@
|
|||||||
<div class="col col-md-3">
|
<div class="col col-md-3">
|
||||||
|
|
||||||
<div class="input-group d-print-none">
|
<div class="input-group d-print-none">
|
||||||
<input type="number" value="1" maxlength="3" class="form-control" id="in_factor"
|
<input type="number" value="1" maxlength="3" class="form-control" v-model="ingredient_factor"/>
|
||||||
onchange="reloadIngredients()"/>
|
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
<span class="input-group-text"><i class="fas fa-calculator"></i></span>
|
<span class="input-group-text"><i class="fas fa-calculator"></i></span>
|
||||||
</div>
|
</div>
|
||||||
@ -124,64 +125,65 @@
|
|||||||
</div>
|
</div>
|
||||||
<br/>
|
<br/>
|
||||||
<table class="table table-sm">
|
<table class="table table-sm">
|
||||||
{% for s in recipe.steps.all %}
|
<template v-for="s in recipe.steps">
|
||||||
{% for i in s.ingredients.all %}
|
<template v-for="i in s.ingredients">
|
||||||
{% if i.is_header %}
|
<template v-if="i.is_header">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding-top: 8px!important; ">
|
<td style="padding-top: 8px!important; ">
|
||||||
<b>{{ i.note }}</b>
|
<b>[[i.note]]</b>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
{% else %}
|
</template>
|
||||||
|
<template v-else>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="vertical-align: middle!important;">
|
<td style="vertical-align: middle!important;">
|
||||||
<div class="pretty p-default p-curve">
|
<div class="pretty p-default p-curve">
|
||||||
<input type="checkbox"/>
|
<input type="checkbox"/>
|
||||||
<div class="state p-success">
|
<div class="state p-success">
|
||||||
<label>
|
<label>
|
||||||
{% if i.no_amount %}
|
<template v-if="i.no_amount">
|
||||||
<span>⁣</span>
|
<span>⁣</span>
|
||||||
{% else %}
|
</template>
|
||||||
<span id="ing_{{ i.pk }}">{{ i.amount.normalize }}</span>
|
<template v-if="!i.no_amount && i.unit">
|
||||||
{{ i.unit }}
|
<span>[[roundDecimals(i.amount * ingredient_factor)]]</span>
|
||||||
{% endif %}
|
[[i.unit.name]]
|
||||||
|
</template>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td style="vertical-align: middle!important;">
|
<td style="vertical-align: middle!important;">
|
||||||
{% if i.food.recipe %}
|
<template v-if="i.food && i.food.recipe">
|
||||||
<a href="{% url 'view_recipe' i.food.recipe.pk %}"
|
<a v-bind:href='"{% url 'view_recipe' 12345 %}".replace(/12345/, i.food.recipe)'
|
||||||
target="_blank" rel="noopener noreferrer">
|
target="_blank" rel="noopener noreferrer">[[i.food.name]]</a>
|
||||||
{% endif %}
|
</template>
|
||||||
{{ i.food.name }}
|
<template v-else-if="i.food">
|
||||||
{% if i.food.recipe %}
|
[[i.food.name]]
|
||||||
</a>
|
</template>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td style="vertical-align: middle!important;">
|
<td style="vertical-align: middle!important;">
|
||||||
{% if i.note %}
|
<template v-if="i.note">
|
||||||
<a class="btn btn-light btn-sm d-print-none" tabindex="-1"
|
<a class="btn btn-light btn-sm d-print-none" tabindex="-1"
|
||||||
data-toggle="popover"
|
data-toggle="popover"
|
||||||
data-placement="right" data-html="true" data-trigger="focus"
|
data-placement="right" data-html="true" data-trigger="focus"
|
||||||
data-content="{{ i.note }}">
|
v-bind:data-content="i.note">
|
||||||
<i class="fas fa-info"></i>
|
<i class="fas fa-info"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-none d-print-block">
|
<div class="d-none d-print-block">
|
||||||
<i class="far fa-comment-alt"></i> {{ i.note }}
|
<i class="far fa-comment-alt"></i> [[i.note]]
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</template>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endif %}
|
</template>
|
||||||
{% endfor %}
|
</template>
|
||||||
{% endfor %}
|
</template>
|
||||||
|
|
||||||
<!-- Bottom border -->
|
<!-- Bottom border -->
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
@ -195,7 +197,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
{% if recipe.image %}
|
{% if recipe.image %}
|
||||||
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
|
<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.url }}" style="max-height: 30vh;"
|
<img class="img img-fluid rounded" src="{{ recipe.image.url }}" style="max-height: 30vh;"
|
||||||
@ -366,10 +368,44 @@
|
|||||||
|
|
||||||
{% include 'include/log_cooking.html' %}
|
{% include 'include/log_cooking.html' %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
let csrftoken = Cookies.get('csrftoken');
|
||||||
|
Vue.http.headers.common['X-CSRFToken'] = csrftoken;
|
||||||
|
|
||||||
reloadIngredients()
|
let app = new Vue({
|
||||||
|
delimiters: ['[[', ']]'],
|
||||||
|
el: '#id_base_container',
|
||||||
|
data: {
|
||||||
|
recipe: undefined,
|
||||||
|
ingredient_factor: 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted: function () {
|
||||||
|
this.loadRecipe()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadRecipe: function () {
|
||||||
|
this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
|
||||||
|
this.recipe = response.data;
|
||||||
|
this.loading = false
|
||||||
|
}).catch((err) => {
|
||||||
|
this.error = err.data
|
||||||
|
this.loading = false
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
roundDecimals: function (num) {
|
||||||
|
let decimals = {% if request.user.userpreference.ingredient_decimals %}
|
||||||
|
{{ request.user.userpreference.ingredient_decimals }} {% else %} 2 {% endif %}
|
||||||
|
return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bootstrap component functions
|
||||||
$(function () {
|
$(function () {
|
||||||
$('[data-toggle="popover"]').popover()
|
$('[data-toggle="popover"]').popover()
|
||||||
});
|
});
|
||||||
@ -378,33 +414,8 @@
|
|||||||
trigger: 'focus'
|
trigger: 'focus'
|
||||||
});
|
});
|
||||||
|
|
||||||
function roundDecimals(num) {
|
|
||||||
let decimals = {% if request.user.userpreference.ingredient_decimals %}
|
|
||||||
{{ request.user.userpreference.ingredient_decimals }} {% else %} 2 {% endif %}
|
|
||||||
return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function reloadIngredients() {
|
|
||||||
let factor = Number($('#in_factor').val());
|
|
||||||
let ingredients = {
|
|
||||||
{% for i in ingredients %}
|
|
||||||
{{ i.pk }}: {{ i.amount|unlocalize }},
|
|
||||||
{% endfor %}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let key in ingredients) {
|
|
||||||
let val = ''
|
|
||||||
if (Math.abs(ingredients[key] * factor - roundDecimals(ingredients[key] * factor)) > 0) {
|
|
||||||
val += '~'
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#ing_' + key).html(val + roundDecimals(ingredients[key] * factor))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
$('[data-toggle="tooltip"]').tooltip()
|
$('[data-toggle="tooltip"]').tooltip()
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
Loading…
Reference in New Issue
Block a user