add special type of ingredients to allow headers

This commit is contained in:
vabene1111
2020-05-02 23:46:57 +02:00
parent 4aa2983681
commit 6a7b02b700
2 changed files with 76 additions and 42 deletions

View File

@@ -32,6 +32,8 @@
<div class="table-controls" style="text-align: center">
<button class="btn btn-success" id="new_empty" type="button" style="min-width: 20vw"><i
class="fas fa-plus-circle"></i></button>
<button class="btn btn-warning" id="new_header" type="button" data-toggle="tooltip"
data-placement="top" title="{% trans 'Insert a header between the ingredients.' %}"><i class="fas fa-heading"></i></button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
data-placement="right" data-html="true" data-trigger="focus"
@@ -57,7 +59,7 @@
{% endif %}
</form>
<script>
<script type="application/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
@@ -199,6 +201,20 @@
input.select();
}
function addHeaderRow(type) {
data.push({
ingredient__name: '{% trans 'Header' %}',
amount: "0",
unit__name: "Special:Header",
note: "{% trans 'write header here' %}",
id: Math.floor(Math.random() * 10000000),
delete: false,
});
input = table.rowManager.rows[((table.rowManager.rows).length) - 1].cells[4].getElement()
input.focus();
input.select();
}
document.onkeyup = function (e) {
if (e.shiftKey && e.ctrlKey && (e.which === 83 || e.keyCode === 83)) {
$('#id_form').submit()
@@ -208,7 +224,12 @@
};
document.getElementById("new_empty").addEventListener("click", addIngredientRow);
document.getElementById("new_header").addEventListener("click", addHeaderRow);
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}

View File

@@ -109,7 +109,7 @@
<span class="badge badge-primary">{% trans 'Last cooked' %} {{ last_cooked|date }}</span>
{% endif %}
{% if recipe.waiting_time and recipe.waiting_time != 0 or recipe.working_time and recipe.working_time != 0 or last_cooked%}
{% if recipe.waiting_time and recipe.waiting_time != 0 or recipe.working_time and recipe.working_time != 0 or last_cooked %}
<br/>
<br/>
{% endif %}
@@ -137,48 +137,61 @@
<br/>
<table class="table table-sm">
{% for i in ingredients %}
<tr>
<td style="vertical-align: middle!important;">
<div class="pretty p-default p-curve">
<input type="checkbox"/>
<div class="state p-success">
<label>
{% if i.amount != 0 %}
<span id="ing_{{ i.pk }}">{{ i.amount.normalize }}</span>
{{ i.unit }}
{% else %}
<span>&#x2063;</span>
{% endif %}
</label>
</div>
</div>
{% if i.unit.name == 'Special:Header' %}
<tr>
<td style="padding-top: 8px!important; ">
<b>{{ i.note }}</b>
</td>
<td>
</td>
<td style="vertical-align: middle!important;">
{% if i.ingredient.recipe %}
<a href="{% url 'view_recipe' i.ingredient.recipe.pk %}" target="_blank">
{% endif %}
{{ i.ingredient.name }}
{% if i.ingredient.recipe %}
</a>
{% endif %}
</td>
<td style="vertical-align: middle!important;">
{% if i.note %}
<button class="btn btn-light btn-sm d-print-none" type="button"
data-container="body"
data-toggle="popover"
data-placement="right" data-html="true" data-trigger="focus"
data-content="{{ i.note }}">
<i class="fas fa-info"></i>
</button>
<div class="d-none d-print-block">
<i class="far fa-comment-alt"></i> {{ i.note }}
</td>
<td></td>
</tr>
{% else %}
<tr>
<td style="vertical-align: middle!important;">
<div class="pretty p-default p-curve">
<input type="checkbox"/>
<div class="state p-success">
<label>
{% if i.amount != 0 %}
<span id="ing_{{ i.pk }}">{{ i.amount.normalize }}</span>
{{ i.unit }}
{% else %}
<span>&#x2063;</span>
{% endif %}
</label>
</div>
</div>
{% endif %}
</td>
</tr>
</td>
<td style="vertical-align: middle!important;">
{% if i.ingredient.recipe %}
<a href="{% url 'view_recipe' i.ingredient.recipe.pk %}"
target="_blank">
{% endif %}
{{ i.ingredient.name }}
{% if i.ingredient.recipe %}
</a>
{% endif %}
</td>
<td style="vertical-align: middle!important;">
{% if i.note %}
<button class="btn btn-light btn-sm d-print-none" type="button"
data-container="body"
data-toggle="popover"
data-placement="right" data-html="true" data-trigger="focus"
data-content="{{ i.note }}">
<i class="fas fa-info"></i>
</button>
<div class="d-none d-print-block">
<i class="far fa-comment-alt"></i> {{ i.note }}
</div>
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
<!-- Bottom border -->
<tr>