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"> <div class="table-controls" style="text-align: center">
<button class="btn btn-success" id="new_empty" type="button" style="min-width: 20vw"><i <button class="btn btn-success" id="new_empty" type="button" style="min-width: 20vw"><i
class="fas fa-plus-circle"></i></button> 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" <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
data-placement="right" data-html="true" data-trigger="focus" data-placement="right" data-html="true" data-trigger="focus"
@@ -57,7 +59,7 @@
{% endif %} {% endif %}
</form> </form>
<script> <script type="application/javascript">
$(function () { $(function () {
$('[data-toggle="popover"]').popover() $('[data-toggle="popover"]').popover()
@@ -199,6 +201,20 @@
input.select(); 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) { document.onkeyup = function (e) {
if (e.shiftKey && e.ctrlKey && (e.which === 83 || e.keyCode === 83)) { if (e.shiftKey && e.ctrlKey && (e.which === 83 || e.keyCode === 83)) {
$('#id_form').submit() $('#id_form').submit()
@@ -208,7 +224,12 @@
}; };
document.getElementById("new_empty").addEventListener("click", addIngredientRow); document.getElementById("new_empty").addEventListener("click", addIngredientRow);
document.getElementById("new_header").addEventListener("click", addHeaderRow);
}); });
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script> </script>
{% endblock %} {% endblock %}

View File

@@ -109,7 +109,7 @@
<span class="badge badge-primary">{% trans 'Last cooked' %} {{ last_cooked|date }}</span> <span class="badge badge-primary">{% trans 'Last cooked' %} {{ last_cooked|date }}</span>
{% endif %} {% 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/>
<br/> <br/>
{% endif %} {% endif %}
@@ -137,6 +137,17 @@
<br/> <br/>
<table class="table table-sm"> <table class="table table-sm">
{% for i in ingredients %} {% for i in ingredients %}
{% if i.unit.name == 'Special:Header' %}
<tr>
<td style="padding-top: 8px!important; ">
<b>{{ i.note }}</b>
</td>
<td>
</td>
<td></td>
</tr>
{% 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">
@@ -156,7 +167,8 @@
</td> </td>
<td style="vertical-align: middle!important;"> <td style="vertical-align: middle!important;">
{% if i.ingredient.recipe %} {% if i.ingredient.recipe %}
<a href="{% url 'view_recipe' i.ingredient.recipe.pk %}" target="_blank"> <a href="{% url 'view_recipe' i.ingredient.recipe.pk %}"
target="_blank">
{% endif %} {% endif %}
{{ i.ingredient.name }} {{ i.ingredient.name }}
{% if i.ingredient.recipe %} {% if i.ingredient.recipe %}
@@ -179,6 +191,7 @@
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endif %}
{% endfor %} {% endfor %}
<!-- Bottom border --> <!-- Bottom border -->
<tr> <tr>