cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic vue in recipe view

Browse Source
This commit is contained in:
vabene1111 2020-07-02 11:20:11 +02:00
parent 80423da16d
commit 1e2d7f77af
2 changed files with 133 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
cookbook/templates/include/log_cooking.html
View File

@ -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')
}); });

127
cookbook/templates/recipe_view.html
View File

@ -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>&#x2063;</span> <span>&#x2063;</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 %}