187 lines
6.7 KiB
HTML
187 lines
6.7 KiB
HTML
{% extends "base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% load i18n %}
|
|
{% load custom_tags %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans 'Edit Recipe' %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<script src="{% static 'tabulator/tabulator.min.js' %}"></script>
|
|
<link rel="stylesheet" href="{% static 'tabulator/tabulator_bootstrap4.min.css' %}"/>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<h3>{% trans 'Edit Recipe' %}</h3>
|
|
|
|
<form action="." method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
{% for field in form %}
|
|
<div class="fieldWrapper">
|
|
{{ field|as_crispy_field }}
|
|
</div>
|
|
{% if field.name == 'name' %}
|
|
<label>{% trans 'Ingredients' %}</label>
|
|
<div id="ingredients-table"></div>
|
|
<br>
|
|
<div class="table-controls">
|
|
<button class="btn" id="new_empty" type="button"><i class="fas fa-plus-circle"></i></button>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<hr>
|
|
<button class="btn btn-success" type="submit"><i class="fas fa-save"></i> {% trans 'Save' %}</button>
|
|
<a href="{% url 'redirect_delete' form.instance|get_class|lower form.instance.pk %}"
|
|
class="btn btn-danger"><i class="fas fa-trash-alt"></i> {% trans 'Delete' %}</a>
|
|
{% if view_url %}
|
|
<a href="{{ view_url }}" class="btn btn-info"><i class="far fa-eye"></i> {% trans 'View' %}</a>
|
|
{% endif %}
|
|
{% if form.instance.storage %}
|
|
<a href="{% url 'delete_recipe_source' form.instance.pk %}" class="btn btn-warning"><i
|
|
class="fas fa-exclamation-triangle"></i> {% trans 'Delete original file' %}</a>
|
|
{% endif %}
|
|
</form>
|
|
|
|
<script>
|
|
|
|
let select2Editor = function (cell, onRendered, success, cancel, editorParams) {
|
|
|
|
let editor = document.createElement("select");
|
|
editor.setAttribute("class", "form-control");
|
|
editor.setAttribute("style", "height: 100%");
|
|
|
|
onRendered(function () {
|
|
let select_2 = $(editor);
|
|
|
|
select_2.select2({
|
|
tags: true,
|
|
ajax: {
|
|
url: '{% url 'dal_unit' %}',
|
|
dataType: 'json'
|
|
}
|
|
});
|
|
|
|
select_2.select2('open');
|
|
|
|
select_2.on('select2:select', function (e) {
|
|
success(e.params.data.text);
|
|
});
|
|
|
|
select_2.on('select2:close', function (e) {
|
|
if (e.target.textContent === "") {
|
|
cancel();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
//add editor to cell
|
|
return editor;
|
|
};
|
|
|
|
function selectText(node) {
|
|
|
|
if (document.body.createTextRange) {
|
|
const range = document.body.createTextRange();
|
|
range.moveToElementText(node);
|
|
range.select();
|
|
} else if (window.getSelection) {
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.selectNodeContents(node);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
} else {
|
|
console.warn("Could not select text in node: Unsupported browser.");
|
|
}
|
|
}
|
|
|
|
//converts multiselct in recipe edit to searchable multiselect
|
|
//shitty solution that needs to be redone at some point
|
|
$(document).ready(function () {
|
|
$('#id_keywords').select2();
|
|
|
|
let ingredients = {{ ingredients|safe }}
|
|
|
|
ingredients.forEach(function (cur, i) {
|
|
cur.delete = false
|
|
});
|
|
|
|
let data = ingredients;
|
|
|
|
let table = new Tabulator("#ingredients-table", {
|
|
index: "id",
|
|
layout: "fitColumns",
|
|
reactiveData: true,
|
|
data: data,
|
|
movableRows: true,
|
|
headerSort: false,
|
|
columns: [
|
|
{
|
|
title: "<i class='fas fa-sort'></i>",
|
|
rowHandle: true,
|
|
formatter: "handle",
|
|
headerSort: false,
|
|
frozen: true,
|
|
width: 36,
|
|
minWidth: 36
|
|
},
|
|
{
|
|
title: "{% trans 'Ingredient' %}",
|
|
field: "name",
|
|
validator: "required",
|
|
editor: "input"
|
|
},
|
|
{title: "{% trans 'Amount' %}", field: "amount", validator: "required", editor: "input"},
|
|
{title: "{% trans 'Unit' %}", field: "unit__name", validator: "required", editor: select2Editor},
|
|
{
|
|
formatter: function (cell, formatterParams) {
|
|
return "<span style='color:red'><i class=\"fas fa-trash-alt\"></i></span>"
|
|
},
|
|
align: "center",
|
|
title: "{% trans 'Delete' %}",
|
|
headerSort: false,
|
|
cellClick: function (e, cell) {
|
|
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}'))
|
|
cell.getRow().delete();
|
|
}
|
|
},
|
|
{title: "id", field: "id", visible: false}
|
|
],
|
|
dataEdited: function (data) {
|
|
$('#id_ingredients').val(JSON.stringify(data))
|
|
|
|
data.forEach(function (cur, i) {
|
|
if (cur.delete) {
|
|
table.deleteRow(cur.id);
|
|
}
|
|
})
|
|
},
|
|
cellClick: function (e, cell) {
|
|
if (cell._cell.column.definition.editor === "input") {
|
|
input = cell.getElement().childNodes[0];
|
|
input.focus();
|
|
input.select();
|
|
}
|
|
},
|
|
});
|
|
|
|
// load initial value
|
|
$('#id_ingredients').val(JSON.stringify(data))
|
|
|
|
document.getElementById("new_empty").addEventListener("click", function () {
|
|
data.push({
|
|
name: "{% trans 'Ingredient' %}",
|
|
amount: "100",
|
|
unit__name: "g",
|
|
id: Math.floor(Math.random() * 10000000),
|
|
delete: false,
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |