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