57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
{% extends "hobo/applications/home.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block appbar %}
|
|
<h2>{{ type.text }}</h2>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="application-elements">
|
|
{% for category in categories %}
|
|
<div>
|
|
<h4>{{ category.name }}</h4>
|
|
{% for element in category.elements %}
|
|
<label data-slugged-text="{{ element.text|slugify }}"><input type="checkbox" name="elements" value="{{ element.id }}">{{ element.text }}</label>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div style="text-align: right">
|
|
<label>{% trans "Filter:" %} <input type="search" id="element-filter"></label>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="submit-button">{% trans "Add" %}</button>
|
|
<a class="cancel" href="{% url 'application-manifest' app_slug=app.slug %}">{% trans "Cancel" %}</a>
|
|
</div>
|
|
<script>
|
|
$('#element-filter').on('change blur keyup', function() {
|
|
const val = $(this).val().toLowerCase();
|
|
// force dimensions so a reduced number of elements do not affect size
|
|
$('.application-elements').css('height', $('.application-elements').height());
|
|
$('.application-elements').css('width', $('.application-elements').width());
|
|
if (!val) {
|
|
$('.application-elements div').show();
|
|
$('.application-elements label').show();
|
|
} else {
|
|
$('.application-elements label').each(function(idx, elem) {
|
|
var container = $(elem).parent();
|
|
var slugged_text = $(elem).attr('data-slugged-text');
|
|
if (slugged_text.indexOf(val) > -1) {
|
|
$(elem).show();
|
|
container.show();
|
|
} else {
|
|
$(elem).hide();
|
|
if (!$('label:visible', container).length) {
|
|
container.hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</form>
|
|
{% endblock %}
|